JavaScript+jQuery Web前端開發(fā)技術(shù)（微課版）教案-教學(xué)設(shè)計 學(xué)習(xí)單元1 初識JavaScript 教學(xué)設(shè)計_第1頁
JavaScript+jQuery Web前端開發(fā)技術(shù)（微課版）教案-教學(xué)設(shè)計 學(xué)習(xí)單元1 初識JavaScript 教學(xué)設(shè)計_第2頁
JavaScript+jQuery Web前端開發(fā)技術(shù)（微課版）教案-教學(xué)設(shè)計 學(xué)習(xí)單元1 初識JavaScript 教學(xué)設(shè)計_第3頁
JavaScript+jQuery Web前端開發(fā)技術(shù)（微課版）教案-教學(xué)設(shè)計 學(xué)習(xí)單元1 初識JavaScript 教學(xué)設(shè)計_第4頁
JavaScript+jQuery Web前端開發(fā)技術(shù)（微課版）教案-教學(xué)設(shè)計 學(xué)習(xí)單元1 初識JavaScript 教學(xué)設(shè)計_第5頁
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效《JavaScript+jQueryWeb前端開發(fā)技術(shù)（微課版）》教學(xué)設(shè)計課程名稱：授課班級：授課學(xué)期：教師姓名：年月

課題名稱學(xué)習(xí)單元1初識JavaScript計劃課時4課時教學(xué)引入在Web前端開發(fā)中，利用HTML和CSS能夠編寫出各式各樣的精美網(wǎng)頁，若想讓網(wǎng)頁具有良好的交互性、并能減輕服務(wù)器端的負(fù)擔(dān)、具有動感特效等功能，JavaScript是一個極佳的選擇。JavaScript擁有近二十年的發(fā)展歷史，它的簡單易學(xué)易用的特性，使其始終立于不敗之地。本單元主要介紹JavaScript的基本概念及搭建JavaScript的開發(fā)環(huán)境。教學(xué)目標(biāo)1.知識目標(biāo)（1）了解JavaScript基本概念、特點；（2）了解常用的開發(fā)工具以及常用瀏覽器；（3）掌握J(rèn)avaScript的結(jié)構(gòu)組成；（4）掌握J(rèn)avaScript的引入方式及基本的語法規(guī)則。2.技能目標(biāo)（1）能夠獨立完成JavaScript開發(fā)工具的選擇、安裝與使用；（2）能夠編寫、運行一個簡單的JavaScript程序；（3）靈活運用控制臺進(jìn)行程序的調(diào)試。3.素養(yǎng)目標(biāo)（1）培養(yǎng)自主學(xué)習(xí)能力素養(yǎng)；（2）了解我國前端開發(fā)工具的技術(shù)發(fā)展，激發(fā)學(xué)生的愛國情懷。教學(xué)重點JavaScript的結(jié)構(gòu)組成JavaScript代碼引入方式教學(xué)難點靈活運用控制臺進(jìn)行程序的調(diào)試教學(xué)過程任務(wù)1.1為網(wǎng)頁添加歡迎彈窗——JavaScript概述（2課時）一、任務(wù)描述為傳承和弘揚中華優(yōu)秀傳統(tǒng)文化，本任務(wù)選取以詩歌為主題的利用HTML5+CSS3技術(shù)開發(fā)的詩歌賞析網(wǎng)站為設(shè)計載體，用戶可以根據(jù)個人喜好，為某一網(wǎng)頁設(shè)置打開時的歡迎彈窗以表達(dá)我們的熱情好客，歡迎彈窗可以手動關(guān)閉，也可自動關(guān)閉。二、任務(wù)分析要添加歡迎彈窗效果，借助JavaScript即可實現(xiàn)。JavaScript代碼添加有三種方式：行內(nèi)式、內(nèi)嵌式和外鏈?zhǔn)?。因為只為一個頁面添加彈出框，在此選擇用內(nèi)嵌式實現(xiàn)。三、知識點講解1、認(rèn)識JavaScriptJavaScript最初由網(wǎng)景公司設(shè)計的，是一種解釋性的、基于對象和事件驅(qū)動的，具有安全性能的腳本語言。JavaScript作為一種腳本語言，已經(jīng)被廣泛地應(yīng)用于Web頁面當(dāng)中，通過嵌入HTML來實現(xiàn)各種炫酷的動態(tài)效果，為用戶提供賞心悅目的瀏覽效果。2、JavaScript特點JavaScript具有腳本語言、基于對象、簡單、動態(tài)性、跨平臺性、安全性等多個特點。3、JavaScript的結(jié)構(gòu)組成JavaScript是甲骨文公司的注冊商標(biāo)，完整的JavaScript實現(xiàn)包含三個部分：ECMAScript，文檔對象模型（DOM）和瀏覽器對象模型（BOM）。4、JavaScript引入方式在網(wǎng)頁中引入JavaScript有三種方式：行內(nèi)式、內(nèi)嵌式和外鏈?zhǔn)健?、JavaScript基本語法規(guī)則（1）語句順序執(zhí)行JavaScript程序按照在HTML文檔中的排列順序自上而下順序執(zhí)行。區(qū)分大小寫JavaScript嚴(yán)格區(qū)分字母大小寫，大寫字母和小寫字母不能互相替換。（3）代碼格式通常每條JavaScript語句后面以分號（;）結(jié)尾，每個單詞之間用空格隔開。但以下情形可將語句后的分號（;）省略。①語句各自獨占一行，通?？梢允÷越Y(jié)尾的分號；②程序結(jié)束或者右花括號（}）之前的分號也可以省略。（4）代碼注釋注釋可以用來解釋程序某些部分的功能和作用，提高程序的可讀性。注釋還可以用來暫時屏蔽某些語句，等到需要的時候，只需要取消注釋標(biāo)記即可。JavaScript中主要包含兩種注釋：單行注釋和多行注釋，具體如下。①單行注釋：使用（//），示例代碼如下：vari=1;//單行注釋②多行注釋：使用（/*）開頭，使用（*/）結(jié)尾，示例代碼如下：/*vari=1;varu=2;*/注意：多行注釋可以跨多行，但不能嵌套使用四、任務(wù)實施1、打開基礎(chǔ)網(wǎng)頁首先打開一個已經(jīng)定義好的需要添加歡迎彈出框的網(wǎng)頁源代碼，例如本書素材中為讀者提供的詩歌賞析網(wǎng)站首頁。2、添加JavaScript代碼在網(wǎng)頁頭部標(biāo)簽<head>和</head>之間添加JavaScript代碼。本案例中引入了多個CSS文件，在最后一個CSS文件引入語句的下面添加<script>標(biāo)簽，引入JavaScript代碼。<scripttype="text/JavaScript"> alert("歡迎訪問詩歌賞析網(wǎng)站");</script>3、保存并運行文件頁保存并運行文件，系統(tǒng)首先彈出“歡迎訪問詩歌賞析網(wǎng)站”的歡迎彈出框。五、課堂實踐通過測試題的方式檢測學(xué)生知識學(xué)習(xí)，通過任務(wù)實踐掌握J(rèn)avaScript的基本應(yīng)用。任務(wù)1.2查看網(wǎng)頁運行時數(shù)據(jù)——JavaScript的開發(fā)與調(diào)試（2課時）一、復(fù)習(xí)鞏固教師通過任務(wù)1.1的完成情況和測試題的測試結(jié)果進(jìn)行分析，對學(xué)生掌握薄弱的知識點和技能點進(jìn)行復(fù)習(xí)鞏固。二、任務(wù)描述工欲善其事，必先利其器。為項目開發(fā)選擇一款合適的開發(fā)工具以提高開發(fā)效率，隨時查看運行時數(shù)據(jù)以便更好的掌控程序的運行。三、任務(wù)分析JavaScript是一種腳本語言，代碼不需要編譯成二進(jìn)制，而是以文本的形式存在，因此任何文本編輯器都可以作為其開發(fā)環(huán)境。我國在Web前端開發(fā)領(lǐng)域取得了很多成績，其中國產(chǎn)新一代前端開發(fā)工具HBuilder，輕巧、極速、強(qiáng)大等特點，深受前端開發(fā)者的喜愛，國產(chǎn)編輯器的成功也是對我們最大的鼓勵。掌握程序調(diào)試方法，能夠大大提高項目開發(fā)效率，利用瀏覽器的控制臺就可以查看程序運行時數(shù)據(jù)。四、知識點講解1、常用開發(fā)工具在Web前端開發(fā)中，常用的開發(fā)工具有HBuilder、WebStorm、AdobeDreamweaver、VisualStudiocode等。2、常用瀏覽器瀏覽器是訪問互聯(lián)網(wǎng)中各種網(wǎng)站所必備的工具。瀏覽器瀏覽器內(nèi)核特點開發(fā)商InternetExplorerTrident排版引擎、ChakraJavaScript引擎Windows操作系統(tǒng)的內(nèi)置瀏覽器，用戶數(shù)量多。Trident引擎被設(shè)計成一個軟件組件(模塊)，使得其它軟件開發(fā)人員很容易的將網(wǎng)頁瀏覽的功能加到他們自行開發(fā)的應(yīng)用程序里。MicrosoftMicrosoftEdgeEdge排版引擎、ChakraJavaScript引擎Windows10操作系統(tǒng)的內(nèi)置瀏覽器，速度快、功能多。區(qū)別于IE的主要功能，Edge支持現(xiàn)代瀏覽器功能，比如擴(kuò)展等。MicrosoftGoogleChromeWebKit排版引擎、V8JavaScript引擎市場占有份額較高的瀏覽器，該瀏覽器基于其他開源軟件撰寫，目標(biāo)是提升穩(wěn)定性、速度和安全性，并創(chuàng)造出簡單且有效率的使用者界面。GoogleMozillaFirefoxGecko排版引擎、SpiderMonkey（1.0-3.0）/TraceMonkey（3.5-3.6）/JaegerMonkey（4.0）JavaScript引擎一個自由及開放源代碼的網(wǎng)頁瀏覽器，支持多種操作系統(tǒng)，如Windows、macOS及GNU/Linux等。MozillaSafariWebKit排版引擎、JavaScriptCoreJavaScript引擎是各類蘋果設(shè)備（如Mac、iPhone、iPad、iPodTouch）的默認(rèn)瀏覽器Apple瀏覽器內(nèi)核主要分成兩部分：排版引擎和JavaScript引擎。排版引擎負(fù)責(zé)將讀取的網(wǎng)頁內(nèi)容進(jìn)行解析和處理，然后顯示到瀏覽器中；JavaScript引擎是用來渲染JavaScript的，JavaScript的渲染速度越快，動態(tài)網(wǎng)頁的展示也越快。3、控制臺的使用（1）利用控制臺進(jìn)行輸入與輸出在瀏覽器的控制臺中可以直接輸入JavaScript代碼來執(zhí)行，也可以在顯示程序中利用console.log()語句來輸出結(jié)果，這為程序調(diào)試提供了極大便利（2）利用控制臺進(jìn)行程序調(diào)試對于用戶輸入的程序段，還可以利用控制臺進(jìn)行代碼調(diào)試。五、任務(wù)實施1、軟件下載與安裝利用搜索引擎搜索并打開HBuilder官網(wǎng)網(wǎng)站，單擊“HBuilderX極客開發(fā)工具”鏈接，打開下載頁面進(jìn)行下載。HBuilder是一款免安裝軟件，安裝文件下載完畢后直接解壓縮文件，在解壓后的文件夾中雙擊HBuilder快捷方式即可打開使用。2、編輯JavaScript代碼打開任務(wù)1.1的詩歌賞析網(wǎng)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論