HTML - Theerayut Thongkrau

Transcript HTML - Theerayut Thongkrau

Chapter 4
DOM
Document Object Model
Dr. Theerayut Thongkrau
DOM
• เมื่อมีการโหลดหน้าเว็บ browser จะสร้างสิ่ งที่เรี ยกว่า
Document Object Model หรื อ DOM
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Basic DOM example</title>
</head>
<body>
<h1>Hello World!</h1>
<p>While this is a <b>very basic
HTML document</b>, it actually
serves as a detailed example of
the document object model.</p>
</body>
</html>
เรี ยกว่า Node
document
<html>
<body>
<head>
<title>
<meta>
<h1>
<p>
<b>
DOM Tree ที่ Browser สร้ างจากเอกสาร html
2
JavaScript กับ DOM
• เราจะใช้ JavaScript เพื่อจัดการกับ Node ต่างๆ ที่อยูใ่ น
DOM
• การเปลี่ยนแปลง DOM หลังจากที่แสดงหน้าเว็บไปแล้ว จะ
ทาให้เกิดการแสดงผลแบบ Dynamic
3
อิลเิ มนต์ (Element)
• ส่ วนที่เริ่ มต้นด้วย Tag เปิ ด สิ้ นสุ ดด้วยแท็กปิ ด ที่อาจมี
Attribute หรื อข้อความ หรื อแท็กที่ซอ้ นภายในด้วย ทั้งหมด
นี้เรี ยกว่า 1 Element
<p id="blueplanet">All systems <b>OK<b></p>
ทั้งหมดนี้ คือ 1 Element
4
การดึงโหนด Element ด้ วย id
ดึงเอา Element Object ที่มี id ชื่อว่า blueplanet ออกมา
document.getElementById("blueplanet");
document
<!DOCTYPE html>
<html>
<body>
<p id="greenplanet">All is well</p>
<p id="redplanet">Nothing to report</p>
<p id="blueplanet">All systems OK</p>
</body>
</html>
<html>
<body>
<p id="greenplanet">
"All is well"
<p id="redplanet">
<p id="blueplanet">
"Nothing to report"
"All systems OK"
5
การเปลีย่ นแปลงเนือ้ หาใน Element
ใช้ตวั แปร planet มารับโหนด Element ที่ดึงออกมา
var planet = document.getElementById("blueplanet");
เปลี่ยนแปลงเนื้อหาโดยเข้าถึง property innerHTML
planet.innerHTML = "Red Alert";
document
<html>
<body>
<p id="greenplanet">
"All is well"
<p id="redplanet">
<p id="blueplanet">
"Nothing to report"
Alert"OK"
"All"Red
systems
6
การแทรกโค้ ด JavaScript
<!DOCTYPE html>
<html>
<body>
<p id="greenplanet">All is well</p>
<p id="redplanet">Nothing to report</p>
<p id="blueplanet">All systems OK</p>
<script>
alert("DOM Loaded Success");
var planet = document.getElementById("blueplanet");
planet.innerHTML = "Red Alert";
</script>
</body>
</html>
Browser จะสร้าง DOM หลังจากโหลดเว็บทั้งหน้าเสร็จแล้ว
ดังนั้นการการเขียนโค้ดเพื่อดึง Element จาก DOM จึงต้องทาหลังสุด
7
กิจกรรม
จากรายการแบบ unordered list 3 รายการ ซึ่ งไม่มีชื่อเพลง จงเขียนฟังก์ชนั JavaScript เพื่อ
ดึงโหนดบน DOM ออกมา และใส่ ชื่อเพลงให้กบั แต่ละรายการดังตัวอย่าง
<html>
<head><meta charset="utf-8"></head>
<body>
<h1>Top Chart</h1>
<ul id="playlist">
<li id="song1"></li>
<li id="song2"></li>
<li id="song3"></li>
</ul>
<script>
var song1 = document.______________("________");
var _____ = _______________________("________");
var _____ = ________.getElementById("________");
________.innerHTML = "เรื อเล็กควรออกจากฝั่ง - Bodyslam";
__________________ = "คาถามซึ่งไร้คนตอบ - Getsunova";
song3.____________ = "โปรดเถิดรัก - Cocktail";
</script>
</body>
</html>
8
Event
• Event หมายถึง เหตุการณ์ต่างๆที่เกิดขึ้นขณะที่ผใู้ ช้กาลังดูหน้าเว็บ
– ผูใ้ ช้กาลังโหลดหน้าเว็บ
– ผูใ้ ช้นาเมาส์วางบนภาพหรื อตัวอักษร
– ผูใ้ ช้กดปุ่ มใดๆบนคียบ์ อร์ด
– ผูใ้ ช้กรอกแบบฟอร์ม
• การเพิม่ แอทริ บิวต์ที่บ่งบอกว่าจะให้ทาเมื่อเกิดเหตุการณ์ใด หรื อ
event attribute เข้าไปใน element จะทาให้ element นั้นเกิดการ
ทางานตาม event ที่กาหนด
9
ประเภทของ Event
• Windows Event
• Mouse Event
• Keyboard Event
• Form Event
10
Windows Event
ื่ Event
ชอ
คำอธิบำย
onload
ทำงำนเมือ
่ หน ้ำเว็บนัน
้ โหลดเสร็จแล ้ว
onunload
ทำงำนเมือ
่ หน ้ำเว็บกำลังจะออกไปจำกหน ้ำเว็บนัน
้
onresize
ทำงำนเมือ
่ หน ้ำเว็บนัน
้ ถูกปรับขนำด
onscroll
ทำงำนเมือ
่ หน ้ำเว็บนัน
้ มีกำรเลือ
่ นหน ้ำ
11
การเพิม่ Event ให้ กบั เว็บ
<!DOCTYPE html>
<html>
<head>
2. สร้ างฟังก์ ชันทีท่ างานเมือ่ เกิดเหตุการณ์
<script>
function hey() {
alert("DOM Loaded Success");
}
</script>
</head>
<body onload="hey()">
<h1>Hello</h1>
</body>
</html>
1. ระบุชื่อ Event และฟังก์ ชันทีจ่ ะทางานตามเหตุการณ์
12
จะใช้ Event onload เมื่อไร
การดึงนา Element ในส่วน <head> จะไม่
สามารถทาได้ในส่วนนี้ เพราะส่วน <head>
ทางานก่อนส่วน <body>
<html>
<head>
<script>
var planet = document.getElementById("blueplanet");
planet.innerHTML = "Red Alert";
</script>
</head>
<body>
<p id="greenplanet">All is well</p>
<p id="redplanet">Nothing to report</p>
<p id="blueplanet">All systems OK</p>
</body>
</html>
13
จะใช้ Event onload เมื่อไร
<html>
<head>
สร้างฟังก์ชนั ครอบคาสัง่ ที่ตอ้ งการให้ทา
<script>
หลังจากโหลดหน้าเว็บเสร็จแล้ว
function init() {
var planet = document.getElementById("blueplanet");
planet.innerHTML = "Red Alert";
}
</script>
กาหนดเหตุการณ์ และฟังก์ชนั ที่ตอ้ งการทา
</head>
หลังจากโหลดเว็บเสร็จแล้ว
<body onload="init()">
<p id="greenplanet">All is well</p>
<p id="redplanet">Nothing to report</p>
<p id="blueplanet">All systems OK</p>
</body>
</html>
14
จะใช้ Event onload เมื่อไร
<html>
<head>
<script>
function init() {
var planet = document.getElementById("blueplanet");
planet.innerHTML = "Red Alert";
}
window.onload = init;
</script>
</head>
กาหนดเหตุการณ์ และฟังก์ชนั ที่ตอ้ งการทา
ด้วยคาสัง่ JavaScript
<body>
<p id="greenplanet">All is well</p>
<p id="redplanet">Nothing to report</p>
<p id="blueplanet">All systems OK</p>
</body>
</html>
15
Mouse Events
ื่ Event
ชอ
คำอธิบำย
onclick
ทำงำนเมือ
่ คลิกที่ Element
ondblclick
ทำงำนเมือ
่ double คลิกที่ Element
onmousedown
์ ี่ Element
ทำงำนเมือ
่ กดปุ่ มเมำสท
onmouseup
์ ี่ Element
ทำงำนเมือ
่ ปล่อยปุ่ มเมำสท
onmousemove
ทำงำนเมือ
่ ตัวชเี้ คลือ
่ นผ่ำน Element
onmouseover
ทำงำนเมือ
่ นำตัวชวี้ ำงบน Element
onmouseout
ี้ อกจำก Element
ทำงำนเมือ
่ นำตัวชอ
16
ตัวอย่ าง การกาหนด Event บนแท็ก
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function showMessage() {
alert("ใกล้สอบแล้ว อ่านหนังสื อกันยัง");
}
</script>
</head>
<body>
<img src="sunny.jpg" >
</body>
</html>
onmouseover="showMessage()">
17
กิจกรรม
• จากกิจกรรมก่อนหน้านี้ จงเพิม่ Event ให้กบั Element
<h1>Top Chart</h1> โดยเมื่อนาเมาส์ไปคลิกที่ขอ้ ความให้
แสดงรายชื่อเพลง
18
Property ทัว่ ไปของโหนด Element
Property
innerHTML
style
className
คาอธิบาย
เนื้อหาที่อยูภ่ ายในแท็ก
เข้าถึงคุณสมบัติของ CSS
ชื่อคลาสที่ใช้จดั รู ปแบบใน CSS
19
การเปลีย่ นแปลงคุณสมบัตขิ อง css
document.getElementById(id).style.attribute = "คณ
ุ สมบัติใหม่ "
<!DOCTYPE html>
<html>
<head>
<script>
function changeColor() {
var planet = document.getElementById("blueplanet");
planet.style.color = "red";
}
กาหนดคุณสมบัติสีให้ใหม่
</script>
</head>
<body>
<p id="greenplanet">All is well</p>
<p id="redplanet">Nothing to report</p>
<p id="blueplanet" onclick="changeColor()" >All systems OK</p>
</body>
</html>
ดูคุณสมบัติต่างๆ ได้ที่ http://www.w3schools.com/jsref/dom_obj_style.asp
20
การเปลีย่ นแปลงคุณสมบัตขิ อง css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function over() {
var titleObject = document.getElementById("pageTitle");
titleObject.style.fontSize = "20px";
}
ดึง Element pageTitle ออกมา
function out() {
var titleObject = document.getElementById("pageTitle");
titleObject.style.fontSize = "16px";
}
กาหนด Event ให้กบั Element โดยให้เรี ยก
</script>
-
ฟังก์ชนั over เมื่อมีเมาส์มาวาง
ฟังก์ชนั out เมื่อนาเมาส์ออก
</head>
<body>
<div id="pageTitle" onmouseover="over()" onmouseout="out()">Welcome</div>
</body>
</html>
21
กิจกรรม
จงเขียนเว็บที่มีสัญลักษณ์ + และ - เพือ่ ใช้
ปรับขนาดของตัวอักษรเมื่อมีการคลิก
<html>
<head>
<script>
function decrease() {
// เพิม่ คาสัง่ ที่นี่
}
function increase() {
// เพิ่มคาสั่งที่นี่
}
</script>
</head>
<body>
<h1>
<span onclick="decrease()">-</span> |
<span onclick="increase()">+</span>
</h1>
<p id="p1">
If you're leavin', will you take me with you?
I'm tired of talkin' on my phone
There is one thing I can never give you
My heart will never be your home</p>
</body>
</html>
22
Property เฉพาะของแต่ ละ Element
http://www.w3schools.com/jsref/default.asp
23
Property src ของ <img>
<!DOCTYPE html>
<html>
<head>
แสดงชื่อไฟล์ภาพเก่า
<script>
function go() {
var imgObject = document.getElementById("dayImage");
alert(imgObject.src);
imgObject.src = "cloudy.jpg";
}
</script>
กาหนดชื่อไฟล์ภาพใหม่
</head>
<body>
<img id="dayImage" src="sunny.jpg" ondblclick="go()" >
</body>
</html>
24
Property src ของ <img>
<html>
<head>
<script>
function swapImage() {
var imgObject = document.getElementById("switch");
if (imgObject.src.indexOf("power_on.png") > 0) {
imgObject.src = "power_off.png";
3. ค้นหา Element ที่มี id เป็ น switch
4. เปลี่ยนแปลงชื่อไฟล์ภาพใน Attribute src
} else if (imgObject.src.indexOf("power_off.png") > 0) {
imgObject.src = "power_on.png";
}
}
</script>
</head>
2. ระบุ Event เมื่อมีการคลิกที่ภาพให้เรี ยกฟังก์ชนั swapImage()
<body>
<img id="switch" src="power_on.png" onclick="swapImage()">
</body>
</html>
1. ระบุ id ให้กบั Element ที่ตอ้ งการเปลี่ยนแปลง
25
Property value ของ <input type="text">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function showText() {
var inputObject = document.getElementById("b1");
alert(inputObject.value);
}
</script>
</head>
<body>
<input type="text" id="b1">
<b onclick="showText()">คลิกฉันที</b>
</body>
</html>
26
กิจกรรม
• จงสร้าง Textfield 3 ช่อง และปุ่ ม 1 ปุ่ ม เมื่อมีการคลิกที่ปุ่ม
ให้นาค่าจากช่องที่ 1 บวกช่องที่ 2 แล้วแสดงผลลัพธ์ช่องที่ 3
หมายเหตุ ค่าที่ได้จากฟอร์มจะเป็ น String หากจะนาไปคานวณจะต้องแปลงเป็ นตัวเลขโดยใช้ฟังก์ชนั parseInt(t1.value)
27
Keyboard Events
ื่ Event
ชอ
คำอธิบำย
่ กดแป้ นพิมพ์ใดๆบนคียบ
์ อร์ด
onkeydown ทำงำนเมือ
onkeypress ทำงำนเมือ
่ กำลังกดแป้ นพิมพ์ใดๆบนคียบ
์ อร์ด
onkeyup
ทำงำนเมือ
่ ปล่อยแป้ นพิมพ์ใดๆบนคียบ
์ อร์ด
ลาดับการเกิด Keyboard Events คือ
1. onkeydown
2. onkeypress
3. onkeyup
28
ตัวอย่ าง
<!DOCTYPE html>
<html>
<head>
<script>
function showText() {
var b1= document.getElementById("b1");
alert(b1.value);
}
</script>
</head>
<body>
<input type="text" id="b1" onkeyup="showText()">
</body>
</html>
29
Form Events
ื่ Event
ชอ
คำอธิบำย
onblur
ทำงำนเมือ
่ ผู ้ใชย้ ้ำย cursor ไปยัง input ตัวอืน
่ (loses focus)
onchange
ทำงำนเมือ
่ เนือ
้ หำ หรือตัวเลือกเปลีย
่ นแปลงไป (ใชส้ ำหรับ
<input>, <select>, and <textarea>)
onfocus
ทำงำนเมือ
่ ผู ้ใชน้ ำ cursor มำวำงบน input นั น
้ ๆ (ใชส้ ำหรับ
<label>, <input>, <select>, <textarea>, และ <button>)
onreset
ทำงำนเมือ
่ มีกำร reset form
onselect
้ อกข ้อควำม (ใชส้ ำหรับ <input> และ
ทำงำนเมือ
่ ผู ้ใชเลื
<textarea>)
onsubmit
ทำงำนเมือ
่ ผู ้ใชส้ ง่ ข ้อมูลฟอร์ม
30
onfocus และ onblur
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function cat() {
var t1 = document.getElementById("t1");
t1.value = "เด็กภาคคอมคณะอะไรซักอย่าง";
}
function dog() {
var t1 = document.getElementById("t1");
t1.value = "ผูใ้ หญ่ภาคคอมคณะอะไรซักอย่าง";
}
</script>
</head>
<body>
<input type="text" id="t1" onfocus="cat()" onblur="dog()">
</body>
</html>
เมื่อคลิกที่ Text field
เมื่อคลิกนอก Text field
31
onchange
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function changeColor() {
var btn = document.getElementById("btn");
var txt = document.getElementById("txt");
txt.style.color = btn.value;
}
กาหนดรู ปแบบสี ใหม่
ขอค่าสี จาก Element btn
</script>
ให้ Element txt
</head>
ระบุ id ให้กบั Element
ระบุฟังก์ชนั ให้ทางานเมื่อมีการเปลี่ยนแปลงค่าสี
<body>
<input type="color" id="btn" onchange="changeColor()">
<br><br><div id="txt">สวัสดี</div>
</body>
ระบุ id ให้กบั Element
</html>
32
กิจกรรม
จงเขียนฟอร์มรับข้อมูล เมื่อผูใ้ ช้กรอกเสร็ จ และไปที่ช่องอื่นแล้วให้เปลี่ยนสี
ตัวหนังสื อในกล่องข้อความที่กรอกแล้วเป็ นสี เขียว
<html>
<head>
<meta charset="UTF-8">
<script>
function changeColor() {
// ใส่ คาสั่งที่นี่
}
</script>
</head>
<body>
Name: <input type="text" id="name" onBlur="changeColor()"><br>
Age: <input type="text" id="age"><br>
</body>
</html>
33
การใช้ this
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function dog( t1 ) {
t1.value = "ผูใ้ หญ่ภาคคอมคณะอะไรซักอย่าง";
}
function cat( t1 ) {
t1.value = "เด็กภาคคอมคณะอะไรซักอย่าง";
}
</script>
</head>
<body>
<input type="text" onblur="dog(this)" onfocus="cat(this)" >
</body>
</html>
34
Anonymous Function
• Anonymous Function คือ การสร้างฟังก์ชนั ที่ใช้ทางานเฉพาะ
เหตุการณ์ที่กาหนดเท่านั้น
<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = function() {
var titleObject = document.getElementById("pageTitle");
titleObject.onmouseover = function() {
titleObject.innerHTML = "เรี ยนๆลอกๆ ไปนอกก็มี";
titleObject.style.color = "rgb(0,191,255)";
}
}
</script></head>
<body>
<h1 id="pageTitle" >Welcome to My Page</h1>
</body>
</html>
35
การกาหนด Event ด้ วยคาสั่ ง JavaScript
<html>
<head>
<meta charset="UTF-8">
<script>
function change() {
var titleObject = document.getElementById("pageTitle");
titleObject.innerHTML = "เรี ยนๆลอกๆ ไปนอกก็มี";
titleObject.style.color = "rgb(0,191,255)";
}
function discard() {
var titleObject = document.getElementById("pageTitle");
titleObject.innerHTML = "Welcome to My Page";
titleObject.style.color = "red";
}
ชื่อฟังก์ชนั ที่กาหนดให้ไม่ตอ้ งมีวงเล็บ
window.onload = function() {
var titleObject = document.getElementById("pageTitle");
titleObject.onmouseover = change;
คาสัง่ ในการกาหนดฟังก์ชนั ให้กบั Event ของ pageTitle
titleObject.onmouseout = discard;
}
</script></head>
*ข้อแตกต่าง คือ ไม่มีการกาหนด Event ในแท็ก
<body>
<h1 id="pageTitle" >Welcome to My Page</h1>
</body>
36
</html>
การจัดการ Element บน DOM
• เว็บเพ็จที่แสดงผลไปแล้วสามารถสร้าง Element ใหม่
เพิม่ เติม แล้วนาไปต่อท้าย Element เก่าได้ดว้ ยคาสัง่ ใน
JavaScript
– คาสัง่ ที่ใช้ในการสร้าง Element ใหม่
document.createElement("ชื่อแท็ก");
– คาสัง่ ที่ใช้ในการต่อท้าย Element เก่า
appendChild();
37
ตัวอย่ างการสร้ างฟอร์ มเพิม่ รายการเพลง
รับชื่อเพลง
นาชื่อเพลงไปเพิ่มในรายการ
38
สร้ างฟอร์ มรับชื่อเพลง และสร้ างลิสต์ เปล่ า
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="text" id="songTextInput" >
<input type="button" id="addButton" value="Add Song">
</form>
<ul id="playlist">
</ul>
</body>
</html>
39
กาหนด Event และสร้ างฟังก์ ชัน
<html>
<head>
<meta charset="utf-8">
ดึง Element songTextInput ออกมา
<script>
function addSong() {
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;
ดึงค่าที่ผใู้ ช้กรอกในช่อง Textfield ออกมา
alert("Adding " + songName);
}
ทดสอบแสดงค่า
</script>
</head>
<body>
<form>
<input type="text" id="songTextInput">
<input type="button" id="addButton" value="Add Song" onclick="addSong()">
</form>
<ul id="playlist">
กาหนด Event เมื่อมีการคลิกที่ปุ่ม
</ul>
ให้เรี ยกฟังก์ชนั addSong
</body>
</html>
40
สร้ าง Element ใหม่
<html>
<head>
<meta charset="utf-8">
<script>
function addSong() {
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;
var li = document.createElement("li");
li.innerHTML = songName;
1. สร้าง Element <li> ขึ้นมาใหม่
2. นาค่าไปเก็บไว้ใน Element <li>
}
</script>
</head>
<body>
<form>
<input type="text" id="songTextInput">
<input type="button" id="addButton" value="Add Song" onclick="addSong()">
</form>
<ul id="playlist">
</ul>
</body>
</html>
41
สร้ าง Element ใหม่
<html>
<head>
<meta charset="utf-8">
<script>
function addSong() {
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;
var li = document.createElement("li");
li.innerHTML = songName;
var ul = document.getElementById("playlist");
ul.appendChild(li);
}
</script>
3. ดึง Element <ul> จากหน้าเว็บออกมา
4. นา Element <li> ที่สร้างขึ้นไปเป็ น Element ลูก
42
ตัวอย่ างการทางาน
<html>
<head>
<meta charset="utf-8">
<script>
function addSong() {
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;
<ul>
songName
<li>
var li = document.createElement("li");
li.innerHTML = songName;
var ul = document.getElementById("playlist");
ul.appendChild(li);
}
</script>
</head>
<body>
<form>
<input type="text" id="songTextInput">
<input type="button" id="addButton" value="Add Song" onclick="addSong()">
</form>
<ul id="playlist">
</ul>
</body>
</html>
43
ตัวอย่ างการทางาน
<html>
<head>
<meta charset="utf-8">
<script>
function addSong() {
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;
<ul>
songName
<li>
<li>
var li = document.createElement("li");
li.innerHTML = songName;
var ul = document.getElementById("playlist");
ul.appendChild(li);
}
</script>
</head>
<body>
<form>
<input type="text" id="songTextInput">
<input type="button" id="addButton" value="Add Song" onclick="addSong()">
</form>
<ul id="playlist">
</ul>
</body>
</html>
44
กิจกรรม
• จงสร้างแบบฟอร์มสาหรับกรอกข้อมูลลูกค้า เมื่อคลิกที่ปุ่ม
เพิม่ แล้วให้นาข้อมูลทั้งหมดใส่ ลงในตาราง
45
Built-in Browser Objects
window
navigator
screen
document
history
location
form
button
46
ใช้ window object สร้ างหน้ าต่ างใหม่
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function openWindows() {
var newWindow = window.open("", "sampleWindow",
"width=300, height=100, menubar=yes, status=yes, resizable=yes");
newWindow.document.write("<html><head><title>Sample
Title</title></head><body><h1>Sample Text</h1></body>");
}
</script>
</head>
<body>
<input type="button" value="Open" onclick="openWindows()">
</body>
</html>
47
ใช้ window object ขอข้ อมูล Browser
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function info() {
alert(window.navigator.userAgent);
}
</script>
</head>
<body>
<input type="button" value="Open" onclick="info()">
</body>
</html>
48
ใช้ document object เปลีย่ นทีอ่ ยู่เว็บ
• หากมีการย้ายหน้าเว็บไปยังที่ใหม่ เมื่อผูใ้ ช้ยงั จา URL เดิมไว้
อยู่ เราสามารถกาหนดให้เว็บเดิม Redirect ไปยัง URL เว็บ
ใหม่ได้ดงั ตัวอย่าง
<!doctype html>
<html>
<head>
<script>
document.location = "http://www.google.com/";
</script>
</head>
<body>
ย้ายแล้วครับ
</body>
</html>
49
Homework#5
• ทาแบบฝึ กหัดท้ายบทที่ 4 ข้อ 3 และข้อ 4
50

HTML - Theerayut Thongkrau

Transcript HTML - Theerayut Thongkrau

Directory