DEV Community

manalabpsu
manalabpsu

Posted on

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

Alt Text
๋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 เสมอ
Alt Text

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
*/

Top comments (0)