ต่อจาก JavaScript : Function Click Alert EP.1/2 ครั้งที่แล้ว เราจะมาใช้ตัวแปรมารับค่า การส่งค่าเข้าสู่ฟังก์ชัน และการใช้ Event เรียก JavaScript
การสร้างตัวแปรมารับค่า
เราจะมาแก้ไขเพิ่มเติมในส่วนของแท็ก <script></script> ของภาษา JavaScript ลืมบอกไปว่าส่วนอื่นยังคงเหมือนเดิมน่ะ เราเพิ่มแค่ตัวแปร name เก็บค่า Tawan ไว้
<script language="JavaScript">
function showName() {
name = "Tawan"; //ประกาศตัวแปร name เก็บค่า Tawan
alert(`Hello ${name}`); //alert จะเป็นการต่อสตริงเข้ากับตัวแปร
}
</script>ผลลัพธ์ที่ได้ก็เหมือนกับ string ปกติที่เราเขียนเอง แต่มันมีอะไรที่มากกว่านั้นคือ มีตัวแปรมารับค่า และเราจะเริ่มเขียนเพื่อส่งค่าเข้าสู่ฟังก์ชัน กันแล้ว
การส่งค่าเข้าสู่ฟังก์ชัน
[แบบแรก] เราจะมาแก้ไขส่วนเดิมนี่แหล่ะ จะนำคำสั่ง prompt() มาใช้เพื่อที่จะกรอกชื่อเราเข้าไปเลย ตอนนั้นเลย เพราะคำสั่ง prompt() จะแสดงกล่องเพื่อรับข้อมูลจากเรา
<script language="JavaScript">
function showName() {
name = prompt("Input Name : " , ""); //ประกาศตัวแปร name เก็บค่าจากคำสั่ง prompt
alert(`Hello ${name}`); //alert จะเป็นการต่อสตริงเข้ากับตัวแปร
}
</script>หน้าก็จะประมาณนี้ เมื่อคลิก OK ก็จะขึ้นเป็นชื่อที่กรอกเข้าไป
[แบบที่ 2 ]มาดูอีกวิธีหนึ่ง ในการส่งค่าเข้าสู่ฟังก์ชัน คือส่งตอนที่เราเรียกฟังก์ชัน จะแก้ไขในส่วนของแท็ก <script></script> เช่นเคย และเพิ่มเติมในส่วนของแท็ก <body></body> มาดูกัน จะเห็นว่าเราใส่ตัวแปร name ให้กับฟังก์ชันเลย
<script language="JavaScript">
function showName(name) {
alert(`Hello ${name}`); //alert จะเป็นการต่อสตริงเข้ากับตัวแปร
}
</script>และเราไปแก้ไขและเพิ่มเติมในส่วนของแท็ก <body></body>เราจะใส่ข้อความให้กับฟังก์ชันเลย โดยผ่านเครื่องหมาย ‘ ’ ได้เลย ถ้าเป็นตัวอักษร ถ้าเป็นตัวเลข สามารถกรอกลงไปได้เลย
<body>
<div class="click_me">
<a href="JavaScript:showName('Tawan Na')">CLICK_ME_Text</a>
<a href="JavaScript:showName(990)">CLICK_ME_Number</a>
</div>
</body>เมื่อประกอบร่างเสร็จจะได้ประมาณนี้จ้า เราทำได้
อยู่ที่ว่าชอบแบบไหน ในการส่งค่าเข้าสู่ฟังก์ชัน มีให้เลือก 2 แบบ เอาที่ชอบๆๆ ใจกันไปเลย
การใช้ Event เรียก JavaScript
การที่เราใช้ Event เรียก JavaScript ทำได้หลายแบบ ในครั้งนี้จะใช้ Event : onload= “ ” ; คือเมื่อเราเปิดเว็บเพจ เขาก็จะทำงานเลย และใช้ Event : onmouseover= “ ”; คือเมื่อนำเมาส์ไปชี้ จะ alert ข้อความออกมาให้เรา มาดูกัน
<html>
<head>
<title>TestJavaScript</title>
<script language="JavaScript">
function showName() {
name = "Tawan";
alert("Tawan");
}
</script>
</head><body onload="showName()">
</body>
</html>
ผลลัพธ์ การใช้ Event : onload= “ ” ; ที่ได้ ก็จะประมาณนี้
มาดูอีกแบบหนึ่งกัน จะแก้ไขเฉพาะในส่วนของแท็ก <body></body>
<body>
<div class="click_me">
<a href="" onmouseover="showName()">Hello</a>
</div>
</body>ผลลัพธ์ที่ได้ เมื่อนำเมาส์ไปชี้ Hello จะ alert ข้อความออกมาให้เรา
เอาไว้เท่าน้ีเนอะ สำหรับ JavaScript Click Alert บ๊ายยยยย จุ๊บ
