, ,教學目的：了解什么是表單 了解表單的屬性 掌握各種按鈕的用法 掌握各種文本框的類型 教學重點：了解表單的屬性 掌握各種按鈕的用法 掌握各種文本框的類型 教學難點：掌握各種按鈕的用法 掌握各種文本框的類型,實際就是在Title欄中滾動顯示內容，即根據時間的不同，頁面的Title顯示不同的內容,了解JavaScript概述 JavaScript的特點,1.JavaScript概述,是一種基于對象和事件驅動的客戶端腳本語言 ECMAScript：語言的基本語法和對象 DOM：作用于網頁內容的方法和接口 BOM：與瀏覽器交互的方法和接口,JavaScript語言概況,什么是JavaScript,向HTML頁面添加交互行為 一種腳本語言 數行可執行計算機代碼組成 直接嵌入HTML頁面 一種解釋性語言 無需購買即可使用,JavaScript功能,為HTML設計師提供了一種編程工具 可以將動態的文本放入HTML頁面 可以對事件作出響應 可以讀取和改變HTML元素內容 驗證數據 檢測訪問者的瀏覽器 創建cookies,JavaScript應用,客戶端應用 服務器端應用,第一個JavaScript程序, alert(“歡迎進入這個美妙的JavaScript世界！“); alert(“今后我們將共同學習JavaScript知識！“); ,顯示效果:,這段程序一共彈出兩個消息窗口，第一個為：,點擊第一個消息彈出窗口的“確定”按鈕后，彈出第二個窗口，如下：,JavaScript文件的特點,是HTML文檔，是標準的HTML格式 程序代碼是可用字處理軟件瀏覽的文本，出現在HTML相關區域 之間可加入腳本 寫成type=“text/javascript“ alert()窗口對象方法 ，常用調試程序 通過標識說明 單行注釋（/）,JavaScript的特點,簡單性 動態性 基于對象的語言 安全性 跨平臺性 節省CGI的交互時間,JavaScript語法,ECMAScript變量命名 ECMAScript變量類型 每行結尾的分號最好寫上 ECMAScript注釋 括號表示代碼塊, document.write(“這個例子是讓大家對Document對象有一個初步“+ “了解!“) document.title =設置文檔標題等價于HTML的標簽 document.bgColor=“#FFFF66“ document.fgColor = “#FF0000“ document.linkColor = “#0000CC“ document.vlinkColor = “#0FFF66“ document.write(“),document.write(“document.write()添加文字的顯示樣式。“) document.write(“) 您還可以找到 MSDN上有關 ASP.NET 的文檔。 ,3.Javascript函數,函數是一組可以隨時隨地運行的語句 函數是ECMAScript的核心 基本語法 function functionName(arg0,arg1,argN) statements ,函數調用,可以通過其名字加上括號中的參數進行調用 function sayHi(sName, sMessage) alert(“Hello “ + sName + sMessage); sayHi(“David“, “ Nice to meet you!“); ,返回函數值,函數確實有值，但不必明確地聲明 使用return運算符后面跟上要返回的值 function sum(iNum1, iNum2) return iNum1 + iNum2; ,案例步驟, var text=document.title var timerID function newtext() clearTimeout(timerID) document.title=text.substring(1,text.length)+text.substring(0,1) text=document.title.substring(0,text.length) timerID = setTimeout(“newtext()“, 100) newtext() ,顯示效果,在JavaScript中也有基本的運算，這個案例中就以水波文字的效果來學習運算。,JavaScript中的運算符是可以完成操作的一系列符號。有+、-、*、/、!=、=、！、|、|、+=,JavaScrip運算,算術運算符 + 、+ 、-、-、*、/、%、+= 邏輯運算符 &、|、！、?: 比較運算符 =、!=、=、=,案例步驟 水波文字效果 , var step=3; var xstep=0; var msg=飛流直下三千尺，疑是銀河落九天！; water.innerHTML=msg function wave() document.all.water.style.filter=wave(freq=3,strength=5,+phase=+xstep+, lightstrength=45, add=0, enabled=1); xstep+=step; TIMER=setTimeout(wave(),10); ,顯示效果,在JavaScript中我們也會用到程序控制語句，像其它的編程語言一樣，這里我們用在頁面中輸入的年月日是否正確來學習控制語句。,程序控制語句可以使得整個程序減小混亂。,JavaScript程序語句IF語句,if (表達式) 語句段1； else 語句段2； ,JavaScript程序語句IF應用, Javascript程序控制流IF語句應用 var activedate=new Date(); activehour=activedate.getHours() if (activehour=6 & activehour“) else if(activehour=12 & activehour“) else if(activehour=18 & activehour“) else if(activehour=24 | activehour“) ,JavaScript程序語句FOR循環,for (初始化；條件；增量) 語句集,JavaScript程序語句FOR循環應用, Javascript程序FOR語句應用 var i=1; var j=1; for (i=1;i“); ,JavaScript程序語句while循環語句,while （條件） 語句集；,JavaScript程序語句while循環語句應用, Javascript程序while語句應用 var i=1; var j=1; while (i“); i+; ,JavaScript程序語句DO WHILE,do 語句集； while （條件）；,JavaScript程序語句DO WHILE應用, Javascript程序dowhile語句應用 var i=1; var j=1; do j=1; do document.write(i+“*“+j+“=“+ (i*j)+“ “); j+; while(j“); i+; while(i ,JavaScript程序語句 Break和Continue,break命令可以終止循環的運行