达内web前端JS笔记_第1页
达内web前端JS笔记_第2页
达内web前端JS笔记_第3页
达内web前端JS笔记_第4页
达内web前端JS笔记_第5页
已阅读5页,还剩56页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、2015年6月份达内web前端就业班培训JS部分前端三大基础知识:HTML:专门编写网页内容CSS:专门设计网页样式JavaScript:专门设计网页交互的语言(9天)=Day1JavaScript:专门设计网页交互的语言交互:输入数据,程序处理数据,返回结果什么是JavasCript:1. 专门设计网页交互的语言2. 运行在javaScript解释器中3. “解释”执行4. 互联网第一大语言:JSerECMAScript标准:JavaScript核心语法微软:JscriptW3C:DOM标准:专门操作HTML元素,CSS样式,事件的统一标准!BOM:专门操作浏览器窗口的工具。没标准,由浏览器

2、厂商自行实现JavaScript=ECMAScript+DOM+BOMJSer最大挑战:浏览器兼容性问题JavaScript典型用途:1. 客户端数据计算2. 客户端表单验证3. 动画JavaScript特点:纯文本;解释执行;弱类型;基于对象如何使用:1. 使用浏览器自带的js解释器;F12- ->控制台光标处写脚本代码,回车执行。Console:指代控制台:专门调试程序输出结果的窗口。log:控制台console提示的一个功能:向控制台输入一行日志多行:shift+enterà换行*JavaScript中区分大小写!*字符串单双引号都行*2.单独安装专门解释器软件:node

3、.js Chrome V8Win键+Ràcmdànode退出:两次ctrl+c执行.js文件:1.先到cd到.js文件所在路径 2.node文件名 回车3.随网页一同运行:浏览器包含两种工具:排版引擎:专门加载HTML内容和css样式解释引擎:专门运行Js脚本<script>中脚本块何时运行?随网页加载,解释执行<script>中都要用js语法!Html元素的事件属性中:什么是事件?元素可以根据鼠标或键盘的不同操作响应不同的交互行为<html><head><title></title></head

4、><body><script> alert("hello from script");</script> <button onclick="alert('hello from onclick')">按钮</button></body></html><script>解释执行,读到才执行。先读到先执行,后读到后执行。<script>放置的先后顺序影响程序结构。优化:放在body后;待网页全部加载完在实现功能,用户体验效果更佳。一次

5、定义,处处使用;一次修改,处处生效!解决:凡是重复编写的代码块,都要封装为一个方法:方法:执行一个专门功能的一组代码的序列。定义在<head>下的<script>中语法:function方法名()重用的代码块调用:方法名()à调用后立即执行。*不调用不执行*只要没反应或效果没有出来就是出错!àF12调试查看错误原因à定位错误位置!<script>脚本块中的错误,仅影响“当前脚本块”中出错位置之后的脚本执行。不影响<script>之外的其他元素加载或脚本块执行。Function中的错误:只有调用方法时才触发!页面内部脚

6、本块问题:仅当前页面可用!解决:外部.js文件!什么是.js文件:专门保存js脚本源代码的文件。源代码都要放到js解释器才能执行。如何使用.js文件?2 步:1.创建.js文件,编写源代码。2.在页面中引入外部.js文件。ECMAScript(核心语法)*区分大小写*字符串必须用引号(单双都行)包裹*每条语句结尾都建议有分号*语句:让程序可以做一件事的一行命令脚本块:多行语句的序列程序:让计算机模拟执行人类的想法!注释:不会被解释执行或显示的代码说明给程序员看的注释也占网页流量!生产环境必须去掉!提高加载速度。HTML注释:<!->CSS注释:/*/Js注释:/单行注释 /*多行注

7、释*/*变量*什么是变量?内存中专门存储数据的空间程序都是在内存中运行任何程序包括三个部分:IPO: input process output 即:输入数据 处理数据 输出数据何时使用变量?只要在程序中临时存储数据,都要放在变量中怎么使用变量?声明,命名,初始化和使用声明:在内存中开辟一个存储空间怎么声明?var 变量名;赋值:将等号右边的数据,装入等号左边的变量中!如果未赋值:js默认赋值为undefined命名规则:见名知意 保留字/关键字不能当变量名保留字:js中已经占用的特殊意义的关键字使用:使用变量名等效于直接使用变量中存储的数据+:拼接多段文字为一句话!常量:一旦创建,值不可改变的

8、特殊变量如何使用常量:const 常量名=常量值;前后返回值一样,因为PI是常量,没法改变。强调:只有等号可以向变量中存入新值。普通运算不会改变变量的值。只是使用变量的值。只要带var就是声明,只要声明就会开辟内存空间呢。Js中新同名变量的空间会替换旧变量的空间。有几个var,就会创建几个存储空间。数据类型:变量中存储的数据的类型。Js是弱类型:变量本身没有类型。只有变量中的值才有类型。一个变量,可以反复保存不同类型的数据为什么要有数据类型:现实中所有数据根据用途不同,都分为不同数据类型。原始类型:数据保存在变量本地!Number string Boolean undefined nullNu

9、mber类型:表示一切用于比较或数学计算的数字原始类型大小:Number:整数4字节,浮点数8字节String:每个字符2字节程序中数字分整数、浮点数(现实中的小数)Js中一切数字都用number保存,不分整数类型和小数类型如何定义number类型值?不带引号的数字字面量程序中数字类型的舍入误差:程序中不能准确表示1/10,就好像现实中不能准确表示1/3一样!如何修正:按指定位数四舍五入:数字.toFixed(小数位数)今后计算结果小数位数超长,说明碰到舍入误差,按位四舍五入。String类型:一串字符的序列!Unicode:对所有语言文字中的字符编号;如:张(24352)、东(19996);

10、why:因为计算机只能处理数字,无法处理文字。计算机处理unicode,就等效于处理编号对应的文字。转义字符:专门表示非打印字符以及特殊符号如何使用转义字符:特殊符号 比如:n换行 t tab健如果字符串中包含于语法相冲突的特殊字符,用转义为原文字符串变量的内容一旦创建不可改变!如果改变,只能创建新字符串,抛弃旧字符串。鄙视题(面试题)var str=”Hello”;Str=str+”world”;创建了三个字符串。Boolean类型:仅有两个值的特殊数据类型:true,false何时使用boolcan?只要一个值只有真假两种情况,就用boolean类型Undefined类型:表示一个变量仅声

11、明过,但从未赋值。所有未赋值的变量,默认值都是undefined。Undefined类型的值还是undefined!Day02数据类型间的转换:隐式类型转换:程序自动转换数据类型弱类型:1.变量声明时不必限定数据类型,今后可能保存任何类型数据。 2.数据类型间可以自动类型转换仅考虑+:只要有字符串参与,一切类型都加”变字符串 如果没有字符串,都转为数字计算: 其中:true>1 false>0;强制转换:程序员通过调用专门函数手动转换类型1 string:x.toString()>将x转为字符串类型2 Number:Number(x)>将任意类型转为number类型St

12、ringnumber:转为整数:var num=parseInt(”str”)读取字符串中的整数部分从第一个字符向后读。如果碰到第一个数字字符,开始获取数字,再次碰到不是数字的字符,停止读取如果开头碰到空格,忽略如果碰到的第一个非空格字符,不是数字,说明不能转NaN:Not aNumber什么是NaN:不是数字(内容)的数字(类型)读取浮点数:var num=parseFloat(“str”)读取了浮点数部分用法和parseInt完全相同唯一差别:parseFloat认识小数点,仅认第一个Console.log(parseFloat(“22.0”);/22;parseFloat可将小数点后占用

13、字节但无意义的部分去掉。Prompt(“提示信息”):专门用于请求用户输入数据,收集数据的对话框!Var str=prompt(“提示信息”);*凡是从页面上获得的数据,都是字符串!必须先来转换再计算*数据类型转换综合图:什么是运算符:程序模拟人类运算的特殊符号算数运算:任意类型数据做运算,都会被转为数字类型,如果有参数,不能自动转为数字,则返回NaN如果除数为0:Infinity无穷大typeof(x):判断任意数据的类型被除数%除数 模运算:被除数/除数,取除不尽的余数何时用:限制一个数不能超过某个最大范围时递增/递减运算:+:i+ài=i+1;只要遇到对变量+1,就用i+i+单

14、独用:+放前放后,效果一样:i+=+i;前+,先+1,再参与表达式后+,先用旧值参与表达式,表达式之后再+1;关系运算:判断大小!条件判断中使用结果:成立:true,不成立:false*自带隐式类型转换*字符串参与关系运算:从第一个字符开始,取出每个字符PK Unicode编号”Hello” H e(101) “Hi” H i(105)“hello”<”Hi”Hello” H e “HI” H I“hello”>”HI”所有小写字母的Unicode都大于大写字母关系运算中:任何类型和数字比较,都转为数字,再比较/与字符串和其他相加区别布尔类型参与关系运算,始终转为数字比较实际中,关

15、系运算:先将参与判断的数据,强转为相同类型,在比较字符串比较:Undefined做比较Undefined类型,从null类型继承来的Undefined值被自动转换为null!Undefined=null=true=严格相等:不带自动类型转换的相等比较!要求类型和值必须都相等!才返回true。只要不确定比较的类型,又不希望自动类型转换时,就用=; NaN做比较:NaN和任何数字做比较,永远返回false NaN=NaN=falseisNsN(x):专门用来判断一个数据是否是NaN 如果是NaN返回true;如果不是NaN返回false 是数字返回false;如果不是数字返回true;只要不能自动

16、转换为数字的,都返回true只要能自动转换为数字的,都返回false关系运算总结:1.普通数据,先转为相同类型,再比较2.undefined,就用=3.NaN,就用isNaN(x)逻辑运算:基于多组关系运算,得出一个结论&&:而且; 所有条件为true,才返回true;只要一个为false就返回false。|:或者; 只要任意一个为true,就返回true;只有所有条件都为false时,才返回false。!:非;颠倒true和false;今后只要颠倒判断结果,就用! !true=false !false=true 短路逻辑:只要前一个判断足以得出最终结论,则后续条件不执行!位移

17、:左移几位就乘几个2;右移几位就除几个2;左移n<<m=>n*(2的m次方);右移:n>>m=>n/(2的m次方) 赋值运算:赋值运算结果就是等号右边表达式的结果扩展的赋值表达式:对已有数据计算同时,将结果再存回变量三目运算:根据不同条件,动态返回不同结果!三目:至少需要3个表达式。语法:一个条件,二选一:条件?当条件满足时返回的值:当条件不满足时返回的值多个条件,多选一:条件1?条件1满足时的值:条件2?条件2满足时的值:条件n?条件n满足时的值: 默认值;典型用法:注意:后一个条件中不用包含否定前一个条件的关系判断。因为,进入后一个条件隐含的条件就是前一

18、个条件不满足。例子:Day03函数:(方法)封装执行一项专门任务的步骤的代码序列何时定义方法?只要发现一段代码重复使用,就封装为方法。语法:声明 Function 方法名(参数列表) 方法体:步骤清单 return 返回值;调用:方法名(参数值列表);参数:方法内独有的变量,接收传入数据,在方法内处理。参数让方法变灵活!如何声明方法参数:不用var!参数何时被创建?只有方法被调用时才自动创建。返回值:方法执行完成后,由方法返回的一个数据定义返回值:不用再声明变量,直接用return值!为什么定义返回值:因为调用方法的人需要明确的返回结果。返回值主要给调用者使用。return:本意退出方法! 退

19、出同时,可返回数据!可以在任何需要的地方,调用方法执行;带返回值的方法,使用时,等效于直接使用返回值数据例子:比较找到三个数之间的最大值作用域:一个变量的可用范围!(很重要)全局作用域:直接声明在全局作用域中的变量,叫全局变量今后只要希望所有作用域公用的变量都要声明在全局作用域局部(函数)作用域:声明在方法内部的变量或方法的参数变量都叫局部变量值传递:将一个变量的值赋值给另一个变量,其实将原变量中的值,复制一份给新变量。JS中一切赋值都是值传递!对未声明的变量赋值:js会自动在全局创建该变量!函数作用域和变量作用域完全一样函数作用域在调用方法时创建,方法执行完立刻销毁!问题:方法参数:依据方法

20、内部的处理逻辑至少需要几个数据才可正常执行。方法参数和外部定义了哪些变量没有任何关系。方法参数作用:1.接收外部传入数据,在方法内处理 2.规定调用方法的人必须提供哪些参数!方法返回值:根据方法调用者的需要!如果方法调用者需要明确返回一个结果,就定义返回值!否则,可以不定义返回值!有返回值的方法,可以当做一个值用!何时必须用变量接住?方法的返回值,后续程序可能反复使用!自定义函数:全局函数:ECMScript定义了标准,由各浏览器厂商已经实现的函数。咱们直接调用! isNaN(x) parseInt/Float(x)encodeURI:将url中的非法字符转为单字节符号编码decodeURI:

21、将encodeURI转后的字符串,转换回原文解码返回如下:unicode编码:每个字符2个字节;字母单字节。utf-8编码:字母、数字单字节 汉子3字节url规定参数值中,再次出现保留字,就是非法:保留字:/ ? $ : encodeURIComponent:即能对多字节非法字符编码,又能对单字节非法字符编码今后只要使用component就够了何时使用?将数据通过url发送时,都要先编码再发送decondeURIComponent:对encodeURIComponent编码的字码。收到编码后的字符串后,都要先解码,再处理。返回:程序结构:3种:顺序;分支;循环分支结构:程序运行过程中,可以根据

22、不同的条件执行不同的任务。分支结构:if结构 :一件事,要么做,要么不做 ifelse结构:2件事,二选一执行else if结构:多件事,多选一执行语法:if(条件1)/满足条件1,执行的代码else if(条件2)/满足条件2,执行的代码else if(条件n)/满足条件n,执行的代码else/以上条件都不满足时,默认执行的代码如果前一个条件已经满足,则后续else if不再执行!分支结构中的条件,可以不是逻辑表达式!*如果不是,js会自动转换为Boolean类型:*0,null,undefined,NaN,”都转为false;其余,都转为true!*Day04switchcase多条分支,

23、根据条件判断,选择执行语法:switch(表达式)case 表达式1:/ 如果表达式的值=表达式1的值 代码段1;Case 表达式n:代码段n;default:/如果表达式的值和所有case都不相等, 默认代码段;运行机制:如果找到与表达式值匹配的case,不但执行当前case下的代码,而且之后所有代码都被触发! 返回值:break:退出当前结构;返回值> 多个条件共用同一套执行逻辑时,不加break!循环结构:程序反复执行同一套代码段。遇到结束条件,会结束执行。没有循环结束条件,永远循环执行死循环循环三要素:1.循环条件:循环继续执行的条件。 一旦循环条件不满足,循环立刻退出! 2.循

24、环变量:用于循环条件中做判断的变量 循环变量都会向循环退出的趋势变化(不满足循环条件的趋势)循环计数器3.循环体:每次循环要做的事情while循环:当满足条件时,就继续循环做事语法:var 循环变量while(循环条件) 循环体;迭代变化循环变量;break:退出当前结构while中何时用break:循环条件不满足之前,希望强行退出循环。如何使用break?可以放在任何需要退出循环的位置。随机数:Math.random():0<=n<1任意minmax之间取随机数公式:parseInt(Math.random()*(max-min+1)+min)例子:do-while循环:先执行一

25、次循环体,再判断是否继续!如果第一次循环条件不满足,循环体至少可以执行1次!变量声明提前:相同作用域内,var无论出现在什么位置。解析时,优先提取到js开始位置声明!while vs do while:如果第一次条件就可能不成,也想执行一次,必须用do while如果第一次条件一定满足,do while等效于whilefor循环:完全等效于while循环。循环变量变化规律固定,循环次数已知/固定for(声明并初始化循环变量;循环条件;迭代循环变量;)循环体continue:跳过本轮循环,继续执行下一轮循环Day05 数组:存储:连续存储多个数据的存储空间 使用:相当于多个变量的集合why?现实

26、中数据都是批量分类管理何时使用:只要批量管理多个数据,就要用数组保存如何使用:创建,初始化,访问数组中的数据创建:数组都是用创建出来的。var arr=;à创建了一个数组对象,数组中包含0个元素var arr=95,61,95;à创建了一个数组对象,数组中连续存储3个元素:91,61,95两个不限制:1.不限制元素个数!2.不限制元素数据类型*数组是引用类型的对象*原始类型:数据保存在变量本地引用类型:数据不保存变量本地!保存在“堆”中。由地址指向实际数据引用类型特点:可以保存多个数据,而且数据个数随时可变why?原始类型中只能保存一个值,1个值无法精确描述一个东西,现实中

27、,都是用多个属性共同描述一个东西只要是对象,一定在堆里,对象一定有地址。对象:凡是存储在堆中的,都是对象!使用引用类型的对象:使用变量,等效于使用对象的地址 使用对象地址,等效于使用对象本身数组对象支持直接输出数组内容其他数组创建语法:var arr=new Array(num); New:要在堆中开辟空间! Array:ECMAScript标准中的内置类型 new Array:在堆中创建一个数组类型的存储区域 (num):初始创建num个元素var arr=new Array(7);undefined, undefined, undefined, undefined, undefined,

28、undefined, undefinedundefined输出时,变为一个空字符var arr=new Array(元素1,元素2,元素3,.元素n);null:一个变量没有指向任何对象何时使用null:主动释放对象!主动释放的对象不能被找回为什么原始类型不适用null?原始类型占用的空间很小,堆中的数据是海量的,占用空间很大null vs undefined:null 专用于主动释放对象!undefined:专用于自动初始化任何未赋值的变量垃圾回收:js引擎自动销毁不再被引用的对象!垃圾回收程序:随js程序运行而后台同时运行只要对象还有变量引用,就不回收。访问数组:数组:一组变量的集合。如何

29、获得其中一个变量/数据:下标,数组中唯一标识一个元素的序号。从0开始。最后一个元素的下标是“元素个数-1”js内置对象不但封装存储,而且封装常用APIAPI:已经实现的方法!可以直接调用!Array API:1. arr.length属性:数组中的元素个数访问任意数组的最后一个元素:arrarr.length-1length属性值,随数组长度变化而自动变化!js中数组可以根据程序的需要,自动扩容,保证程序正常执行数组扩容和缩容:都是设置length属性的值。如果length属性值>旧值,会扩容。;反之,缩容(截断)被截断的元素,不能被找到,不会被回收。只能随数组对象一起回收。固定用法:在

30、任意数组结尾追加一个新元素:arrarr.length=新值;例子:一次输入员工姓名直到输入exit退出,输出所有员工姓名:调用完函数后出栈 什么是数组遍历:对数组中每个元素执行相同的操作for(var i=0;i<arr.length;i+) arrià当前元素返回:关联数组:数组下标可以自定义名称!key/value对儿何时使用关联数组:数组元素的内容无法描述自己的意义时 使用关联数组为每个元素起名关联数组的.length属性作废了!所以用for(var key in arr)for in:专门遍历关联数组用的!for(var key in arr)/从第一个元素开始,将元

31、素的key赋值给临时变量keyarrkeyà当前正在遍历的元素的值(value)例子:返回:关联数组直接量定义方式:“key1”:”value1”, “key2”:”value3”,还是上面的例子改下:返回:冒泡排序:数组常用方法:x.toString()方法:任何对象都有toString方法,默认用逗号(,)分隔每个元素将对象转为字符串,一般不主动调用,js在需要时自动调用x.valueof()方法:同toString()var arr=arr.join(“分隔符”):将数组转为字符串。可自定义分隔符!用法:将字符拼接为单词或句子 固定用法:chars.join(”);例子:返回值

32、:var newArr=arr.concat(元素值,数组,):将参数拆散成单个元素,追加到数组中。*不会修改原数组,只能返回新数组对象*返回值:var subArr=arr.slice(start,end+1):截取数组下标从start开始到end位置的元素,生产子数组对象。*含头不含尾*返回值:arr.splice:删除!插入!替换!删除数组元素:arr.splice(start,count);替换元素:arr.splice(start,count,值1,值2,)插入元素:arr.splice(start,0,值1,值2,)à从下标为2的数组开始删除2个元素,然后插入16,6,2

33、2三个新的 的元素,删除两个插入三个,比原来多了一个元素,数组自动扩容一个。arr.reverse():颠倒所有数组元素 arr.sort():默认升序排列。默认都转为字符串排序! Day06排序:arr.sort():默认按字符串升序排列自定义排序:2步:Step1:定义比较器函数!什么是比较器函数?定义任意两值比较策略的方法比如:num1-num2>0 ànum1>num2 num1-num2<0 ànum1<num2function compare(a,b) return a-b;/如果返回>0数,a>b; 如果返回<0数,a

34、<b; 如果返回<0数,a<b;如果刚好=0,a=b;Steb2:将比较器函数传递给sort方法!如何将方法作为参数传递?Js中方法也是一个对象!方法名就是指向方法对象的变量名!function compare(a,b)return a-b;/可以定义在使用前后的任何位置/原因:var声明和function声明自动提前!相当于:var compare=new Function(“a”,”b”,return a-b);/必须定义在使用之前!原因仅声明提前,赋值不提前。这里的Function中的F必须大写,可能选择题会考。arr.sort(compare);注意!将方法作为对象传

35、递时,仅使用方法名,后不加圆括号。返回值:降序:颠倒比较结果的正负,可以导致升序变降序升序:Function compareASC(a,b)return a-b;颠倒(*-1):Function compareDESC(a,b)return -(a-b);例子:栈和队列:什么是栈?后进的先出!(LIFO-last in fist out)栈其实就是数组,只不过用一对儿方法模拟了栈的操作!入栈:arr.push() 出栈:var last=arr.pop()只能从数组一端出栈,入栈。另一端封闭!栈和队列:js中,其实就是数组! 栈:只能从一端插入/弹出元素,另一端封闭。栈操作:结尾入栈出栈:入栈

36、:arr.push(值1,.) 出栈:var last=arr.pop();/给个变量接住出来的 开头入栈出栈:所有元素下标随入栈出栈操作而变化 入栈:arr.unshift(值1,) 出栈:var first=arr.shift()队列:FIFO 先到先得 入队列:arr.push(值1.) 出队列:var first=arr.shift()二维数组:数组的元素又是另一个数组对象!创建二维数组:创建普通数组,完全一样! 只不过将普通元素,换为一个数组对象而已比如:var arr=1,2,3; var arr2=1,2,3,4,5,6,7,8; arr23=11,12,13;如何访问二维数组中

37、的任意元素: arr父数组中的下标子数组中的下标何时使用二维数组:数据包含明显上下级关系内置对象:10个内置对象要记住,笔试string包装类型:*字符串内容一旦创建,不能改变 str.length:返回str字符串中的字符个数 比如:var str=”Hello马里奥”; str.length/8 str的length只管个数,不管字节大小写转换:都转小写:str=str.toLowerCase()都转大写:str=str.toUpperCase()何时使用:希望大小写一视同仁时,就要先转换,再处理Day7转义字符:代替字符串中的非打印字符:n t如果字符串内容中包含和语法冲突的特殊字符,可

38、用转为普通字符!比如:console.log(”js是互联网”第一大语言”);字符串内容一旦创建不可改变!如果修改。都要创建新字符串,保存新结果,替换旧字符串var str=”Hello”;str.toUpperCase();console.log(str);*规律:所有字符串API ,都需要变量接收返回值!*字符串的字符个数:str.length属性字符串类型底层其实都是用字符数组实现的比如:stri大小写转换:大小写字母一视同仁时,先转化,再处理比如:重名验证,重复邮箱,验证码获取指定位置字符:var char=str.charAt(index); 在index位置的char获取指定位置字

39、符的unicode编号:var num=str.charCodeAt(index);字符串三大操作:1.查找关键字!2.替换关键字3.获取子字符串查找关键字:var index=str.indexOf(”关键字”);返回关键字所在位置!*如果没找到,返回-1!*IndexOf:懒:只找第一个关键字的位置!蠢:默认只能从位置0开始!var index=str.indexOf(”关键字”,from);from:开始查找的位置。从from开始向后查找从最后一个字符,向前找:只要关键字离结尾近,就用lastvar index=str.lastIndexOf(“关键字”,from);from:开始查找的

40、位置,从from开始向前查找*返回的index完全相同!因为字符在数组中的下标是固定的!所以与查找方向无关*2. 获取子字符串:var subStr=str.slice(start,end+1)Str.substring(start,end+1)用法同slice!唯一差别:不支持负值作为参数!str.substr (start,count) count表示个数以上三个方法省略第二个参数,默认都是取到结尾!按规律分割字符串:var subs=str.split(“分隔符”,count)à中括号表示可加可不加,加count表示要切的个数鄙视题:把no zuo no die每个单词第一个字

41、母变大写,输出返回:课堂练习:判断字符的种类:unicode范围:48-57: 0-9数字字符65-90: A-Z 大写字母97-122: a-z 小写字母19968-40869:汉字其他字符什么是模式匹配:可以设置查找或替换的规则!何时使用模式匹配:要查找的关键字可能发生有规律的变化。如何使用模式匹配:1.先定义模式:/关键字/模式比如:var reg=/no/i; no是要查找的关键字原文,不管是不是字符串,都不加”i表示忽略大小写!String类型中,提供了专门支持模式匹配的API!按模式替换关键字:str=str.replace(reg,”新值”);默认replace仅替换第一个关键字

42、!要想全局替换,要在模式中定义“g”获得*所有*关键字的*内容*:var kwords=str.match(reg);只能取得关键字的内容,无法确定每个关键字的位置!kwords.length:找到的关键字个数!*如果未找到,返回null!*只要有可能返回null!都要先判断!=null,再处理!var index=str.search(reg);和indexOf完全相同!IndexOf不支持模式查找!search其实是indexOf的模式查找版*正则表达式:*重点什么是正则表达式:字符串中字符出现的规则何时使用正则表达式?验证字符串格式,查找关键字,替换关键字比如:银行卡查询密码:6位数字

43、用户名:字母,数字,_的组合正则表达式:选择符号:所有备选字符:必须多选一使用一个,只能代表1位字符的规则!xxxx:表示除了xxxx都行!注意必须放在中的第一个位置,否则,变为普通字符匹配。-符号:字符的范围:备选字符连续的范围!比如:0-9 a-z A-Z a-zA-Z/-可以局部使用汉字范围:u4e00-u9fa5预定义字符集:使用简化的符号,定义字符集比如:0-9- ->d a-zA-Z0-9- ->w 空字符- ->s如果规则正文中出现特殊符号,用转为原文比如:”.” 表示一个任意字符!. 表示愿意.数量词:规定前边一个字符出现次数的量词语法:min,max num

44、:固定长度 min,:至少min个,多了不行手机号:86s13578d9用户名:w8,16Day8比如 :验证座机号码:d3,4-d7,8特殊数量词:+ * ? 如果正文中出现+*?,都要用转义?:可有可无用?,如果有,最多只能出现一次*:也是表示可有可无,但不限制出现次数+:至少出现一次!不限制出现次数():分组:改变模式的匹配顺序比如:验证身份证号:d15(d20-9xX)?比如:验证手机号:(+86)?s*134578d9:整个正则表达式的开头,表示以xxx开始$:整个正则表达式的结尾,表示以xxx结束?=:预判,前一个字符之后,必须紧跟xxx?!:预判,前一个字符之后,必须不能跟xxx

45、课堂练习:中文姓名:u4e00-u9fa52,6电子邮件:w+w+(-w+)*(.w+)+其中:w+(-w+)* - -匹配域名一个以上的字母,后可跟“-字母”,可有可无(.w+)+  “.字母”组合至少出现1次。RegExp对象:专门封装一条正则表达式,提供使用正则表达式的常用API如何使用RegExp对象:1.创建 2.调用API如何创建正则表达式对象:var regExp=/正则表达式/ig;API:var boolcan=regExp.test(“被检查的字符串”)如果验证通过:返回true;否则返回false验证要求完整匹配!查找要求部分匹配!test方法默认:只要找到就返

46、回true!如何让test完全匹配:正则表达式前加,正则表达式后加$;查找:exec:查找关键字的位置,又能找到关键字的内容indexOf不支持正则,search支持正则,每次只能找1个match所有内容,但得不到位置!var arr=regExp.exec(”被查找的内容”)arr0:找到的关键字内容arr.index属性:找到的关键字的位置exec方法每次也只能找一个,但是每次自动修改regExp对象的lastIndext属性!regExp对象的lastIndex属性:表示下次开始匹配的位置!查找:仅判断有没有,或者仅查找位置:indexOf 支持正则表达式:search() 仅找所有关键

47、字的内容:match() 既找位置,又找内容:excc()从正则表达式匹配的内容中,取一部分:RegExp.$nn:正则表达式中第n个分组,其实就是第n个圆括号强调:分组从1开始必须通过RegExp类型,直接调用$n,不能使用对象!string对象与正则表达式str.replace(/正则表达式/ig,”替换值”)str.match(/正则表达式/ig) str.search() str.split(/正则表达式/)trim功能:去除字符串开始和结尾的空格。中间空格不去掉!对输入字符串的处理,多数要先清除开头和结尾空格,再处理IE8不支持trim()方法!自定义一个trim方法解决IE8不支持

48、的问题:String总结:所有API都无法修改原字符串,都会返回新字符串,所有stringAPI都需要用变量保存结果!str.length字符个数str=str.toLowerCase()/toUpperCase()查找关键字:var index=str.indexOf(“关键字”,from) var arr=str.match(/正则表达式/g)获得子字符串:var substr=str.slice(start,end+1); str.substring(start,end+1); str.substr(start,count);替换:str=str.replace(/正则表达式/g,”替换

49、值”);获得指定位置的字符:var char=str.charAt(index) strindex字符编码转码:var code=str.charCodeAt(index); var char=string.fromCharCode(code);RegExp对象总结:var reg=/正则表达式/ig;var reg=new RegExp(“正则表达式”,ig);其中所有都要改为!*验证str中是否包含reg匹配的关键字:var boolean=reg.test(str);*强调:完整验证,都需要在正则表达式前加后加$*同时查询所有关键字的内容和位置while(arr=reg.exec(str

50、)!=null) arr0- ->找到的一个关键字 arr.index- ->当前关键字的位置RegExp.$n:获得正则表达式中第n个分组(圆括号)匹配的子字符串Math类型:封装了所有数学计算有关的API不能new!Math.PI取整:Math.round(num)- ->四舍五入取整Math.ceil(num)- ->向上取整Math.floor(num)- ->向下取整var n=22.16Math.round(n)- ->22Math.ceil(n)- ->23Math.floor(n)- ->22Math.pow(底数,幂)Math.

51、sqrt(num)/开平方根!var n=9;Mat.pow(n,3);Math.sqrt(n)/3绝对值:Math.abs(num)Math.max/min(值1,值2)取数组中的最大值:var max=Math.max.apply(Math,arr)取数组中的最小值:var min=Math.min.apply(Math,arr)找出数组中的最大值,固定用法:把max改成min找出的是最小值随机数:Math.random():0<=r<1任意min-max:Math.floor(Math.random()*(max-min+1)+min)练习:随机生成4位验证码完整验证码代码如

52、下:var codes=;/数字:48-57for(var i=48;i<=57;codes.push(i),i+);/大写字母:65-90for(var i=65;i<=90;codes.push(i),i+);/小写字母:97-122for(var i=97;i<=122;codes.push(i),i+);function getCode()var arr=;for(var i=0;i<4;i+)/从0-61之间取随机数 var index=Math.floor(Math.random()*(61-0+1)+0); var char=String.fromCharCode(codesindex); arr.push(char);return arr.join("");function trim

温馨提示

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

评论

0/150

提交评论