項目十七 Javascript基礎
Javascript是一種新的描述語言，此一語言可以被嵌入HTML的文件之中。透過 Javascript可以做到回應使用者的需求事件 (如：form的輸入)而不用任何的網路來回傳輸資料，所以當一位使用者輸入一項資料時，它不用經過傳給服務端(server)處理，再傳回來的過程，而直接可以被客戶端(client)的應用程式所處理。你也可以想像成有一個可執行程式在你的客端上執行一樣。
教學目標
1. 理解什麼是JavaScript；
2. 熟悉JavaScript的常見字符類型
3. 瞭解什麼是賦值以及運算
4. 熟悉JavaScript函數以及事件
實踐目標
1、 能運用JS進行簡單的數學運算
2、 掌握函數的運用方法
知識儲備
課前預習
1、請預習本章內容，瞭解下面英文單詞的意義及作用
JavaScript：_______________________________________
Null：_________________________________
String：_____________________________________________
2、請簡要回答以下問題：
1）JavaScript函數語法是什麼？
2）函數中的返回值用什麼來返回？
一、瞭解什麼是JavaScript
1、JavaScript簡介
Javascript 是 Microsoft 公司對 ECMA 262 語言規範的一種實現。Javascript 完全實現了該語言規範，並且提供了一些利用 Microsoft Internet Explorer 的功能的增強特性。
首先要弄清Javascript 到底是什麼？Javascript是一種描述性的腳本語言(Script Language)，它可以非常自由地被嵌入到HTML 的文件之中。使用Javascript 可以做什麼呢？它的作用很簡單，就是對網頁瀏覽者當前所觸發的事件進行處理或對網頁進行初始化工作。它是事先在網頁中編寫好代碼(或叫做"腳本")，然後此代碼伴隨HTML文件一起傳送到客戶端的瀏覽器上，由瀏覽器對這些代碼進行解釋執行，而其執行期間並沒有勞駕服務器幫忙，這樣就減輕了服務器的負擔。
Javascript 是一種解釋型的、基於對象的腳本語言。儘管與諸如 C++ 和 Java 這樣成熟的面向對象的語言相比，Javascript 的功能要弱一些，但對於它的預期用途而言，Javascript 的功能已經足夠大了。
Javascript 不是任何其他語言的精簡版（例如，它只是與 Java 有點模糊而間接的關係），也不是任何事物的簡化。不過，它有其侷限性。例如，您不能使用該語言來編寫獨立運行的應用程序，並且該語言讀寫文件的功能也很少。此外，Javascript 腳本只能在某個解釋器上運行，該解釋器可以是 Web 服務器，也可以是 Web 瀏覽器。
Javascript 是一種寬鬆類型的語言。這意味著您不必顯式定義變量的數據類型。事實上您無法在Javascript 上明確地定義數據類型。此外，在大多數情況下，Javascript 將根據需要自動進行轉換。例如，如果試圖將一個數值添加到由文本組成的某項（一個字符串），該數值將被轉換為文本。
2、JavaScript嵌入方式
1）、內部引用
通過 標記嵌入JavaScript，這是最常用也是最簡便的一種引用方式，可以在HTML代碼的任何位置嵌入。
2)、外部引用
通過引用HTML文件的方式加載JavaScript文件，這種方式可以使HTML代碼更簡潔，方便代碼複用。
3、使用Script標籤
HTML 源代碼：
代碼解析：
1） 第3行:插入一段JS腳本語言，輸出"歡迎來到Javascript世界"
2） 第7行：定義一個段落標記，段落中的文本內容為"盡情享受學習的快樂"
效果預覽：
圖：Javascript 基礎
4、聲明變量
與代數一樣，JavaScript 變量可用於存放值（比如 x=2）和表達式（比如 z=x+y）。
變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）。
1）變量必須以字母開頭
2）變量也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）
3）變量名稱對大小寫敏感（y 和 Y 是不同的變量）
聲明變量： var a;
"var" － 用於聲明變量的關鍵字
"a" － 變量名
賦值： a = 10;
聲明多個變量：var x, y, z = 10;
HTML 源代碼：
代碼解析：
1） 第3-7行:插入一段JS腳本語言，聲明一個變量X，並且給X賦值為10，聲明一個變量X，並給X賦值為15，聲明一個變量Y，並給Y賦值為20；
2） 第7行：輸出X+Y的值；
效果預覽：
圖：聲明變量
二、JavaScript數據類型
1、數據類型
Javascript是一種泛類型的語言，泛類型意味著不必顯式定義變量的數據類型。事實上，在Javascript上無法明確地定義數據類型。而只能通過var語句顯示聲明變量：var myvar;或這樣隱式聲明變量:myvar=myvarValue（省略var，在聲明的同時初始化）。
圖：數據類型
2、運算符
Javascript 具有全範圍的運算符,包括算術、邏輯、位以及賦值運算符。此外還有其他一些運算符。
1）數學運算符
算術運算符用來執行簡單的算術運算。
2）邏輯運算符
3）賦值運算符
注意：賦值(=)和等於(==)的區別。
三、Javascript 函數
函數的概念：函數就是有一個或多個代碼塊組成的，即"函數是可以向其傳遞參數並能夠返回值的可重複使用的代碼塊"，如果把函數看成是一臺機器，例如攪拌機，它有輸入和輸出兩種狀態，當它的輸入不同時其輸出也會不同，
輸入一個蘋果，則輸出蘋果汁。
輸入一個香蕉，則輸出香蕉汁。
向機器輸入的蘋果，香蕉對應於向函數傳遞的參數，輸入不同的內容得到不同的結果，對於攪拌機內部的工作原理可以不用瞭解，只要知道輸入和輸出相對應這樣一個結果就可以了。
1、函數的定義
Javascript有兩種函數：一種是語言內部事先定義好的函數叫預定義函數，另一種是自己定義的函數。
Javascript 語法格式：
說明：
1.func_name 新函數的名稱。
2.parameter 一個標識符，表示要傳遞給函數的參數。參數的作用是在函數調用時傳送變量.
3.statement(s) 為function的函數體,可以是任何Javascript 語句塊。
2、函數的調用
調用函數時在函數名後面加圓括號就可以了，通常函數調用語句放在HTML語言的一些屬性中。調用函數又分為：帶變量參數的函數和不帶參數的函數。
下面介紹不帶參數的函數：
Javascript 源代碼：
效果預覽：
說明：
調用函數直接用用函數名後面加上圓括號() ，用在 function 之後和函數結尾的大括號是不能省去的，就算整個函數只有一句。函數名與變量名有一樣的起名規定，也就是隻包含字母數字下劃線、字母排頭、不能與保留字重複等。參數集可有可無，但括號就一定要有。
下面介紹帶參數的函數：
Javascript 源代碼：
效果預覽：
說明：
參數是函數外部向函數內部傳遞信息的橋樑，帶參數的函數調用，需指明參數值，並與函數定義的參數對應。
3、函數的返回值
Javascript 中函數的返回值用return將值返回；
Javascript 語法格式：
說明：
1.語法，return[expression]
2.參數，expression 要作為函數值計算並返回的字符串、數字、數組或對象。
3.返回，如果提供了 expression 參數，則返回計算的結果。
Javascript 源代碼：
效果預覽：
說明：指定由函數返回的值。return 動作計算 expression 並將結果作為它在其中執行的函數的值返回。return 動作導致函數停止運行，並用返回值代替函數。如果單獨使用 return 語句，則它返回 null。您不能返回多個值。如果嘗試返回多個值，則將只返回最後一個值。
四、Javascript 中的事件
用戶可以通過多種方式與瀏覽器載入的頁面進行交互，而事件是交互的橋樑。Web應用程序開發者通過Javascript腳本內置的和自定義的事件來響應用戶的動作，就可以開發出更有交互性，動態性的頁面。
Javascript事件可以分為下面幾種不同類別。最常用的類別就是鼠標交互事件，然後是鍵盤和表單事件。這裡我們主要介紹鼠標事件。鼠標事件分為兩種，追蹤鼠標當前位置的事件（mouseover、mouseout）；追蹤鼠標在被單擊的時間（mouseup、mousedown、click）。
1、 click事件
Click單擊事件是常用的事件之一，此事件是在一個對象上按下然後釋放一個鼠標按鈕時發生，它也會發生在一個控件的值改變時。這裡的單擊是指完成按下鼠標鍵並釋放著一個完整的過程後產生的事件。使用單擊事件的語法格式如下：
基本語法：onClick=函數或是處理語句
HTML 源代碼：
代碼解析：
1） 第3行:網頁的標題叫做"click事件"
2） 第6行：定義一個表單，類型為提交按鈕，按鈕的值為"打印本頁"，鼠標單擊按鈕時實現打印效果。
效果預覽：
圖：click事件
圖：打印本頁
2、 鼠標移動事件
鼠標移動事件包括3種，分別為mouseover、mouseout和mousemove。其中，mouseover是當鼠標移動到對象之上時所激發的時間，mouseout是當鼠標從對象上移開時所激發的事件，mousemove是鼠標在對象上移動時所激發的事件。
基本語法：
Onmouseover=處理函數或是處理語句
Onmouseout=處理函數或是處理語句
HTML 源代碼：
代碼解析：
1） 第5-9行:定義一個名為"bigImg"的函數，同時聲明變量X，賦值給X高為180像素，賦值給X的寬為180像素；
2） 第10-14行：義一個名為"normalImg"的函數，同時聲明變量X，賦值給X高為128像素，賦值給X的寬為128像素；
3） 第18行：插入一張圖片，定義鼠標移動時調用名為"bigImg"函數，鼠標移開時調用"normalImg"函數
效果預覽：
圖：鼠標離開時
圖：鼠標經過時
小結：
HTML是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的基本語言。瞭解HTML基礎，文件結構以及常用的基本標籤是學習好HTML語言的基礎，同時為後面網頁設計與開發以及製作更復雜的網頁打下良好的基礎。
項目實踐
在前面我們介紹了HTML語言的常用編輯軟件有Dreamweaver，這是也是使用最為廣泛和方便的網頁製作軟件，清晰簡潔的代碼界面以及可以靈活切換的設計界面，並且可以一邊編寫代碼一邊查看實時設計效果，因此深受廣大網頁設計師的歡迎。下面我們就來具體的操作和使用Dreamweaver。
任務一：圓周率計算
任務描述：
1. 下載和安裝Dreamweaver軟件
2. 熟Dreamweaver的操作界面和基本功能
3. 使用dreamweaver軟件建立一個html網頁
實踐目標：
1. 熟悉html文檔結構
2. 熟悉Dreamweaver工具
參考步驟：
1、 下載和安裝Dreamweaver軟件
2、 打開Dreamweaver，點擊文件》新建》html，新建一個html頁面
3、 點擊文件》保存命令，保存html文檔
4、 在彈出來的保存命令對話框中，填寫文件名，並保存。
HTML 源代碼：
任務二：函數計算圓周率
任務描述：
1、完成《沁園春.雪》這首詩，頁面效果如下圖：
實踐目標：
1. 熟悉html標籤格式
2. 瞭解html的基本標籤
參考步驟：
1、 打開Dreamweaver軟件
2、 點擊文件》新建》html，新建一個html頁面
3、 點擊代碼》，切換到代碼視圖界面，手寫標籤，完成html頁面
4、 點擊文件》保存在彈出來的保存命令對話框中，填寫文件名，並保存。
參考代碼：
HTML 源代碼：
HTML 源代碼：
本章總結：
本章主要介紹了Javascript的基本概念、基本語法、數據類型、javascript函數以及常見的javascript事件。通過本章的學習可以瞭解到什麼是javascript，以及javascript的基本使用方法。從而為設計出各種精美的動感特效網頁打下基礎。
作業：
一、簡答題
1.什麼是Javascript ？
2.Javascript 有哪些數據類型？
3.如果數字型數據與字符串型數據進行相加運算，得到的數據是什麼類型？
4.函數的概念。
2.簡述調用函數的語法。
關鍵字: 不用 JavaScript 腳本語言
