- JavaScript คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ซึ่งใช้ในการสร้างและพัฒนาเว็บไซต์ (ใช้ร่วมกับ HTML) มีวิธีการทำงาน
- JavaScript OnClick คือเหตุการณ์ที่เกิดจากการคลิกเมาส์
โค้ด: เลือกทั้งหมด
<element OnClick = "function_name">
- อธิบายโค้ด
- - function_name คือ ชื่อฟังก์ชั่น
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/jquery.min.js"></script>
<script>
var variable_name_1 = 1;
function function_name1() {
if (variable_name_1==1) { var variable_name_2 = "picture_name_1.jpg"; }
if (variable_name_1==2) { var variable_name_2 = "picture_name_2.jpg"; }
click++;
document.getElementById("element_id").src = variable_name_2;
}
function function_name_2(){ variable_name_2 = ""; document.getElementById("element_id").src = variable_name_2; }
function function_name_3() { var variable_name_2 = "picture_name_2.jpg";
document.getElementById("element_id").src = variable_name_2; }
function function_name_4(){ variable_name_2 = ""; document.getElementById("element_id").src = variable_name_2; }
</script>
</head>
<body>
<button onclick="function_name_1();">Text_output</button>
<br><img id="element_id"" src="">
</body>
</html>
- - <script src="https://ajax.googleapis.com/jquery.min.js"></script> คือ Google CND
- variable_name คือ ชื่อตัวแปร
- function_name คือ ชื่อฟังก์ชั่น
- element_id คือ ชื่อไอดี
- picture_name คือ ชื่อไฟล์รูปภาพ
- Text_output คือ ข้อความที่ต้องการพิมพ์ออกมาแสดงให้ผู้ใช้เห็น
- ภาพมีชื่อว่า Star Yellow.jpg, Star Red.jpg, Circle Blue.jpg และ Triangle.jpg
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/jquery.min.js"></script>
<script>
var click = 1;
function imag1() {
if (click==1) { var image = "Star Yellow.jpg"; }
if (click==2) { var image = "Star Red.jpg"; }
if (click==3) { var image = "Circle Blue.jpg"; }
if (click==4) { var image = "Triangle.jpg"; click=0; }
click++;
document.getElementById("picture").src = image;
}
function imag2(){ image = ""; document.getElementById("picture").src = image; }
function imag3() { var image = "Star Red.jpg"; document.getElementById("picture").src = image; }
function imag4(){ image = ""; document.getElementById("picture").src = image; }
function imag5() { var image = "Circle Blue.jpg"; document.getElementById("picture").src = image; }
function imag6(){ image = ""; document.getElementById("picture").src = image; }
function imag7() { var image = "Triangle.jpg"; document.getElementById("picture").src = image; }
function imag8(){ image = ""; document.getElementById("picture").src = image; }
</script>
</head>
<body>
<button onclick="imag1();">Select</button>
<br><img id="picture" src="">
</body>
</html>
- 1. เมื่อคลิกที่ Star Yellow
- 2. เมื่อคลิกที่ Star Red
- 3. เมื่อคลิกที่ Circle Blue
- 4. เมื่อคลิกที่ Triangle
----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา Javascript, HTML, Ajax และ jQueryซึ่งเป็นความรู้พื้นฐานในการพัฒนา Javascript, HTML5 , Ajax และ jQuery ต่อไป
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------