JS基础 - hiluna

[toc]

浏览器解析型语言，一种弱类型语言

2.组成

核心语法（ECMAScript 5）
BOM（浏览器对象模型），提供操作浏览器窗口的方法
DOM（文档对象模型），提供操作HTML文档的方法

3.JS使用

元素绑定事件
1. 事件：用户的行为（单击，双击等）或元素（焦点状态，编辑状态等）的状态。
2. 事件处理：元素监听到事件发生后作出的响应
3. 事件名称：
  1. onclick（单击事件） ondblclick（双击事件）
  2. 语法：将事件名称以标签属性的形式绑定到元素上
    1. <h1 onclick="JS代码"></h1>
内嵌方式
1. 使用<script type="text/javascript">书写js代码</script>
2. 标签可以书写在任意位置，书写任意多次。浏览器在解析到script标签时会直接执行内部脚本代码
外链方式
1. 创建外部js文件（.js）文件，在html文件中使用<script src=""></script>引入，注意<scrpit>既可以实现内嵌，也可以实现外链，但是二选一
语法规范
1. JS代码区分大小写
2. JS语句可以使用；作为结束的标准，也可以省略
输入语句
1. console.log() 控制台输出
2. alert("") 网页警告框
3. prompt("") 带输入框的弹框
4. document.write("") 在网页输出，动态向body标签写入内容，可以识别标签语法
  1. 代码的书写位置即为网页中的添加位置
  2. 使用元素绑定事件的方式去动态添加，会造成页面重写（事件发生之前，body可能就加载完毕了）

4.JS基础语法

1.变量与常量

变量：用于存储在程序运行时候随时可以修改的数据
- 使用var关键字声明变量
- 访问未声明未赋值的变量会报错
- 声明变量可以省略关键字但是会变为全局变量
- 如果在访问变量之后声明变量，不会报错（变量提升，JS执行的时候会将所有的变量声明语句提前）
常量：一经定义就不能修改的数据
- 使用const关键字声明常量，通常，常量名字采用全大写字母表示
- 命名规范：
  - 自定义变量名、常量名、函数名或对象名时，可以有数字、字母下划线和$组成，不允许以数字开头，不能与关键字冲突。小驼峰

<script type="text/javascript">
    //声明变量
    var a = 10;
    var b;
    b = 100;
    var a1 = 20,a2 = 30,a3 = 50;
    var b1,b2,b3
    // 变量名声明时候可以省略关键字var，一旦省略关键字为全局
    age = 20;
    // 变量声明未赋值，console.log(username) = underfined（默认）
    var username;
    //常量
    const PI = 3.14;
</script>

2.数据类型

简单数据类型（值类型）
1. number
  1. 整数：可以使用十进制，八进制或十六进制
  2. 小数
2. string
  1. 字符串使用引号表示，会自动的为每一位字符分配下标，每位字符都有自身的Unicode编码
3. boolean:只有true/false
4. undefined
  1. 声明未赋值时默认为undefined
5. null
  1. 空值，解除对象引用
引用类型
1. 主要指对象
检测数据类型
1. typeof num;或者typeof (num);

    var a = 100;
    // 八进制
    var b = 053;
    // 十六进制
    var c = 0x53;
    var d = 1.5;
    var f = 1.5e3;

    var s1 = "你hello";
    var s2 = "100";
    // 获取指定下标对应字符的Unicode编码
    var code = s1.charCodeAt(0);

3.数据类型转换

强制类型转换
1. toString() 转换为字符串，返回转换后的结果
2. 转换number
  1. Number(n) 将变量n转换为number值，返回转换后的结果，如果变量中存在非number字符，一律转换失败，返回NaN（Not a number）
  2. boolean也可以转为number True->1 False->2
  3. parseInt(n)/parseFloat(n) 解析Int，，Float部分。过程：如果参数为非字符串，将自动转换成字符串按位解析，一旦解析失败，停止向后解析，返回结果。
  4. 转换布尔值
    1. Boolean() 将变量转换为布尔值：除”零”值以外，所有值都为真，
    2. 0/0.0/""/undefined/NaN/null 都为0值->false
自动类型转换
1. 字符串与其他数据进行"+"运算，一律为字符串拼接

<script type="text/javascript">
    var a = 100;
    var b = true;
    var s1 = a.toString();
    var s2 = b.toString();
    var n1 = "12a";
    var n2 = "123";
    console.log(Number(n1),Number(n2));
    console.log(Number(true));
    console.log(Boolean(1));
    console.log(Boolean(undefined));//False
    console.log(Boolean(NaN));//False
    console.log(Boolean(null));//False
    console.log(typeof (s1),typeof (s2))
    // 自动类型转换
    var r1 = 10 + 5;
    var r2 = "10"+"6";//106
    var r3 = 5 + "20";//520
    var r4 = true + "20";//true20
    var r5 = null + "20";//null20
    var r6 = undefined + "20";//underfined20
    var r7 = 10 + 5 +"hello";//15hello
    var r8 = "10" - 5;//10-5
    var r9 = "10a" - 55;//Number("10a") - 55->NaN
    var r10 = "10" - true;//9
    var r11 = "10" + false;//10false
    var r12 = true + true;//2

    // undefined + 10
    // null + 10
    // true + 10
    // 其他情况：
    //     string与其他类型做非加法运算
    //     number值与其他类型做数学运算
    //     布尔值参与运算，一律转number
</script>

4.运算符

赋值运算符 =
数学运算符
1. + - * / %（取余）
复合运算符
1. += -= *= /= %=
自增或自减运算符 ++ —
1. 在变量自身值的基础上加1或者减一
2. 单独与变量集合，做前缀或后缀没有区别
3. 与其他运算符结合使用时，前缀和后缀有区分，前缀就先++/–，后缀就后++/–
比较运算符/关系运算符
1. > >= < <= == ===(全等) !=
2. 关系运算符的结果一定是布尔值
3. 运算规则：
  1. 字符串与字符串之间的比较（逐位比较字符的Unicode编码）
  2. 其他情况下一律转换number比较！如果转换失败，变为NaN参与运算关系，结果一律为False
4. 相等于全等
  1. 相等：包含自动类型转换，只要转换后的值相等，就成立
  2. 全等：严格比较，不会转换类型。要求类型一直，并且值相等，才成立
逻辑
1. 逻辑与 &&
  1. 全1则1，只有表达式全为true，最终结果才为true
2. 逻辑或 ||，有一个表达式成立，就为true
3. 逻辑非！
三目运算符
1. 语法：表达式1 ? 表达式2 : 表达式3
2. 表达式1如果成立->运行表达式2，否则->运行表达式3

5.流程控制

控制代码的执行顺序和执行次数
分类
1. 顺序结构：上到下
2. 选择结构：根据条件是否成立，选择执行
3. 循环结构：根据条件是否成立，选择是否重复
选择结构
1. if语句
  1. 基本结构
  2. if-else
  3. if-else if
2. switch语句
  1. 用于值的全等匹配
  2. 特殊
    1. break关键字可以省略，一旦省略，会从当前匹配到的case开始向后执行所有代码块语句。直到碰到break关键字结束匹配或者执行至结束
    2. 多个case共用代码段
循环结构
1. while循环
2. do-while循环
3. for循环:for(定义变量;循环条件;更新变量){循环体}

switch(变量){
    case 值1:
        变量与值1匹配全等之后执行的代码段
        break;//结束匹配
    case 值2:
        匹配全等执行
        break;
    ...

    default:
        所有值都不匹配时执行的默认操作。
}

//多个case共用代码段
case:
case:
case:
    任一case匹配全等后执行的操作
    break;

6.函数

函数用于保存一段待执行的代码，或者封装某个功能。

语法：

函数声明
函数调用：函数名(参数列表)
作用域
1. 全局变量
  1. 在程序任意位置都能访问
  2. 函数外部定义的变量都是全局变量
  3. 函数内部省略var关键字创建变量，一律为全局变量
2. 局部变量
  1. 在函数体中使用var关键字声明的变量一律为局部变量，只能在当前函数体中使用，外界无法访问

7.JS中对象分类

8.ES原生对象–Array

function 函数名(参数列表){
    函数体
    return;
}

2.组成

3.JS使用

4.JS基础语法

1.变量与常量

2.数据类型

3.数据类型转换

4.运算符

5.流程控制

6.函数

7.JS中对象分类

8.ES原生对象–Array

发送评论 编辑评论

发送评论编辑评论