Javascript DOM基本觀念

# Javascript DOM基本觀念 :::info 前面教過了JS的語法及特性，這次的教學會開始講解JS如何與HTML互動，讓HTML有動態效果。 ::: * 在Js與瀏覽器端應用中，最重要的是window物件 * 提醒: 此window就是window,不是微軟的Windows * window物件的子物件類型 ![](https://i.imgur.com/VlRpAts.png) ![](https://hackmd.io/_uploads/BkBEDJ8Sh.png) ::: warning 這次的教學我們會主要專注在document物件上，下面是document物件的基本架構 ::: ![](https://i.imgur.com/22WHWGw.png) ![](https://hackmd.io/_uploads/ry5PD1ISn.png) * 說明: 在這裡中可以看到document底下最重要的就是Element，element物件提供了innerHTML、textContent與OuterHTML屬性 * 範例如下: ```xml!0 <script> <div id="test"><p>Hello,world</p></div> </script> ``` * 說明: 1. ```<p>Hello,world</p>```就是InnerHTML 2. ```Hello,world```就是textContent 3. ```<div id="test"><p>Hello,world</p></div>```就是OuterHTML * 我們最常用的是InnerHTML，一般都是對div,span進行操作，像是增加文字或數字 ### 基本語法 :::info 教學小知識: 之前我們不是有在Css中教的id和class，這裡會將這兩個當作一個物件的名子來對它進行操作，因為id是獨一無二的，因此我們會主要以id來進行取得。 ::: ### input的value特性: * 這裡value是指input型態裡面的值 ``` <input type="button" id="btn" value="enter"> ``` ![](https://hackmd.io/_uploads/HyJxWSmE2.png) ``` <input type="text" id="word" value="sss"> ``` ![](https://hackmd.io/_uploads/SJ-T_rmN3.png) ### **取得id物件**(非常重要) : ```javascript! document.getElementById("id_name"); ``` * 範例: ```xml! <input type="button" id="enter" value="enter"> ``` ![](https://hackmd.io/_uploads/HyJxWSmE2.png) 如果要取得這個物件我們要設一個變數接收它，程式碼如下 ```javascript! var object=document.getElementById("enter") ``` 這時**object**就是我們取得的物件，接下來可以對它進行操作 * 改變value值 ```js object.value="input"; ``` ![](https://hackmd.io/_uploads/HJlv87S7N2.png) * 改變Css屬性: ```css! object.style="background-color:#bfff" ``` ![](https://hackmd.io/_uploads/BJ8E7BXE2.png) * 新增自訂屬性 ```xml! <body> <input type="button" value="" id="btn"> <script> var button=document.getElementById('btn'); button.hint="ka"; button.value=button.hint; </script> </body> ``` * div裡的value跟InnerHTML是不一樣，value是隱藏的屬性，InnerHTML就是我們看到的 ```xml! <div id="hint"></div> <script> var space=document.getElementById('hint'); space.value="nkfw"; space.innerHTML="ipeecs"; console.log(space.value); </script> ``` ## Project 1 :::success 設計一個html裡的list，裡面分別資工、電機、通訊三個項目，取出這三個項目改成CS,EE,CO(你的html裡必須是電機、資工、通訊) ::: 原本: * 電機 * 資工 * 通訊後來: * ee * cs * co :::spoiler 解答 ```htmlembedded! <body> <ul> <li id="EE">電機</li> <li id="CS">資工</li> <li id="CO">通訊</li> </ul> </div> <script> var ee=document.getElementById('EE'); var cs=document.getElementById('CS'); var co=document.getElementById('CO'); ee.innerHTML="ee"; cs.innerHTML='cs'; co.innerHTML='co'; </script> </body> ``` ::: ## onclick介紹 * 可加在button上，點擊後搭配function做出反應 ```xml! <input type="button" id='btn' value="" onclick="function_name()"> ``` * 範例一: ```xml! <body> <div id="space"></div> <input type="button" id='btn' value="click" onclick="change()"> <script> var space =document.getElementById("space"); function change(){ space.innerHTML="NKFW2023" space.style="font-size:30px" } </script> </body> ``` * 範例二 ```xml! <body> <input type="text" id="word" value=" "> <input type="button" id="btn" value="click" onclick="store()"> <script> var account=document.getElementById("word"); function store(){ alert(account.value); } </script> </body> ``` ## Project2 :::success 設計兩個輸入框，型態為text，分別為身高和體種，輸入身高(cm)和體重(kg)。利用js計算出BMI。設計一顆按鈕按了就在下方空間顯示BMI出來。(bmi計算=kg/m^2) ::: ![](https://hackmd.io/_uploads/HkKp93Q4n.png) -- ![](https://hackmd.io/_uploads/Hyko53mE2.png) ---- :::spoiler 解答 ```htmlembedded! <body> <form> <label for="height">身高:</label> <input type="text" id="height" value=" "><br> <label for="weight">體重:</label> <input type="text" id="weight" value=" "><br><br> <input type="button" id="submit" value="送出" onclick="cal()"><br><br> </form> <div id='showbmi'></div> <script> function cal(){ var height=document.getElementById('height'); var weight=document.getElementById('weight'); var space=document.getElementById('showbmi'); var meter=(height.value)/100; var kg=weight.value; var bmi=kg/meter**2; space.innerHTML=bmi; } </script> </body> ``` ::: ## createElement與appendChild * **createElement**:可以新增一個html物件，包括input,p * 可以給創建的element屬性 * **appendChild**:在一個空間新增剛剛創建的element * 範例: ```xml! <body> <div id="space"></div> <script> var space=document.getElementById('space'); var element=document.createElement("input"); element.type="button"; element.id="btn"; element.value="1"; element.style="width:30px; height:30px" element.setAttribute('onclick','function_name()') space.appendChild(element); </script> </body> ``` ![](https://hackmd.io/_uploads/SJlL6nmEh.png) ## Project3 :::success 利用上述教的createElement和appendChild做出下面圖形(小提示: 利用兩個for迴圈包起來，value值設空白，要設width,heigh) ::: ![](https://hackmd.io/_uploads/BJiNXOQVn.png) ### Js進階: Dictionary * 可以當作一個物件，可以用來儲存東西(這裡可能要補充說明) * 範例 ```xml! <body> <div id='space'></div> <script> var showspace=document.getElementById('space'); var dic={ key1: "one", key2: "two", key3: "three" }; for(var key in dic){ showspace.innerHTML+=key+" "+dic[key]; showspace.innerHTML+="</br>" } key4="key4"; dic[key4]="four"; for(var key in dic){ showspace.innerHTML+=key+" "+dic[key]; showspace.innerHTML+="</br>" } </script> </body> ``` ## Project4 :::success 設計一個超小型購物網頁，上面顯示商品名稱和商品數量(固定50個)，下面可以輸入要購買的東西和數量，表單按送出後，下面空間印出商品名稱和剩餘數量。(小提示:商品名稱和數量可以用dictionary儲存並用下方空間搭配InnerHTML印出來) ::: ![](https://hackmd.io/_uploads/Syj0NnQ4n.png) --- ![](https://hackmd.io/_uploads/BykKwhQE3.png) ## Project5(想做再做) :::success 設計一個圈圈叉叉遊戲，不用判斷輸贏，只要按了可以變成O，按下一個按鈕變成X，以此類推九個按鈕。(小提示:下方可以新增屬性hint來進行判斷按了是要變O還是X) ::: ![](https://hackmd.io/_uploads/BytKhnQN2.png) -- ![](https://hackmd.io/_uploads/BJXinhmE2.png)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.