พื้นฐาน JavaScript เบื้องต้น

๋JavaScript เป็นภาษาสคริปต์เชิงวัตถุ (ที่เรียกกันว่า “สคริปต์” (script) ซึ่งในการสร้างและพัฒนาเว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น ซึ่งก่อนที่จะเริ่มเรียนเรื่อง JavaScrip นั้น จำเป็นต้องมีความรู้พื้นฐานเรื่อง HTML และ CSS เสียก่อน

สิ่งที่ควรรู้ใน JavaScript-101

• ตัวแปรใน JavaScript
• รู้จักกับ function ใน JavaScript
• Array ชุดของข้อมูล
• Loop ใช้ทำซ้ำตามเงื่อนไขที่กำหนด

Javascript : JavaScript Tutorial

1ตัวแปรใน JavaScript

ใน JavaScript จะมีการประกาศตัวแปรอยู่ 4 วิธีคือใช้ var, let, const หรือจะไม่ใช้อะไรเลยก็ทำได้ครับ

• var คือ การประกาศตัวแปรสำหรับใช้ใน code ในส่วนที่ถูกรันในส่วนนั้นๆ อาจจะหมายถึงทั้ง function หรือทั้งไฟล์เลยก็เป็นได้

var test = 123;
if (true) {
   var test= 456;
}
console.log(test); // 456

• let คือ การประกาศตัวแปรสำหรับใช้เฉพาะใน scope นั้นหรือเฉพาะใน block นั้นๆ

let test = 123;
if (true) {
   let test= 456;
}
console.log(test); // 123

• const คือ การประกาศตัวแปรแบบค่าคงที่ หรือพูดง่ายๆคือตัวแปรแบบ Read Only

onst PI = 3.14
PI = 1 // "PI" is read-only เปลี่ยนค่าไม่ได้อีกแล้วนะ
const obj = { a: 1 }
const obj = { a: 2} // แต่การเปลี่ยนค่าภายใน object ไม่ได้ทำให้ memory  
address เปลี่ยนไป obj.a = 2 
console.log(obj) // { a: 2 }

• ไม่ระบุ คือ การประกาศแบบ global การประกาศตัวแปรแบบ global คือการประกาศแบบใดก็ได้แต่เอาไว้ใน scope นอกสุด Shell (Mac, Linux):

2.รู้จักกับ function ใน JavaScript

สำหรับ function ใน JavaScript

• มันสามารถเก็บลงตัวแปรได้
• สามารถส่ง function เป็น argument เข้าไปใน function อื่นๆได้
• สามารถ return ค่าออกมาเป็น function ก็ทำได้

ฟังก์ชั่น หรือชุดคำสั่งที่รวม Statement การทำงานเอาไว้ สามารถเรียกชื่อมาใช้งานตามที่เราต้องการใช้ได้

function ชื่อฟังก์ชั่น( ตัวแปรพารามิเตอร์ถ้ามี ){
Statement ที่ต้องการให้ทำงาน เมื่อมีการเรียก function
return <- ถ้าต้องการส่งค่าบางอย่างกลับไปนอกฟังก์ชั่น เมื่อการทำงานมาถึงจุดนี้
}

ตัวอย่างการเรียกใช้ฟังก์ชั่น เมื่อสร้างไว้เบื้องต้น

function hello() {
}
hello(); // เรียกใช้งาน

4.Array ชุดของข้อมูล

เป็นตัวแปรพิเศษซึ่งสามารถเก็บมากกว่าหนึ่งค่าในแต่ละครั้งหากต้องการมีรายการสินค้า (ตัวอย่างเช่นชื่อรถ) การจัดเก็บรถยนต์ในตัวแปรเดี่ยวอาจมีลักษณะดังนี้:

var cars = ["Saab", "Volvo", "BMW"];

ในการเข้าถึงของอาร์เรย์ค่าเริ่มต้นของ Index จะมีค่าเท่ากับ 0 เสมอ

5.Loop ใช้ทำซ้ำตามเงื่อนไขที่กำหนด

Loop for

for ( ตัวแปรเริ่มต้น ; กรณีเทียบ (Condition) ; เพิ่มค่าตัวแปร ) {
Statement ที่ต้องการให้ทำงาน ถ้ากรณีเทียบยังเป็นจริงอยู่
}

ตัวอย่างการทำงาน Loop for

for (var i = 1; i < 5 ; i++ ){
console.log(i);
}
/*
ผลลัพธ์เราจะได้
1 2 3 4
เพราะรอบสุดท้าย i มีค่าเป็น 5 ซึ่งจะทำให้ส่วนเทียบเป็นเท็จ เป็นการหยุด loop
*/