1、javaScript入門,WEB開發(fā)Cola,Css,xhtml,javascript,1. 什么是JavaScript? 2. 嵌入和運(yùn)行方式(第一個JS實(shí)例) 3. 變量與數(shù)據(jù)類型 4. 函數(shù)、對像 5. 方法、屬性和事件 6. 用JS操作DOM 7. 用JS操作表單,目錄,JavaScript快速入門,什么是JavaScript ？ 嵌入HTML里的腳本語言 與java相似，但是是基于對像的編程語言 可以操作瀏覽器或HTML元素,JavaScript快速入門,嵌入和運(yùn)行方式(第一個JS實(shí)例) javaScript var a=1,b=2; document.write(a+b); ,Ja

2、vaScript快速入門,顯示結(jié)果,JavaScript快速入門,外嵌式 document.write(count(2,5); fun1(); test.js: function count(a,b) return a+b; Function fun1(),JavaScript快速入門,變量 var 變量名=數(shù)據(jù)的值 功能 例：var a=1; 區(qū)別java: int a=1; 未定義變量類型時默認(rèn)為undefined; 類型轉(zhuǎn)換parseInt, parseFloat ;,JavaScript快速入門,數(shù)據(jù)類型 主要（基本）數(shù)據(jù)類型是： 字符串 數(shù)值 布爾 復(fù)合（引用）數(shù)據(jù)類型是： 對象 數(shù)

3、組 特殊數(shù)據(jù)類型是： Null Undefined,JavaScript快速入門,控制程序的流程 單一選擇結(jié)構(gòu)（if）， 二路選擇結(jié)構(gòu)（if/else）， 內(nèi)聯(lián)三元運(yùn)算符 ? : 多路選擇結(jié)構(gòu)（switch）。 在循環(huán)的開頭測試表達(dá)式（while）， 在循環(huán)的末尾測試表達(dá)式（do/while）， 對對象的每個屬性都進(jìn)行操作（for/in）， 由計(jì)數(shù)器控制的循環(huán)（for）。,JavaScript快速入門,函數(shù) function funName() Fun體. function integerCheck(a, b, c) / 測試。 if ( (a*a) = (b*b) + (c*c) ) ret

4、urn true; return false; / 整數(shù)檢查函數(shù)的結(jié)尾。,JavaScript快速入門,作業(yè) 根據(jù)出生日期計(jì)算屬相,JavaScript快速入門,對像 定義1 var obj=key1:value2,key2:value2, fun1:function(), Fun2:function() 應(yīng)用 Obj.key1=“value”; 定義2 function Obj(x1,x2) this.a1=x1; this.a2=x2; this.fun1=function() this.fun2=function() 應(yīng)用 Var obj=new Obj(10,20); Obj.fun1

5、();,JavaScript快速入門,對像中添加屬性和方法 第一種對像 obj.pi = Math.PI; obj.area = ACirclesArea; 第二種對像 Ototype.pi = Math.PI; function ACirclesArea () return this.pi * this.r * this.r; Ototype.area = ACirclesArea;,JavaScript快速入門,DOM(文檔對象模型) 通過 JavaScript，您可以重構(gòu)整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項(xiàng)目。,父節(jié)點(diǎn),子節(jié)點(diǎn),同級節(jié)點(diǎn),屬

6、性/方法/事件,html元素操作- 屬性 方法 事件 內(nèi)部對像document 瀏覽器窗口中的 HTML 文檔 Var oEle=document.getElementById(sID); oEle.bgColor =“#FF00FF”; oEle.appendChild(elem) oEle.onclick=function(),JavaScript快速入門,Div里創(chuàng)建元素 var divEl=document.getElementById(divId); var btn=document.createElement(input); btn.type=“button”;/屬性 btn.va

7、lue=OK; btn.style.color=#”F00”;/樣式 divEl.appendChild(btn); ,JavaScript快速入門,得到元素 getElementById() getElementsByTagName() getElementsByName() 通過使用一個元素節(jié)點(diǎn)的 parentNode、firstChild 以及 lastChild 屬性 var x=document.getElementsByTagName(p); for (var i=0;ix.length;i+) / do something with each paragraph ,DOM操作,divEl.appendChild(btn); divEl.removeChild(x);