PAGE10PAGE大數(shù)據(jù)可視化分析課程教案首頁(yè)7-1一、核心要素章節(jié)名稱項(xiàng)目4智慧農(nóng)業(yè)大屏數(shù)據(jù)傳輸4.1.3JavaScript函數(shù)4.1.4文檔對(duì)象模型教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)技術(shù)2401班授課時(shí)間第7周-1授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握J(rèn)avaScript的函數(shù)定義與調(diào)用。2.了解使用jQuery操作DOM的方法。3.了解DOMwe文檔對(duì)象模型。能力目標(biāo)1.能熟練使用JavaScript函數(shù)進(jìn)行功能實(shí)現(xiàn)。2.能夠深入理解DOM文檔對(duì)象模型。素質(zhì)目標(biāo)1.在完成任務(wù)后，協(xié)助其他小組成員完成相關(guān)任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作能力。2.通過(guò)對(duì)任務(wù)功能的理解，完成相關(guān)功能開(kāi)發(fā)，培養(yǎng)理解能力。3.通過(guò)描述功能的研發(fā)過(guò)程，在小組內(nèi)相互演練、講解，培養(yǎng)表達(dá)能力。4.通過(guò)功能實(shí)現(xiàn)，了解與掌握相關(guān)知識(shí)并對(duì)其應(yīng)用，培養(yǎng)學(xué)習(xí)能力。教學(xué)內(nèi)容主要內(nèi)容任務(wù)準(zhǔn)備JavaScript函數(shù)與DOM文檔對(duì)象模型重點(diǎn)JavaScript函數(shù)難點(diǎn)DOM對(duì)象；JavaScript的函數(shù)定義與調(diào)用。教法改革教學(xué)方法問(wèn)答法/范例教學(xué)法教學(xué)手段（1）通過(guò)課堂討論提出問(wèn)題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思采用問(wèn)答互動(dòng)后，多數(shù)學(xué)生僅在表層回應(yīng)。后續(xù)需設(shè)計(jì)階梯式問(wèn)題鏈，例如：從"這個(gè)圖表能展現(xiàn)什么趨勢(shì)？"進(jìn)階到"若改為環(huán)形圖會(huì)損失什么信息？為什么？"

二、教學(xué)設(shè)計(jì)教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計(jì)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配一、課程導(dǎo)入回顧上次課的內(nèi)容：1、JavaScript引入方式？?jī)?nèi)部JavaScript、內(nèi)聯(lián)JavaScript、外鏈?zhǔn)絁avaScript。2、在聲明變量時(shí)，JavaScript可否一個(gè)語(yǔ)句聲明多個(gè)變量？如果可以，是如何實(shí)現(xiàn)？在聲明變量時(shí)，可以一個(gè)語(yǔ)句聲明多個(gè)變量。在聲明變量時(shí)，可以為其賦值，但在未賦值的情況下，該變量的默認(rèn)值為undefined。3、JavaScript的對(duì)象包含什么？如何訪問(wèn)JavaScript對(duì)象的屬性？對(duì)象包含屬性和方法，可以通過(guò)“.”和“[]”訪問(wèn)對(duì)象的屬性。教師提問(wèn)、引導(dǎo)討論，給出答案回答問(wèn)題，進(jìn)行思考10分鐘二、JavaScript函數(shù)4.1.3JavaScript函數(shù)函數(shù)是被設(shè)計(jì)執(zhí)行特定任務(wù)的代碼塊，其包裹在花括號(hào)中，且在函數(shù)名前面使用了關(guān)鍵詞function。函數(shù)用于表示一個(gè)行為，它是一個(gè)獨(dú)立的功能。匿名函數(shù)是沒(méi)有名稱的函數(shù)，存儲(chǔ)在變量中的函數(shù)不需要函數(shù)名。在該函數(shù)被調(diào)用時(shí)，使用的是變量名。當(dāng)調(diào)用該函數(shù)時(shí)，會(huì)執(zhí)行函數(shù)內(nèi)的代碼。在事件發(fā)生時(shí)可以直接調(diào)用函數(shù)(如用戶單擊按鈕時(shí))，并且可由JavaScript在任何位置調(diào)用。在調(diào)用函數(shù)時(shí)，可以向函數(shù)傳遞值，這些值被稱為參數(shù)；在聲明函數(shù)時(shí)，可以將參數(shù)作為變量來(lái)聲明，參數(shù)之間用逗號(hào)分隔。同學(xué)們觀看幻燈片，進(jìn)行思考，提出問(wèn)題，教師進(jìn)行答疑和解決。教師講解演示與答疑學(xué)生觀看演示并同步操作20分鐘三、JavaScript文檔對(duì)象模型4.1.4文檔對(duì)象模型文檔對(duì)象模型(DocumentObjectModel,DOM)是W3C制定的標(biāo)準(zhǔn)接口規(guī)范,是一種處理HTML文檔和XML文檔的標(biāo)準(zhǔn)API。DOM提供了對(duì)整個(gè)文檔的訪問(wèn)模型，將文檔作為一個(gè)樹(shù)形結(jié)構(gòu)，樹(shù)的每個(gè)結(jié)點(diǎn)都表示一個(gè)HTML標(biāo)簽或標(biāo)簽內(nèi)的文本項(xiàng)。DOM樹(shù)結(jié)構(gòu)精確地描述了HTML文檔中標(biāo)簽間的關(guān)聯(lián)性。將HTML文檔或XML文檔轉(zhuǎn)化為DOM樹(shù)的過(guò)程被稱為解析(parse)。HTML文檔被解析后，將轉(zhuǎn)化為DOM樹(shù)，因此對(duì)HTML文檔的處理可以通過(guò)對(duì)DOM樹(shù)的操作實(shí)現(xiàn)。DOM模型不僅描述了文檔的結(jié)構(gòu)，還定義了結(jié)點(diǎn)對(duì)象的行為，借助對(duì)象的方法和屬性，可以方便地訪問(wèn)、修改、添加和刪除DOM樹(shù)的結(jié)點(diǎn)和內(nèi)容。通過(guò)DOM結(jié)構(gòu)將網(wǎng)頁(yè)代碼繪制成節(jié)點(diǎn)層次圖，如圖所示。html元素位于頂端，它沒(méi)有“父輩”也沒(méi)有“兄弟”，稱為DOM的根元素。深入一層可以發(fā)現(xiàn)，html下有head和body兩個(gè)分支，它們?cè)谕粚又星也换ハ喟鼈冎g是“兄弟”關(guān)系，有著共同的父元素html。再往下可以發(fā)現(xiàn)head有一個(gè)子元素title,而body有兩個(gè)子元素,分別是a和h1。同學(xué)們查看運(yùn)行結(jié)果，提出問(wèn)題，教師進(jìn)行答疑和解決。——————————————————————————————————思政內(nèi)容：通過(guò)對(duì)任務(wù)功能的理解，完成相關(guān)功能開(kāi)發(fā)，培養(yǎng)理解能力。教師講解演示與答疑學(xué)生觀看演示并同步操作20分鐘四、JavaScript規(guī)范2.JavaScript規(guī)范(1)按從上到下的順序執(zhí)行。JavaScript程序按照在HTML文檔中的排列順序逐行執(zhí)行。(2)區(qū)分字母大小寫(xiě)。JavaScript嚴(yán)格區(qū)分字母大小寫(xiě)。在輸入關(guān)鍵字、函數(shù)名、變量及其他標(biāo)識(shí)符時(shí)，都必須采用正確的大小寫(xiě)形式。例如，變量username與變量UserName是兩個(gè)不同的變量。(3)每行結(jié)尾的分號(hào)可有可無(wú)。但為了代碼的準(zhǔn)確性，建議加上分號(hào)。(4)注釋規(guī)范。//用于單行注釋，/**/用于多行注釋。(5)JavaScript采用駝峰式命名法。——————————————————————————————————思政內(nèi)容：通過(guò)對(duì)任務(wù)功能的理解，完成相關(guān)功能開(kāi)發(fā)，培養(yǎng)理解能力。教師講解演示與答疑學(xué)生觀看演示并同步操作20分鐘五、課堂小結(jié)?課程總結(jié)與答疑。總結(jié)知識(shí)點(diǎn)問(wèn)答、討論10分鐘

大數(shù)據(jù)可視化分析課程教案首頁(yè)7-1一、核心要素章節(jié)名稱項(xiàng)目4智慧農(nóng)業(yè)大屏數(shù)據(jù)傳輸任務(wù)實(shí)施4.1在智慧農(nóng)業(yè)大屏中顯示智慧農(nóng)業(yè)公司簡(jiǎn)介教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)技術(shù)2401班授課時(shí)間第7周-1授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握J(rèn)avaScript循環(huán)的相關(guān)知識(shí)。2.掌握J(rèn)avaScript的函數(shù)定義與調(diào)用。3.了解使用jQuery操作DOM的方法。4.了解JSON數(shù)據(jù)結(jié)構(gòu)。5.了解使用jQuery加載JSON數(shù)據(jù)的方法。能力目標(biāo)1.能分析Excel表格中的數(shù)據(jù)，構(gòu)成JSON對(duì)象結(jié)構(gòu)數(shù)據(jù)。2.能使用jQuery將數(shù)據(jù)顯示在頁(yè)面的指定位置。3.能使用jQuery加載本地JSON文件，解析并提取相關(guān)數(shù)據(jù)。4.能使用瀏覽器的調(diào)試工具查看指定位置代碼。素質(zhì)目標(biāo)1.在完成任務(wù)后，協(xié)助其他小組成員完成相關(guān)任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作能力。2.通過(guò)對(duì)任務(wù)功能的理解，完成相關(guān)功能開(kāi)發(fā)，培養(yǎng)理解能力。3.通過(guò)描述功能的研發(fā)過(guò)程，在小組內(nèi)相互演練、講解，培養(yǎng)表達(dá)能力。4.通過(guò)功能實(shí)現(xiàn)，了解與掌握相關(guān)知識(shí)并對(duì)其應(yīng)用，培養(yǎng)學(xué)習(xí)能力。教學(xué)內(nèi)容主要內(nèi)容任務(wù)實(shí)施4.1在智慧農(nóng)業(yè)大屏中顯示智慧農(nóng)業(yè)公司簡(jiǎn)介重點(diǎn)JavaScript事件及事件驅(qū)動(dòng)。難點(diǎn)DOM對(duì)象；JSON數(shù)據(jù)傳遞；JavaScript的函數(shù)定義與調(diào)用。教法改革教學(xué)方法問(wèn)答法/范例教學(xué)法教學(xué)手段（1）通過(guò)課堂討論提出問(wèn)題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思嘗試融入智慧農(nóng)業(yè)案例時(shí)，學(xué)生更多關(guān)注數(shù)據(jù)本身。后續(xù)課程將提前設(shè)計(jì)跨學(xué)科引導(dǎo)問(wèn)題，如："該數(shù)據(jù)若用于智慧農(nóng)業(yè)資源調(diào)配會(huì)如何呈現(xiàn)？需要補(bǔ)充哪些維度？"

二、教學(xué)設(shè)計(jì)教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計(jì)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配一、課程導(dǎo)入本任務(wù)主要完成智慧農(nóng)業(yè)大屏中“智慧農(nóng)業(yè)公司簡(jiǎn)介”模塊，使用jQuery操作DOM的方式，將公司簡(jiǎn)介放置在指定位置。準(zhǔn)備數(shù)據(jù)文件“農(nóng)業(yè)數(shù)據(jù)平臺(tái)簡(jiǎn)介信息xlsx”,代碼基礎(chǔ)文件“FarmingCenterScreen4.1.zip”。任務(wù)效果如圖所示。教師提問(wèn)、引導(dǎo)討論，給出答案回答問(wèn)題，進(jìn)行思考10分鐘二、修改智慧農(nóng)業(yè)公司簡(jiǎn)介模塊標(biāo)題(1)在HBuilderX中運(yùn)行FarmingCenterScreen項(xiàng)目,在瀏覽器中訪問(wèn),如圖所示，確認(rèn)“智慧農(nóng)業(yè)公司簡(jiǎn)介”模塊的位置。(2)在HBuilderX中找到左上標(biāo)題的代碼塊，修改標(biāo)題為“智慧農(nóng)業(yè)公司簡(jiǎn)介”，如圖所示。(3)在瀏覽器中刷新頁(yè)面，顯示標(biāo)題修改成功，如圖所示。同學(xué)們觀看幻燈片，進(jìn)行思考，提出問(wèn)題，教師進(jìn)行答疑和解決。教師講解演示與答疑學(xué)生觀看演示并同步操作15分鐘三、修改模塊內(nèi)容(1)打開(kāi)“農(nóng)業(yè)數(shù)據(jù)平臺(tái)-簡(jiǎn)介信息.xlsx”文件，將列標(biāo)題名稱寫(xiě)入代碼，如圖所示，修改后按快捷鍵Ctrl+s保存。(2)在js文件夾下創(chuàng)建js文件。右擊js文件夾，選擇“新建→js文件”命令，如圖所示，將新建的文件命名為“mainl.js”，用于編寫(xiě)特定模塊的方法，以便維護(hù)和管理。使用相同的方式，創(chuàng)建mainjs文件，如圖所示，用于調(diào)用各類方法。(3)在index.html文件中引用main.js文件和main1.js文件,如圖所示。同學(xué)們查看運(yùn)行結(jié)果，提出問(wèn)題，教師進(jìn)行答疑和解決。——————————————————————————————————思政內(nèi)容：在觀察項(xiàng)目開(kāi)發(fā)過(guò)程中涉及的數(shù)據(jù)、個(gè)人資料及企業(yè)文檔要進(jìn)行保密，培養(yǎng)遵紀(jì)守法的意識(shí)。教師講解演示與答疑學(xué)生觀看演示并同步操作15分鐘四、使用jQuery修改模塊中的值(1)為class="list"的div元素中的<p>標(biāo)簽和<span>標(biāo)簽添加ID。參考ID的編號(hào)如下，id屬性的對(duì)應(yīng)位置如圖所示。智慧農(nóng)業(yè)公司簡(jiǎn)介:main1introduction1。合作農(nóng)田:mainlintroduction2。合作農(nóng)戶:mainlintroduction3。年總產(chǎn)值:main1introduction4。耕地面積:mainlintroduction5。經(jīng)濟(jì)作物種類:main1introduction6。技術(shù)專家:main1introduction7。(2)以“合作農(nóng)田”為例，使用jQuery的DOM操作，通過(guò)ID為“合作農(nóng)田”加入數(shù)據(jù)。打開(kāi)main1.js文件,創(chuàng)建index01函數(shù),并使用text()方法輸入數(shù)據(jù)。functionindex01(){$("mainlintroduction2").text("1000");}(3)在main.js文件中，調(diào)用index01函數(shù)刷新頁(yè)面，查看是否顯示“合作農(nóng)田”的數(shù)據(jù)。若可顯示數(shù)據(jù)則證明程序可以與數(shù)據(jù)建立聯(lián)系。$(function(){index01();});(4)參照“農(nóng)業(yè)數(shù)據(jù)平臺(tái)-簡(jiǎn)介信息.xlsx”文件內(nèi)容，在main1.js文件中,使用id屬性值添加其他數(shù)據(jù)。functionindex01(){$('#mainlintroductionl').text("本公司將信息科技、工程技術(shù)和農(nóng)業(yè)科技徹底融入農(nóng)業(yè)生產(chǎn),通過(guò)“天、空、地、機(jī)、人”五維一體的數(shù)字化管理體系，全面提高農(nóng)場(chǎng)生產(chǎn)效率、管理效率，提升農(nóng)產(chǎn)品附加值，增加產(chǎn)出收益。")；$("mainlintroduction2").text("1000畝");$('#mainlintroduction3').text("500戶");$("mainlintroduction4').text("7000萬(wàn)元");$("mainlintroduction5').text("1000畝");$("mainlintroduction6').text("40種");$("mainlintroduction7").text("50人");}刷新頁(yè)面，查看運(yùn)行效果。教師講解演示與答疑學(xué)生觀看演示并同步操作15分鐘五、使用jQuery修改模塊中的值（JSON）此外，也可以調(diào)用JSON數(shù)據(jù)實(shí)現(xiàn)相同的顯示效果。·在FarmingCenterScreen項(xiàng)目中添加data目錄,并在目錄中新建introduction.json文件用于存放JSON數(shù)據(jù)，數(shù)據(jù)格式如下。{"introduction"："本公司將信息科技、工程技術(shù)和農(nóng)業(yè)科技徹底融入農(nóng)業(yè)生產(chǎn)，通過(guò)“天、空、地、機(jī)、人”五維一體的數(shù)字化管理體系，全面提高農(nóng)場(chǎng)生產(chǎn)效率、管理效率，提升農(nóng)產(chǎn)品附加值，增加產(chǎn)出收益。”,"farmland":1000畝,"farmer":500戶,"grossAnnualValue":"7000萬(wàn)元","cultivatedArea":"1000畝","species":"40種","technologist":"50人"}使用getJSON()方法加載data/introduction.json,使用jQuery獲取data屬性值,并存放于對(duì)應(yīng)的DOM中。functionindex01(){$.getJSON('./data/introduction.json',function(data){$("mainlintroductionl").text(data.introduction);$("mainlintroduction2").text(data.farmland);$("mainlintroduction3').text(data.farmer);$("mainlintroduction4').text(data.grossAnmualValue);$("mainlintroduction5').text(d