# Javascript DOM基本觀念
:::info
前面教過了JS的語法及特性，這次的教學會開始講解JS如何與HTML互動，讓HTML有動態效果。
:::
* 在Js與瀏覽器端應用中，最重要的是window物件
* 提醒: 此window就是window,不是微軟的Windows
* window物件的子物件類型
::: warning
這次的教學我們會主要專注在document物件上，下面是document物件的基本架構
:::
* 說明: 在這裡中可以看到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">
```
```
<input type="text" id="word" value="sss">
```
### **取得id物件**(非常重要) :
```javascript!
document.getElementById("id_name");
```
* 範例:
```xml!
<input type="button" id="enter" value="enter">
```
如果要取得這個物件我們要設一個變數接收它，程式碼如下
```javascript!
var object=document.getElementById("enter")
```
這時**object**就是我們取得的物件，接下來可以對它進行操作
* 改變value值
```js
object.value="input";
```
* 改變Css屬性:
```css!
object.style="background-color:#bfff"
```
* 新增自訂屬性
```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)
:::
--
----
:::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>
```
## Project3
:::success
利用上述教的createElement和appendChild做出下面圖形(小提示: 利用兩個for迴圈包起來，value值設空白，要設width,heigh)
:::
### 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印出來)
:::
---
## Project5(想做再做)
:::success
設計一個圈圈叉叉遊戲，不用判斷輸贏，只要按了可以變成O，按下一個按鈕變成X，以此類推九個按鈕。(小提示:下方可以新增屬性hint來進行判斷按了是要變O還是X)
:::
--
Sign in with Wallet
Connect another wallet