---
# System prepended metadata

title: JS Class 4&5 0903-0904
tags: [JavaScript]

---

###### tags: `JavaScript`
# JS Class 4&5 0903-0904




---

## :memo: 模組13. 物件進階觀念

### 13-1. this關鍵字
this:呼叫所屬的物件
![](https://i.imgur.com/r2CqwOr.png)

### 13-2. 字串與物件轉換
物件轉字串:JSON.stringify(物件變數)
字串轉物件:JSON.parse(字串)

物件轉字串或是反過來做字串轉物件，函式無法跟著轉/字串無法放函式
### 13-3. 傳值與傳址



---

## :memo: 模組14.JavaScript常見的物件

### 14-1. 數值物件
### 14-2. Math物件
### 14-3. 字串物件
搜尋框搜尋作法
![](https://i.imgur.com/UcWILgI.png)

### 14-4. 日期物件

## :memo: 模組15.文件物件模型 DOM

### 15-1. 文件物件模型簡介
### 15-2. HTML與DOM Tree 
![](https://i.imgur.com/i6v9iU0.png)

如何避免變數被汙染=>1.轉成物件 2.用方法包起來


### 15-3. document物件

## :memo: 模組16.window物件

### 16-1. window物件簡介
### 16-2. window物件與DOM
### 16-3. window物件的方法

## :memo: 模組17.計時器

### 17-1. setTimeout用法
### 17-2. setInterval用法

## :memo: 模組18. DOM物件操作1

### 18-1. 抓取DOM元素的方法
![](https://i.imgur.com/njS3p1L.png)

### 18-2. 存取元素內的所有子標籤和文字內容
### 18-3. 存取表單欄位類元素的值屬性

## :memo: 模組19. DOM物件操作2

### 19-1. 改變元素的css樣式
### 19-2. 新增與移除特定屬性
### 19-3. 新增與移除特定元素
### 19-4. 相鄰選擇器

## :memo: 模組20.事件
## 20-1. 事件驅動程式簡介
## 20-2. 註冊事件
## 20-3. 事件種類與應用
## 20-4. 事件物件

## :memo: 模組21.事件進階應用
## 21-1. 冒泡事件的原理與應用
## 21-2. 非同步回調函式
## 21-3. 事件處理器的this關鍵字

---
練習
### 1.按鈕多色變色功能
![](https://i.imgur.com/9O90mDL.png)

```

    <style>
        .blue{
            color: blue;
        }
        .red{
            color:red;
        }
        .yellow{
            color:yellow;
        }
    </style>

</head>
<body>
    <p class="red">Lorem ipsum dolor sit amet</p>
    <button onclick="switchcolor()">變色</button>

</body>

<script>
    function switchcolor(){
        var p =document.getElementsByTagName("p")[0];
        switch(p.className){
        case "red":
            p.classList.remove("red");
            p.classList.add("blue");
            break;
        
        case "blue":
            p.classList.remove("blue")
            p.classList.add("yellow")
            break;
        
        case "yellow":
        p.classList.remove("yellow")
            p.classList.add("red")
        break;
        }

    }
```
---
### 2.增加、刪除、複製按鈕功能
![](https://i.imgur.com/OJp0Hh9.png)

```
<body>
    <div class="list">
        <ul id="content">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <div> <input type="textbox" id="txb">
        <button id="btnAdd" >新增</button>
    </div>
    <div> <input type="textbox" id="RMtxb">
        <button onclick="removelist()">刪除</button>
    </div>
    <div> 
        <button onclick="removeall(event)">全部刪除</button>
    </div>
    <div> <input type="textbox" id="txb2">
        <button onclick="copylist()">複製</button>
    </div>

</body>
<script>
        document.getElementById("btnAdd").addEventListener("click",addlist)
        var inp = document.getElementById("txb");
        var content = document.getElementById("content");
    
    function addlist() {

        content.append(createli(inp.value));
        inp.value = "";
    }
    function createli(val) {
        var li = document.createElement("li");
        li.innerText = val;
        return li;
    }
    function removelist() {
        var inp2 = document.getElementById("RMtxb");
        content.value;
        var list = document.getElementsByTagName("li");
        list[inp2.value-1].remove();
        inp2.value = "";
    }
    function removeall(e){
        e.target.style.backgroundColor="red"
        var alllist = document.getElementsByTagName("li")
        for (let i = alllist.length-1; i >=0; i--) {
            alllist[i].remove();
            
        }

        }
    function copylist(){
        var input3 = document.getElementById("txb2");
        var list = document.getElementsByTagName("li");
        var newlist=list[input3.value-1].cloneNode(true);
        content.append(newlist); 
    
    }
```

### 3.addEventListener事件紀錄按鍵
`document.addEventListener("keypress",function(e){console.log(e.keyCode)})`

### 4.紀錄點選按鈕的內容值for所有按鈕
![](https://i.imgur.com/tCzPYwY.png)

```
<body>
    <div id="box">
        <ul id="content">
            <li><button>1</button></li>
            <li><button>2</button></li>
            <li><button>3</button></li>
            <li><button>4</button></li>
            <li><button>5</button></li>
            <li><button>6</button></li>
            <li><button>7</button></li>
            <li><button>8</button></li>
            <li><button>9</button></li>
            <li><button>10</button></li>
        </ul>
    </div>
    <script>
        var ul=document.getElementById("content");
        ul.addEventListener("click",function(event){
            console.log(event.target.innerText)
        })
    </script>
</body>
```






