javascript笔记整理图文.doc

《javascript笔记整理图文.doc》由会员分享，可在线阅读，更多相关《javascript笔记整理图文.doc（43页珍藏版）》请在三一办公上搜索。

1、Javascript基础一、Javascript 概述 （一）、什么是Javascript 是一种运行与 Javascript解析器 / 引擎中的解释型脚本语言 编译型：运行之前会做检查语法结构是否有问题，如果有问题的话，程序是不会被运行的 解释型：不会检查错误，直接运行，直到碰见错误再停止运行 （二）、运行环境 1、独立安装的Javascript解析器 NodeJS 2、嵌入在浏览器内核中的Javascript解析器 （三）、Javascript 发展史 1、1992年 Nombas公司 开发了一款 叫做 ScriptEase 脚本语言 2、1995年 Netscape公司为Navigato

2、r2.0浏览器开发了一种脚本语言 LiveScript,为了赶时髦，从此改名为 Javascript。 3、1996年 Microsoft 在IE3.0 发布了一款Javascript克隆版 JScript 4、1997年 Javascript1.1 作为草案提交给了 ECMA(欧洲计算机制造商协会) ECMA-262标准 ECMAScript是全新的标准的脚本语言 完整的Javascript 包含三部分： 1、核心-ECMAScript 2、文档对象模型(DOM,Document Object Model) 允许我们操作页面的元素 3、浏览器对象模型(BOM,Browser Object M

3、odel) 允许我们与浏览器进行对话，比如：操作地址栏，历史记录 （四）、Javascript特点 1、代码可以使用任何文本编辑工具编写 语法结构类似于C，Java，C# 2、无需编译，由Javascirpt的引擎负责执行 3、弱类型语言 由数据 决定了 变量的数据类型 弱类型语言对应：强类型语言由数据类型决定数据 4、基于对象 ， 面向对象(OO) （五）、Javascript 用途 1、客户端Javascript （1）、客户端数据计算 （2）、表单验证 （3）、浏览器事件的触发和处理 （4）、网页特效/动效制作 （5）、异步数据提交(Ajax) 2、服务器端Javascript （1）、

4、分布式运算 （2）、实时服务器 （3）、窗口应用 （4）、网络应用（二）、使用Javascript 1、浏览器内核 作用：负责页面内容渲染,主要有两部分组成 （1）、内容排版引擎 负责解析 HTML / CSS （2）、脚本解释引擎 负责解析 Javascript 浏览器 内核 排版引擎 脚本引擎 IE Trident - Chakra Firefox Gecko - 猴子系列 Safari Webkit Webcore Nitro Chrome Webkit Webcore V8 Opera Presto - Carakan Opera(2013)Webkit Webcore V8 2、第一

5、个Javascript程序 （1）、使用独立的Javascript解释器(了解) console.log(Hello Javascript); （2）、使用浏览器内嵌的js引擎执行Javascript 1）、在控制台(console)上输入脚本并执行 2）、将JS脚本嵌入在HTML页面中去执行 a、将脚本写在html元素的事件里 onclick事件:当用户点击元素时要执行的操作 : b、通过元素 执行JS脚本 c、使用外部脚本文件 a）、创建 以.js为后缀的文件 b）、直接编写JS代码 c）、页面通过标记，进行外部JS文件的引入 3、语法规范 Javascript 代码组成 - 语句 语句：

6、会被JS引擎所执行的代码 由表达式、关键字、运算符 严格区分大小写 console.log(); Console.log(); /*错误，C应小写*/ username Username 通常情况下，语句都用;表示结束（三）、变量 和 常量 1、变量 （1）、什么是变量 一个可以变化的量(数据) 内存：保存程序运行过程中所需要用到的数据。 变量：就是一段内存的空间，目的为了保存数据二用。 变量名：变量的名称。就是内存地址的别名 （2）、变量的声明：1）声明：在内存中，开辟一段空间 2）语法：var 变量名; 保存数据：1）使用 = 为变量赋值 = : 赋值运算符: var 变量名; /声明 变

7、量名=值;/赋值 var 变量名=值;/声明变量并且初始化值 初始化：为变量第一次赋值的过程可称为初始化 注意：如果声明了变量，但是没有初始化，那么变量将自动取值为 undefined 一条语句中声明多个变量： 多个变量名中间，用 , 隔开即可 var name1,name2,name3; var name1=aaa,name2,name3; （3）、变量名的命名规范 1）、要求：不允许关键字以及保留关键字左变量名称 比如：var,if,break . 2）、命名规范 a、可以包含字母、数字、下划线以及$，var name;，var name*;/错误，不允许包含*，var name$; b、

8、不能以数字开头，var name1,name2,name3;/正确，var 1name,2name,3name;/错误，var $name;/正确 c、尽量见名知意，var age;，var xingming; d、变量名不能重复 e、可以采用 “匈牙利命名法”,“下划线命名法”,“驼峰命名法” 匈牙利命名法：控件缩写+功能名称;text : txt，password : txt,pwd，radio : rdo，checkbox : chk，select : sel eg : 声明变量 用于保存 从文本框中得到用户姓名的 信息：var txt_username; 下划线命名法： var use

9、r_name;，var _name; 驼峰命名法：var studentName; （4）、变量的使用 1）、未经初始化的变量 a、未初始化指的是，只声明了，但是没有赋值的变量,系统会自动赋值为 undefined b、变量未声明直接使用：语法错误 2）、声明直接初始化：将声明变量与赋值操作放在一条语句内完成，var 变量名=值; var name=张三丰; var gender=Male; var age=80; 3）、对变量中的数值进行操作 a、取值 - GET操作 在程序中直接打印输出变量值 console.log(变量名); document.write(变量名); window.al

10、ert(变量名); 直接使用变量名即可 b、赋值 - SET操作 通过 = 完成 =的左边 必须是变量 =的右边 可以是值，也可以是变量 var name = 张三丰; var teaName=张无忌; name = teaName;/将teaName的值 赋值给name变量（5）、变量作用域(scope): 什么是作用域: 变量的可用范围 全局作用域: 凡是直接定义在window范围内的变量都属于全局作用域。全局作用域（window）中的变量也叫全局变量 特点: 随处可用，可反复使用 函数作用域: 凡是在函数内部定义的变量都属于函数作用域。函数作用域中的变量也称为局部变量。 特点: 只有在函

11、数调用时可用 不可反复使用 原因: 局部变量只有在调用时才创建，每次调用后都清除 变量使用的规律: 调用函数时,优先使用局部变量。只有局部没有时，才去全局找。如果全局也找不到，才报错 注意: 局部变量包括: 在函数内var的变量，参数变量也是局部变量，只不过不用var创建 2、运算符和表达式 运算符: 专门模拟人类想法的特殊符号 表达式: 完成一项专门任务的公式: 由变量，运算符，数据组成，所有表达式都有返回值 （1）、算术运算符 +,-,*,/,% % : 俗称 模 ，取余，获取两个数字相除之后的余数 5 % 2，使用场合：1）、判断奇偶性 2）、判断 x 数字的倍数 3）限制一个运算结果不

12、能超过指定上限 隐式转换: 默认: 都转为数字类型(Number(x)，再算术计算；返回值: 一定是数字 特殊: +运算中，只要碰上字符串，一切都转为字符串。+法计算，变为字符串拼接。 固定套路: x+; 返回值: 一定是字符串 由算术运算符组成的表达式称之为 算术表达式 （2）关系运算: 作比较 返回值: true/false 包括: = 0&a+ 只有a0时才执行后面的a+ 否则，什么也不做 | |: 两个值二选一使用，（默认值） 值1|值2: 如果值1可被转为true(有效),就返回值1，否则返回值2 位运算: 简化代码量 左移: mn : m/ 2的n次方 m/Math.pow(2,n

13、) 取整: m0 m0 m|0 parseInt(m) （4）赋值运算: 将等号右边的值，保存在等号左边的变量中，返回值: 等号右侧表达式的计算结果 也是要存入左侧变量中的值 简写: 扩展赋值运算: 一句话做两件事: 1. 取出变量中的值做计算 2. 将结果再存回变量中 m+=n; m=m+n; 累加m-=n; m=m-n; m*=n; m=m*n; m/=n; m=m/n; m%=n; m=m%n; 简写: 递增递减: n+ 递增1 : n+=1 n=n+1 n- 递减1 : n-=1 n=n-1 +n vs n+ 相同: n中的值都被+1 不同: 返回值: 前+，返回新值 后+，返回旧值

14、鄙视题: var n=3; /console.log(n+ + +n + n+);/? console.log(+n + n+ + +n);/? console.log(n);/6 var n=5; /console.log(n- + -n + n-);/? console.log(-n + n- + -n);/? console.log(n);/2 3、常量 （1）、什么是常量 常量也是内存中的一段存储空间，但是一旦确定值后，就不允许再修改,强制修改，程序不会报错 （2）、目的 保证程序中的数据的准确性 但是也不会被修改成功，只不过是新建了个常量 （3）、语法 使用 const 关键字 声明

15、常量 const 常量名 = 值; 习惯上，常量名采用全部大写 const PI = 3.14; 4、数据类型 作用：决定了内存中开辟多大的空间来保存数据 Javascript数据类型： 1）、原始类型(基本类型) a、number 类型数字类型 表示32位(4字节)的整数，也可以表示64位(8字节)的浮点数 整数：十进制数： 八进制：0作为开始 var num = 010; 十六进制：0x var num = 0x00000abc; b、string 类型 字符串 在JS中，一个字符或多个字符都可以称之为字符串。 字符串在使用的时候必须用 或 括起来，var name=张三丰;，var ag

16、e=24; /字符串 注意：只要字符串参与到 + 操作，起到的全部都是连接作用 c、boolean 类型，布尔类型，取值：true 和 false，使用场合：条件判断的结果 参与+-*/%运算时，true=1，false=0 d、undefined 数据不存在，未定义值 e、null 引用类型使用 .2） 、引用类型 a、数据类型转换 A)、JS是一款弱类型语言 var a=Hello; /string a=15;/number b、typeof函数(运算符) 作用：查询指定变量的数据类型 语法: typeof(变量) c、数据类型的转换 - 隐式转换 无需程序员干预，自动完成转换 不同数据类

17、型之间的数据再进行 + 操作时，最终的结果的数据类型是什么 隐式转换：由Javascript 自动完成的。 d、数据类型转换 - 显示转换 由 转换函数 指定转换成的数据类型，从而改变默认的数据类型转换策略 由程序员主动调用专门函数执行的类型转换 var num = 42; var n = 42; 转换函数: A)、toString() : 将任何数据类型的数据转换成字符串 无法转换null和undefined String(x)：这是万能的 原理为function String(x) if(x=undefined)return “undefined”; Else if(x=null ) re

18、turn “null”;else return x.toString(); B)、字符串to number parseInt() 解析出string 或 number 类型的整数部分 parseInt(35); 可以转换 parseInt(HelloWord); parseInt(str)原理:从头开始，跳过开头的空字符，依次读取数字字符，碰到第一个非数字字符退出 固定套路: 去掉字符串中数字之后的单位； 注意：1、parseInt 在转换时，碰到第一个 非数字的字符时，则停止转换 parseInt(35你好); parseInt(你好35); 2、如果待转换的数据解析不出数字部分或首字符也不

19、是数字的话，最后的结果为 NaN C)、parseFloat() 在parseInt的基础上，允许转换小数点 ，认识第一个小数点； 特点: 如果可转为整数，则优先转为整数；无法转为整数，才转为浮点数 选择: 除非确实要去掉小数部分，采用parseInt；否则，一律使用parseFloat D)、非字符串to number:Number(x) Number(“”)-0 Number(null)-0 Number()-0 Number(undefined)-NaN Bool to number:true-1 false-0 E)、一切to boolean:Boolean(x) 规则：只有0,und

20、efined,null,NaN,转为false，其余都转为true 如果转不了，返回NaN，特点：1、参与任何计算，结果均为NaN 2、不大于不小于不等于任何值，甚至不等于自身 5、函数 (1)、什么是函数 console.log(); window.alert(); document.write(); parseInt(); parseFloat(); 函数(function),可以称之为方法(Method),或过程(Procudure)。是一段预定义好的，独立的功能体，可以被反复的调用。 预定义：提前声明，声明后才能使用 函数的本质: function：创建一个函数对象的意思；函数对象:

21、专门封装一个函数定义的存储空间 独立功能体：可以包含若干条的可执行语句 函数是一个引用类型的对象 函数名，其实是一个引用函数对象的变量 反复调用：谁想用谁就过来调用，相当于把该功能体中的所有的语句都执行一遍 注意：函数不是在加载时就执行，而是在被调用时才会执行的 函数的本质是功能完整的对象(2)、定义函数(方法，过程) 语法： function 函数名()/若干条可执行操作语句 a、定义函数方法 (3)、调用函数:直接通过函数名称进行调用，函数名称(); function print(). print(); 调用函数时，()是调动函数的标识，不能省；原则上: 参数值列表的个数和顺序应和函数定义

22、时的参数变量列表一致。 (4)、定义参数:函数在运行过程中，需要使用外部的数据进行辅助操作，那么这个外部数据就是参数 语法：function 函数名(参数列表)/若干条执行操作语句 function 函数名称(参数名称1,参数名称2) 定义函数时所指定的参数名称，可称之为 形参(形式上的参数) 调用带参函数：函数名称(参数值列表); 调用函数值所传递的参数值，可称之为 实参(实际参数) 6、分支结构 1)、运算符 ,=,=,=,!= = : 判断两个数据是否相等，值相等，则为true，值不等则为false != : 判断两个数据是否不相等,值不相等，则为true，值相等时，则为false 以上

23、运算符运算的结果 一定是 boolean 类型 2)、if语句 作用：当条件满足时，执行某些语句，当条件不满足时，则不运行这些语句 语法：if(条件)若干条待执行语句 条件：结果为boolean类型的值或表达式 若条件为true，则执行if语句块中的语句 若条件为false，则不执行if语句块中的语句 注意：a、if()中 ，必须是 boolean 类型的值 若出现的不是 boolean 类型 ， 则会自动转换 以下情况，都会自动转换成false if(0) if(0.0) if(null) if(undefined) if() if(NaN) b、if语句后 if后的可以省略，但不推荐 如果

24、 if 语句块中，只有一条待执行语句时，那么就可以省略 c、if.else.语句 语法：if(条件)/语句块1else/语句块2 先判断条件，如果条件为真，则执行语句块1的代码内容，如果条件为假(否则)，则执行语句块2的代码内容 d、else if 多重if结构 语法: if(条件1)/语句块1else if(条件2)/语句块2else if(条件3)/语句块3 . .else/语句块n 满足哪个条件，则执行哪个条件后对应的语句块，执行完成后跳出整个结构，不会进行其他语句块的判断。如果所有的条件都不满足，则执行else语句块的内容。 7 、循环结构循环：重复的一遍又一遍的执行相同或相似的操作循

25、环的特点： 1、循环条件 规范了 循环的开始 与 结束 2、循环体 循环过程中，要做的事情 1)、while 循环 语法：while(循环条件)循环操作(循环体) 如果 循环条件为 true，则执行一遍循环体中的操作。然后再判断一次循环条件，若为true，则再执行一次循环体 . . 直到 循环条件为 false 时，则结束循环。 注意：正常处理过程中，不要让条件成为 永真,否则的话将出现 “死循环” 的效果。 跳出循环结构：break : 在循环体中，用于退出循环 使用场合：a、在满足某种条件下，提前退出循环 b、在不确定循环次数时，break可以作为结束循环的语句 2)、for 循环 a、确

26、定循环次数条件下，while的语句结构 var i=1;/ /1、初始化循环条件 while(i=10) /2、判断循环条件 console.log(Hello World);/3、循环操作 . i+;/4、更新循环变量 b、for语法for(表达式1;表达式2;表达式3)循环操作 表达式1：初始化循环条件 表达式2：判断循环条件 表达式3：更新循环变量 for循环执行流程：1、计算表达式1的值 2、计算表达式2的值(boolean类型)，如果为true，则进行下一步，否则，退出循环 3、执行循环体 4、执行表达式3 5、计算表达式2的值 ，如步骤2 c、for语句三个表达式的特殊用法 在fo

27、r循环中，可以省略任何一个或几个表达式,但分号 不能省略 A)、省略第一个表达式var i=1;/条件声明不能省略 for(;i=10;i+)console.log(.); B)、省略第二个表达式 for(var i=1;i+) console.log(.); 条件的表达式可以省略，但条件不能省略 C)、省略第三个表达式 for(var i=1;i=10;) console.log();表达式3可以省略，如果一旦确定循环次数的话，更新循环变量的操作不能省 D)、for(;) E)、表达式1 和 表达式3的位置处，允许出现多个表达式 8 、数组 1)、什么是数组 一组数据,保存在 一个变量里,可

28、以在一个变量中,存储多个数据,数组中所存放的数据 称之为 数组元素 数组元素在内存中按线性顺序排列，线性顺序： 除第一个元素外，每个元素都有一个唯一的前驱元素，除最后一个元素外，每个元素都有唯一的一个后继元素 数组是按照顺序来排列数据的。数组中，可以通过元素所在的位置顺序来访问元素 位置顺序：下标 或 索引,是从0开始，到元素个数-1（数组长度-1） 2）、数组的定义和初始化 1、var 数组名称=;，定义一个不包含任何元素的数组(空数组) 2、var 数组名称=值1,值2,.值n;，定义一个包含n个值的数组 3、var 数组名称=new Array();，定义一个空数组 4、var 数组名称

29、=new Array(值1,值2,.值n); 3）、访问数组元素 1、设置数组元素的值 - SET，数组名称索引 = 值; 2、获取数组元素的值 - GET，数组名称索引; 4）、属性：获取数组长度，获取数组中元素的个数，即数组长度 属性：length，使用方式：数组名称.length;，数组的长度值 就是 数组中新元素位置的索引 5）、循环遍历 for(var i=0;i数组名称.length;i+) 数组名称i 9、DOM概述 1）、DHTML Dynamic HTML 动态的HTML 是 HTML + CSS + Javascript 整合体 功能：页面在下载后，仍然能实时变化页面元素效

30、果的设计。 1、动态改变页面元素 2、与用户进行交互 主要包含 ：BOM ，DOM BOM :Browser Object Model 浏览器对象模型:提供了一组访问 浏览器 的方法和属性，使得Javascript有能力与浏览器进行对话 暂时 没有相关标准和规范，但是却被广泛支持。 DOM :Document Object Model 文档对象模型 文档：html文档 作用：操作html文档及其内容 定义了访问和操作HTML文档的标准方法 W3C组织定义了相关的操作规范和标准 2)、DOM概述 W3C DOM标准的3部分： a、核心DOM : DOM Core ,针对任何一个结构化(HTML,

31、XML)文档的标准模型 b、XML DOM ：针对XML文档的标准模型 c、HTML DOM ：针对HTML文档的标准模型 A)、网页加载时，浏览器会创建文档对象模型 B)、文档中所有的节点组成了一个文档树(节点树，DOM树) document 对象是文档树的根 发展： 从发展至今，共三级 DOM 1级规范：1998年，定义最底层机构 DOM 2级规范：在一级上增加了许多交互模块 Core : 扩展了更多的基本方法和属性 Style : 专门操作html元素的样式 Traversal and Range: 专门遍历DOM树 Event : 标准化事件。 DOM 3级规范：扩展了方法和属性，增加

32、新类型 3)、节点树(DOM树) HTML DOM 将HTML文档 当做 一个树状结构看待 文档中 元素、属性、文本、注释 都被当做一个节点 树根：document 对象,可以通过document对象操作整个节点树 HTML文档中的每个元素，属性，文本，注释，都代表着树中的一个节点 整个文档是一个文档节点 ：document node 每个HTML元素是一个元素节点：element node 每个HTML中的文本是一个文本节点：text node 每个HTML元素中的属性，是一个属性节点：attribute node 注释是一个注释节点:comment node document对象：浏览器中

33、的JS解释器会为每个载入的HTML文档创建一个对应的document对象 可以通过document对象，访问页面中所有的元素 10、选取元素 1)、通过ID选取元素 作用：通过 元素的 id属性值，得到页面的某一元素对象 方法：var a=document.getElementById(id属性值); 通过该方法，会得到一个 元素对象(element node) 2)、通过标签名获取元素 node.getElementsByTagName(标签名); node : 元素对象 或 文档对象 返回值：调用该函数所得到的东西 会返回 符合指定标签名称的元素节点数组(动态数组) document.ge

34、tElementsByTagName(div); 3)、通过class属性值获取元素 node.getElementsByClassName(class值); 返回值：节点数组 11、节点间关系 1)、属性 parentNode : 获取父节点对象 childNodes : 获取子节点数组,包含文本节点 children : 获取子节点数组，只包含元素节点，不包含文本节点对象 firstChild : 获取第一个子节点 lastChild : 获取最后一个子节点 previousSibling : 获取上一个兄弟节点 previousElementSibling : 获取上一个元素兄弟节点 n

35、extSibling : 获取下一个兄弟节点 nextElementSibling : 获取下一个元素兄弟节点 12、修改和读取节点对象 1)、元素的内容 a、HTML内容 获取或设置的内容，会被解析成HTML内容 属性：elementNode.innerHTML (body特殊 document.innerHTML) 作用：读取或设置元素节点中的HTML内容 b、文本内容 属性：textContent 作用：读取或设置元素节点中的文本内容 属性：innerText 作用：同上，火狐不支持 2)、元素的属性 a、elementNode.属性名称 anchor.href=; b、元素节点的 属性

36、集合 获取属性 属性：attributes 用法：elementNode.attributes; 返回值：属性集合对象 NamedNodeMap A)、读取属性 1、elem.attributes下标.value; 2、elem.attributes属性名.value; 3、elem.getAttributeNode(属性名).value; 4、elem.getAttribute(属性名); B)、修改属性 1、elem.setAttribute(name,value); 2、elem.setAttributeNode(attrNode); c、元素的样式 1、className 属性：className 作用：更改 元素的 class 值 2、style 属性 DOM 针对不同的样式编写方式，提供了不同的操作方法 A)、内联样式(行内样式) 属性：style 作用：获取 或 设置 元素的 行内样式 语法：elem.style.属性名 elem.style.color=red; 属性名要经过变化才能用： background-colortext-align 变化方式：去掉 - ，将-后的首字符变大写 el