vip20190227js第七次课filtermap正则表达式课程代码js课件

第一章：javascript语法结构21.1字符集21.2 区分大小写21.3注释21.4 标识符和保留字21.5 命名习惯3第二章：类型、值和变量42.1 数字42.2文本42.3 布尔类型52.4 null和undefined52.5 类型转化62.6 变量作用域72.7 JS堆栈和拷贝8第三章：表达式和运算符8第四章：语句9第五章：对象105.1 创建对象10第一章：javascript语法结构1.1字符集Javascript是用unicode字符集编写的，unicode是ascii和latin-1的超集，并支持地球上几乎所有在用的语言。1.2 区分大小写Js是区分大小写的。1.3注释/ 单行注释/* *多行注释*/1.4 标识符和保留字标识符用来对变量和函数进行命名，js标识符必须是字母、下划线或美元符开头，后续的字符可以是字母、数字、下划线和美元符。保留字不能当做标识符或函数名。JavaScript 保留关键字JavaScript 对象、属性和方法您也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名：HTML 事件句柄除此之外，您还应该避免使用 HTML 事件句柄的名称作为 Javascript 的变量及函数名。实例：1.5 命名习惯类型前缀例子数组aaArray布尔值bbMale浮点ffTax函数fnfnSwap整型iiAge对象ooCar正则rerePattern字符串ssUniversity第二章：类型、值和变量2.1 数字2.1.1 整型2.1.2 浮点类型3.14.33336.02e23 /6.02*10231.4732e-32 /1.4732*10-322.2文本2.2.1 单引号，双引号在js程序中的字符串是由单引号或者双引号括起来的字符序列，由单引号定界的字符串中可以包含双引号，由双引号定界的字符串中也可以包含单引号。 var s=tesing; var s=name=myfrom; var s=youre right,it cantt be quote ;/如果想要里面的作为普通字符串输出则需要进行转义处理,转义方式 2.2.2 字符串的使用 var s=hello world; console.log(s.length);/获取长度 console.log(s.charAt(0);/ h 第一个字符 console.log(s.substring(1); console.log(s.substring(1,4);/ell 第24个字符 console.log(s.slice(1,4);/同上 console.log(s.slice(-3);/rld 最后三个字符 console.log(s.indexOf(l);/第一次出现的索引 console.log(s.lastIndexOf(l);/最后一次出现的索引 console.log(s.indexOf(l,3);/在位置3及之后首次出现字符l的位置 console.log(s.split(,);/变数组 console.log(s.toUpperCase();/变大写 console.log(s.toLowerCase();/变小写 console.log(s.replace(h,H);/替换 console.log(s0);/es5中，字符串可以当做只读数组 console.log(ss.length-1);2.3 布尔类型2.4 null和undefinedUndefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。var oValue;alert(oValue = undefined); /output true这段代码显示为true,代表oVlaue的值即为undefined，因为我们没有初始化它。alert(null = document.getElementById(notExistElement); 当页面上不存在id为notExistElement的DOM节点时，这段代码显示为true，因为我们尝试获取一个不存在的对象。 alert(typeof undefined); /output undefined alert(typeof null); /output object第一行代码很容易理解，undefined的类型为Undefined；第二行代码却让人疑惑，为什么null的类型又是Object了呢？其实这是JavaScript最初实现的一个错误，后来被ECMAScript沿用下来。在今天我们可以解释为，null即是一个不存在的对象的占位符，但是在实际编码时还是要注意这一特性。alert(null = undefined); /output true ECMAScript认为undefined是从null派生出来的，所以把它们定义为相等的。但是，如果在一些情况下，我们一定要区分这两个值，那应该怎么办呢？可以使用下面的两种方法。alert(null = undefined); /output false alert(typeof null = typeof undefined); /output false使用typeof方法在前面已经讲过，null与undefined的类型是不一样的，所以输出false。而=代表绝对等于，在这里null = undefined输出false。+ 做运算 做连接2.5 类型转化值转化为字符串.toString()数字Number()布尔Boolean(i)undefined报错NaNfalsenull“null”0Falsetrue“true”1false“false”0“”“”0false“1.2”(非空，数字)1.21.2true“one”(非空，非数字)oneNaNtrue0“0”0false-0“0”-0falseNaN“NaN”falseInfinity(存放无穷大的数值)Eg：var t1=1.7976931348623157E+10308document.write(t1) /结果Infinity“infinity”true- Infinity“-Infinity”true1“1”true (任意对象)true(任意数组)“”0truefunction()NaNtrue 2.6 JS堆栈和拷贝/chengguanhui/p/4737413.html第三章：表达式和运算符名称含义例子= = = = in左边为字符串或可转成字符串，右边为一个对象，左边的属性存在于右边对象，则返还okfunctionTest( ) varo=x:1,y:2;if(xino)/trueif(zino)/falseif(toStringino)/true,对象继承了toString方法instanceof左侧对象为右侧类的实例，则返回truevard=newData();if(dinstanceofDate)/true if(zinstanceofDate)/false&、 | 、 !+=、-=、*=、/=、%=?:typeofdeletefunctionTest( ) varo=x:1,y:2;deleteo.x;if(xino)/false第四章：语句名称含义例子if/else if/elseswitch case break/continue/returnforwhiledo whilefor infunctionTest( ) varo=x:2,y:3;for(iino)console.log(oi);try.catch.finally functionTest( ) tryvarn=Number(prompt(请输入一个正整数);varf=factorial(n);alert(n+!=+f);catch(ex)alert(ex);finallyaler(不管是否有异常，都显示)；functionfactorial(x) if(x1;x-)f*=x;returnf;withfunctionTest() / document.forms0.username.value = aa;/ document.forms0.pwd.value = aa;/ document.forms0.qq.value = aa;/ document.forms0.realname.value = aa;/ document.forms0.tel.value = aa;/简写方式with(document.forms0)username.value=aa;pwd.value=aa;qq.value=aa;tel.value=aa;realname.value=aa;第五章：数组5.1 创建数组 var empty=; var primes=2,3,4,5,6; var a=new Array();/等同 var a=new Array(10);/规定了长度 var a=new Array(2,3,4,5,6);/等同2,3,4,5,6 var a=1,2,3,4,6,7,8,34,3,2;/多维数组5.2 数组长度length属性5.3 数组元素删除和添加 var a=; a.push(zero);/添加一个,push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 a.push(one,two);/添加两个 delete a1; one in a;/false alert(a.pop();/pop() 方法用于删除并返回数组的最后一个元素。5.4 遍历数组 var a=2,3,4,5,6,7,8,2; var iSum=0; /方式一 for(var i=0;ia.length;i+) iSum+=ai; /方式二 a.forEach(function(i) iSum+=i; );5.5 数组方法5.6 数组类型Array.isArray();/true5.7 作为数组的字符串var s=”test”;s.charAt(0);/“t”s1;/”e”var a=1,2,3,4,6,7,8,34,3,2;/多维数组第六章：正则表达式6.1 正则表达式定义js 正则表达式用RegExp对象表示，可以使用RegExp()构造函数创建RegExp对象，不过RegExp对象更多是通过一种特殊的直接量语法来创建，正则表达式直接量定义为包含在一对斜杠/之间的字符，如：var pattern=/s$/等价于：var pattern=new RegExp(“s$”);Eg:在new的时候 d等 记得转义，就是多加一个斜线Var z=”5”;Var s = new RegExp(“d”);Console.log(s.test(z); /true6.2 字符类正则含义说明方括号里的任意字符不在方括号内的任意字符.换行符以外的任意字符w匹配所有的字母和数字等价于a-zA-Z0-9 W匹配所有除字母和数字以外的字符等价于a-zA-Z0-9 s空白符S空白符以外的d数字等价于0-9D数字以外的6.3 重复 正则含义说明n,m匹配至少出现n次，不超过m次n,至少出现n次n出现n次?出现0次或者1次+出现1次或多次*0次或多次如：/d2,4/ 匹配24个数字/w3d?/ 匹配三个单词和一个可选的数字/s+javas+/ 匹配前后哦带有一个或多个空格的字符串java/(*/ 匹配一个或多个非左括号的字符非贪婪重复“m,n?”、“m,?”、“?”、“*?”和“+?”。源字符串：aatest1bbtest2cc正则表达式一：.*匹配结果一：test1bbtest2正则表达式二：.*?匹配结果二：test1（这里指的是一次匹配结果，所以没包括test2）根据上面的例子，从匹配行为上分析一下，什是贪婪与非贪婪模式。正则表达式一采用的是贪婪模式，在匹配到第一个“”时已经可以使整个表达式匹配成功，但是由于采用的是贪婪模式，所以仍然要向右尝试匹配，查看是否还有更长的可以成功匹配的子串，匹配到第二个“”后，向右再没有可以成功匹配的子串，匹配结束，匹配结果为“test1bbtest2”。当然，实际的匹配过程并不是这样的，后面的匹配原理会详细介绍。仅从应用角度分析，可以这样认为，贪婪模式，就是在整个表达式匹配成功的前提下，尽可能多的匹配，也就是所谓的“贪婪”，通俗点讲，就是看到想要的，有多少就捡多少，除非再也没有想要的了。正则表达式二采用的是非贪婪模式，在匹配到第一个“”时使整个表达式匹配成功，由于采用的是非贪婪模式，所以结束匹配，不再向右尝试，匹配结果为“test1”。仅从应用角度分析，可以这样认为，非贪婪模式，就是在整个表达式匹配成功的前提下，尽可能少的匹配，也就是所谓的“非贪婪”，通俗点讲，就是找到一个想要的捡起来就行了，至于还有没有没捡的就不管了。 var pattern = /8(.*)8/;/ 使用了贪婪，匹配到了google8 8google8 8google var str = 8google8 8google8 8google8; document.write(str.replace(pattern, $1) /$1 google8 8google8 8google var pattern = /8(.*?)8/;/ 使用了贪婪，匹配到了google8 8google8 8google var str = 8google8 8google8 8google8; document.write(str.replace(pattern, $1) /$1只匹配到了第一个googlevar pattern = /8(.*?)8/g;/ 使用了贪婪，匹配到了google8 8google8 8google var str = 8google8 8google8 8google8; document.write(str.replace(pattern, $1)/匹配到了所有的google6.4 js正则标志/g /i /m的用法js正则标志/g,/i,/m说明/g 表示该表达式将用来在输入字符串中查找所有可能的匹配，返回的结果可以是多个。如果不加/g最多只会匹配一个/i 表示匹配的时候不区分大小写/m 表示多行匹配，什么是多行匹配呢？就是匹配换行符两端的潜在匹配。影响正则中的$符号：只能匹配 中间的内容$ Match（正则表达式）：匹配出正则表达式里的内容1. 2. str=tankZHang(231144)+3. tankying(155445);4. res=str.match(/tank/);/没有加/g5. alert(res);/显示一个tank6. 7. res=str.match(/tank/g);/加了/g8. alert(res);/显示为tank,tank9. 6.5 其他匹配?=n ?=n量词匹配任何其后紧挨着的指定字符串n的字符串。 /对其后紧跟 all 的 is 进行全局搜索： var str=is this all there is;var patt1=/is(?= all);/下面被标记的文本显示了表达式获得匹配的位置：Is this all there is?!n量词匹配其后没有紧接指定字符串n的任何字符串。（除紧挨着之外的所有的） /对其后没有紧跟 all 的 is 进行全局搜索：var str=is this all there is;var patt1=/is(?! all);/下面被标记的文本显示了表达式获得匹配的位置： Is this all there is行首行尾.$ 汉字，UTF-8编码u4e00-u9fa5 或字符： var pattern1 = /google|baidu|bing/;/或模式匹配 alert(pattern1.test(this is baidu)/true alert(pattern1.test(soso)/false代替字符： var pattern1 = /(.*)s(.*)/;/替换 var str = google baidu; alert(str.replace(pattern1, $2 $1);/baidu google var pattern1 = /8(.*)8/;/获取88之间的任意字符 var str = this is 8google8; document.write(str.replace(pattern1, $1)6.6 方法searchstringObject.search(regexp) 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。返回值stringObject 中第一个与 regexp 相匹配的子串的起始位置。注释：如果没有找到任何匹配的子串，则返回 -1。 var str = Visit W3School! document.write(str.search(/w3school/i)/结果6replacereplace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。var str=Visit Microsoft!document.write(str.replace(/Microsoft/, W3School) /结果Visit W3School!name = Doe, John;name.replace(/(w+)s*, s*(w+)/, $2 $1);/我们将把 Doe, John 转换为 John Doe 的形式：match()var str=1 plus 2 equal 3document.write(str.match(/d+/g) /1,2,3exec方法方法用于检索字符串中的正则表达式的匹配。和match方法不同，不管正则表达式是否具有全局修饰符g，exec()都会返回一样的数组，第七章：window对象7.1 计时器setIntervalsetTimeout7.2 浏览器的定位和导航window.location显示当前页面的url7.3 载入新的文档7.4 浏览历史 history.forward();/前进 history.back();/后退 history.go(-2);/相当于单击后退按钮两次 history.go(2);/相当于单击前进按钮1次7.5 对话框confirm alert prompt 7.6 打开和关闭窗口第八章：脚本化文档8.1 dom概述文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM8.2 选取文档元素 document.getElementById(d1);/通过id找 document.getElementsByName(a1);/通过name属性找 document.getElementsByTagName(p)0;/通过标签来找 document.getElementsByClassName(c1);/通过class名称来找8.3 文档结构和遍历 document.getElementById(item1).parentNode; /返回父节点 document.body.childNodes;/子节点集合 document.body.firstChild;/第一个子节点 document.body.lastChild;/最后一个子节点，如果没有子节点返回null document.getElementById(item1).nextSibling();/后面的那个兄弟节点 document.getElementById(item1).previousSibling();/前面的那个兄弟节点 document.getElementsByTagName(BUTTON)0.childNodes0.nodeValue;/nodeValue节点值 document.body.nodeName;/获得 body 元素的节点名称8.4 属性8.5 元素的内容innerHTML 设置或获取位于对象起始和结束标签内的 HTMLinnerText 设置或获取位于对象起始和结束标签内的文本outerHTML 设置或获取对象及其内容的HTML形式outerText 设置(包括标签)或获取(不包括标签)对象的文本 var innerHTML = document.getElementById(mydiv).innerHTML; var innerText = document.getElementById(mydiv).innerText; /Firefox不支持 var outerHTML = document.getElementById(mydiv).outerHTML; var outerText = document.getElementById(mydiv).outerText; /Firefox不支持 (innerHTML); /输出span1 span2 (innerText); /输出span1 span2 (outerHTML); /输出span1span2 (outerText); /输出span1 span2PS: innerHTML是符合W3C标准的属性，而innerText对Firefox是不支持的，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：(document.getElementById(mydiv).innerHTML.replace(/gim,); 8.6 创建、插入和删除节点8.6.1 创建节点var newnode=document.createTextNode(hello world);8.6.2 插入节点8.6.3 删除和替换节点window.onload = function () var oInp = document.getElementById(inp); var oBtn = document.getElementById(btn); var oUl1 = document.getElementById(ul1); var oP = document.getElementById(p1); var oBtn1 = document.getElementById(btn1); var oDiv = document.getElementById(div1); oBtn.onclick = function () var oLi = document.createElement(li); /动态创建li元素 oLi.innerHTML = oInp.value; /oUl1.appendChild(oLi); / 追加子元素 /在指定的元素之前插入新元素 if (oUl1.children0) /兼容IE oUl1.insertBefore(oLi, oUl1.children0); else oUl1.appendChild(oLi) var oA = document.createElement(a); oA.innerHTML = 删除; oA.href = javascript:; oA.onclick = function () oUl1.removeChild(this.parentNode); /删除节点 只能在父级下进行操作 oLi.appendChild(oA); oBtn1.onclick = function () / document.body.replaceChild(oP,oDiv); /p标签替换div oDiv.appendChild(oP); / 也可以操作已有的节点 把p标签添加到div里面 我是P标签 替换 我是div第九章：Canvas 9.1 创建画图环境、画矩形、划线 window.onload = function () var oC = document.getElementById(c1); var oGC = oC.getContext(2d);/绘图环境 /demo1：绘制实心方块，left/top/width/height 默认是黑色 /oGC.fillRect(100,50,200,100); /demo2：带边框的空心方块，边框默认为2px，要让它默认为1px，left,top多加0.5 /oGC.strokeRect(100,50,200,100); /demo3：oGC.fillStyle=#f00;/填充颜色 /oGC.fillRect(100,50,200,100); / oGC.strokeStyle=#00f; / oGC.lineWidth=10; / oGC.strokeRect(100,50,200,100); /demo4：边界绘制 /oGC.lineJoin = round;/圆角 / oGC.lineJoin = bevel;/斜角 / oGC.lineWidth=10; / oGC.strokeRect(100,50,200,100); /demo5：绘制路径 / oGC.beginPath(); / oGC.moveTo(100,100); / oGC.lineTo(200,200); / oGC.lineTo(300,200); / oGC.closePath();/闭合 / oGC.stroke();/默认是黑色的 / oGC.beginPath(); / oGC.moveTo(300, 300); / oGC.lineTo(200, 200); / oGC.lineTo(300, 200); / oGC.closePath();/闭合 / oGC.fill();/填充 /demo6：绘制矩形 / oGC.rect(20, 20, 150, 100); /oGC.fill();/填充 / oGC.stroke();/画边框 / oGC.clearRect(0,0,oC.width,oC.height);/清除 /demo7：保存状态 /没有save和restore那么oGC.fillStyle = red;对两个都有作用，有了后，只对第一个有作用，第二个没有作用 / oGC.save();/保存路径 / oGC.fillStyle = red; / oGC.beginPath(); / oGC.moveTo(100, 100); / oGC.lineTo(200, 200); / oGC.lineTo(300, 200); / oGC.closePath(); / oGC.fill(); / oGC.restore();/恢复路径 / oGC.beginPath(); / oGC.moveTo(300, 300); / oGC.lineTo(400, 400); / oGC.lineTo(500, 600); / oGC.closePath(); / oGC.fill(); /demo8：端点样式 / oGC.lineWidth=20; / oGC.lineCap=round;/圆角，如果设置为square则高度多出为宽一半的值 / oGC.moveTo(100,100); / oGC.lineTo(200,200); / oGC.stroke(); 9.2 画圆 var oC = document.getElementById(c1); var oGC = oC.getContext(2d);/绘图环境 /demo1：绘制圆形 /oGC.moveTo(200,200); /参数：x,y起始位置，半径，起始弧度（角度*Math.PI/180）, 旋转方向 / oGC.arc(200,200,150,0,90*Math.PI/180,false);/0度在圆的最右边，最上面为-90度，最下面为正90度 / oGC.stroke(); /demo2：画钟表 function toDraw() var oDate = new Date(); var oHours = oDate.getHours(); var oMin = oDate.getMinutes(); var oSen = oDate.getSeconds(); var oHoursValue = (-90 + oHours * 30 + oMin / 2) * Math.PI / 180; var oMinValue = (-90 + oMin * 6) * Math.PI / 180; var oSenValue = (-90 + oSen * 6) * Math.PI / 180; var x = 200; var y = 200; var r = 150; oGC.clearRect(0, 0, oC.width, oC.height); oGC.moveTo(x, y); oGC.arc(x, y, r, 0, 6 * Math.PI / 180, false); oGC.beginPath(); for (var i = 0; i 60; i+) oGC.moveTo(x, y); oGC.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false); oGC.closePath(); oGC.stroke(); oGC.fillStyle = #fff; oGC.beginPath(); oGC.moveTo(x, y); oGC.arc(x, y, r * 19 / 20, 0, 360 * Math.PI / 180, false); oGC.closePath(); oGC.fill(); oGC.lineWidth = 3; oGC.beginPath(); for (var i = 0; i 12; i+) oGC.moveTo(x, y); oGC.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false); oGC.closePath(); oGC.stroke(); oGC.fillStyle = #fff; oGC.beginPath(); oGC.moveTo(x, y); oGC.arc(x, y, r * 18 / 20, 0, 360 * Math.PI / 180, false); oGC.closePath(); oGC.fill(); oGC.lineWidth = 5; oGC.beginPath(); oGC.moveTo(x, y); oGC.arc(x, y, r * 8 / 20, oHoursValue, oHoursValue, false); oGC.closePath(); oGC.stroke(); oGC.lineWidth = 3; oGC.beginPath(); oGC.moveTo(x, y)