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

下載本文檔

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

文檔簡(jiǎn)介

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

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論