web学习笔记（九）

目录

1.初识JS(JavaScript)

1.1什么是JavaScript？

1.2HTML5 CSS3? javaScript三者的关系

1.3? ?JAVAScript的作用

1.4JAVAScript的组成部分

1.5JS注释

1.6补充知识

2.JS的引入方法

2.1行内式

2.2嵌入式（内嵌式）

2.3外链式

3.输入和输出

3.1输入

3.2输出?

3.3语法规定

3.4补充知识点

---

1.初识JS(JavaScript)

1.1什么是JavaScript？

JS是web开发领域功能强大的编程语言（脚本语言），javaScript不需要配置环境，浏览器直接可以运行。

1.2HTML5 CSS3? javaScript三者的关系

• A:? HTML结构? 用语义化的角度来描述页面。
• B：CSS样式? 用审美的角度来美化页面。
• C： js交互（行为） 从交互的角度来提升用户体验。

1.3? ?JAVAScript的作用

• 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）
• 网页特效
• 服务端开发(Node.js)
• 桌面程序(Electron)[??lektrɑ?n]
• App(Cordova)[k?r?do?v?]
• 控制硬件-物联网(Ruff)[r?f]
• 游戏开发(cocos2d-js)

1.4JAVAScript的组成部分

1. ? JAVAScript核心语法（ ECMAScript）
2. ??DOM(Document Object Model) 文档对象模型
3. ? BOM（Browser Object Model）浏览器对象模型

1.5JS注释

A:单行注释

格式：// 我是一行文字，不想被 JS引擎 执行，所以 注释起来

// 用来注释单行文字（ 快捷键 ctrl + / ）

B:多行注释

格式：/* 获取用户年龄和姓名 并通过提示框显示出来 */

/* */ 用来注释多行文字（ 默认快捷键 alt + shift + A ）

1.6补充知识

? ?（1）浏览器分为两部分：渲染引擎和js引擎

? ? ? ? ? ?A.? 渲染引擎：解析HTML和CSS,俗称内核

? ? ? ? ? ?B.? js引擎：JS解释器（chrome浏览器内置V8引擎）

? ?（2）?给超链接跳转地址设置为javascript:; 是为了阻止超链接的默认跳转地址，这样点击超链接页面不会重复刷新，增强了代码规范性。

2.JS的引入方法

2.1行内式

? ?在标签内部进行编写JS代码(较少使用)

格式：

<button onclick="alert('警告')">单击</button>

2.2嵌入式（内嵌式）

可以在页面的任意位置插入，语句结束要记得加分号，一般习惯写在</body>之前。

格式：

   <script>
            alert('很好');
            // 语句用分号结束
        </script>

2.3外链式

需要另建.js文件，然后将文件引入 引入位置无所谓 在哪儿都行。

引入格式：

<script src="../JS/01.js"></script>

3.输入和输出

3.1输入

格式：prompt('请输入','某某') ;??

• 第一个参数表示提示性文字
• 第二个参数表示默认输入的内容，可以省略不写
• 只编写输入语句无法在页面查看运行效果，通常搭配定义变量语句和输出语句一块使用

 var bianliang= prompt('请输入','某某') ; 
            console.log(bianliang); 

3.2输出?

1. ? ?alert();? ? ? 弹出一个框，是一个函数，但这个函数没有返回值。
2. ??console.log();? ?在控制台输出? ? 用的比较多，多个控制台输出语句之间会用一条线分割起来
3. ? ? document.writr()? ? 表示 在文档输出，输出语句在页面中直接显示。

3.3语法规定

1. ?区分大小写，大写的话会报错。? ? ? ? ? ? ?
2. ?每一条语句结束后要加结束符；
3. ?对空格 缩进 换行不敏感
4. ? 符号是英文半角

3.4补充知识点

• F12可以直接打开控制台

• ""和''表示原样输出引号内的内容，需要输出变量的话就不加引号

• js在执行时当发现一个错误代码时将自动终止执行后续代码

• 在字符串中不能直接打回车换行，否则会报错。

• ?alert("");和 console.log('');可以添加\n来换行 ? 或者\r\n

• ?document.write("");用<br>换行，这个输出语句还可以解析html标签? ?\ 用来转义特殊字符

• ?ES6新增 ` ?` 反引号,? 反引号里面的换行不会报错

• 可以给字符串前面加上%c，这样就可以给字符串定义css样式了。