เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

by **pprn** » 06/07/2018 2:37 pm

JavaScript คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ซึ่งใช้ในการสร้างและพัฒนาเว็บไซต์ (ใช้ร่วมกับ HTML) มีวิธีการทำงาน

แบบอ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming : OOP)

JavaScript OnClick คือเหตุการณ์ที่เกิดจากการคลิกเมาส์

รูปแบบคำสั่ง OnClick

Code: Select all
```
<element OnClick = "function_name">
```

อธิบายโค้ด
- - function_name คือ ชื่อฟังก์ชั่น

รูปแบบคำสั่ง การเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript OnClick (จาวาสคิปต์ ออนคลิก)

Code: Select all

<!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

Code: Select all

<!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

- เมื่อคลิกที่ Star Yellow
  
  star yellow.JPG (16.87 KiB) Viewed 2179 times

- 2. เมื่อคลิกที่ Star Red

- เมื่อคลิกที่ Star Red
  
  star red.JPG (18.81 KiB) Viewed 2179 times

3. เมื่อคลิกที่ Circle Blue

- เมื่อคลิกที่ Circle Blue
  
  circle blue.JPG (18.87 KiB) Viewed 2179 times

4. เมื่อคลิกที่ Triangle

- เมื่อคลิกที่ Triangle
  
  triangle.JPG (19.61 KiB) Viewed 2179 times

----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา Javascript, HTML, Ajax และ jQueryซึ่งเป็นความรู้พื้นฐานในการพัฒนา Javascript, HTML5 , Ajax และ jQuery ต่อไป
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

เทคนิคการเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript OnClick (จาวาสคิปต์ ออนคลิก)

Post a reply

Expand view Topic review: เทคนิคการเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript OnClick (จาวาสคิปต์ ออนคลิก)

เทคนิคการเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript OnClick (จาวาสคิปต์ ออนคลิก)