ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
[toc] # 每日英语 1. `unexpected` 未符合期望(关键字没写对的时候) 2. `document` 文档(有时候缩写为doc/docs) 3. `print` 打印(python print "hello world" ) 4. `identifier` 标识符(解释器碰见不认识的代码时, 报错) 5. `model` 模型(DOM) 6. `current` 当前(currentStyle 当前样式) 7. `computed` 计算(getComputedStyle 计算当前样式) 8. `bug` 错误(本意臭虫) 9. `debug` 排错/调试(高级编辑器,ide必备功能) # 重点再讲解 ## 什么是解释性语言, 什么是编译性语言? * 高级语言: 人类可以看懂的语言( 人类可以看懂, 电脑看不懂 ) * 机器语言: 电脑可以看懂的语言( 人类看不懂, 电脑可以看懂 ) * 解释性语言的翻译时机: 读取一句, 解释一句, 运行一句 > JIT(just in time):即时性的 * 解释器(翻译角色)js解释器也叫js引擎 * 编译性语言的翻译时机:先整体翻译, 转成机器码, 打包成操作系统可以识别的格式(exe) * 编译器(翻译角色) ## 什么是弱类型语言, 什么是强类型语言? * 弱类型语言:变量的数据类型改变, 不会报错, 没有问题(根据变量的值, 来确定变量类型) * 强类型语言:变量的数据类型改变, 会报错(变量类型是提前声明的) * 最主要的区别:数据类型是否可变 ```javascript // 有一个name是China; var name = "China"; // 初始化语句, 声明一个变量name, 赋值“China” name = "USA"; // 强类型, 弱类型都可以 name = 123; // 弱类型没问题, 强类型会报错 ``` ## JavaScript由哪几部分组成? ### ECMAScript #### ECMAScript是什么? * javascript 可以看成英语 * ECMAScript 标准, 语法 ```javascript // 有一个name是China; var name = "China"; // 初始化语句, 声明一个变量name, 赋值“China” name = "USA"; // 强类型, 弱类型都可以 name = 123; // 弱类型没问题, 强类型会报错 ``` * 为什么有标准, 就会存在兼容性问题? * 不同浏览器, javascript解释器不同, 对标准的执行严格程度(支持率)不同 * 解决兼容性, 只能增加代码量, 适配不同浏览器 * 越新的标准, 越不容易被兼容, 不要喜新厌旧, 稳定是第一位的. ## DOM是什么? ### DOM > document object model(文档对象模型) * javascript最主要做两件事 1. 找对象 2. 操作对象 * 兼容性问题(不同浏览器, DOM支持的属性和方法不一样) * 兼容性导致代码量上升 ![](https://box.kancloud.cn/5708c3107981623ef2f2379c46b0fb69_425x215.png) 代码必须符合规范才能执行. 初级bug ```javascript var name1 = "Hello"; // 正常初始化 console.log(name1); // hello def name2 = "hello"; // 报错, 不认识def console.log(name2); // Unexpected identifier ``` ## BOM是什么? ### BOM #### 什么是BOM? > browser object model #### 兼容性问题 完全不用担心兼容性问题, 因为完全不兼容 不建议使用BOM, 完全解决兼容性问题 # JavaScript的有哪三种引用方式? ## 行内样式 ```html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Document</title> </head> <body>   <input type="button" value="快点我, 快!!!" onclick="javascript:alert('good!!!')"> </body> </html> ``` ## 嵌入式 ```html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Document</title>   <script>     function clickMe(){       alert('hello world');    }   </script> </head> <body>   <input type="button" value="快点我, 快!!!" onclick="clickMe()"> </body> </html> ``` ## 引入式 ```javascript <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Document</title>   <script src="hello.js"></script> </head> <body>   <input type="button" value="快点我, 快!!!" onclick="clickMe()"> </body> </html> ``` > hello.js ```javascript function clickMe(){   alert('click me, please!!!!'); } ``` ## 什么是变量? > 值可以变化的量 ### 如何初始化变量? > 变量的声明+变量的赋值 = 变量的初始化 > 注意: name 是浏览器的保留字 , 不建议在 js 中使用 ```javascript var name = "China"; // 变量初始化语句 var name1; // 变量的声明语句 name1 = "USA"; // 变量的赋值语句 ``` ### 变量命名 #### 命名注意事项 1. 保留字不能用, name 不建议使用, 也是保留字 ## 变量命名 ### 命名注意事项 1. 保留字不能用, name 不建议使用, 也是保留字 1. 字母, 数字, 下划线,美元符号来组成, 但是数字不能开头 ![](https://box.kancloud.cn/2bc9e2c234a8f4942d9ce6bfd504461c_637x138.png) 1. 可以使用中文作为变量名吗(可以) ```javascript var 帅哥 = "许竣皓"; console.log(帅哥); ``` ## 命名方式 1. 推荐驼峰命名(js大小写敏感) ```javascript var userPassword; // 用户密码, 小驼峰 var UserPassword; // 用户密码, 大驼峰 ``` ## md5加密 > MD5是一种加密算法 他只是加密对象的简单描述 身份证和本人的关系 用来验证加密对象 与文件大小无关 理论上, md5无法解密 可支持, 一次md5的简单内容, 进行解密 可以多次md5, 修改加密后的字符串来提高安全性 ## md5验证用户信息原理 1. 接受用户信息, 手机号, 密码明文 2. 如果手机号不存在, 提示用户不存在 3. 通过手机号, 查询数据库, 获取对应的密码密文 4. 使用同样的加密方式, 加密用户的密码明文, 得到当前密文 5. 比对数据库中的密文和当前密文 ## 如何一次初始化多个变量? ```javascript var a = 1, b = 2, c = 3, d = 4; // 一次声明多个不同变量,逗号分开 var a = b = c = d = 4; // 一次声明多个相同值的变量 ``` ## 如何显示变量值? 1. 控制台 console.log(变量) ```javascript var a = 1, b = 2, c = 3, d = 4; // 一次声明多个不同变量,逗号分开 console.log(a); console.log(b); console.log(c); console.log(d); ``` 1. 弹窗 alert(变量) ```html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Document</title> </head> <body>   <script>     var userName = "China";     alert(userName); // 弹出变量的值   </script> </body> </html> ``` 1. 控制台中实时查看 ```javascript var userName = "China"; // undefined userName; // 直接返回结果 ``` ## 什么是数据类型? > 数据的分类 ## js有哪些数据类型? 1. number 2. string 3. boolean 4. undefined&null 5. object 6. array ## 字符串和引号的关系 ```javascript var userName = "I love China !!!"; // 没有问题 var userName = 'I love China !!!'; // 没有问题 var userName = "I love China !!!'; // 有问题, 要成对出现 var userName = 'I love' China '!!!'; // 括号要包裹完全 var userName = 'I love "China" !!!'; // 单引号套双引号没有问题 var userName = "I love 'China' !!!"; // 双引号套单引号没有问题 // 转义: 把标点符号, 变成了字符串 var userName = "I love \"China\" !!!"; // 双引号套双引号, 需要转义 console.log(userName); ``` ## 如何显示变量类型 > typeof 用来显示变量类型 ```javascript var userName = "I love China !!!"; // 没有问题 console.log(typeof userName); // string console.log(typeof 1.33); // number console.log(typeof []); // 数组, 是一个特殊的对象, 所以是object console.log(typeof {}); // 是一个对象, 所以是object ``` ## js的注释 ### 什么是注释? > 注释就是对代码的解释, 运行时直接跳过 ### 注释方式有哪些? > `//` , 单行注释, 一般写在行尾, 解释当前行 > ![](https://box.kancloud.cn/83b38d596114852de9ae2c5e53255a4b_668x188.png) > /**/ 多行注释 , 可以单行可以多行, 单独写一行, 用来解释多行代码 > ![](https://box.kancloud.cn/eb16cf59600c31dfff872caeab578f46_671x193.png) > 多行注释也可以对文件进行注释 > ![](https://box.kancloud.cn/52f2bc8b8a05c9c638ad951c733cb12a_675x301.png) ### 注释的作用? 1. 解释代码, 让代码易于阅读 2. 先注释, 方便修改 3. 方便排错(把最有可能出现问题的地方, 注释掉, 如果其他没有问题, 则可以定位错误) ### 排错有几种方式 1. 浏览器的控制台 2. 编辑器和ide的代码提示, 代码审查 3. debug ## 什么是语句? > 一行代码就是一个语句, 用分号结束 ```javascript var a = 1; var b = 2; ``` > 多行写一行, 需要加分号 ```javascript var a  = 1; var b = 2; ``` ## 什么是代码压缩? 1. 压缩文件大小, 加快下载速度 1. 把空白行, 换行干掉, 隐藏变量名