Javascript การแสดงข้อความใน Tag Div

by JUICE23:560 Comments
ก่อนที่เราจะเริ่มเขียน Javascript ผมอยากจะแนะนำวิธีการ
แสดงข้อความในตำแหน่งที่เราต้องการก่อน เพื่อประโยชน์ในการ
แสดงผลลัพธ์ของ Javascript

การแสดงข้อความตรงตำแหน่งที่ต้องการ โดยการใช้ Tag div ให้เป็นประโยชน์
คือให้สร้าง Tag div ไว้ในตำแหน่งที่ต้องการแสดงข้อความ
จากนั้นจึงใช้ Javascript เขียนข้อความลงไปใน Tag div

เอาล่ะมาดูตัวอย่างกันเลย


<html>
<head>
<title>if else  :: step-juce.blogspot.com </title>
<script language="JavaScript">
 function displayText()
 {
  document.getElementById("showText").innerHTML = "HELLO";
 }
</script>
</head>
<body onload="displayText()">
 <hr />
 <div id="showText" ></div>
 <hr />
</body>
</html>

ผลลัพธ์

อธิบายโปรแกรม
- บรรทัดที่ 4-9 มี function ที่ชื่อว่า displayText() ซึ่งเป็น
ฟังก์ชั่นไว้สำหรับแสดงข้อความว่า HELLO ออกมา ไว้ผมจะอธิบายความรู้เรื่อง function
ใน Javascript อีกครั้งในคราวหน้า ตอนนี้ให้เรามาดูที่บรรทัดที่ 7

document.getElementById("showText").innerHTML = "HELLO";

นี้คือรูปแบบหนึ่งของ DOM(Docment Object Model) เป็นข้อกำหนดซึ่งทำให้เราเข้าถึง
Element ต่างๆในเอกสาร HTML เราสามารถเข้าถึง Element เพื่ออ่าน หรือแก้ไขข้อความ
ของมันได้ เช่นถ้าต้องการเข้าถึง Element div ซึ่งมี ID คือ showText จะเขียนโค้ดดังนี้

objDiv = document.getElementById("showText");

เมื่อต้องการเขียนข้อความลงไปภายใน Tag div ก็ให้เรากำหนดค่าให้กำพร็อพเพอร์ตี้ innerHTML แบบนี้

objDiv = document.getElementById("showText");
objDiv.innerHTML = "HELLO";
หรือ จะเขียนสั้นๆ แบบนี้ก็ได้
document.getElementById("showText").innerHTML = "HELLO";

ต่อไปเรามาดูบรรทัดที่ 11

<body onload="displayText()">

ดูที่ Atrribute onload คือ Event ที่จะทำงานก็ต่อเมื่อ
มีการเรียกใช้หน้าเว็บเพจ onload="displayText()" จึงเป็นการเรียกใช้
function displayText() ให้ทำงาน ซึ่งก็คือ ฟังก์ชั่นสำหรับแสดง ข้อความนั้นเอง ^^"

0 ความคิดเห็น