11 javascript基礎

1、,,,講師：張迪,網(wǎng)頁設計(專業(yè)必修課),2017,,,,,Javascript基礎,第十一課,,,,使用Bootstrap框架制作表單,上節(jié)理論課介紹了HTML的表單元素。實驗課則讓大家學習使用bootstrap框架制作表單。,,Javascript概述,PART 01,,,,Why Javascript,隨著互聯(lián)網(wǎng)的快速發(fā)展，網(wǎng)站已不僅僅展示靜態(tài)的信息內(nèi)容，增強網(wǎng)頁交互、提升用戶體驗已成為網(wǎng)站制作的基本要求。因此學習前端腳本語言j

2、avascript，是web前端開發(fā)人員必須掌握的重要技術能力。,http://gallery.echartsjs.com/editor.html?c=xrkJZ2pfeZ,Javascript history,1996年，網(wǎng)景公司（Netscape）為解決撥號上網(wǎng)（28.8Kbit/s）時代服務端驗證表單數(shù)據(jù)低效的問題，著手開發(fā)了一種客戶端語言： LiveScript 。為了搭上當時媒體熱炒Java的順風車，在發(fā)布前夕臨時更名為Jav

3、aScript。,關于javascript初誕生的故事：http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html,1. 網(wǎng)景公司發(fā)明了javascript,Javascript history,javascript 1.0特別成功，以至于成為因特網(wǎng)的必備組件。這也引來了競爭者，如微軟公司。以至于到1996年，市面上有三種javascript的不同實現(xiàn)版本，這令網(wǎng)頁開發(fā)

4、遇到了極大的兼容性困境。這個語言的標準化勢在必行。,2. 三足鼎立,Javascript history,1997年由歐洲計算機制造商協(xié)會（ECMA）制定了【ECMA-262】標準，該標準定義了名為ECMAScript的全新腳本語言。目前市面上各主流瀏覽器都支持的javascript，都是對ECMAScript的擴展。,3. 標準制定,更多關于ECMA的故事：http://www.cnblogs.com/ghost-xyx/p/4035

5、615.html,Javascript 實現(xiàn),盡管 ECMAScript 是一個重要的標準，但它并不是 JavaScript 唯一的部分。實際上，一個完整的 JavaScript 實現(xiàn)是由以上 3 個不同部分組成的：ECMAscript、 DOM、 BOM。,Javascript 實現(xiàn),核心（ECMAScript）：描述了該語言的語法和基本對象文檔對象模型（DOM）： 描述了處理網(wǎng)頁內(nèi)容的方法和接口瀏覽器對象模型（

6、BOM）：描述了與瀏覽器進行交互的方法和接口,Javascript 功能,一般功能：通常情況下，Web前端開發(fā)者使用JavaScript在給網(wǎng)頁添加交互作用。例如改變網(wǎng)頁內(nèi)容、CSS樣式、對用戶輸入做出反饋等操作。具體實現(xiàn)有賴于瀏覽器的支持。本課只講這方面內(nèi)容。高級功能：瀏覽器并不是javascript語言的唯一宿主?；赾ommonjs標準，javascript也可以像一般的程序設計語言那樣，做服務器端腳本語言，讀寫數(shù)據(jù)

7、庫、讀寫數(shù)據(jù)庫文件、創(chuàng)建GUI。,,Javascript引入例子,PART 02,,,,Javascript 代碼調用方式,對于瀏覽器，用JavaScript編寫的代碼必須通過HTML/XHTML文檔才能執(zhí)行。有三種方法可以調用JavaScript。,例如： JavaScript語言代碼;…… ,方法一，使用標簽：將JavaScript代碼放到文檔或標簽中的標簽之間。最好的做法是將標簽放到HTML文檔的最后，結束標簽之前。

8、,Javascript 代碼調用方式,外部連接的寫法例如：Js文件中直接寫javascript代碼，不需要寫標簽。,方法二，外鏈js文件：將JavaScript代碼存為一個擴展名為.js的獨立文件。典型的做法是在文檔的部分放置一個標簽，并把它的src屬性指向該文件。此方法較為常用。適合大規(guī)模的程序代碼，便于維護。,Javascript 代碼調用方式,標簽內(nèi)置腳本寫法例如：,方法三，在標簽內(nèi)添加腳本：可以在HTML表單的輸入

9、標簽內(nèi)添加腳本，以響應輸入元素的事件。此方法較為少用。因為標簽內(nèi)不適合寫大量代碼。,一個簡單的javascript程序例子,function displayDate(){var date = Date();document.getElementById("demo").innerHTML= date;},完整的例子：http://www.runoob.com/try/try.php?filename

10、=tryjs_events,Javascript代碼需要放在標簽中。代碼執(zhí)行時不需要編譯，而是在程序執(zhí)行時逐條解釋。,變量聲明使用 var關鍵字，而不是用整型int、浮點型float這樣的關鍵字,這里使用了document對象，其中的方法來自于dom定義,Javascript 語言特點,解釋性執(zhí)行的腳本語言JavaScript的語法基本結構形式與C、C++、Java十分類似，但是在使用之前，不需要先編譯，而是在程序執(zhí)行中被逐行的解釋

11、。簡單弱類型腳本語言JavaScript的簡單性主要在于其基于Java基本語句和控制流之上的簡單而緊湊的設計；其次在于其變量類型是采用弱類型，并未使用嚴格的數(shù)據(jù)類型。,Javascript 語言特點,相對安全的腳本語言JavaScript作為一種安全性語言，不被允許訪問本地硬盤，且不能將數(shù)據(jù)存入服務器，不允許對網(wǎng)絡文檔進行修改和刪除，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失或對系統(tǒng)的非法訪問?？缙脚_性的

12、腳本語言JavaScript依賴于瀏覽器本身，與操作環(huán)境無關，只要計算機能運行支持JavaScript的瀏覽器，從而實現(xiàn)了跨平臺的特性。,,ECMAscript基本語法,PART 03,,,,ECMAScript 基本語法,熟悉 Java、C 和 Perl 這些語言的開發(fā)者會發(fā)現(xiàn) ECMAScript 的語法很容易掌握，因為它借用了這些語言的語法。區(qū)分大小寫比如：變量 test 與變量 TEST 是不同的。注釋與 Java

13、、C 和 PHP 語言的注釋相同單行注釋以雙斜杠開頭（//）多行注釋以單斜杠和星號開頭（/*），以星號和單斜杠結尾（*/）每行結尾的分號可有可無,ECMAScript 基本語法,變量是弱類型的與 Java 和 C 不同，ECMAScript 中的變量無特定的類型，定義變量時只用 var 關鍵字。但實際上， ECMAScript 在做數(shù)據(jù)處理的時候還是會判斷數(shù)據(jù)類型的。已有的數(shù)據(jù)類型包括：整數(shù)、浮點數(shù)、字符串、布爾、null、u

14、ndefined、數(shù)組、函數(shù)、對象、正則式。var color = “red”; //字符串var num = 25; //數(shù)值var visible = true; //布爾var action = function(){return false}; //函數(shù)var data= {name: jerry}; //json對象,ECMAScript 基本語法,ECMAScript中的特殊數(shù)據(jù)類型Null只有一

15、個值null，用于表示尚未存在的對象。如果函數(shù)或方法要返回的是對象，那么找不到該對象時，返回的通常是null。Undefined只有一個值undefined。當聲明的變量未初始化時，該變量的默認值是undefined。,ECMAScript 基本語法,變量可以不聲明ECMAScript 與大多數(shù)程序設計語言的主要區(qū)別，是在使用變量之前不必聲明。例如下面的代碼：var sTest = "hello ";sT

16、est2 = sTest + "world";alert(sTest2);其中變量 sTest2 并沒有用 var 運算符定義，ECMAScript 的解釋程序遇到未聲明過的標識符時，用該變量名創(chuàng)建一個全局變量，并將其初始化為指定的值。這是該語言的便利之處，不過如果不能緊密跟蹤變量，這樣做也很危險。最好的習慣是像使用其他程序設計語言一樣，總是聲明所有變量。,ECMAScript 基本語法,ECMAScript變

17、量原始類型ECMAScript 有 5 種原始類型（primitive type），即 Undefined、Null、Boolean、Number 和 String。其他諸如函數(shù)、數(shù)組、對象等類型，都是引用類型。引用類型是通過原始類型定義的。可以通過typeof運算符來判斷變量類型undefined - 如果變量是 Undefined 類型的boolean - 如果變量是 Boolean 類型的number - 如果變量是

18、 Number 類型的string - 如果變量是 String 類型的object - 如果變量是一種引用類型或 Null 類型的更多介紹,補充內(nèi)容：變量命名規(guī)則,變量的命名駝峰命名法首字母是小寫的，接下來的字母都以大寫字符開頭。例如：var myTestValue = 0, mySecondValue = "hi";帕斯卡命名法所有單詞的首字母都是大寫的。例如：var MyTestValue

19、 = 0, MySecondValue = "hi";下劃線分割法組成變量名的單詞之間以下劃線分割。例如：var my_test_value = 0, my_second_value = "hi";,補充內(nèi)容：變量命名規(guī)則,匈牙利命名法在駝峰命名的基礎上，給每個變量前附加一個小寫字母以說明其變量類型。例如，i 表示整數(shù)，s 表示字符串，如下所示：var iMyTestValue =

20、0, sMySecondValue = "hi";,補充內(nèi)容：變量命名規(guī)則,變量命名規(guī)則的意義變量的命名方式看起來不起眼，但是會直接影響程序員未來的編碼風格和實際水平。我個人的命名習慣是，一般變量用下劃線命名法，函數(shù)用駝峰命名法。不過對于初學者，我個人建議使用匈牙利命名法。因為好的代碼實要給人看懂的。好的變量命名將令代碼變得更易讀。所以大公司里都有編程規(guī)范。以及代碼審查員。以便將不合格代碼和不合格員工剔除

21、。,ECMAScript 表達式,運算符ECMAScript的運算符，與java, c等程序設計語言差別不大。熟悉java或C語言的同學能很快掌握。更多介紹,ECMAScript 表達式,程序控制語句ECMAScript的程序控制語句，與java, c等程序設計語言差別不大。熟悉java或C語言的同學能很快掌握。更多介紹,ECMAScript 表達式,程序控制語句相對于C語言，ECMAScript的for循環(huán)語

22、句還有一種for/in語句的用法?？梢杂脕肀闅v數(shù)組或者對象，例如：Var aCars = [“BMW”, “Volvo”, “Ford”];for (var i in aCars ){ console.log(aCars[i]);}更多介紹,ECMAScript 函數(shù),函數(shù)ECMAScript中函數(shù)的定義與C語言極為類似。例如：function myFunction(a, b) { return

23、 a * b;}函數(shù)聲明后不會立即執(zhí)行，會在我們需要的時候調用到。函數(shù)是一種對象，有屬性和方法，使用 typeof 操作符判斷函數(shù)類型將返回 “function” ，屬于引用類型。,ECMAScript 函數(shù),匿名函數(shù)ECMAScript中函數(shù)聲明時可以采用變量的形式。例如：var x = function (a, b) {return a * b};這時函數(shù)沒有名稱。不過你可以通過變量名x來調用它。

24、自調用函數(shù)函數(shù)表達式可以 “自調用“，如果函數(shù)表達式后面緊跟()，那么它就會再聲明完畢后立即調用。例如：(function () { alert(“我將調用自己”)})();更多介紹,ECMAScript 函數(shù),變量的作用域變量的作用域就是變量在程序中的作用范圍。根據(jù)作用域，變量可分為全局變量和局部變量。全局變量是在函數(shù)之外聲明的變量，網(wǎng)頁上的所有腳本和函數(shù)都能訪問它，在頁面關閉以后被刪除。局部變量是定

25、義在函數(shù)體內(nèi)部的變量，只能在創(chuàng)建它們的函數(shù)中使用，因而可以在不同的函數(shù)中使用相同的局部變量。函數(shù)運行完畢，局部變量就會被刪除。例子：http://www.runoob.com/js/js-scope.html,補充內(nèi)容：代碼調試方法,代碼調試在程序代碼中尋找錯誤叫做代碼調試。很多瀏覽器都內(nèi)置了調試工具。內(nèi)置的調試工具可以開始或關閉，嚴重的錯誤信息會發(fā)送給用戶。瀏覽器啟用調試工具一般是按下 F12 鍵，并在調試菜單中選擇“co

26、nsole" 。在調試時，我們需要知道某個變量的值。通常我們使用alert()或者console.log()方法來輸出這個值。 console.log() 顯示的信息更完整，更加推薦。更多介紹,ECMAScript 基本語法,課堂練習編寫javascript，輸出菲波那切數(shù)列第10項的值。通過alert()或者console.log()輸出結果。斐波那契數(shù)列（Fibonacci sequence），又稱黃金

27、分割數(shù)列、因數(shù)學家列昂納多·斐波那契（Leonardoda Fibonacci）以兔子繁殖為例子而引入，故又稱為“兔子數(shù)列”，指的是這樣一個數(shù)列：1、1、2、3、5、8、13、21、34、……在數(shù)學上，斐波納契數(shù)列以如下被以遞歸的方法定義：F(0)=0，F(xiàn)(1)=1, F(n)=F(n-1)+F(n-2)（n>=2，n∈N*）,ECMAScript 對象,ECMAScript對象在ECMAScript的實現(xiàn)上，將其中所

28、有的數(shù)據(jù)類型都以對象的方式定義。對象只是一種特殊的數(shù)據(jù)。對象擁有屬性和方法。這樣方便我們統(tǒng)一地修改和查看。此外，JavaScript 允許自定義對象。更多介紹,例子：創(chuàng)建一個對象var person=new Object();person.firstname="John";person.lastname="Doe";person.age=50;person.eyecolor=&qu

29、ot;blue"; document.write(person.firstname + " is " + person.age + " years old.");,ECMAScript 對象,ECMAScript中的常用內(nèi)置對象String, 字符串對象，非常常用。Array, 數(shù)組對象，非常常用。Math，算數(shù)對象，提供執(zhí)行算數(shù)任務的基本方法。Date，日期對象，用來處理日

30、期和時間。RegExp, 正則表達式，用來過濾字符串。,ECMAScript 對象,課堂練習查看javascript的date內(nèi)置對象介紹。試著寫一串代碼，輸出當前時間（包括時分秒）。通過alert()或者console.log()輸出結果。,,文檔對象模型DOM,PART 04,,,,文檔對象模型,什么是DOM？當HTML網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model，簡稱DOM）。

31、DOM是HTML的應用程序接口(API)，是HTML文檔的結構化地圖，同時具有一些操作方法。因為DOM呈現(xiàn)樹型結構，所以也叫做DOM樹。Javascript可以通過DOM來找到元素，然后進行操作。,示例HTML文檔及其DOM樹結構,DOM什么是DOMHello,通過DOM查找HTML元素,在DOM中有三種方法能夠獲取元素節(jié)點，分別是通過元素ID、通過標簽名稱和通過類名稱來進行獲取。document.getElem

32、entById，通過 id 查找 HTML 元素。document.getElementsByTagName，通過標簽名查找HTML元素。document.getElementsByClassName，通過類名查找HTML元素。例如：var x=document.getElementById("main");如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。如果未找到該元素，則 x 將包含 n

33、ull。更多介紹,通過DOM修改HTML內(nèi)容,改變 HTML 輸出流document.write(“添加的新HTML內(nèi)容”);改變 HTML 內(nèi)容document.getElementById("p1").innerHTML="新文本!";改變HTML元素屬性document.getElementById(id).attribute=新屬性值更多介紹,HTML事件屬性,HTML

34、DOM 的事件類型有：onclick, 標簽被點擊后觸發(fā)onload ，頁面加載完畢后觸發(fā)onchange，表單字段被改變后觸發(fā)onfocus，表單字段獲得焦點后觸發(fā)onmouseover ，鼠標移入標簽范圍后觸發(fā)onmouseout，鼠標移出標簽范圍后觸發(fā)….,HTML事件屬性,如需向HTML元素分配事件，您可以使用事件屬性。例如：點這里也可以使用javascript代碼，通過DOM來給元素添加事件。例

35、如：document.getElementById("myBtn").onclick=function(){displayDate()};更多介紹,刪除元素,如果需要在HTML中刪除元素，那么我們首先便需要獲得該元素，然后得到該元素的父元素，最后通過removeChild方法刪除該元素，其實現(xiàn)流程如下所示：獲得該元素，比如要獲得id屬性值為div1的元素，其代碼如下所示：獲得該元素的父元素，代碼如下所示：

36、從父元素中刪除該元素,通過DOM修改HTML內(nèi)容,案例：點擊燈泡，顯示開關燈效果。,http://www.runoob.com/try/try.php?filename=try_bulb,通過DOM修改HTML內(nèi)容,課堂練習,http://www.runoob.com/try/try.php?filename=try_bulb,將這個燈泡開關的例子，改為鼠標移入時打開，鼠標移除時關閉。提示，在原有例子的基礎上，使用新的觸發(fā)事件：on

37、mouseover 和onmouseout,,瀏覽器對象模型BOM,PART 05,,,,瀏覽器對象模型,什么是BOM？瀏覽器對象模型Browser Object Model (BOM)，是由瀏覽器提供的一套應用程序接口(API) ，實現(xiàn)javascript與瀏覽器之間的交互性功能。BOM的統(tǒng)一標準是最晚實現(xiàn)的。因此，存在不同版本瀏覽器的BOM接口不同的問題。以下介紹各個瀏覽器都支持的BOM方法。,瀏覽器窗口

38、尺寸方法,Window 對象所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。所有 JavaScript 全局對象、函數(shù)以及變量均自動成為 window 對象的成員。包括HTML DOM的document對象。Window 尺寸window.innerHeight - 瀏覽器窗口的內(nèi)部高度(包括滾動條)window.innerWidth - 瀏覽器窗口的內(nèi)部寬度(包括滾動條)老版本的IE瀏覽器不支持以上兩個方法。為此

39、有一個解決方案：http://www.runoob.com/try/try.php?filename=tryjs_win_inner更多介紹,瀏覽器彈窗方法,警告框window.alert("sometext");確認框window.confirm("sometext");打開一個帶有確定、取消按鈕的選擇框。如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為 n

40、ull提示框window.prompt("sometext","defaultvalue");打開一個帶有輸入框的窗口。要求用戶填寫內(nèi)容。如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為 null。更多介紹,瀏覽器當前頁面地址方法,Window Locationwindow.location 對象用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面。在編

41、寫時可不使用 window 這個前綴。 一些例子：location.hostname 返回 web 主機的域名location.pathname 返回當前頁面的路徑和文件名location.port 返回 web 主機的端口 （80 或 443）location.protocol 返回所使用的 web 協(xié)議（http:// 或 https://）location.href 返回當前頁面的整個URL路徑更多介紹,瀏覽器計時

42、器方法,計時器我們可以使用如下兩個方法，做到設定的時間間隔之后來執(zhí)行代碼:setInterval(function, milliseconds) - 間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼。setTimeout(function, milliseconds) - 暫停指定的毫秒數(shù)后執(zhí)行指定的代碼。如何停止執(zhí)行？clearInterval() 方法用于停止 setInterval() 方法執(zhí)行的函數(shù)代碼。clearTimeou

43、t() 方法用于停止執(zhí)行setTimeout()方法的函數(shù)代碼。更多介紹,課堂練習,在網(wǎng)頁上顯示一個電子表（包括時分秒，用冒號分割），每秒這個電子表都會變化。提示：使用date對象獲取時間，使用setTimeout方法使電子表的時間不斷更新。,,實驗課內(nèi)容,PART 06,,,,實驗課作業(yè),將上次使用bootstrap框架搭建的用戶注冊頁面，寫上表單驗證內(nèi)容。例如，每一項都必須填寫；兩次密碼輸出不一致要有錯誤提示；更進一步地

44、，郵箱格式輸入有誤要有提示。,Javascript學習方法,Javascript畢竟是一種編程語言。內(nèi)容較繁雜。不容易一次掌握。但它又是前端面試必考內(nèi)容。如何快速掌握該語言特性呢？一方面要學習基礎理論知識，建議采用思維導圖的方式來進行梳理。例如：http://www.cnblogs.com/coco1s/p/3953653.html另一方面，要以實際項目為出發(fā)點，進行練習。而不是停留在看書、做課后題的水平上。,,,,蘭