書接上回：前端開發技術教學(一) -CSDN博客
必要資源：TRAE - The Real AI Engineer
目录
一) 自定義函數
- function
二) DOM操控
DOM事件
a.) onclick
b.) onkeydown
三) AI寫代碼
書接上回說到的前端3種主語言以及其用法，這期我們再來探討一下javascript的一些編碼技術。
一) 自定義函數
- function
假如你要使用一個功能，正常來說直接敲出來便可。可如果這個功能你要用不止一次呢?難道你每次都敲出來嗎?這個時侯，就要用到我們的自定義函數了。
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>
三) AI寫代碼
好像很複雜的樣子，其實你只需要知道代碼的用處、運作的邏輯就可以了，上篇已經說了trae內置AI幫忙寫代碼，或者直接把要求打在代碼那邊就可以了。
所以我們只需要理解代碼而不是怎麼用代碼，當然，學是一定要學的，不然就真讓AI取代了。那麼好，這前端篇到這裡就結束了，下篇我們正式開始後端篇，欲知後事如何，且聽小編 下回分解。
參考資源:
www.runoob.com/jsef/dom-obj-event.html
下回：後端開發技術教學(一) [附2025最新可用 phpstudy2018下載鏈接] -CSDN博客
)
