Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 單元8 JavaScript基礎與非遺首頁的制作_第1頁
Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 單元8 JavaScript基礎與非遺首頁的制作_第2頁
Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 單元8 JavaScript基礎與非遺首頁的制作_第3頁
Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 單元8 JavaScript基礎與非遺首頁的制作_第4頁
Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 單元8 JavaScript基礎與非遺首頁的制作_第5頁
已閱讀5頁，還剩90頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

信息安全技術應用ApplicationofInformationSecurityTechnology任務導入《前端技術開發》任務導入任務導入任務描述1我們為非遺網站的首頁添加一個輪播圖。另外有兩個方向鍵，可以實現手動切換播放。感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》信息安全技術應用ApplicationofInformationSecurityTechnology變量和常量《前端技術開發》前端技術開發目錄Hello,world!1定義變量2定義常量3數據類型41Hello,world!前端技術開發Hello,world!Web前端技術1<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><script>/*此處可以插入js代碼*/</script></head><body><script>/*此處也可插入js代碼*/</script></body></html><!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><script>console.log('Hello,world!');</script></head><body></body></html>Hello,world!Web前端技術12定義變量前端技術開發定義變量Web前端技術2變量是用來存儲數據的容器?？梢詫⑷魏晤愋偷臄祿ɡ纾瑪底帧⒆址?、布爾值、對象、數組等）存儲在變量中。一旦你給一個變量賦值，你可以隨時更改它的值。letage=25;console.log(age);//輸出：25age=30;console.log(age);//輸出：30定義變量Web前端技術2var和let的區別：1.作用域：var具有函數作用域，而let則具有塊作用域。2.重復聲明：var允許在同一個作用域內重復聲明同一個變量，而let則不允許重復聲明。vara=5;vara=4;console.log(a);//4letb=3;letb=6;console.log(b);//錯誤3定義常量前端技術開發定義常量Web前端技術3常量與變量不同，一旦被賦值，就不能更改。嘗試更改常量的值會導致錯誤。constPI=3.14159;console.log(PI);//輸出：3.14159PI=3.14;//這會導致錯誤4數據類型前端技術開發數據類型Web前端技術4Javascript是一種弱類型的編程語言，這意味著在聲明變量時，不需要指定變量的類型。例如，我們可以聲明一個名為name的變量，并將其值設置為“John”。JavaScript會自動將name變量視為字符串類型。此外，JavaScript還支持對象類型，可以將多個值存儲在一個對象中。例如：letperson={ name:"John", age:30, isStudent:false};console.log();//輸出："John"數據類型Web前端技術4JavaScript中的數組是一種特殊的對象，用于表示和操作有序的數據集。它們用于存儲多個值在單個變量中，并且可以輕松地添加、刪除和修改這些值。letarr1=[1,2,3,4,5];//字面量語法創建數組letarr2=newArray(1,2,3,4,5);//使用Array構造函數創建數組console.log(arr1[0]);//輸出1arr1[0]=10;//修改數組中的元素console.log(arr1[0]);//輸出10deletearr1[0];//刪除數組中的元素console.log(arr1[0]);//輸出undefined感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》信息安全技術應用ApplicationofInformationSecurityTechnology分支和循環《前端技術開發》前端技術開發目錄分支語句1for循環2while循環3數組遍歷41分支語句前端技術開發分支語句Web前端技術1在JavaScript中，if-else語句是一種控制流程結構，它允許基于某個條件執行特定的代碼塊。以下是其基本語法：if(condition){ //代碼塊在條件為真時執行}else{ //代碼塊在條件為假時執行}分支語句Web前端技術1也可以使用elseif來檢查第二個條件：if(condition1){ //代碼塊在condition1為真時執行}elseif(condition2){ //代碼塊在condition2為真時執行}else{ //默認代碼塊，當上面的條件都不滿足時執行}2for循環前端技術開發for循環Web前端技術2循環語句允許程序員重復執行一段代碼，直到滿足特定的條件，大致可分為for循環和while循環。for循環是一種常見的循環類型，允許設置一個計數器，并基于該計數器的值重復執行代碼塊。以下是for循環的一個例子：for(leti=0;i<5;i++){ console.log(i);}for循環Web前端技術2for...of循環是for語句的一種變體，常用于遍歷可迭代對象（如數組、字符串、Map、Set等）的元素。以下是for...of循環的一個例子：constarr=[1,2,3,4,5];for(constvalueofarr){ console.log(value);}3while循環前端技術開發while循環Web前端技術3while循環則會一直執行，直到給定的條件不再滿足。以下是while循環的一個例子：leti=0;while(i<5){ console.log(i); i++;}4遍歷數組前端技術開發遍歷數組Web前端技術4在輪播圖中，切換到最后一副圖片后，下一幅圖片應該是第一張，我們使用分支來判斷：constimages=[//圖片列表 //...略];current=0;//當前顯示的索引while(true){//進入循環 current++; if(current>=images.length){ current=0; }}任務實施Web前端技術在實際應用中，可以進一步簡化代碼：constimages=[//圖片列表 //...略];current=0;//當前顯示的索引while(true){//進入循環 current=(current+1)%images.length}感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》信息安全技術應用ApplicationofInformationSecurityTechnology函數和DOM《前端技術開發》前端技術開發目錄函數1獲取元素2修改屬性3任務實施41函數前端技術開發函數Web前端技術1函數是一段可重復使用的代碼塊，它可以接受輸入（稱為參數），執行一些操作，并返回結果（稱為返回值）。函數在JavaScript中非常核心，因為它們允許我們封裝代碼，使其更易于重用和維護。函數Web前端技術1函數是一段可重復使用的代碼塊，它可以接受輸入（稱為參數），執行一些操作，并返回結果（稱為返回值）。函數在JavaScript中非常核心，因為它們允許我們封裝代碼，使其更易于重用和維護。functiongreet(name){return"Hello,"+name+"!";}console.log(greet("Alice"));//輸出:Hello,Alice!函數Web前端技術1函數的參數可以有默認值。這意味著如果調用函數時沒有提供某個參數的值，那么該參數將使用其默認值。這是從ES2015（也稱為ES6）開始引入的新特性。functiongreet(name="World"){return"Hello,"+name+"!";}console.log(greet("Alice"));//輸出:Hello,Alice!console.log(greet());//輸出:Hello,World!2獲取元素前端技術開發獲取元素Web前端技術2DOM（文檔對象模型）是用于操作HTML和XML文檔的編程接口。DOM允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。下面是一些常用的查詢接口：接口含義getElementById返回具有指定ID的元素。getElementsByClassName返回一個類數組的對象，包含所有具有指定類名的元素。getElementsByTagName返回一個類數組的對象，包含所有具有指定標簽名的元素。querySelector返回匹配指定CSS選擇器的第一個元素。querySelectorAll返回一個NodeList對象，包含所有匹配指定CSS選擇器的元素。獲取元素Web前端技術2其中querySelector和querySelectorAll是HTML5中新增的標準，功能最強大，鼓勵使用。//獲取id為header的元素letheader=document.querySelector('#header');//獲取所有class為section的元素letsections=document.querySelectorAll('.section');//獲取所有p標簽letp=document.querySelectorAll('p');3修改屬性前端技術開發修改屬性Web前端技術3元素身上的style屬性決定了它的外觀。所有CSS中可以定義的屬性在style中都有：<pid="text">Thisisatestmessage.</p><script> lettext=document.querySelector('#text'); text.style.color='blue'; text.style.fontSize='20px';</script>#text{ color:blue; font-size:20px;}修改屬性Web前端技術3CSS的屬性名稱中出現“-”分割的單詞，在style中的屬性名稱就按照小駝峰命名法處理：CSS屬性DOM中的style屬性background-colorbackgroundColorfont-sizefontSize…………4任務實施前端技術開發任務實施Web前端技術4準備好3到5幅圖片，圖片的尺寸盡量保持一致。在頁面上放置一個固定尺寸的圖層作為窗口，窗口的尺寸也和圖片的尺寸保持一致。將所有圖片塞入一個容器（也是圖層），讓圖片水平排列。下面是代碼：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>JavascriptDemo</title><style>.carousel{width:500px;height:280px;margin:auto;}.carousel>img{width:500px;height:280px;display:block;float:left;}</style></head><body><divclass="carousel"><imgsrc=""id="carousel-image"></div></body></html>任務實施Web前端技術4窗口初始化后，使用DOMAPI獲取圖片元素，設置src屬性。<script>constimages=['pic/sample1.jpg','pic/sample2.jpg','pic/sample3.jpg',];letcurrent=0;constimage=document.querySelector('#carousel-image');image.src=images[current];</script>感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》信息安全技術應用ApplicationofInformationSecurityTechnology定時器《前端技術開發》前端技術開發目錄setTimeout1setInterval2區別與轉換3任務實施41setTimeout前端技術開發setTimeoutWeb前端技術1setTimeout(function,milliseconds);//function是你想要在時間過后執行的函數。//milliseconds是希望等待的毫秒數。setTimeout是JavaScript中用于在指定時間后執行函數的方法。這是異步編程的一部分，這意味著setTimeout不會阻止代碼的其余部分繼續執行。setTimeoutWeb前端技術1setTimeout(function(){console.log('Thiswillprintafter2seconds.');},2000);下面的例子中，消息將在2秒后打印到控制臺。setTimeoutWeb前端技術1lettimer=setTimeout(function(){console.log('Thiswillprintafter2seconds.');},2000);clearTimeout(timer);setTimeout返回值是定時器的標識符，可用來停止計時。下面的定時器不會發生，因為創建之后立刻被clearTimeout清除了。2setInterval前端技術開發setIntervalWeb前端技術2setInterval是JavaScript中的一個內置函數，用于定期執行代碼或函數。setInterval(function,delay);//function：要定期執行的函數或代碼。//delay：兩次執行之間的時間間隔，以毫秒為單位。setIntervalWeb前端技術2例如，每隔一秒在控制臺輸出"Hello!"setInterval(function(){console.log("Hello!");},1000);setIntervalWeb前端技術2lettimer=setInterval(function(){console.log("Hello!");},1000);clearInterval(timer);setInterval返回值是定時器的標識符，可用來停止計時。下面的定時器不會發生，因為創建之后立刻被clearInterval清除了。3區別與轉換前端技術開發區別與轉換Web前端技術3setTimeout和setInterval的區別主要在于執行次數：setTimeout的本質是延遲執行，只執行一次。它通常在指定的延遲時間后執行一次回調函數。而setInterval的本質是定時執行，會不斷重復執行，直到被取消。setTimeout轉setInterval：第一次定時器回調函數的最后清除定時。setInterval轉setTimeout：創建遞歸函數進行模擬。區別與轉換Web前端技術3setTimeout(function(){console.log("Hello!");},2000);lettimer=setInterval(function(){console.log("Hello!");clearTimeout(timer);},2000);等價區別與轉換Web前端技術3setInterval(function(){console.log("Hello!");},2000);functionsayHello(){console.log("Hello!");setTimeout(sayHello,2000);}sayHello();等價4任務實施前端技術開發任務實施Web前端技術4使用setInterval定時更新carousel-container的位置，使它不斷向左。需要注意的是，最后一張圖片播放完畢之后，再次把carousel-container復原，繼續播放第一張圖片。//之前的代碼，略//開啟定時器setInterval(function(){current=(current+1)%images.length;image.src=images[current];},5000);感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》項目八

非遺首頁的制作信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》JavaScript基礎任務8.2制作非遺首頁前端技術開發任務引入一頁眉導航輪播圖主要內容頁腳非遺首頁的原型圖將首頁內容劃分為不同的區域，分步實現任務描述1.按照線框圖實現非遺網站首頁的布局2.準備素材豐富頁面的內容3.將輪播圖按照要求嵌入首頁任務實施二3124創建導航欄區域，使用CSS設置樣式使用HTML、CSS創建主要內容使用HTML創建頁眉頁腳區域，并設置CSS樣式創建輪播圖并設置樣式，使用JavaScript實現創建導航欄創建主要內容創建頁眉頁腳區域創建輪播圖任務實施二要點：1.橫向布局2.垂直對齊3.背景樣式設置4.溢出設置1.創建頁眉區域 <divclass="header"> <divclass="container"> <imgid="logo"src="res/logo.png"> <h1>中國非物質文化遺產</h1> <inputtype="text"id="txtSearch"placeholder="站內搜索"> </div> </div>任務實施二要點：1.無序列表樣式2.列表項浮動設置3.超鏈接樣式2.創建導航欄區域 <divclass="nav"> <divclass="container"> <ulclass="navbar"> <liclass="active"><ahref="#">首頁</a></li> <li><ahref="#">機構</a></li> <li><ahref="#">資訊</a></li> <li><ahref="#">調研</a></li> <li><ahref="#">指南</a></li> </ul> </div> </div>任務實施二要點：1.CSS設置元素樣式2.JavaScript實現圖片輪播效果3.創建輪播圖區域 <divclass="carousel"> <divclass="arrow-left"><</div> <imgid="img-carousel"> <divclass="arrow-right">></div> </div>任務實施二要點：1.層布局4.創建主要內容區域<divclass="containermain"> <!--圖片新聞--> <div><h2class="title">圖片新聞</h2></div> <!--熱點關注--> <div><h2class="title">熱點關注</h2></div> <!--公示公告--> <div><h2class="title">公示公告</h2></div></div>感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》信息安全技術應用ApplicationofInformationSecurityTechnology事件《前端技術開發》前端技術開發目錄事件的概念1綁定事件2取消事件3任務實施41事件的概念前端技術開發事件的概念Web前端技術1在JavaScript中，事件是一個非常重要的概念，它指的是在特定時間或條件下發生的事情。事件可以由用戶與網頁的交互觸發，例如點擊按鈕、移動鼠標或按下鍵盤等。也可以由瀏覽器自動觸發，例如頁面加載完成或瀏覽器窗口大小改變等。事件在JavaScript中通常與事件處理程序一起使用，事件處理程序是一段代碼，當特定事件發生時會被調用。例如，當用戶點擊一個按鈕時，可以觸發一個“click”事件，并執行相應的事件處理程序。事件的概念Web前端技術1常見的事件事件含義click鼠標單擊dblclick鼠標雙擊mousemove鼠標移動mouseenter鼠標移入元素范圍mouseout鼠標移除元素范圍keydown鍵盤按下keyup鍵盤彈起2綁定事件前端技術開發綁定事件Web前端技術21.在標簽內聲明事件回調函數在HTML中，我們經常需要為元素添加事件監聽器，以便在用戶與頁面交互時執行某些操作。例如，當用戶點擊一個按鈕時，我們可能希望執行某些JavaScript代碼。為了實現這個功能，我們可以使用HTML的事件屬性來聲明回調函數。<buttononclick="myclick()">Clickme</button><script>functionmyclick(){ console.log('Hello,world!');}</script>綁定事件Web前端技術22.使用“on”前綴聲明事件回調函數在標簽內聲明回調函數的缺陷在于很難批量修改。其實，事件也可以通過Javascript動態添加，它使得代碼更加清晰和易于理解。<buttonid="btn">Clickme</button><script>constbtn=document.querySelector('#btn');btn.onclick=function(){ console.log('Hello,world!');}</script>綁定事件Web前端技術23.使用addEventListener聲明事件回調函數addEventListener方法用于在元素上添加事件監聽器。這個方法接受兩個參數：事件名稱和回調函數。當指定的事件被觸發時，這個回調函數就會被執行。//獲取元素varbutton=document.querySelector('#myButton');//定義事件回調函數functionhandleClick(){alert('按鈕被點擊了！');}//添加事件監聽器button.addEventListener('click',handleClick);綁定事件Web前端技術2使用addEventListener多重綁定//獲取元素varbutton=document.querySelector('#myButton');//兩個回調函數button.addEventListener('click',handleClick1);button.addEventListener('click',handleClick2);綁定事件Web前端技術2使用addEventListener監聽自定義事件：//獲取元素varbutton=document.querySelector('#myButton');//兩個回調函數button.addEventList

溫馨提示

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

評論

0/150

提交評論