? ? ? ? 書接上回說到的前端3種主語言以及其用法,這期我們再來探討一下javascript的一些編碼技術。
一) 自定義函數
????????假如你要使用一個功能,正常來說直接敲出來便可。可如果這個功能你要用不止一次呢?難道你每次都敲出來嗎?這個時侯,就要用到我們的自定義函數了。
function <函數名>(){<函數內容>; //設置函數
}<函數名>(); //調用函數
這就是自定義函數的模板,下面給大家舉個例子。
function warning(){alert("未滿18歲禁止瀏覽"); //定義warning為alert(彈窗警告)
}warning(); //調用warning函數
??
=> function的應用也分前後端的,而能夠在網頁顯示的都是屬於前端的(即上篇文章說的代碼)。
二) DOM操控
? ? ? ? 我們的網頁其實是一個HTML啊,而HTML背後就是DOM,即document模型。可document模型是啥呢?document就是文本的意思,而document跟windows一樣有很多層目錄啊,我們就可以通過document命令操作HTML標籤的屬性、樣式,內容。
<操作對象>.<對對象的操作>("<參數名>").<具體操作><body><p id="a">hello world</p>
</body>
<script>document.getElementById("a").innerHTML="你別在這睡"
</script>
- get = 獲取 , element = 元素 , by = 通過 , id = 名而己
? ? ? ? 所以getElementById = 透過Id找到該元素 (說白了 就是找到要操作的標籤)
- innerHTML=" "
? ? ? ? 就是以" "內的內容替代原來的內容,即hello world會變成你別在這睡。
DOM事件? ? ??
? ? ? ? DOM除了能修改內容外,還有非常多的功能。比如雙擊圖標打開程序,按Esc鍵退出全螢幕,服務器報錯時的彈窗等等。這些滿足條件後觸發的事件就是DOM事件。
? ? ? ? 因為DOM事件有很多哈,這邊只能挑一些跟大家講解,大家有興趣可以去 www.runoob.com/jsef/dom-obj-event.html?看看。
a.) onclick
//onclick = 點擊<body><button onclick="alert('你別在這睡,你怎麼哭著臉')>靠腰</button> //不能用雙括號"",只能用單括''
</body>
<!-- 點解按鈕觸發彈窗 -->
b.) onkeydown
<script>document.addEventListener("keydown",function(event){
//鍵盤監聽,注意:在非ie瀏覽器和非ie內核的瀏覽器
//參數1:表示事件,keydown:鍵盤向下按;參數2:表示要觸發的事件switch(event.key){case " ": //按下空白鍵alert("超長前搖了解一下");break;case "Enter": //按下回車鍵alert("superidol的笑容都沒你的甜");break;}});</script>
//這屬於後端指令,後面會跟大家細說
=> 按space鍵:
=> 按Enter鍵:
? ? ? ? 又或者可以直按在HTML裡使用:
<p onkeydown="if(event.key.toLowerCase()=='a'){alert('北極熊騎秦始皇')}" tabindex="0">秦始皇騎北極熊
</p>
? ? ? ? 好像很複雜的樣子,其實你只需要知道代碼的用處、運作的邏輯就可以了,上篇已經說了trae內置AI幫忙寫代碼[上篇開頭有下載鏈接],或者直接把要求打在代碼那邊就可以了。
????????所以我們只需要理解代碼而不是怎麼用代碼,當然,學是一定要學的,不然就真讓AI取代了。那麼好,這前端篇到這裡就結束了,下篇我們正式開始後端篇,欲知後事如何,且聽小編 下回分解。