《Javascript高級程序設(shè)計》課件-項目一 隨機點名-初識JavaScript

項目一隨機點名——初識JavaScript情境導(dǎo)入李強同學(xué)剛剛學(xué)習(xí)了HTML5和CSS3的基礎(chǔ)知識，已經(jīng)能夠制作簡單的網(wǎng)站，但他發(fā)現(xiàn)自己制作的網(wǎng)站沒有動態(tài)交互效果，于是向王老師請教如何給網(wǎng)頁添加一些動態(tài)的交互效果呢？情境導(dǎo)入用JavaScript就可以實現(xiàn)動態(tài)交互效果，它是一種可以嵌入HTML頁面中的腳本語言，目前，已成為最受歡迎的開發(fā)語言之一我要做一個抽獎項目，李強參與進來，正好可以了解JavaScript可以實現(xiàn)的動態(tài)交互效果，體驗一下JavaScript的編寫方法與技巧。情境導(dǎo)入實現(xiàn)的隨機點名頁面如圖所示情境導(dǎo)入要想學(xué)好這門語言，需要從搭建開發(fā)環(huán)境入手，然后學(xué)習(xí)相關(guān)的語法基礎(chǔ)知識，最后運用JavaScript來實現(xiàn)網(wǎng)頁中常見的動態(tài)交互效果。情境導(dǎo)入“九層之臺起于壘土，千里之行始于足下”的道理，制定了詳細的學(xué)習(xí)計劃，學(xué)習(xí)分為以下兩步情境導(dǎo)入第1步：認識JavaScript，了解這門語言的基本應(yīng)用第2步：學(xué)習(xí)JavaScript在HTML中的應(yīng)用方法，掌握常見的輸入輸出方式。項目目標

了解JavaScript的發(fā)展歷史及主要特點

了解JavaScript的應(yīng)用場景

掌握JavaScript的基本應(yīng)用入門任務(wù)一認識JavaScriptJavaScript（JS）是基于對象和事件驅(qū)動的客戶端腳本語言，主要是用來進行Web前端開發(fā)的?；鸺l(fā)射動畫（見圖1-3）、商品放大鏡（見圖1-4）、彈球小游戲（見圖1-5）等，都是典型的JavaScript網(wǎng)頁特效。

認識JavaScript項目開發(fā)基本框架一般分為3層。第1層是Web前端頁面開發(fā)，這個頁面是用HTML、CSS和JavaScript開發(fā)的，其中用HTML+CSS實現(xiàn)前端頁面的結(jié)構(gòu)和樣式，用JavaScript實現(xiàn)動態(tài)交互、網(wǎng)頁特效等功能，這一層也就是常說的Web前端開發(fā)；第2層是Web后端開發(fā)，也叫服務(wù)器端的程序開發(fā)，主要進行業(yè)務(wù)邏輯處理；第3層是數(shù)據(jù)庫開發(fā)。在Web前端開發(fā)中，把純粹的用HTML+CSS開發(fā)的頁面稱為靜態(tài)頁面。靜態(tài)頁面是固定的，沒有用戶交互功能，也沒有什么特效，用戶體驗度低。這個問題需要用JavaScript來解決，這也是本書主要介紹的內(nèi)容。認識JavaScript圖1-6項目開發(fā)基本框架1.JavaScript的發(fā)展概況（1）JavaScript語言的誕生最早的JavaScript語言思想是從嵌入式腳本語言發(fā)展來的。大概在1992年，諾姆巴（Nombas）公司開發(fā)出了嵌入式腳本語言C--，簡稱為Cmm，后來改名為ScriptEase。這種將腳本嵌入網(wǎng)頁中的設(shè)計方法成為JavaScript誕生的理論基礎(chǔ)。1995年，網(wǎng)景（Netscape）公司的布蘭登·艾奇（BrendanEich）為解決類似于“向服務(wù)器提交數(shù)據(jù)之前對數(shù)據(jù)進行驗證”的問題，通過NetscapeNavigator2.0，與Sun公司聯(lián)手開發(fā)一個稱為LiveScript的腳本語言。后來為了營銷的便利，借助于當(dāng)時“如日中天”的Java，將其更名為JavaScript，JavaScript1.0就這樣誕生了。相關(guān)知識

JavaScript的發(fā)展概況和特點（2）JavaScript與ECMAScriptJavaScript誕生后，成功地得以推廣。這刺激了微軟公司，所以微軟公司也決定向瀏覽器領(lǐng)域進軍，并發(fā)布了JavaScript克隆版，叫作JScript，并將其搭載到IE中。

后來CEnvi公司的ScriptEase，就有3種不同的JavaScript版本。此時就需要一個統(tǒng)一的標準來進行語法和特性的統(tǒng)一，JavaScript標準的制定就提上了日程。在1997年，JavaScript1.1作為一個草案被提交給歐洲計算機制造商協(xié)會（EuropeanComputerManufacturersAssociation，ECMA）。相關(guān)知識

JavaScript的發(fā)展概況和特點（2）JavaScript與ECMAScript當(dāng)時第39技術(shù)委員會（TechnicalCom-mittee39，TC39）承擔(dān)了制定一個標準化語法和語義的“通用、跨平臺、中立于廠商”的腳本語言的任務(wù)。TC39集合了來自網(wǎng)景公司、Sun公司、微軟公司、Borland公司和其他對腳本編程感興趣的公司的程序員，共同制定了ECMA-262標準。該標準定義了一個名為ECMAScript的全新腳本語言，規(guī)定了腳本語言的語法、類型、語句、關(guān)鍵字、保留字、操作符和對象等方面的基礎(chǔ)內(nèi)容。

相關(guān)知識

JavaScript的發(fā)展概況和特點（2）JavaScript與ECMAScript

ECMAScript規(guī)定了腳本語言的標準，網(wǎng)景公司的JavaScript和微軟公司的JScript都是依照這個標準來實現(xiàn)的，與ECMAScript相兼容。所以現(xiàn)在的JavaScript、JScript和ECMAScript常被通稱為JavaScript。因此，ECMAScript是一個語言標準，JavaScript可以認為是ECMAScript的一個實現(xiàn)，兩者在大多數(shù)情況下是可以互換的。相關(guān)知識JavaScript的發(fā)展概況和特點（3）JavaScript標準的發(fā)展歷程截至2020年12月31日，ECMAScript（以下簡稱ES）經(jīng)歷了ES1～ES10這10個語言版本。其中較重要的是ES1、ES3和ES5。1997年6月，ES1語言標準，奠定了ECMAScript語言發(fā)展的基礎(chǔ)。1999年12月發(fā)布了ES3，該版本取得了巨大的成功，在業(yè)界得到了廣泛的支持，并成為通行標準。該版本增加了大量的語言特性，對正則表達式的表單應(yīng)用、點運算符的文字鏈處理、異常處理及控制指令等都進行了升級。2009年12月發(fā)布了ES5，該版本澄清了許多ES3的模糊規(guī)范，擴展了Object、Array、Function等對象的功能，并增加了嚴格模式（StrictMode），使編程變得更加嚴謹。2011年6月，ES5.1發(fā)布，它是當(dāng)前較為穩(wěn)定的一個版本，并且成為國際標準。相關(guān)知識

JavaScript的發(fā)展概況和特點（3）JavaScript標準的發(fā)展歷程2015年6月17日發(fā)布了ECMAScript6，官方名稱是ECMAScript2015。該版本是繼ES5之后改動最大的，該版本增加了大量新的語言特性，對原有對象進行了擴展，如類型數(shù)組（Map、Set、Promise）等，同時還新增了很多語法特性。目前，仍沒有任何一款執(zhí)行引擎實現(xiàn)了對所有ES6標準的支持，但通過Babel等轉(zhuǎn)譯器，人們已經(jīng)可以使用全部ES6特性，甚至ES7、ES8特性?？梢哉f，ECMAScript2015是較具里程碑意義的一個版本。從2016年開始，發(fā)布了ES7～ES10，其中2017年6月正式發(fā)布了ES8，代表性特征包括字符串填充、對象值遍歷、對象的屬性描述符獲取等。2019年，ECMAScript語言標準的第10個版本發(fā)布，增加了一些新功能。Symbol對象的description屬性、可選的catch綁定等都得到了相應(yīng)的改善。相關(guān)知識

JavaScript的發(fā)展概況和特點（4）JavaScript的組成JavaScript是由ECMAScript、DOM、BOM這3部分組成的。①ECMAScript。②DOM（DocumentObjectModel，文檔對象模型）③BOM（BrowserObjectModel，瀏覽器對象模型）相關(guān)知識JavaScript的發(fā)展概況和特點JavaScript語言流行的主要原因是其具備了以下眾多的優(yōu)秀特性。（1）解釋型腳本語言（2）基于對象（3）數(shù)據(jù)安全性（4）跨平臺性（5）動態(tài)性因為有以上五大基本特性，JavaScript在軟件開發(fā)，特別是Web前端開發(fā)中受到了越來越多的關(guān)注，其應(yīng)用范圍也就越來越廣。2.JavaScript的語言特性JavaScript的功能十分強大，可以實現(xiàn)多種應(yīng)用。JavaScript可用來在數(shù)據(jù)送往服務(wù)器前對表單輸入的數(shù)據(jù)進行驗證，實現(xiàn)執(zhí)行計算、表單驗證、添加特殊效果、自定義圖形選擇及創(chuàng)建安全密碼等功能，這些功能都有助于增強站點的動態(tài)效果和交互性。

圖1-7網(wǎng)站輪播圖效果 圖1-8表單驗證效果JavaScript的應(yīng)用場景1.動態(tài)交互效果隨著信息技術(shù)的飛速發(fā)展，網(wǎng)頁內(nèi)容的呈現(xiàn)越來越注重動態(tài)效果的藝術(shù)展示，這些效果給我們帶來了視覺的沖擊和美的享受。JavaScript能使這些網(wǎng)頁元素“動起來”，這是JavaScript的功能之一，比如各大電商平臺首頁的輪播圖、電梯導(dǎo)航、抽獎轉(zhuǎn)盤等動態(tài)特效都可以使用JavaScript來表現(xiàn)。JavaScript的應(yīng)用場景2.數(shù)據(jù)驗證使用JavaScript可以驗證用戶填寫的表單內(nèi)容，比如某個字段是否必填、密碼和確認密碼是否一致、手機號和身份證號碼是否符合要求等。在向Web服務(wù)器提交表單前，經(jīng)客戶端驗證就可以發(fā)現(xiàn)錯誤，并提示警告信息。JavaScript的應(yīng)用場景3.結(jié)合流行框架開發(fā)移動應(yīng)用JavaScript并不僅僅用于網(wǎng)頁和網(wǎng)站程序，還可以結(jié)合時下三大流行框架—Vue.js、Angular、React進行微信公眾號、小程序、混合App等移動應(yīng)用開發(fā)。JavaScript的應(yīng)用場景4.使用AJAX等技術(shù)與后端進行數(shù)據(jù)交互

使用AJAX技術(shù)可以在進行表單注冊時，判斷填寫的用戶名是否符合要求以及是否已被注冊過，登錄時可以判斷用戶名是否正確，以及不刷新頁面顯示數(shù)據(jù)等。JavaScript的應(yīng)用場景【任務(wù)二】簡單JavaScript——認識JavaScript在頁面中輸出“有志者，事竟成，破釜沉舟，百二秦關(guān)終屬楚”。任務(wù)描述任務(wù)分析將下面的所有代碼輸入到HTML編寫環(huán)境中。保存文件，將其通過瀏覽器打開?！救蝿?wù)二】簡單JavaScript——認識JavaScript【任務(wù)二】簡單JavaScript——認識JavaScript任務(wù)

開啟JavaScript編程眾所周知，JavaScript最初開發(fā)出來就是為了其代碼能夠嵌入在瀏覽器中使用，瀏覽器對JavaScript支持也是JavaScript代碼能夠正常解析運行的基礎(chǔ)，那么，支持JavaScript的瀏覽器有哪些呢？其實現(xiàn)在市場上主流的瀏覽器都支持JavaScript，圖1-10所示的幾款瀏覽器，都對JavaScript有很好的支持。為了更好地運行本書中的代碼，建議使用chrome瀏覽器或者火狐瀏覽器。相關(guān)知識

支持JavaScript的瀏覽器從原理上來說，我們可以用任何一種文本編輯工具來編寫JavaScript程序，如記事本、Notepad++、EditPlus等，但這一類編輯工具在寫代碼時很不方便。因為JavaScript代碼是嵌入HTML網(wǎng)頁文檔中的，所以可以用任何一款HTML網(wǎng)頁文件的編輯工具來完成對JavaScript程序的編寫，如HBuilderX、VisualStudioCode、WebStorm等。本書選用HBuilderX，這是一款非常優(yōu)秀的國產(chǎn)軟件。HbuilderX和VisualStudioCode的操作界面如圖1-11和圖1-12所示。

圖1-11HbuilderX操作界面

圖1-12VisualStudioCode操作界面相關(guān)知識

代碼編輯器通過前面的介紹，我們知道JavaScript代碼主要是嵌入HTML中使用的，到底怎么使用呢？JavaScript在HTML中的應(yīng)用是很靈活的，大致有下面3種使用方式。

相關(guān)知識

JavaScript在HTML中的應(yīng)用JavaScript代碼可以直接在HTML中編寫，使用<script>…</script>標簽嵌入到HTML中，在標簽中的代碼會被瀏覽器自動解釋為JavaScript代碼，而不是HTML代碼。<script>標簽還有一些其他屬性，如表1-1所示。1、直接將JavaScript代碼嵌入HTML中屬性屬性說明type設(shè)置所使用的腳本語言，默認是“text/javascript”src設(shè)置引入外部文件的路徑位置，如“js/hello.js”表1-1<script>標簽屬性說明直接將JavaScript代碼嵌入HTML中常用的在HTML中嵌入腳本的語法格式如下<scripttype="text/javascript">...</script><script>標簽可以放在<head></head>中，也可以放在<body></body>中。為了在網(wǎng)頁加載時能夠先解析JavaScript代碼，通常一般將JavaScript代碼放在<head>…</head>標簽中。提示任務(wù)三希望你可以努力成為自己想要的樣子——內(nèi)嵌式通過使用內(nèi)嵌式輸出“苦心人，天不負，臥薪嘗膽，三千越甲可吞吳”。任務(wù)描述任務(wù)分析使用HBuilderX工具編寫代碼，在HTML中直接嵌入JavaScript腳本。通過window.alert()輸出“苦心人，天不負，臥薪嘗膽，三千越甲可吞吳”。任務(wù)三】希望你可以努力成為自己想要的樣子——內(nèi)嵌式任務(wù)三】希望你可以努力成為自己想要的樣子——內(nèi)嵌式鏈接外部的JavaScript文件是通過<script>...</script>標簽的src屬性來實現(xiàn)的，實現(xiàn)步驟如下：新建文件——擴展名是.js，不需要添加<script>...</script>標簽保存到合適的目錄——將js文件保存到HTML文件相同的目錄下使用<script>標簽鏈接兩個文件（html文件和js文件）2、鏈接外部的JavaScript文件鏈接外部的JavaScript文件鏈接外部的JavaScript文件的語法格式如下<scripttype="text/javascript"src="1.js">...</script>在使用<script>標簽的src屬性鏈接外部.js文件時，外部.js文件要同HTML文件在同一目錄下，因為src的文件路徑一般使用相對路徑來表示。提示【試一試】有時需要使用JavaScript代碼實現(xiàn)一個簡單的頁面效果，這可以直接在標簽中使用JavaScript代碼實現(xiàn)，有如下兩種方式：使用“javascript:”調(diào)用

使用“javascript:”的方式來調(diào)用簡單的JavaScript語句3、直接在HTML標簽中使用JavaScript代碼結(jié)合事件調(diào)用

JavaScript支持很多的事件，例如鼠標單擊、鼠標滑過、按下鍵盤等。我們可將JavaScript代碼與事件結(jié)合實現(xiàn)特效。直接在HTML標簽中使用JavaScript代碼<inputtype="button"value="顯示Hello"onclick="alert('Welcome!');"/>JavaScript可以在網(wǎng)頁中實現(xiàn)用戶交互。例如，打開網(wǎng)頁，自動彈出輸入框，讓用戶輸入內(nèi)容，然后程序進行簡單的處理，在頁面上顯示內(nèi)容。

下面介紹如何在JavaScript中進行簡單的輸入輸出。相關(guān)知識

JavaScript常用的輸入輸出方式使用mpt()輸入數(shù)據(jù)

在JavaScript中，提供了mpt()方法，用于彈出提示用戶輸入的對話框，可以返回用戶輸入的字符串，基本語法如下:示例代碼如下：通過上述方式，我們輸入了數(shù)據(jù)name，那么如何將數(shù)據(jù)輸出呢？相關(guān)知識

JavaScript常用的輸入輸出方式mpt("提示部分"[,"輸入文本"]);varname=mpt("你叫什么名字");使用document.write()將內(nèi)容輸出到頁面

使用document.write()可以在HTML文檔中寫入內(nèi)容，并將其顯示在頁面上。參數(shù)可以是變量、字符串或表達式，還可以包含HTML標簽。

示例代碼如下：相關(guān)知識

JavaScript常用的輸入輸出方式document.write("輸出內(nèi)容");varname=mpt("你叫什么名字？");//給name變量賦值document.write(name+",希望你成為前端開發(fā)技術(shù)的高手！");//將字符串輸出到頁面上;使用window.alert()彈出對話框輸出內(nèi)容

window.alert()相當(dāng)于alert()，用于彈出警示對話框，輸出結(jié)果。參數(shù)可以是變量、字符串或表達式，經(jīng)常用于調(diào)試程序。示例代碼如下：相關(guān)知識

JavaScript常用的輸入輸出方式alert("輸出內(nèi)容");varname=mpt("你叫什么名字？");//給name變量賦值window.alert("歡迎來到JavaScript世界！"+name);//連接變量并在彈出的對話框中顯示使用console.log()在控制臺輸出內(nèi)容

console.log()用于在瀏覽器的控制臺中輸出內(nèi)容，同時也是可視化的故障調(diào)試工具。在網(wǎng)頁空白區(qū)域右擊，在彈出的菜單中選擇“檢查”或者“審查元素”來啟動開發(fā)者工具，單擊控制臺的“Console”標簽，如圖1-15所示。相關(guān)知識

JavaScript常用的輸入輸出方式console.log("你好！");【任務(wù)四】歡迎學(xué)習(xí)JavaScript——簡單輸入輸出使用簡單輸入輸出，顯示歡迎學(xué)習(xí)JavaScript的信息任務(wù)描述任務(wù)分析通過mpt()輸入自己的姓名，并對其進行簡單的處理通過window.alert()和document.write()兩種方式輸出內(nèi)容【任務(wù)四】歡迎學(xué)習(xí)JavaScript——簡單輸入輸出相關(guān)知識JavaScript的注釋在JavaScript代碼中，除了簡單的代碼以外，還有一些描述說明性的文字，這就是注釋。注釋是嵌套在程序代碼行中的，但是它不執(zhí)行，不影響程序的執(zhí)行，在頁面上也不輸出。注釋只對代碼或者代碼段進行說明，或者暫時禁用某些代碼。在代碼中添加適當(dāng)?shù)淖⑨?，可以增加代碼的可讀性，有助于代碼的維護和修改。注釋通常用于說明代碼的功能，描述復(fù)雜運算或者解釋編程方法，記錄程序名稱、作者姓名、主要代碼的更改日期等。

1.單行注釋符

單行注釋符是雙斜線“//”。這種注釋符可以與執(zhí)行的代碼處在同一行，也可以另起一行。從“//”開始到行結(jié)束都表示注釋。如果用單行注釋符，必須在每個注釋行的開頭都使用“//”，如【例1-1】所示?！纠?-1】使用“//”添加注釋。2.多行注釋符多行注釋符是“/*…*/”。這種注釋符可以與執(zhí)行的代碼處在同一行，也可以另起一行，甚至可以放在可執(zhí)行的代碼內(nèi)。使用“/*…*/”，必須使用“/*”開始注釋，用“*/”結(jié)束注釋。在注釋行上不應(yīng)出現(xiàn)注釋符“//”。如【例1-2】所示?！纠?-2】使用“/*…*/”