JS-pink 第一天

1.JavaScript介绍

1.1JavaScript是什么

1. javaScript：是一种运行在客户端（浏览器)的编程语言，实现人机交互效果。

2. 作用

1. 网页特效(监听用户的一些行为让网页做出对应的反馈)

2. 表单验证（针对表单数据的合法性进行判断）

3. 数据交互（获取后台的数据，渲染到前端）

4. 服务端编程

3. JavaScript的组成

1. ECMAScript:规定JS基础语法核心知识。如：变量，分支语句，循环语句，对象等

2. Web APIs：由下面组成

DOM操作文档(对页面元素进行移动，大小，添加删除等操作)

BOM操作浏览器(页面弹窗，检测窗口宽度，存储数据到浏览器)

1.2JavaScript书写位置

1. 内部JS

直接写在html文件内，用script标签包住(写在</body>上面)

注意事项：

将<script>放在HTML文件底部，是因为浏览器会按照代码在文件中的顺序加载HTML，防止由于HTML尚未加载而失效

2. 外部JS

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中

3. 内联JS

代码写在标签内部

4. 单行注释：

符号：//

快捷键：ctrl+/

5. 块注释：

符号：/* */

快捷键：shift+alt+a

6. 结束符（可不加；）：

符号：使用英文；代表语句结束

1.3JavaScript输入输出语法

1. 输出语法：

语法1：document.write('输出内容')

作用：向body内输出内容

注意：如果输出的内容是标签，也会被解析成网页元素

语法2：alert('输出内容')

作用：页面弹出警告对话框

语法3：console.log('控制台打印')

作用：控制台输出语法，程序员调试使用

2. 输入语法：

语法：prompt('输入内容')

3. JavaScript代码执行顺序：

按照HTML文档流顺序执行JavaScript代码，alert('')和prompt('')会跳过页面渲染鲜先被执行

1.4字面量

在计算机科学中，字面量(literal)是在计算机中描述事/物

如：18-数字字面量，[ ]-对象字面量,

2.变量

2.1变量是什么

1.变量：计算机中用来存放数据的容器

2.2变量基本使用

1. 声明变量：

语法： let 变量名(声明关键字，变量名)

注意：let不允许多次声明一个变量

2.变量赋值：

也可在声明过程中直接完成赋值操作(变量初始化)

3.更新变量

4.声明多个变量：

不推荐，建议一行一个

5.let与var的区别：

a.var可以先使用再声明

b.var声明过的变量可以重复声明

2.3变量的本质

1. 变量的本质：

内存：计算机中存储数据的地方，相当于一个空间

变量本质：程序在内存中申请的一块用来存放数据的小空间

2.4变量命名与规范

1. 规则

a.不能用关键字

b.只有下划线，字母，数字，$符号且数字不能开头

c.严格遵守大小写

2. 规范

a.起名有意义

b.小驼峰命名法,第一个单词首字母小写，后面每个单词首字母大写

2.5变量拓展-数组

1. 声明语法：

let 数组名 = [ 数据1，.......数据n ]

2. 长度：数组长度 (数组名.length)

3. 常量

3.1常量的基本使用

1. 概念：使用const声明的变量称为“常量”

2. 注意：常量不允许重新赋值，声明的时候必须赋值(初始化)

4. 数据类型

4.1基本数据类型

1. number 数字型：整数，小数，正负数。

NaN：代表计算错误，它是一个不正确的或未定义的数学操作所得到的结果

特点：具有粘性，任何对NaN的操作都会返回NaN

2. string字符串型：通过双引号(“”)单引号(‘ ’推荐使用)或反引号(`)包裹的数据都叫字符串

字符串拼接：‘+’数字相加，字符相连(只要有字符串就相连)

模板字符串:用于字符串和变量拼接

语法：外面：` `（反引号）里面：${ 变量名}

3. boolean布尔型：只有两个值true和false

4. undefined未定义型：只有一个值undefined，只声明变量，但未赋值就为未定义类型

5. null空类型：与undefined区别为null赋值了但为空

使用场景：变量里面存放对象，但还未准备好对象时用null

6. 检测数据类型：typeof x

4.2 引用数据类型

object对象

5. 类型转换

类型转换原因：使用表单，prompt获取过来的数据默认是字符串类型的。

5.1隐式转换：

某些运算符被执行时，系统内部自动将数据类型转换

规则：

1. +两边只要有一个是字符串，都会把另一个转换为字符串

2. -，*，/都会把类型转换为数字类型

小技巧：

a.+号作为正号解析可以转化为数字型

b.任何数据和字符串相加结果都是字符串

5.2显示转化：

转换为数字型：

a.Number(数据)：内容中有非数字，转换失败结果为NaN

b.parseInt(数据)：只保留整数

c.parseFloat(数据)：可以保留小数

注意:parseInt和parseFloat都是从前向后取数，若为前面非数字型则直接为NaN