โดย pprn » 06/07/2018 11:49 am
- JavaScript คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ซึ่งใช้ในการสร้างและพัฒนาเว็บไซต์ (ใช้ร่วมกับ HTML) มีวิธีการทำงาน
แบบอ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming : OOP)
- Radio คือ ตัวเลือกที่สามารถเลือกด้แค่ตัวเลือกเดียว จะแสดงในรูปแบบของวงกลมสีขาว สามารถคลิกเลือกวงกลมได้
- ก่อนการเขียน code ให้ใช้ภาพไฟล์นามสกุล .jpg และนำไฟล์ภาพให้อยู่ในโฟล์เดอร์ (folder) เดียวกันกับไฟล์งานของเรา
รูปแบบคำสั่ง
โค้ด: เลือกทั้งหมด
<!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>
<input type="radio" name="......" value="picture_name" id="element_id_input" onclick="function_name();">Text_output
<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 เท่านั้น
- input type="radio" คือ รูปแบบ form (ฟอร์ม) radio (เรดิโอ) ใน html
- onclick="function_name(); คือเหตุการณ์ function_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>
function imag1() {
var image = document.getElementById("c1").value + ".jpg";
document.getElementById("picture").src = image;
}
function imag2(){
var image = document.getElementById("c2").value + ".jpg";
document.getElementById("picture").src = image;
}
function imag3() {
var image = document.getElementById("c3").value + ".jpg";
document.getElementById("picture").src = image;
}
function imag4() {
var image = document.getElementById("c4").value + ".jpg";
document.getElementById("picture").src = image;
}
</script>
</head>
<body>
<input type="radio" name="product" value="Star Yellow" id="c1" onclick="imag1();">Star Yellow
<input type="radio" name="product" value="Star Red" id="c2" onclick="imag2();">Star Red
<input type="radio" name="product" value="Circle Blue" id="c3" onclick="imag3();">Circle Blue
<input type="radio" name="product" value="Triangle" id="c4" onclick="imag4();">Triangle
<br><img id="picture" src="">
</body>
</html>
ผลลัพธ์
- 1. เมื่อคลิก radio (เรดิโอ) ที่ Star Yellow
- เมื่อคลิก radio (เรดิโอ) ที่ Star Yellow
- star yellow.JPG (18.41 KiB) Viewed 2131 times
- 2. เมื่อคลิก radio (เรดิโอ) ที่ Star Red
- เมื่อคลิก radio (เรดิโอ) ที่ Star Red
- star red.JPG (21.22 KiB) Viewed 2131 times
- 3. เมื่อคลิก radio (เรดิโอ) ที่ Circle Blue
- เมื่อคลิก radio (เรดิโอ) ที่ Circle Blue
- circle blue.JPG (20.61 KiB) Viewed 2131 times
- 4. เมื่อคลิก radio (เรดิโอ) ที่ Triangle
- เมื่อคลิก radio (เรดิโอ) ที่ Triangle
- triangle.JPG (20.62 KiB) Viewed 2131 times
----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา Javascript, HTML, Ajax และ jQueryซึ่งเป็นความรู้พื้นฐานในการพัฒนา Javascript, HTML5 , Ajax และ jQuery ต่อไป
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------
[list][url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2187-java-javascript-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html][size=110]JavaScript[/size][/url] คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ซึ่งใช้ในการสร้างและพัฒนาเว็บไซต์ (ใช้ร่วมกับ HTML) มีวิธีการทำงาน [/list]แบบอ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming : OOP)
[list][url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3015-checkbox-%E0%B8%81%E0%B8%B1%E0%B8%9A-radio-button-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html][size=110]Radio[/size][/url] คือ ตัวเลือกที่สามารถเลือกด้แค่ตัวเลือกเดียว จะแสดงในรูปแบบของวงกลมสีขาว สามารถคลิกเลือกวงกลมได้[/list]
[list]ก่อนการเขียน code ให้ใช้ภาพไฟล์นามสกุล .jpg และนำไฟล์ภาพให้อยู่ในโฟล์เดอร์ (folder) เดียวกันกับไฟล์งานของเรา [/list]
[b][size=150][color=#0000BF]รูปแบบคำสั่ง[/color][/size][/b]
[code]<!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>
<input type="radio" name="......" value="picture_name" id="element_id_input" onclick="function_name();">Text_output
<br><img id="element_id_output" src="">
</body>
</html>[/code]
[b][u]อธิบายโค้ด [/u][/b]
[list]- <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 เท่านั้น
- input type="radio" คือ รูปแบบ form (ฟอร์ม) radio (เรดิโอ) ใน html
- onclick="function_name(); คือเหตุการณ์ function_name จะเกิดขึ้นเมื่อคลิกส์เมาส์
- Text_output คือ ข้อความที่ต้องการพิมพ์ออกมาแสดงให้ผู้ใช้เห็น[/list]
[size=150][color=#0000BF][b]ตัวอย่าง[/b][/color][/size]
[list]ภาพมีชื่อว่า Star Yellow.jpg, Star Red.jpg, Circle Blue.jpg และ Triangle.jpg[/list]
[code]<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/jquery.min.js"></script>
<script>
function imag1() {
var image = document.getElementById("c1").value + ".jpg";
document.getElementById("picture").src = image;
}
function imag2(){
var image = document.getElementById("c2").value + ".jpg";
document.getElementById("picture").src = image;
}
function imag3() {
var image = document.getElementById("c3").value + ".jpg";
document.getElementById("picture").src = image;
}
function imag4() {
var image = document.getElementById("c4").value + ".jpg";
document.getElementById("picture").src = image;
}
</script>
</head>
<body>
<input type="radio" name="product" value="Star Yellow" id="c1" onclick="imag1();">Star Yellow
<input type="radio" name="product" value="Star Red" id="c2" onclick="imag2();">Star Red
<input type="radio" name="product" value="Circle Blue" id="c3" onclick="imag3();">Circle Blue
<input type="radio" name="product" value="Triangle" id="c4" onclick="imag4();">Triangle
<br><img id="picture" src="">
</body>
</html>[/code]
[b][size=150][color=#FF0000]ผลลัพธ์[/color][/size][/b]
[list][b]1.[/b] เมื่อคลิก radio (เรดิโอ) ที่ Star Yellow[/list]
[list][list][attachment=3]star yellow.JPG[/attachment][/list][/list]
[list][b]2.[/b] เมื่อคลิก radio (เรดิโอ) ที่ Star Red[/list]
[list][list][attachment=2]star red.JPG[/attachment]
[/list][/list]
[list][b]3.[/b] เมื่อคลิก radio (เรดิโอ) ที่ Circle Blue[/list]
[list][list][attachment=1]circle blue.JPG[/attachment][/list][/list]
[list][b]4.[/b] เมื่อคลิก radio (เรดิโอ) ที่ Triangle[/list]
[list][list][attachment=0]triangle.JPG[/attachment][/list][/list]
[b][color=#FF0000]----------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/b]
[color=#FF00BF][i]_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา Javascript, HTML, Ajax และ jQueryซึ่งเป็นความรู้พื้นฐานในการพัฒนา [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-javascript.html]Javascript[/url], [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5.html]HTML5[/url] , [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-ajax.html]Ajax[/url] และ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery.html]jQuery[/url] ต่อไป
_____________________________________________________________________________________________[/color][/i]
[b][color=#FF0000]----------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/b]