###### 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> ```