vip20190220js第四次課三目運算符與或非堆棧傳值傳址if語句課程代碼js課件

第一章：javascript語法結(jié)構(gòu)21.1字符集21.2 區(qū)分大小寫21.3注釋21.4 標識符和保留字21.5 命名習慣3第二章：類型、值和變量42.1 數(shù)字42.2文本42.3 布爾類型52.4 null和undefined52.5 類型轉(zhuǎn)化62.6 變量作用域72.7 JS堆棧和拷貝8第三章：表達式和運算符8第四章：語句9第五章：對象105.1 創(chuàng)建對象10第一章：javascript語法結(jié)構(gòu)1.1字符集Javascript是用unicode字符集編寫的，unicode是ascii和latin-1的超集，并支持地球上幾乎所有在用的語言。1.2 區(qū)分大小寫Js是區(qū)分大小寫的。1.3注釋/ 單行注釋/* *多行注釋*/1.4 標識符和保留字標識符用來對變量和函數(shù)進行命名，js標識符必須是字母、下劃線或美元符開頭，后續(xù)的字符可以是字母、數(shù)字、下劃線和美元符。保留字不能當做標識符或函數(shù)名。JavaScript 保留關鍵字JavaScript 對象、屬性和方法您也應該避免使用 JavaScript 內(nèi)置的對象、屬性和方法的名稱作為 Javascript 的變量或函數(shù)名：HTML 事件句柄除此之外，您還應該避免使用 HTML 事件句柄的名稱作為 Javascript 的變量及函數(shù)名。實例：1.5 命名習慣類型前綴例子數(shù)組aaArray布爾值bbMale浮點ffTax函數(shù)fnfnSwap整型iiAge對象ooCar正則rerePattern字符串ssUniversity第二章：類型、值和變量2.1 數(shù)字2.1.1 整型 2.1.2 浮點類型 3.14.33336.02e23 /6.02*1023 1.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 ;/換行輸出 則需要進行轉(zhuǎn)義處理JavaScript轉(zhuǎn)義符轉(zhuǎn)義序列字符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);/第一次出現(xiàn)的索引 console.log(s.lastIndexOf(l);/最后一次出現(xiàn)的索引 console.log(s.indexOf(l,3);/在位置3及之后首次出現(xiàn)字符l的位置 console.log(s.split(,);/變數(shù)組 console.log(s.toUpperCase();/變大寫 console.log(s.toLowerCase();/變小寫 console.log(s.replace(h,H);/替換 console.log(s0);/es5中，字符串可以當做只讀數(shù)組 console.log(ss.length-1);2.3 布爾類型2.4 null和undefinedUndefined類型只有一個值，即undefined。當聲明的變量還未被初始化時，變量的默認值為undefined。Null類型也只有一個值，即null。null用來表示尚未存在的對象，常用來表示函數(shù)企圖返回一個不存在的對象。var oValue;alert(oValue = undefined); /output true這段代碼顯示為true,代表oVlaue的值即為undefined，因為我們沒有初始化它。alert(null = document.getElementById(notExistElement); 當頁面上不存在id為notExistElement的DOM節(jié)點時，這段代碼顯示為true，因為我們嘗試獲取一個不存在的對象。 alert(typeof undefined); /output undefined alert(typeof null); /output object第一行代碼很容易理解，undefined的類型為Undefined；第二行代碼卻讓人疑惑，為什么null的類型又是Object了呢？其實這是JavaScript最初實現(xiàn)的一個錯誤，后來被ECMAScript沿用下來。在今天我們可以解釋為，null即是一個不存在的對象的占位符，但是在實際編碼時還是要注意這一特性。alert(null = undefined); /output true ECMAScript認為undefined是從null派生出來的，所以把它們定義為相等的。但是，如果在一些情況下，我們一定要區(qū)分這兩個值，那應該怎么辦呢？可以使用下面的兩種方法。alert(null = undefined); /output false alert(typeof null = typeof undefined); /output false使用typeof方法在前面已經(jīng)講過，null與undefined的類型是不一樣的，所以輸出false。而=代表絕對等于，在這里null = undefined輸出false。+ 做運算 做連接2.5 類型轉(zhuǎn)化值轉(zhuǎn)化為字符串.toString()數(shù)字Number()布爾Boolean()undefined報錯NaNfalsenull“null”0Falsetrue“true”1false“false”0“”“”0false“1.2”(非空，數(shù)字)1.21.2true“one”(非空，非數(shù)字)oneNaNtrue0“0”0false-0“0”-0falseNaN“NaN”falseInfinity(存放無窮大的數(shù)值)Eg：var t1=1.7976931348623157E+10308document.write(t1) /結(jié)果Infinity“infinity”true- Infinity“-Infinity”true1“1”true (任意對象)true(任意數(shù)組)“”0truefunction()NaNtrue 2.6 JS堆棧和拷貝/chengguanhui/p/4737413.html第三章：表達式和運算符名稱含義例子= = = = in左邊為字符串或可轉(zhuǎn)成字符串，右邊為一個對象，左邊的屬性存在于右邊對象，則返還okfunctionTest( ) varo=x:1,y:2;if(xino)/trueif(zino)/falseif(toStringino)/true,對象繼承了toString方法instanceof左側(cè)對象為右側(cè)類的實例，則返回truevard=newDate();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(請輸入一個正整數(shù));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;第五章：系統(tǒng)對象5.1 系統(tǒng)對象本地對象（常用對象）：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error內(nèi)置對象（靜態(tài)對象）：Golobal、Math宿主對象（由瀏覽器提供的對象）DOM -documentBOM-window第五章：數(shù)組6.1 創(chuàng)建數(shù)組 var empty=; var primes=2,3,4,5,6; var a=new Array();/等同 var a=new Array(10);/規(guī)定了長度 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;/多維數(shù)組6.2 數(shù)組長度length屬性6.3 數(shù)組元素刪除和添加 var a=; a.push(zero);/添加一個,push() 方法可向數(shù)組的末尾添加一個或多個元素，并返回新的長度。 a.push(one,two);/添加兩個 delete a1; one in a;/false alert(a.pop();/pop() 方法用于刪除并返回數(shù)組的最后一個元素。6.4 遍歷數(shù)組 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 數(shù)組方法6.6 數(shù)組類型Array.isArray();/true6.7 作為數(shù)組的字符串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組織推薦的處理可擴展標志語言的標準編程接口。在網(wǎng)頁上，組織頁面（或文檔）的對象被組織在一個樹形結(jié)構(gòu)中，用來表示文檔中對象的標準模型就稱為DOM9.2 選取文檔元素 document.getElementById(d1);/通過id找 document.getElementsByName(a1);/通過name屬性找 document.getElementsByTagName(p)0;/通過標簽來找 document.getElementsByClassName(c1);/通過class名稱來找9.3 文檔結(jié)構(gòu)和遍歷 document.getElementById(item1).parentNode; /返回父節(jié)點 document.body.childNodes;/子節(jié)點集合 document.body.firstChild;/第一個子節(jié)點 document.body.lastChild;/最后一個子節(jié)點，如果沒有子節(jié)點返回null document.getElementById(item1).nextSibling();/后面的那個兄弟節(jié)點 document.getElementById(item1).previousSibling();/前面的那個兄弟節(jié)點 document.getElementsByTagName(BUTTON)0.childNodes0.nodeValue;/nodeValue節(jié)點值 document.body.nodeName;/獲得 body 元素的節(jié)點名稱9.4 屬性9.5 元素的內(nèi)容innerHTML 設置或獲取位于對象起始和結(jié)束標簽內(nèi)的 HTMLinnerText 設置或獲取位于對象起始和結(jié)束標簽內(nèi)的文本outerHTML 設置或獲取對象及其內(nèi)容的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標簽的內(nèi)容，可以使用innerHTML取得包含HTML標簽的內(nèi)容后，再用正則表達式去除HTML標簽，下面是一個簡單的符合W3C標準的示例：(document.getElementById(mydiv).innerHTML.replace(/gim,); 9.6 創(chuàng)建、插入和刪除節(jié)點9.6.1 創(chuàng)建節(jié)點var newnode=document.createTextNode(hello world);9.6.2 插入節(jié)點9.6.3 刪除和替換節(jié)點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); /動態(tài)創(chuàng)建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); /刪除節(jié)點 只能在父級下進行操作 oLi.appendChild(oA); oBtn1.onclick = function () / document.body.replaceChild(oP,oDiv); /p標簽替換div oDiv.appendChild(oP); / 也可以操作已有的節(jié)點 把p標簽添加到div里面 我是P標簽 替換 我是div第八章：Canvas 10.1 創(chuàng)建畫圖環(huán)境、畫矩形、劃線 window.onload = function () var oC = document.getElementById(c1); var oGC = oC.getContext(2d);/繪圖環(huán)境 /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：保存狀態(tài) /沒有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);/繪圖環(huán)境 /demo1：繪制圓形 /oGC.moveTo(200,200); /參數(shù)：x,y起始位置，半徑，起始弧度（角度*Math.PI/180）, 旋轉(zhuǎn)方向 / 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;/模糊級數(shù)是 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 坐標，漸變結(jié)束點的 x 坐標，漸變結(jié)束點的 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 坐標,開始圓的半徑,漸變的結(jié)束圓的 x 坐標,漸變的結(jié)束圓的 y 坐標,結(jié)束圓的半徑/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 坐標,結(jié)束點的 x 坐標,結(jié)束點的 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 坐標,結(jié)束點的 x 坐標,結(jié)束點的 y 坐標ctx.stroke();/在畫布上創(chuàng)建介于兩個切線之間的?。簐ar c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.beginPath();ctx.moveTo(20, 20); / 創(chuàng)建開始點ctx.lineTo(100, 20); / 創(chuàng)建水平線ctx.arcTo(150, 20, 150, 70, 50); / 創(chuàng)建弧, 弧的起點的 x 坐標, 弧的起點的 y 坐標, 弧的終點的 x 坐標, 弧的終點的 y 坐標, 弧的半徑ctx.lineTo(150, 120); / 創(chuàng)建垂直線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 轉(zhuǎn)換 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：旋轉(zhuǎn) /ctx.rotate(20 * Math.PI / 180);/旋轉(zhuǎn)角度，以弧度計,如需將角度轉(zhuǎn)換為弧度，請使用 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：替換繪圖的當前轉(zhuǎn)換矩陣 ctx.fillStyle = yellow; ctx.fillRect(0, 0, 250, 100) ctx.transform(1, 0.5, -0.5, 1, 30, 10);/transform() 允許縮放、旋轉(zhuǎn)、移動并傾斜當前的環(huán)境。 /水平縮放繪圖,水平傾斜繪圖,垂直傾斜繪圖,垂直縮放繪圖,水平移動繪圖,垂直移動繪圖 ctx.fillStyle = red; ctx.fillRect(0, 0, 250, 100); ctx.tr