JavaScript คืออะไร?
JavaScript เป็นภาษาการเขียนโปรแกรมสำหรับเว็บ
JavaScript สามารถอัปเดตและเปลี่ยนทั้งHTMLและCSS
JavaScript สามารถคำนวณจัดการและตรวจสอบข้อมูลได้
บทช่วยสอนการเริ่มต้นอย่างรวดเร็วของ JavaScript
บทช่วยสอนนี้จะกล่าวถึงประเภทข้อมูล JavaScript ที่สำคัญที่สุดอย่างรวดเร็ว
ตัวแปร JavaScript สามารถ:
- ตัวเลข
- เครื่องสาย
- วัตถุ
- อาร์เรย์
- ฟังก์ชั่น
ตัวแปร JavaScript
ตัวแปร JavaScript เป็นคอนเทนเนอร์สำหรับจัดเก็บค่าข้อมูล
ในตัวอย่างนี้ x, y และ z เป็นตัวแปร:
ตัวอย่าง
var x = 5;
var y = 6;
var z = x + y;
จากตัวอย่างข้างต้น คุณสามารถคาดหวัง:
- x เก็บค่า 5
- y เก็บค่า 6
- z เก็บค่า 11
ตัวเลขจาวาสคริปต์
JavaScript มีตัวเลข เพียง ประเภทเดียว เท่านั้น สามารถเขียนตัวเลขโดยมีหรือไม่มีทศนิยมก็ได้
ตัวอย่าง
var x = 3.14; // A number with decimals
var y = 3; // A number without decimals
ตัวเลขทั้งหมดจะถูกเก็บไว้เป็นตัวเลขทศนิยมที่มีความแม่นยำสองเท่า
จำนวนทศนิยมสูงสุดคือ 17 แต่จุดทศนิยมไม่ถูกต้อง 100% เสมอไป:
ตัวอย่าง
var x = 0.2 + 0.1; // x will be 0.30000000000000004
JavaScript Strings
สตริงเก็บข้อความ สตริงถูกเขียนอยู่ภายในเครื่องหมายคำพูด คุณสามารถใช้เครื่องหมายคำพูดเดี่ยวหรือคู่:
ตัวอย่าง
var carname = "Volvo XC60";
// Double quotes
var carname = 'Volvo XC60'; // Single quotes
ความยาวของสตริงพบได้ในความยาว คุณสมบัติในตัว :
ตัวอย่าง
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
วัตถุ JavaScript
คุณได้เรียนรู้แล้วว่าตัวแปร JavaScript เป็นที่เก็บค่าข้อมูล
รหัสนี้กำหนดค่าอย่างง่าย (Fiat) ให้กับตัวแปรชื่อ car:
var car = "Fiat";
วัตถุก็เป็นตัวแปรเช่นกัน แต่วัตถุสามารถมีค่าได้มากมาย
รหัสนี้กำหนดค่าจำนวนมาก (Fiat, 500, สีขาว) ให้กับ ตัวแปร ชื่อ car:
var car = {type:"Fiat", model:"500", color:"white"};
JavaScript Arrays
อาร์เรย์ JavaScript ใช้เพื่อเก็บหลายค่าในตัวแปรเดียว
ตัวอย่าง
var cars = ["Saab", "Volvo", "BMW"];
ฟังก์ชัน JavaScript
ฟังก์ชัน JavaScript คือกลุ่มโค้ดที่ออกแบบมาเพื่อทำงานเฉพาะ
ฟังก์ชัน JavaScript จะทำงานเมื่อ "บางสิ่ง" เรียกใช้ (เรียกมันว่า)
ตัวอย่าง
function myFunction(p1, p2) {
return p1 * p2;
// The function returns the product of p1 and p2
}
JavaScript สามารถทำอะไรได้บ้าง?
ส่วนนี้มีตัวอย่างบางส่วนของสิ่งที่จาวาสคริปต์สามารถทำได้:
- JavaScript สามารถเปลี่ยนเนื้อหา HTML ได้
- JavaScript สามารถเปลี่ยนค่าแอตทริบิวต์ HTML
- JavaScript สามารถเปลี่ยนรูปแบบ HTML (CSS)
- JavaScript สามารถซ่อนองค์ประกอบ HTML
- JavaScript สามารถแสดงองค์ประกอบ HTML
JavaScript สามารถเปลี่ยนเนื้อหา HTML ได้
วิธี JavaScript HTML หนึ่งในหลายวิธีคือgetElementById( )
ตัวอย่างนี้ใช้วิธี "ค้นหา" องค์ประกอบ HTML (ด้วย id="demo") และเปลี่ยนเนื้อหาองค์ประกอบ ( innerHTML ) เป็น "สวัสดี JavaScript":
ตัวอย่าง
document.getElementById("demo").innerHTML = "Hello JavaScript";
JavaScript สามารถเปลี่ยนค่าแอตทริบิวต์ HTML
ในตัวอย่างนี้ JavaScript เปลี่ยนค่าของแอตทริบิวต์ src (แหล่งที่มา) ของแท็ก <img>:
หลอดไฟ
JavaScript สามารถเปลี่ยนรูปแบบ HTML (CSS)
การเปลี่ยนรูปแบบขององค์ประกอบ HTML เป็นตัวแปรของการเปลี่ยนแอตทริบิวต์ HTML:
ตัวอย่าง
document.getElementById("demo").style.fontSize = "35px";
or
document.getElementById('demo').style.fontSize = '35px';
JavaScript สามารถซ่อนองค์ประกอบ HTML
การซ่อนองค์ประกอบ HTML สามารถทำได้โดยเปลี่ยนรูปแบบการแสดงผล:
ตัวอย่าง
document.getElementById("demo").style.display = "none";
or
document.getElementById('demo').style.display = 'none';
JavaScript สามารถแสดงองค์ประกอบ HTML
การแสดงองค์ประกอบ HTML ที่ซ่อนอยู่สามารถทำได้โดยการเปลี่ยนรูปแบบการแสดงผล:
ตัวอย่าง
document.getElementById("demo").style.display = "block";
or
document.getElementById('demo').style.display =
'block';
บทช่วยสอน JavaScript แบบเต็ม
นี่เป็นคำอธิบายสั้น ๆ ของ JavaScript
สำหรับบท ช่วยสอน JavaScript แบบเต็ม ให้ไปที่W3Schools JavaScript Tutorial
สำหรับการอ้างอิง JavaScript แบบเต็ม ให้ไปที่W3Schools JavaScript Reference