《JavaScript程序設(shè)計(jì)》課件-項(xiàng)目1-1 認(rèn)識JavaScript

JavaScript程序設(shè)計(jì)20211課程導(dǎo)入2任務(wù)導(dǎo)入3知識講解4任務(wù)實(shí)施項(xiàng)目1-1認(rèn)識JavaScript5任務(wù)總結(jié)課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)學(xué)習(xí)內(nèi)容單元一：初識JavaScript（4課時）單元二：JavaScript基礎(chǔ)（10課時）單元三：JavaScript函數(shù)（6課時）單元四：JavaScript對象（6課時）單元五：DOM（10課時）單元六：BOM（6課時）單元七：jQuery（10課時）單元八：JavaScript面向?qū)ο螅?課時）單元九：正則表達(dá)式（6課時）課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)期末總評=平時成績*40%+考試成績*60%平時成績：平時出勤占總成績20%。課前小測驗(yàn)占總成績20%。平時技能考核：課堂作業(yè)以及拓展實(shí)訓(xùn)項(xiàng)目，占總成績60%。平時課堂表現(xiàn)在平時成績總分上加減分，玩手機(jī)、睡覺、提問回答不上來每次減5分，積極參與課堂互動每次加5分?？己朔椒氨壤峙湔n程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript：是Web開發(fā)領(lǐng)域中的一種功能強(qiáng)大的編程語言，主要用于開發(fā)交互式的Web頁面。在計(jì)算機(jī)、手機(jī)等設(shè)備上瀏覽的網(wǎng)頁，其大多數(shù)的交互邏輯幾乎都是由JavaScript實(shí)現(xiàn)的。

JavaScript概述網(wǎng)頁組成：對于制作一個網(wǎng)頁而言，HTML、CSS和JavaScript分別代表了結(jié)構(gòu)、樣式和行為，三者之間的區(qū)別如下。HTML：決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，相當(dāng)于人的身體。CSS：決定網(wǎng)頁呈現(xiàn)給用戶的模樣，相當(dāng)于給人穿衣服、化妝。JavaScript：實(shí)現(xiàn)業(yè)務(wù)邏輯和頁面控制，相當(dāng)于人的各種動作。課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)知識點(diǎn)概述知識點(diǎn)概述JavaScript內(nèi)嵌于HTML網(wǎng)頁中，通過瀏覽器內(nèi)置的JavaScript引擎進(jìn)行解釋執(zhí)行，把一個原本只用來顯示的頁面轉(zhuǎn)變成支持用戶交互的頁面程序。瀏覽器是訪問互聯(lián)網(wǎng)中各種網(wǎng)站所必備的工具，JavaScript主要就是運(yùn)行在瀏覽器中的。常見瀏覽器及特點(diǎn)：InternetExplorer：Windows操作系統(tǒng)的內(nèi)置瀏覽器，用戶數(shù)量較多MicrosoftEdge：Windows10操作系統(tǒng)提供的瀏覽器，速度較快、功能較多GoogleChrome：目前市場占有率較高的瀏覽器，具有簡潔、快速的特點(diǎn)MozillaFirefox：一款優(yōu)秀的瀏覽器，市場占有率低于GoogleChromeSafari：主要應(yīng)用在蘋果iOS、macOS操作系統(tǒng)中的瀏覽器課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)瀏覽器內(nèi)核的分類：渲染引擎（也稱為排版引擎）：負(fù)責(zé)解析HTML與CSS，如Chrome瀏覽器的Blink。JavaScript引擎：是JavaScript語言的解釋器，用于讀取網(wǎng)頁中的JavaScript代碼，對其處理后執(zhí)行，如Chrome瀏覽器的V8引擎JavaScript代碼的執(zhí)行特點(diǎn)：逐行執(zhí)行課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)重難點(diǎn)編寫第一個簡單的JavaScript程序重點(diǎn)：JavaScript的發(fā)展與組成JavaScript的書寫方式與位置JavaScript的基本語法簡單的輸入輸出語句

1.1JavaScript的誕生和發(fā)展

誕生：在1995年時，Netscape（網(wǎng)景）公司（現(xiàn)在的Mozilla）的布蘭登·愛奇（BrendanEich）在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)出了JavaScript。Netscape最初將這個腳本語言命名為LiveScript，后來Netscape公司與Sun公司合作之后將其改名為JavaScript。在設(shè)計(jì)之初，JavaScript是一種可以嵌入到網(wǎng)頁中的編程語言，用來控制瀏覽器的行為。例如，直接在瀏覽器中進(jìn)行表單驗(yàn)證，用戶只有填寫格式正確的內(nèi)容后才能夠提交表單，這樣避免了用戶因表單填寫錯誤導(dǎo)致的反復(fù)提交，節(jié)省了時間和網(wǎng)絡(luò)資源，示例圖如下。課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)初識JavaScript表單驗(yàn)證課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)初識JavaScriptJavaScript的用途：可以嵌入到網(wǎng)頁中的編程語言，用來控制瀏覽器的行為。案例應(yīng)用如下：利用前后端分離模式進(jìn)行開發(fā)，基于React技術(shù)棧開發(fā)的移動Web項(xiàng)目基于Angular構(gòu)建的響應(yīng)式移動Web項(xiàng)目使用WePY框架并結(jié)合ES6語法開發(fā)小程序電商項(xiàng)目基于Vue.js全套技術(shù)棧開發(fā)出來的網(wǎng)頁端后臺管理系統(tǒng)課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)初識JavaScript基于React開發(fā)的租房項(xiàng)目基于Angular開發(fā)的移動Web預(yù)定酒店項(xiàng)目課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)初識JavaScriptVue.js開發(fā)的后臺管理系統(tǒng)項(xiàng)目小程序電商項(xiàng)目課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)初識JavaScriptJavaScript特點(diǎn)如下：JavaScript是一種腳本語言，特點(diǎn)是簡單、易學(xué)、易用，語法規(guī)則比較松散，能夠快速完成程序的編寫工作JavaScript可以跨平臺，它不依賴操作系統(tǒng)，僅需要瀏覽器的支持JavaScript支持面向?qū)ο?，可以使JavaScript開發(fā)變得快捷和高效，降低開發(fā)成本課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)初識JavaScript

1.2JavaScript的特點(diǎn)

JavaScript由ECMAScript、DOM、BOM三部分組成。課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)初識JavaScript

1.3JavaScript的組成JavaScript組成部分的簡單介紹如下：ECMAScript：是JavaScript的核心。它規(guī)定了JavaScript的編程語法和基礎(chǔ)核心內(nèi)容，是所有瀏覽器廠商共同遵守的一套JavaScript語法工業(yè)標(biāo)準(zhǔn)DOM：文檔對象模型，是W3C組織推薦的處理可擴(kuò)展標(biāo)記語言的標(biāo)準(zhǔn)編程接口，通過DOM提供的接口，可以對頁面上的各種元素進(jìn)行操作BOM：瀏覽器對象模型，它提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)。通過BOM，可以對瀏覽器窗口進(jìn)行操作課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)初識JavaScript工欲善其事，必先利其器，一款優(yōu)秀的開發(fā)工具能夠極大提高程序開發(fā)效率與體驗(yàn)。在Web前端開發(fā)中，常用的開發(fā)工具包括很多，例如：VisualStudioCodeSublimeTextHbuilderAdobeDreamweaverWebStorm課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)初識JavaScript

1.4JavaScript常用開發(fā)工具課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門

2.1代碼書寫位置JavaScript代碼的3種書寫位置：行內(nèi)式、內(nèi)嵌式（嵌入式）、外部式（外鏈?zhǔn)剑?lt;ahref="javascript:alert('Hello');">test</a>用法一行內(nèi)式是將JavaScript代碼作為HTML標(biāo)簽的屬性值使用。<inputtype="button"onclick="alert('Hello');"value="test">用法二課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門注意由于現(xiàn)代網(wǎng)頁開發(fā)提倡結(jié)構(gòu)、樣式、行為的分離，即分離HTML、CSS、JavaScript三部分的代碼，避免直接寫在HTML標(biāo)簽的屬性中，從而更有利于維護(hù)。因此在實(shí)際開發(fā)中不推薦使用行內(nèi)式。課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門<script>JavaScript語句;</script><scripttype="text/javascript">JavaScript語句;</script>示例語法type屬性用于告知瀏覽器腳本的類型。type默認(rèn)值為text/javascript（HTML5），可以省略type屬性。嵌入式就是使用<script>標(biāo)簽包裹JavaScript代碼，直接編寫到HTML文件中。課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門HTML文件……<scriptsrc="js/test.js"></script>……js/test.js文件……alert('Hello');……示例語法外鏈?zhǔn)绞侵笇avaScript代碼保存到一個單獨(dú)的文件中，通常使用“js”作為文件的擴(kuò)展名，然后使用<script>標(biāo)簽的src屬性引入文件中。課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門①相對路徑……test.html……js…………test.js外鏈引入方式：js/test.js①相對路徑……h(huán)tml…………test.html……js…………test.js外鏈引入方式：../js/test.js課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門②絕對路徑website（網(wǎng)站根目錄）……test.html……js…………test.js外鏈引入方式：/js/test.js②絕對路徑…………test.htmlC:……js…………test.js外鏈引入方式：file:///C:/js/test.js課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門③URL地址website（網(wǎng)站根目錄）……test.htmljs.test（某網(wǎng)站根目錄）……file.js外鏈引入方式：http://js.test/file.js若自動使用當(dāng)前頁面協(xié)議，可寫為//js.test/file.js課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門相比嵌入式，外鏈?zhǔn)降膬?yōu)勢可以總結(jié)為以下3點(diǎn)：①嵌入式會導(dǎo)致HTML與JavaScript代碼混合在一起，不利用修改和維護(hù)。②嵌入式會增加HTML文件的體積，影響網(wǎng)頁本身的加載速度，而外鏈?zhǔn)娇梢岳脼g覽器緩存提高速度。③外鏈?zhǔn)接欣诜植际讲渴稹＞W(wǎng)頁中鏈接的js、css、圖片等靜態(tài)文件可以部署到CDN服務(wù)器上，利用CDN的優(yōu)勢加快下載速度。課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門多學(xué)一招JavaScript異步加載存在的問題：引入JavaScript代碼時，頁面的下載和渲染都會暫停，等待腳本執(zhí)行完成后才會繼續(xù)（內(nèi)嵌式或外鏈?zhǔn)剑?。解決的辦法：對于不需要提前執(zhí)行的代碼，將<script>標(biāo)簽放在<body>標(biāo)簽的底部，可以減少對整個頁面下載的影響。課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門在編寫JavaScript代碼時，需要注意基本的語法規(guī)則：JavaScript嚴(yán)格區(qū)分大小寫，在編寫代碼時一定注意大小寫的正確性JavaScript代碼對空格、換行、縮進(jìn)不敏感，一條語句可以分成多行書寫如果一條語句結(jié)束后，換行書寫下一條語句，后面的分號可以省略

2.2基本語法規(guī)則課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門

2.3注釋JavaScript代碼的注釋方式，以及在VSCode編輯器中對應(yīng)的快捷鍵如下：單行注釋：以“//”開始，到該行結(jié)束或<script>標(biāo)簽結(jié)束之前的內(nèi)容都是注釋?？旖萱I：ctrl+/多行注釋：以“/*”開始，以

“*/”結(jié)束。需要注意的是，多行注釋中可以嵌套單行注釋，但不能再嵌套多行注釋。快捷鍵：shift+alt+a課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門

2.4輸入和輸出語句JavaScript代碼中提供了輸入和輸出語句，可以在網(wǎng)頁中實(shí)現(xiàn)用戶交互效果。常用的輸入和輸出語句如下所示：alert(msg)：瀏覽器彈出警告框console.log(msg)：瀏覽器控制臺輸出信息prompt(msg)：瀏覽器彈出輸入框，用戶可以輸入內(nèi)容課程導(dǎo)入任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)JavaScript入門案例演示：alert()方法的使用。<script>alert('這是一個警告框');</script> 示例代碼課程導(dǎo)入任務(wù)導(dǎo)入