เราจะสร้าง Function ขึ้นมาตัวหนึ่ง เวลาคลิกจะมีข้อความ alert ขึ้นมา
เราเริ่มต้นโดยการเขียนโครงสร้างของภาษา HTML ก่อนเลยนะคะ แล้วบันทึกเป็นไฟล์นามสกุล .html
<html>
<head>
<title>ชื่อเรื่อง</title>
</head>
<body>
........เนื้อหา..........
</body>
</html>มาเริ่มต้นด้วยการเขียน Script ของภาษา JavaScript ที่แท็ก <head></head>เพราะต้องการที่จะให้ใช้งานฟังก์ชันจากส่วนใดของเว็บก็ได้ เลยเขียนไว้ในแท็ก <head></head>
ถ้าจะเขียนในแท็ก <body></body> ก็ได้เช่นกัน แต่จะเรียกใช้ได้เฉพาะส่วนของเว็บเพจที่อยู่ใต้โค้ด JavaScript เท่านั้น
ในแท็ก <script></script> นี้จะเขียนฟังก์ชันไว้ ชื่อว่า showName() ให้ alert String คำว่า “Hello Tawan” ออกมา
<html>
<head>
<title>TestJavaScript</title>
<script language="JavaScript">
function showName() {
alert("Hello Tawan");
}
</script>
</head><body>
................................
</body>
</html>
ส่วนที่ 2 เริ่มด้วยการสร้าง <div></div> ขึ้นมาก้อนหนึ่ง ภายในส่วนของแท็ก <body></body> ของภาษา HTML ข้างในจะมีแท็ก <a></a> ไว้สำหรับลิงค์
[เมื่อคลิกที่ข้อความว่า CLICK_ME จะ Alert ข้อความว่า Hello Tawan ออกมา โดยการอ้างถึงตัวฟังก์ชัน showName() ที่เขียนไว้ในแท็ก <script></script> ]
<html>
<head>
<title>TestJavaScript</title>
<script language="JavaScript">
function showName() {
alert("Tawan");
}
</script>
</head><body>
<div class="click_me">
<a href="JavaScript:showName()">CLICK_ME</a>
</div>
</body>
</html>
ส่วนที่ 3 เราจะเพิ่ม style CSS เพื่อตกแต่งกรอบข้อความให้สวยงามให้สวยงาม โดยการใส่ <style></style> ในส่วนของแท็ก <head> </head>
<html>
<head>
<title>TestJavaScript</title>
<script language="JavaScript">
function showName() {
alert("Tawan");
}
</script>
<style>
body {
background-color: lightskyblue; /* สีพื้นหลังเว็บเพจ */
}
.click_me {
margin: 50px; /* ระยะห่างเส้นขอบแต่ละด้าน */
}
a:link, a:visited {
text-decoration: none; /* ไม่มีเส้นขีดเส้นใต้ */
color: linen; /* สีของตัวอักษร */
font-size: 20px; /* ขนาดของตัอักษร */
text-align: center; /* ตำแหน่งของตัวอักษร */
padding: 20px; /* ระยะห่างเนื้อจากกรอบข้อความ */
background-color: #008CBA; /* สีพื้นของกรอบข้อความ */
border-radius: 12px; /* ความโค้งมนของเหลี่ยมกรอบ */
width: 20%; /* ความว้างของกรอบข้อความ */
}
a:hover, a:active {
background-color: tomato; /* เมือนำเม้าท์มา hover สีพื้นหลังจะเปลี่ยนจากเดิม */
}
</style>
</head><body>
<div class="click_me">
<a href="JavaScript:showName()">CLICK_ME</a>
</div>
</body>
</html>
เมื่อเขียนเสร็จแล้วหน้าตาก็จะประมาณนี้นะคะ ถือว่าสำเร็จตามที่ตั้งใจไว้
ไปต่อกันที่ EP.2 นะคะ เดียวจะเบื่อก่อนถ้ายาวไป >> JavaScript : Function Click Alert EP.2/2
