javascript笔记整理图文

上传人:无*** 文档编号:46388017 上传时间:2021-12-13 格式:DOC 页数:44 大小:1.19MB
收藏 版权申诉 举报 下载
javascript笔记整理图文_第1页
第1页 / 共44页
javascript笔记整理图文_第2页
第2页 / 共44页
javascript笔记整理图文_第3页
第3页 / 共44页
资源描述:

《javascript笔记整理图文》由会员分享,可在线阅读,更多相关《javascript笔记整理图文(44页珍藏版)》请在装配图网上搜索。

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;i0 Number(null)-0 Number()-0 Number(undefined)-NaN bool to number: true-1 false-0 如果转不了,返回NaN: Not a Number 2大特点:

30、 1.参与任何算术计算,结果永远为NaN 2.不大于,不小于,不等于任何值 字符串 to number: parseInt(str)原理:从头开始,跳过开头的空字符 依次读取数字字符 碰到第一个非数字字符退出 固定套路: 去掉字符串中数字之后的单位 问题:不认识小数点,结果,去掉小数部分 解决: parseFloat(str)原理: 同parseInt 只不过,认识第一个小数点 特点: 如果可转为整数,则优先转为整数 无法转为整数,才转为浮点数 选择: 除非确实要去掉小数部分,采用parseInt 否则,一律使用parseFloat 一切 to boolean: Boolean(x); *规则

31、: 只有0,undefined,null,NaN,转为false 其余都转为true3. 运算符和表达式: 程序: 人的想法,在计算机中的执行 运算符: 专门模拟人类想法的特殊符号 表达式: 完成一项专门任务的公式: 由变量,运算符,数据组成所有表达式都有返回值。 算术运算: + - * / % %:模运算/取余数 比如: m%n: m除以n,取除不尽的余数部分 何时使用: 1. 判断能否整除 2. 限制一个运算结果不能超过指定上限 隐式转换: 默认: 都转为数字类型(Number(x),再算术计算 返回值: 一定是数字 特殊: +运算中,只要碰上字符串,一切都转为字符串。+法计算,变为字符串

32、拼接。固定套路: x+; 返回值: 一定是字符串 关系运算: 作比较 返回值: true/false 包括: = = = != 隐式转换: 默认都转为数字(Number(x),再比较大小 null或引用该类型的对象,则不隐式转换而比较地址值。 特殊: 参与比较的两个值都是字符串,不再转数字 而是逐位PK每个字符的unicode号 NaN: NaN不等于一切,所以普通关系运算无法判断NaN isNaN(num): 专门判断num是不是NaN 何时使用: 只要检查一个数是否是NaN null和undefined: 普通的=会将undefined自动转为null= 全等: 不带隐式转换的=比较 首先

33、要求类型相同,然后数值相等 != 不全等: 不带隐式转换的!=比较 何时使用: 只有不希望隐式转换时 逻辑运算: 将多个关系运算综合得出最终结论 包括: &(且) |(或) !(非) 条件1&条件2: 只有两个条件都满足,才返回true 只要有任意一个条件不满足,就返回false 条件1|条件2: 只要任意一个条件满足,就返回true 除非所有条件都不满足才返回false !条件: 颠倒条件的bool结果 隐式转换: 每个条件默认都被转为bool做判断 固定套路: !x 短路逻辑: 如果前一个条件已经可以得出最终结论,其余条件不再执行。&: 如果前一个条件为false,则整个结论为false

34、|: 如果前一个条件为true,则整个结论为true利用短路逻辑: 忽略逻辑运算本身的返回结果 &: 简单分支结构: 一个条件,一件事,满足就执行不满足就什么也不做。 条件&操作: 如果满足条件,才执行操作 否则,什么也不做 |: 两个值二选一使用,(默认值) 值1|值2: 如果值1可被转为true(有效),就返回值1 否则返回值2 位运算: 简化代码量 左移: mn : m/ 2的n次方 m/Math.pow(2,n) 取整: m0 m0 m|0 parseInt(m) 赋值运算: 将等号右边的值,保存在等号左边的变量中 返回值: 等号右侧表达式的计算结果 也是要存入左侧变量中的值 简写:

35、扩展赋值运算: 一句话做两件事: 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 不同: 返回值: 前+,返回新值 后+,返回旧值 鄙视题: 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正课:1. *函数2. 分支结构1. *函数 什么是函数: 封装一项任务的步骤清单的代码段,再起一个名字 为什么: 代码重用 何时使用函数: 如果一项任务可能被反复调用,都要先封装在一个函数中,再反复调用函数。 如何使用: 2步: 1. 创建一个函数: 声明方式 function 函数名(参数变量列表)

展开阅读全文
温馨提示:
1: 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2: 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
3.本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 装配图网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2023-2025  zhuangpeitu.com 装配图网版权所有   联系电话:18123376007

备案号:ICP2024067431-1 川公网安备51140202000466号


本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。装配图网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知装配图网,我们立即给予删除!