การฝึกปฎิบัติ
1. การแก้ไขเนื้อหาใน HTML
- HTML
- JavaScript สำหรับแก้ไน HTML DOM Element
<p id="p1">This is paragraph</p>
<!--
สร้าง Element node ที่เหมือนกับ Element Tag นี้
<p>This is a new node</p>
-->
<!--
สร้าง list ที่ เป็นรายชื่อวันในสัปดาห์
<ol>
<li></li>
</ol>
-->
<script>
let days = ["Sunday", "Monday", "Tueday", "Wednesday", "Thursday", "Friday", "Saturday"];
let pElement = document.createElement("p");
// เขียน code ไปพร้อมกัน ^__^
//
// สร้าง list
// 1.Sunday
// 2.Monday
// ........
</script>
2. การเพิ่มและลบ Element Node ใน DOM Tree
- HTML
- JavaScript สำหรับการเพิ่ม Node ใน DOM Tree
<body>
<div id="div1">
<p id="p1">JavaScript</p>
<p id="p2">Python</p>
<p id="p3">TypeScript</p>
<!-- add a new element here -->
</div>
<hr>
<div id="div2">
<p>My favourite fruit.</p>
</div>
<button type="button" onclick="addNode()">Add Node</button>
<button type="button" onclick="deleteNode()">Delete Node</button>
<button type="button" onclick="addNewImage()">Add Image</button>
</body>
<script>
function addNode() {
// <p>a new paragraph</p>
let ptag = document.createElement("p");
// create text node
let txt = document.createTextNode("a new paragraph");
// append text node to a parent node
// select a parent node
let parent1 = document.getElementById("div1");
// append element node to a parent node
/* uncomment in step 2 **/
// let childP1 = document.getElementById("p1");
// parent1.insertBefore(ptag, childP1);
}
function addNewImage() {
// <img src="apples.jpg">
let imgtag = document.createElement("img");
let srcAttr = document.createAttribute("src");
srcAttr.value ="apples.jpg";
imgtag.setAttributeNode(srcAttr);
// method 2
//imgtag.setAttribute('src', 'apples.jpg');
// add to <body>
document.body.appendChild(imgtag);
}
function deleteNode() {
let parent2 = document.getElementById("div1");
let delPtag = document.getElementById("p1");
parent2.removeChild(delPtag);
}
</script>
3. การเปลี่ยน style ด้วย DOM
- เตรียม HTML
- Script การเปลี่ยนสี Font และ การสร้าง Element ส่วนรับข้อมูลเพิ่ม
- ทดสอบการทำงาน
<head>
<title>DOM Changing color and font-size example</title>
<style>
body { font-Size : 18px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p id="pid">Question ? </p>
<button onclick="changeText();">Click me</button>
<div id="ans"></div>
</body>
<script>
function changeText() {
// step 1
let p = document.getElementById("pid");
p.style.color = "blue";
p.style.fontFamily = "Comic Sans MS";
// step 2
// create label
let la = document.createElement("label");
la.innerHTML ="Answer : "
// create input
let inp = document.createElement("input");
let inatt = document.createAttribute("id");
inatt.value = "answerbox";
// add to parent
let parent = document.getElementById("ans");
parent.appendChild(la);
parent.appendChild(inp);
}
</script>
4. การเพิ่ม row และ cell ใน Table
- สร้าง Table ด้วย HTML
- JavaScript เพื่อเพิ่ม row และ cell ใน Table
- ทดสอบการทำงาน
<body>
<table id="table0" border=1>
<tr>
<th>Column 0</th>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</table>
</body>
<script>
let table = document.getElementById('table0');
let row = table.insertRow(-1); //Row position 0,1,2,...,n -1 = last
let cell, text, tnode;
for (let i = 0; i < 3; i++) {
// create a new column
cell = row.insertCell(-1);
text = 'Row ' + row.rowIndex + ', Column ' + i;
tnode = document.createTextNode(text);
// add TextNode to column
cell.appendChild(tnode);
}
</script>
แบบฝึกหัด
- [/lab4/1] ให้สร้างส่วนรับค่าจากผู้ใช้ จำนวน 2 ค่า และเมื่อผู้ใช้ป้อนค่าทั้งสองแล้ว ให้นำค่าทั้งสองนั้นมารวมกัน แล้วแสดงผลลัพธ์ และสามารถแสดงลำดับของของการคำนวณที่ผ่านมาไว้ด้านล่างของผลลัพธ์ ด้วยวิธีการสร้าง element node เพิ่มด้วย DOM ดังภาพตัวอย่าง
- [/lab4/2] ให้เขียนโปรแกรมที่สามารถเปลี่ยนภาษาการแสดงผลของฟอร์ม ระหว่างภาษาไทยและภาษาอังกฤษ เมื่อผู้ใช้กดปุ่มเปลี่ยนภาษา ด้วยวิธีการสร้าง element node ตามหลักการ DOM ด้วย JavaScript ดังภาพตัวอย่าง
- [/lab4/3] ให้เขียนโปรแกรมเพื่อกรอกข้อมูลผู้ลงทะเบียนเข้าร่วมงาน (ดังภาพตัวอย่าง) เมื่อผู้สมัครกรอกข้อมูลแล้วกดปุ่ม ลงทะเบียน ให้นำข้อมูลที่กรอกไว้ใส่เพิ่มในตารางด้านล่าง
