vip20190213css第十一次课css浏览器兼容问题项目规范创建流程课程代码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, nit cantt be quote ;/换行输出 则需要进行转义处理JavaScript转义符转义序列字符b退格f走纸换页n换行r回车t横向跳格 (Ctrl-I)单引号双引号反斜杠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:1,y:2;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 系统对象本地对象（常用对象）：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error内置对象（静态对象）：Golobal、Math宿主对象（由浏览器提供的对象）DOM -documentBOM-window第五章：数组6.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;/多维数组6.2 数组长度length属性6.3 数组元素删除和添加 var a=; a.push(zero);/添加一个,push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 a.push(one,two);/添加两个 delete a1; one in a;/false alert(a.pop();/pop() 方法用于删除并返回数组的最后一个元素。6.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; );6.5 数组方法6.6 数组类型Array.isArray();/true6.7 作为数组的字符串var s=”test”;s.charAt(0);/“t”s1;/”e”第六章：window对象8.1 计时器setIntervalsetTimeout8.2 浏览器的定位和导航window.location显示当前页面的url8.3 载入新的文档8.4 浏览历史 history.forward();/前进 history.back();/后退 history.go(-2);/相当于单击后退按钮两次 history.go(2);/相当于单击前进按钮1次8.5 对话框confirm alert prompt 8.6 打开和关闭窗口第七章：脚本化文档9.1 dom概述文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM9.2 选取文档元素 document.getElementById(d1);/通过id找 document.getElementsByName(a1);/通过name属性找 document.getElementsByTagName(p)0;/通过标签来找 document.getElementsByClassName(c1);/通过class名称来找9.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 元素的节点名称9.4 属性9.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,); 9.6 创建、插入和删除节点9.6.1 创建节点var newnode=document.createTextNode(hello world);9.6.2 插入节点9.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 10.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(); 10.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); oGC.arc(x, y, r * 13 / 20, oMinValue, oMinValue, false); oGC.closePath(); oGC.stroke(); oGC.lineWidth = 1; oGC.beginPath(); oGC.moveTo(x, y); oGC.arc(x, y, r * 17 / 20, oSenValue, oSenValue, false); oGC.closePath(); oGC.stroke(); setInterval(toDraw, 1000); toDraw();10.3 颜色、样式、阴影、渐变window.onload = function () var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);/demo1：填充矩形/ctx.fillStyle = #0f0;/ctx.fillRect(20, 20, 100, 100);/demo2：矩形框/ctx.strokeStyle = #0000ff;/ctx.strokeRect(20, 20, 150, 100);/demo3 阴影/ctx.shadowBlur = 20;/模糊级数是 20/ctx.shadowOffsetX = 20;/带有向右偏移 20 像素的阴影/ctx.shadowOffsetY = 20;/带有向下偏移 20 像素的阴影/ctx.shadowColor = black;/ctx.fillStyle = blue;/ctx.fillRect(20, 20, 100, 80);/demo4：线性渐变/var grd = ctx.createLinearGradient(0, 0, 170, 0);/渐变开始点的 x 坐标，渐变开始点的 y 坐标，渐变结束点的 x 坐标，渐变结束点的 y 坐标/grd.addColorStop(0, black);/grd.addColorStop(0.5, red);/grd.addColorStop(1, white);/ctx.fillStyle = grd;/ctx.fillRect(20, 20, 150, 100);/demo5：图片重复/var img = document.getElementById(lamp);/var pat = ctx.createPattern(img, repeat);/repeat默认，repeat-x，repeat-y，no-repeat/ctx.rect(0, 0, 150, 100);/ctx.fillStyle = pat;/ctx.fill();/demo6：径向渐变/var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);/渐变的开始圆的 x 坐标,渐变的开始圆的 y 坐标,开始圆的半径,渐变的结束圆的 x 坐标,渐变的结束圆的 y 坐标,结束圆的半径/grd.addColorStop(0, red);/grd.addColorStop(1, white);/ctx.fillStyle = grd;/ctx.fillRect(10, 10, 150, 100);10.4 路径方法var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);/demo1：剪切/ctx.rect(50, 20, 200, 120);/ctx.stroke();/ctx.clip();/ 在 clip() 之后绘制绿色矩形/ctx.fillStyle = green;/ctx.fillRect(0, 0, 150, 100);/demo2：绘制一条二次贝塞尔曲线var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.moveTo(20, 20);ctx.quadraticCurveTo(20, 100, 200, 20);/贝塞尔控制点的 x 坐标,贝塞尔控制点的 y 坐标,结束点的 x 坐标,结束点的 y 坐标ctx.stroke();/demo3：绘制一条三次贝塞尔曲线var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.moveTo(20, 20);ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);/第一个贝塞尔控制点的 x 坐标,第一个贝塞尔控制点的 y 坐标,第二个贝塞尔控制点的 x 坐标,第二个贝塞尔控制点的 y 坐标,结束点的 x 坐标,结束点的 y 坐标ctx.stroke();/在画布上创建介于两个切线之间的弧：var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.beginPath();ctx.moveTo(20, 20); / 创建开始点ctx.lineTo(100, 20); / 创建水平线ctx.arcTo(150, 20, 150, 70, 50); / 创建弧, 弧的起点的 x 坐标, 弧的起点的 y 坐标, 弧的终点的 x 坐标, 弧的终点的 y 坐标, 弧的半径ctx.lineTo(150, 120); / 创建垂直线ctx.stroke(); / 进行绘制/绘制一个矩形，如果点 20,50 位于当前路径中：var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.rect(20, 20, 150, 100);if (ctx.isPointInPath(20, 50) ctx.stroke();10.5 转换 var c = document.getElementById(myCanvas); var ctx = c.getContext(2d); /demo1：放大或者缩小 /ctx.strokeRect(5, 5, 25, 15); /ctx.scale(2, 2);/绘制矩形，放大到 200%，然后再次绘制矩形 /ctx.strokeRect(5, 5, 25, 15); /demo2：旋转 /ctx.rotate(20 * Math.PI / 180);/旋转角度，以弧度计,如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。 /ctx.fillRect(50, 20, 100, 50); /demo3：位移 /ctx.fillRect(10, 10, 100, 50); /ctx.translate(70, 70);/添加到水平坐标（x）上的值,添加到垂直坐标（y）上的值 /ctx.fillRect(10, 10, 100, 50); /demo4：替换绘图的当前转换矩阵 ctx.fillStyle = yellow; ctx.fillRect(0, 0, 250, 100) ctx.transform(1, 0.5, -0.5, 1, 30, 10);/transform() 允许缩放、旋转、移动并倾斜当前的环境。 /水平缩放绘图,水平倾斜绘图,垂直倾斜绘图,垂直缩放绘图,水平移动绘图,垂直移动绘图 ctx.fillStyle = red; ctx.fillRect(0, 0, 250, 100); ctx.transform(1, 0.5