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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
pprn
PHP Super Hero Member
PHP Super Hero Member
Posts: 565
Joined: 02/07/2018 10:45 am

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

Post by pprn »

  • JavaScript คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ซึ่งใช้ในการสร้างและพัฒนาเว็บไซต์ (ใช้ร่วมกับ HTML) มีวิธีการทำงาน
แบบอ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming : OOP)
  • JavaScript OnChange คือ เหตุการณ์ที่เมื่อมีการเปลี่ยนแปลงค่าจากค่าปัจจุบันเป็นค่าใหม่
  • ก่อนการเขียน code ให้ใช้ภาพไฟล์นามสกุล .jpg และนำไฟล์ภาพให้อยู่ในโฟล์เดอร์ (folder) เดียวกันกับไฟล์งานของเรา
รูปแบบคำสั่ง OnChang
  • Code: Select all

    <element OnChange = "function_name">
อธิบายโค้ด
- function_name คือ ชื่อฟังก์ชั่น


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

Code: Select all

<!DOCTYPE html> 
<html><head>
	<script src="https://ajax.googleapis.com/jquery.min.js"></script> 
	
	<script> 
		
		function function_name() { 	
			var variable_name = document.getElementById("element_id_input").value + ".jpg";	
			document.getElementById("element_id_output").src = variable_name;		
		} 
		
	</script>
</head>
<body> 
	<select onchange ="function_name();" id="element_id_input"> 
		<option> Text_output </option>
		<option value="picture_name"> Text_output </option> 
	</select>
	
	<br><img id="element_id_output" src="">

</body>
</html>
อธิบายโค้ด
  • - <script src="https://ajax.googleapis.com/jquery.min.js"></script> คือ Google CND
    - function_name คือ ชื่อฟังก์ชั่น
    - variable_name คือ ชื่อตัวแปร
    - document.getElementById คือ คำสั่งสำหรับการเข้าถึง Element Id
    - element_id_input" คือ ชื่อไอดี
    - element_id_output คือ ชื่อไอดี
    - value + ".jpg"; คือ ใช้ไฟล์ที่มีนามสกุล .jpg เท่านั้น
    - 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> 
		
		function imag() { 	
			var image = document.getElementById("choose").value + ".jpg";	
			document.getElementById("picture").src = image;		
		} 
		
	</script>
</head>
<body> 
	<select onchange ="imag();" id="choose"> 
		<option>Change Color</option>
		<option value="Star Yellow">Star Yellow</option> 
		<option value="Star Red">Star Red</option> 
		<option value="Circle Blue">Circle Blue</option> 
		<option value="Triangle">Triangle</option> 
	</select>
	
	
	<br><img id="picture" src="">

</body>
</html>
ผลลัพธ์
  • 1. เมื่อคลิกที่ Star Yellow
    • เมื่อคลิกที่ Star Yellow
      เมื่อคลิกที่ Star Yellow
      star yellow.JPG (16.87 KiB) Viewed 1203 times
  • 2. เมื่อคลิกที่ Star Red
    • เมื่อคลิกที่ Star Red
      เมื่อคลิกที่ Star Red
      star red.JPG (18.81 KiB) Viewed 1203 times
  • 3. เมื่อคลิกที่ Circle Blue
    • เมื่อคลิกที่ Circle Blue
      เมื่อคลิกที่ Circle Blue
      circle blue.JPG (18.87 KiB) Viewed 1203 times
  • 4. เมื่อคลิกที่ Triangle
    • เมื่อคลิกที่ Triangle
      เมื่อคลิกที่ Triangle
      triangle.JPG (19.61 KiB) Viewed 1203 times


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

----------------------------------------------------------------------------------------------------------------------------------------------------------------
  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests