Javascript笔记资料.docx

1、Javascript笔记资料Javascript三颗*：重点正课：1. 什么是js2. 如何编写，如何运行，如何调试js程序3. *变量4. *数据类型1. 什么是js：前端三大语言：HTML：专门编写网页内容的语言 CSS：专门美化网页样式的语言*交互：输入数据，处理数据，返回结果JavaScript：专门编写网页交互的语言程序：让计算机可以执行任务的指令的序列Netscape：网景客户端脚本语言：LiveScriptSun Java“write once run anywhere”LiveScript: JavaScript 像极了Java，但比Java简单的多JavaScript-ECM

2、A-ECMAScript:行业标准，规定核心语法！Netscape：遵照标准实现JavaScriptMicrosoft：遵照标准实现JScriptW3C：DOM标准：专门操作网页内容的API标准JavaScript：ECMAScript(核心语法)+DOM(专门操作网页内容) BOM(专门操作浏览器窗口)2004：Mozilla Firefox2. 如何使用： 运行方式：2种： 1. 使用浏览器自带的js引擎：浏览器中包含两个引擎： 内容排版引擎：负责加载HTML内容，渲染css样式 js解释器/引擎：负责解释，并执行js程序浏览器控制台：专门调试程序，显示输出结果的浏览器窗口第一行脚本：co

3、nsole.log(Hello World); console指控制台 .翻译为的 log是控制台提供的一个现有功能，用来记录一行话 强调：2点：1. js中凡是要输出的正文都要用引号包裹，但单双引号不分2. js区分大小写！js规定小写的名称，就必须小写！ document.write(.); /使用网页的写入方法，向网页内容中写入HTML内容 window.alert(.);/使用窗口的警告功能，弹出警告框，显示自定义警告内容。 控制台编写多行语句：Shift+Enter 2. 独立安装的js引擎：node.js V8 让js运行在任何平台。网页中如何编写js：3种方式：1. 网页中的元素

4、中： 专门保存js程序的元素 可以写在网页的任何位置，随网页解释执行 脚本：不用编译，直接边解释边执行的程序2. 元素的事件属性中： 事件：用户或浏览器自身触发的动作 事件触发后，才会执行事件处理程序 元素 on事件名=事件处理程序（js语句）. p onclick=window.alert(Hello onclick). 当单击的时候，请window窗口，弹出警告3. 单独的.js文件中集中编写： 执行过程和在中编写的脚本完全一样！ 2步： 1. 新建.js文件，包含js程序 2. 在页面顶端，引入外部js文件： 如何调试js程序： 1. js中错误：只要希望的功能没执行，说明功能出错了 *

5、只要出错先开F12（控制台）* 控制台中包含：错误类型：错误原因 错误位置链接 错误现象：出错位置之前的代码正常执行 同一script中出错位置之后的代码不执行 一个script出错，不影响其他位置script的执行程序错误：bug 处理解决错误：debug正课：1. *变量2. *数据类型1. 变量： 什么是变量：内存中一块存储一个数据的空间 再起一个名字。 何时使用变量：程序中的一切数据都要保存在变量中，反复使用 如何使用变量：2种情况 1. 赋值：2步： 1. 创建变量：声明创建一个新的空变量 语法：var 变量名; 强调：仅声明，未赋值的变量，默认值是undefined 变量命名：见名

6、知义 1. *不能以数字开头 2. *不能用保留字：被js已经占用，有特殊意义的词 3. 如果又多个单词组成，一般采用驼峰命名： 第一个单词首字母小写，其余单词首字母大写 2. 赋值：将数据保存到变量中 语法：变量名=数据; 其中：=就是赋值的意思。 将等号右边的数据，放到等号左边的变量中保存 强烈建议：在声明同时就赋值 语法：var 变量名=数据; 强调：程序中的赋值，都是*替换*变量中原有旧值 2. 取值：使用变量名，等效于直接使用变量中保存的数据特殊情况：1. *给未声明过的变量赋值不会出错，程序会在window范围内自动创建同名变量，再赋值。*： 强烈建议，所有变量用var声明 如果不

7、带var，js会自动在之前加：window. 变量的本质：都是window环境下的存储空间 var a = window.a = a2. *从未声明过的变量中取值一定会出错*：ReferenceError3. 变量之间赋值：形如：变量1=变量2; 执行时：将变量2中的数据复制一个副本放入变量1中。 变量2中原数据保持不变。 此后，变量1和变量2之间，不再有任何联系！4. *声明提前：在正式执行js脚本之前，js引擎会提前阅读程序中的所有var。将所有变量集中到程序开始位置声明！ *赋值，仍留在原地！* 比如：console.log(m); /不会出错！输出undefined var m=100

8、; console.log(m); /输出100 建议：在程序开始位置集中声明变量常量：一旦创建，值不可改变的量何时使用常量？一旦创建，值不希望被篡改时，就要保存为常量语法: const 常量名=值;如何使用常量？用法和变量完全一样！除了不能赋值！2. *数据类型：数据在内存中的存储格式 为什么要有不同数据类型： 不同数据的类型，可执行的操作不同 js中数据类型：2大类： 1. 原始类型：数据直接保存在变量本地的数据类型！ 5种：String，Number，Boolean，undefined，null 2. 引用类型：数据不保存在变量本地的数据类型！(待续) 1. Number类型：js中专门

9、保存数字的类型，不带引号！ 何时使用：用于计算或比较大小时，都用Number类型 其实数字分两种情况：整数，浮点数(小数) 整数：4字节(byte) 32位 浮点数：8字节(byte) 64位 8Bit=1byte 1KB=1024byte 1MB=1024KB . 8位=1字节 Number类型所占空间和数值大小没有直接关系。 比如：var n=1; n占4字节 var m=100000000; m也占4字节*舍入误差：因为计算机无法精确表示1/10，造成的计算误差 不可避免！ 近似解决：n.toFixed(2)：将n按2位小数四舍五入！ 2. String类型：专门保存一串文字的数据类型

10、强调：字符串必须用引号包裹！ 何时使用：用于输出或显示的文字都要加双引号 1. 所占空间：js采用Unicode字符集编码 unicode：对全球主要文字的每个字符编一个号 js中每个字母，数字，英文标点占1字节 js中每个汉字占2字节！ 比如：“Hello马里奥” 1*5+2*3=11个字节 2. *字符串内容一旦创建不可改变*！ 两个字符串可使用+拼接为1个字符串 比如：var str1=Hello; str1=str1+World; console.log(str1); /共创建3个字符串 3. Boolean: 专门定义真假的类型：true false 何时使用boolean？如果数据

11、只有两种情况时，可用boolean类型 比如：var isRain=false var isMan=true var isClassOver=true JavaScript权威指南（犀牛书）微信公众号：前端大全回顾：1. 变量：声明(var) 赋值(=) 取值(使用变量名等效于直接使用变量中的数据) *变量声明提前：仅var被预读到开始位置，赋值留在原地 比如：console.log(m);/?undefined Var m=100; console.log(m);/?100 *使用变量报错：从未声明的变量中取值：ReferenceError var n; console.log(n); co

12、nsole.log(m); /报错：m is not defined *省略var：程序会自动加window.前缀2. 数据类型：2大类 1. 原始类型：数据直接保存在变量本地 5种：Number(舍入误差) String(每个字母/数字/标点 1字节 每个汉字 2字节 *内容一旦创建不可改变) var str1=Hello; str1=str1+world; /创建过3个 Boolean（true false） 2. 引用类型：数据不保存在变量本地正课：1. *数据类型转换2. *运算符和表达式1. 数据类型转换：*js是弱类型编程语言 1. 声明变量时，不必提前规定变量的数据类型 2. 赋

13、值时，根据存入数据，动态决定数据类型 3. 运算时，js会根据需要，动态转换数据的类型 2大类： 1. 隐式转换：不需要程序员干预，js会根据需要自动转换类型 仅讨论+运算中的隐式转换*规律*： 没有字符串参与：所有类型都转为Number类型 做算术计算！ Boolean：true-1 false-0 有字符串参与：所有类型都转为String类型 做字符串拼接 多个数据+运算：从左向右，两两计算 注意：隐式转换发生在运算过程中， 不改变变量中的实际存储。 2. 强制转换：程序员通过调用专门函数，明确的转换数据类型 1. 任意类型-String: 2种： var str=x.toString()

14、; var str=String(x); /相当于隐式转换 补：typeof(x): 返回x的数据类型名称 何时使用：不需要自己调用，程序根据需要会自动调用 2. *任意类型-Number：2种 var n=Number(x); 将*任意类型*数据，转为Number类型 /相当于隐式转换var n=parseInt(str); 专用于将*String*类型转为Number类型 本质：从左向右依次读取str中的整数部分！ 返回值：整数 碰到第一个不是数字的字符，停止读取! 特点：1. 不认识小数点！ 2. 跳过空格！ 比如：var str=12px $12 12.56 12 NaN 12 var

15、 n=parseInt(str); /12*如果无法转为数字，则返回NaN 什么是NaN：Not a Number：不是数字的数字 parseFloat(str); 用法和parseInt完全相同！ 差别：parseFloat认识*第一个*小数点 返回值：浮点数 比如：var str=12.5px 12.0px 12.5.5 12.5 12 12.5 var f=parseFloat(str); /12.5 总结：将非字符串类型转数字：Number(x) 将字符串转数字：parseInt(str) 3. 任意类型-Boolean: var bool=Boolean(x);/相当于隐式转换 课堂

16、练习： 输入框：var input=window.prompt(输入提示); *凡是从页面上获得的任何数据，都是字符串类型2. *运算符：程序中模拟人思维运算的特殊符号 什么是表达式：由运算符，变量，数据组成的一条语句；种：.算术运算：+ - * / % + - 算术运算中，一切数据默认都转为Number计算 算术运算的结果，只可能是数字 强调：如无法转为数字，则转为NaN NaN和任何数据做计算，结果还是NaN。 %模运算（取余数）:被除数/除数，取除不尽的余数部分 6789%100=89; 6789/100, 取除不尽的余数部分 17%3=2; 何时使用：1. 判断能否整除，判断奇数偶数：

17、 n%2等于0 偶数 n%2等于1 奇数 2. 余数不可能被除数，通常用模运算限制一个运算的结果不能超过某数正课：1. + -2. 关系运算：专门做比较和判断的运算符3. 位运算：4. 赋值运算：5. 三目运算1. + -: +: 前+：将变量本身的值+1，返回*新值* 比如：var n=10;/旧值 console.log(+n); /返回新值11 后+：将变量本身的值+1，返回*旧值* 比如：var n=10;/旧值 console.log(n+); /返回旧值10 -：用法和+完全一样：n- = n=n-1 总结：单用：两者无差别！ +用于其他表达式中时：前+返回新值， 后+返回旧值2.

18、 关系运算：做比较，做判断。所有关系运算都返回Boolean值 = = = != 关系运算中，所有数据默认转为数字类型比较 如果无法转为数字，则转为NaN， 但NaN和任意数据做比较，永远不相等！ 特殊情况：两字符串做比较： 依次PK两字符串中每个字符的unicode码 只要任意一位字符比较出结果就不再继续向后比较 var name1=Eric; var name2=Scott; E 69 name2 false var name3=Smith; S 83 = S 83 c 99 m 109 Scott name3 false NaN：和任何元素做 true 自动转为null 解决：=: 严格

19、相等/全等：不带隐式转换！ 要求参与比较的数据，类型必须相等 undefined=null =false undefined Object 何时使用：今后只要判断null或undefined，都要用= 只要不希望比较时自动类型转换，就用=3. 逻辑运算：利用多组关系运算，综合判断得出结论 返回值还是Boolean值 3种：&: 而且 所有条件都为true，结果才能为true 只要有一个条件为false，结果只能为false |: 或 只要有一个条件为true，结果就能为true 所有条件都为false，结果才为false !: 颠倒一切Boolean结果 *短路逻辑：前一个条件已经能够得出结果

20、 后续条件不再执行！ /*查看day02素材-operators.jpg：js运算符优先级 优先级高的，先运算！圆括号可改变优先级顺序*/4. 位运算： 左移：nm n/ 2的m次方 比如：33 64/(2*2*2)=85. 赋值运算：= 将等号右边的值保存到等号左边的变量中 扩展赋值运算：+= -= *= /= %= n=n+1; n+; 问题：仅能递增1 n=n+2; n+=2; 累加2; 或递增2 直接修改原变量中的值 n+=3; 累加3; 或递增3 何时使用：只要做累加时，都要用扩展赋值运算。 -=,*=,/=,%=用法同+= n-=2; =n=n-2; n*=2; =n=n*2; n

21、/=2; =n=n/2; n%=2; =n=n%2;6. 三目运算：根据不同的条件，多选一，返回不同的结果 何时使用：只要根据不同条件返回不同结果时 语法：条件?满足条件返回的值: 不满足条件返回的值 强调：返回值：只能返回两个值之一！ *根据多个条件，多选一！ 语法：条件1?满足条件1返回的值: 条件2?满足条件2返回的值: . 默认值; 体重健康指数（克莱托指数）计算公式如下： 可莱托指数=体重(kg)身高2(m) 20-25正常， 20以下瘦， 25以上胖。 例如：某人是60kg，1.7m，那就是：601.72=20.76，属于“正常”体重；编写一个函数，接收体重和身高作参数，返回判定结

22、果。 请用户输入体重和身高 根据体重和身高计算可莱托指数 根据可莱托指数的范围输出胖瘦情况 如果指数25，输出胖 如果指数 编码为 http%3A%2F%2F 解决：编码encodeURIComponent(str) 解码decodeURIComponent(str) 总结：encodeURIComponent同时包含encodeURI的功能3. *分支结构：根据不同的条件，选择*执行*不同的*代码段*！ vs 三目：根据不同的条件，*返回*不同的*值* 程序结构：3种： 1. 顺序结构：默认自上向下顺序执行（函数除外） 2. 分支结构：根据不同的条件，执行不同的任务 3. 循环结构：程序反复执行同一段代码。 分支结构：3种： 1. if结构：1件事，满足条件就做，不满足就不做 语法：if(条件) 满足条件才执行的代码 简写：条件&满足条件才执行的代码 仅限于执行的代码只有一句时，才可用 2. if.else结构：2件事，必须二选一执行 语法：if(条件) 满足条件才执行的代码 else/读作否则 不满足条件时执行的代码 3. else if结构：多个条件，多件事，必须多选一执行 语法：if(条件1) 满足条件1 才执行的代码 else if(条件2) 满足条件2 才执行的代码 else if(条件3) . . . .