JavaScript介绍
一、JavaScript 概述
1. 介绍 :
简称JS,是浏览器解释型语言,直接交给浏览器,由浏览器的 解释引擎运行(脚本语言)
2. 作用 :
实现页面动态效果和用户交互.
3. 组成
1. 核心语法 ECMAScript 2. 内置对象 (数组，日期，正则，字符串) 3. 外置对象 (BOM DOM) DOM (重点 Document Object Model) BOM (Browser Object Model) 3. 自定义对象
4. JS语法规范
1. JS严格区分大小写 2. JS可以使用英文;作为语句结束的标志 3. JS注释 // 单行注释 /* 多行注释 */
二、JS的使用方式
在HTML文档中引入JS代码,有三种方式
1. 通过元素绑定事件的方式引入JS代码
事件 : 用户行为触发的操作 事件处理：元素监听用户的行为并且做出响应 语法 : <元素 事件函数名="JS代码语句"> 事件函数 : 鼠标单击事件 onclick JS 代码 : 弹框显示信息 alert('文本'); 控制台输出信息 console.log('文本信息');
2. 通过标签书写JS代码,标签内容就是JS
代码.可以书写在任意位置,书写任意多次. 注意 : 浏览器遵循从上到下执行代码,书写位置可能会影响效果 JS代码语句 : 1. prompt(''); 带有输入框的弹框,可用来接收用户输入 2. document.write(''); 在网页中写入内容 使用 : 1. 普通的书写方式,按照从上到下的执行顺序,依次在网页的相应位置插入内容,可以识别标签 2. 如果以元素绑定事件的方式,在页面中写入内容,相当于重写页面
3. 引入外部的JS文件
1. 创建外部的.js文件 2. 在HTML文档中使用<script src="url"></script>引入 3. 如果<script></script>做外部文件的引入操作,标签内部就不能再写JS代码，二选一
三、输出语句
alter('') 普通警告框 prompt('') 带有输入框的弹框,可用来接收用户输入 console.log('') 控制台输出 document.write('') * 代码书写位置即为写入位置，最终输出到网页中能够识别标签语法 * 如果使用绑定事件的方式动态写入，会造成页面重写
四、JS 的变量与常量
1. 变量
1. 在程序运行过程中可以随时修改的数据 2. 语法 : var 变量名; //使用关键字var声明变量 变量 = 值; //为变量赋值 3. 使用 : 1. var 关键字可以省略,但是一般不建议省略,关系到变量的的作用域 2. 变量如果只使用var关键字声明,不赋值,默认为undefined 3. 如果变量未使用var关键字声明,也不赋值,会报错 4. 命名规范 1. 变量名,常量名,函数名由数字,字母,下划线,$组成,不能以数字开头，尽量见名知意,禁止与JS的保留字和关键字冲突 et : var function while for in each switch case break default continue class name new Number String Array do if else... 2. 变量名由多个单词组成,采用小驼峰标识 et : userName
2. 常量
1. 常量一经定义就不能更改,强制修改会报错 2. 语法 : const 常量名 = 值; 常量在定义时,必须声明并赋值 3. 使用 : 常量名采用全大写字母,与变量名区分
3. 小数位的操作
小数在计算机中存储或是计算都存在误差,不准确. 可以设置小数的显示位数 方法 : toFixed(n) n表示保留的小数位数 et : var n = 62.800004; n = n.toFixed(2);
五、数据类型
1. Number 数字类型
整数和小数统称为Number类型. 1. 整数 1. 十进制表示方法 var n = 100; 2. 八进制表示整数 八进制以 0 为 前缀 ,表示逢8进1 et : var num = 015;// 5*8(0) + 1 * 8(1) 十进制转八进制,需要先将十进制转二进制,从右向左 每三位为一组,再将二进制的结果计算出来 111 : 十进制的7 八进制 : 以八位存数据 3. 十六进制 十六进制以 0x 为前缀 et : var num2 = 0x35; // 5*16(0)+3*16(1) = 53 十进制转十六进制,先将十进制转换为二进制,从右向左 每四位为一组,计算结果 1111 : 15 -> f 4. 如果使用console.log输出整数值,不管是什么进制 表示,都转换十进制输出 2. 小数 1. 直接以小数点表示小数 var f1 = 10.5; 2. 科学计数法 var f2 = 1.5e3; e : 表示10为底 3 : 表示10的次方数 1.5 * 10 (3) = 1500;
2. String 字符串类型
1. 所有使用''或者""引起来的内容,都是字符串 2. 字符串中的所有字符都是以Unicode码存储的, 字母和数字的Unicode码值与ASC码值一致, 中文字符的Unicode编码,在计算机中以16进制存储 3. 查看指定字符的Unicode码值 1. 方法 : charCodeAt(index) index 表示指定字符的下标,字符串中默认从0开始 为每一位字符分配下标 et : var str = "张三丰"; str.charCodeAt(0); 2. 中文字符在计算机中以16进制存储,查看中文的十六进制 使用 : toString(16); //将Unicode码转换为16进制表示 3. 已知中文的十六进制字符串,想转换为中文显示, 添加\u转义即可 "\u5f20" 4. 中文的范围: "\u4e00" ~ "\u9fa5" "\u4e00"为中文的'一' 5. 转义字符 \u \n 换行 \t 制表符 \' 表示' \\ 表示\
3. Boolean 布尔类型
只有真和假两个值 true/false true = 1 false = 0;
4. undefined
当变量声明未定义时,默认值为undefined 访问对象不存在的属性时, 默认值为undefined
5. null
null表示对象类型
6. 检测数据类型
使用 typeof et : typeof num; typeof (num + str);
7. 引用数据类型
对象 Number String
六、数据类型转换
1. 自动类型转换(隐式)
1. 不同类型的数据在做运算时,会自动转换 2. 分类 : 1. 字符串与其他数据类型做 + 法运算 + 一旦与字符串结合使用,变成字符串的拼接运算,最终结果都为字符串类型 et: var r1 = '小泽' + 'Maria'; var r2 = '100' + 10; //10010 var r3 = 10 + 5 + '20'; //1520 var r4 = 5 + '20' + 10; //52010 var r5 = 'hello' + true; 1. number + boolean 会将boolean类型自动转换为number: true = 1 false = 0 转换之后参与数学运算,最终结果为number 3. 字符串参与除+以外的其他数学运算，一律自动转换为number参与数学运算，转换失败则变成NaN参与运算，结果为NaN et : var res3 = 100 + undefined; //NaN (Not a Number) var res4 = 100 + null; // 100 var res5 = true + undefined; //NaN var res6 = false + null; //0 4. null可以转换number:null = 0;
2. 强制类型转换
1. 将其他数据类型转为字符串类型 方法 : toString(); 返回字符串结果 2. 将字符串或布尔值转换为number类型 方法 : Number(变量) 整体转换，失败返回NaN(not a number) 返回转换后的结果 : 1. 数字字符串"100",可以直接转换为number 100 2. 非数字字符串 "100a" "张3",转换失败,返回NaN 3. 布尔类型转number : true = 1 false = 0 3. 解析字符串中的数字 方法 : parseInt(变量) : 解析字符串中的整数部分 parseFloat(变量) : 解析字符串中的number部分 解析过程: 自动将参数转换为字符串； 从第一个字符开始向后解析,对每一位进行转number的操作，碰到非数字,停止解析,返回结果 parseFloat(变量)中将第一个小数点认为是合法字符，后续如果出现多个小数点则是非法字符 et: console.log(parseInt(35.56)) console.log(parseInt('35.56')) console.log(parseInt('a35.56')) console.log(parseInt('35.56a')) console.log(parseInt('1.5e3')) console.log(parseInt(true)) console.log(parseFloat('35.5.5')) console.log(parseFloat('1.5e3')) console.log(parseFloat('2/3')) //35 35 NaN 35 1 NaN 35.5 1500 2 4. Boolean(n) 1. '零'值以外都为真 1. '零'值的情况：0 0.0 '' undefined null NaN
七、运算符
1. 赋值运算符
=
2. 算数运算符
+ - * / % eg: 'a' * 10 // Number('a') NaN '100' - 'true' // NaN 只要有NaN参与数学运算，结果永远是NaN
3. 复合运算符
+= -= *= /= %=
4. 自增和自减
++ -- 1. 变量在自身的基础上加1或减1 2. 单独与变量结合，做前缀或做后缀没有区别；包含自动类型的转换，转换number后进行+1或-1 3. 与其他运算符结合使用，区分前缀和后缀，前缀就先自增，后缀后自增 1 var m = 5; 2 var res1 = m++; 3 console.log(res1,m); //5 6 4 var res2 = ++m; 5 console.log(res2,m);//7 7
5. 比较运算符
> >= < <= == != ===(全等) !==(不全等) 1. 比较运算的结果永远是布尔值 2. 以下情况 1. number与number比较，直接比大小 2. string与number，boolean与number，string与boolean，boolean与boolean，一律将操作数转换number比大小，如果转换失败，NaN参与比较运算，结果永远为false 示例： var r2 = '10' > 5; //true var r3 = '10a' > 5; //Number('10a') = NaN --> NaN>5 --> false var r4 = '10' > true; //true var r5 = '10' > 'true'; //false var r7 = 100 > undefined; //100 > NaN var r8 = 100 > null; //100 > 0 3. string与string比较，同为字符串，不会自动转换类型，逐位比较字符的Unicode编码，只要某一位不相等，就出结果 示例： var s1 = '10' > '5'; //按位比 '1' > '5' false 3. 相等与全等( == 与 === ) 1. 相等：包含自动类型转换，只要值相等就成立 2. 全等：不会转换类型，要求类型一致值相等才成立 3. 示例： 1. '10' == 10; //true 2. '10' === 10; //false
6. 逻辑运算符
1. 逻辑与 && 1. 规则：全1则1 2. 逻辑或 || 1. 规则：有1则1 3. 逻辑非 ! 1. 规则：对布尔结果取反 2. 例： var a = 10; var r = !a; // false 4. 练习： 1. 定义变量，给出闰年判断的条件：能被4整除同时不能被100整除或能被400整除 5. 注意： 1. 逻辑与 优先级高于 逻辑或
7. 位运算符
将操作数转换成二进制，按位操作 1. 位与 & 1. 规则：全1则1 2. 例： 3 & 5 --> 011 & 101 --> 001 --> 1 3. 使用：任意整数与1做位与运算，结果为1表示奇数，结果为0表示偶数 2. 位或 | 3. 异或 ^ 1. 规则：相同为0，不同为1 2. 使用：变量绑定的值互换 var a = 3,b = 5; a = a ^ b; b = a ^ b; a = a ^ b;
8. 三目（三元）运算符
表达式1 ? 表达式2 : 表达式3 运算： 判断表达式1是否成立 如果成立，则执行或返回表达式2 不成立，执行 示例： var score = prompt('请输入成绩'); // console.log(score,typeof score); var score = 50; var res = score >= 90? '优秀':score >= 80? '还不错':score >= 60? '及格':'不及格'; console.log(res)