JavaScript คืออะไร?

JavaScript เป็นภาษาโปรแกรมมิ่งที่ใช้ในการพัฒนาเว็บไซต์ เป็นภาษาที่ทำงานฝั่งไคลเอนต์ (Client-side) และสามารถทำงานฝั่งเซิร์ฟเวอร์ (Server-side) ได้ด้วย JavaScript ถูกพัฒนาขึ้นในปี 1995 โดย Brendan Eich ที่บริษัท Netscape

JavaScript เป็นภาษาที่มีความยืดหยุ่นสูง สามารถใช้สร้างเว็บไซต์แบบโต้ตอบ (Interactive) แอปพลิเคชันมือถือ เกม และแม้แต่แอปพลิเคชันเดสก์ท็อป

ข้อมูลน่าสนใจ: JavaScript เป็นหนึ่งในภาษาโปรแกรมมิ่งที่ได้รับความนิยมมากที่สุดในโลก และเป็นภาษาเดียวที่เว็บเบราว์เซอร์เข้าใจได้โดยตรง

ทำไมต้องเรียน JavaScript?

การเรียนรู้ JavaScript มีประโยชน์มากมาย:

  • ความต้องการสูง: นักพัฒนา JavaScript มีความต้องการสูงในตลาดแรงงาน
  • ความยืดหยุ่น: สามารถใช้พัฒนาทั้งฝั่งหน้าบ้าน (Frontend) และหลังบ้าน (Backend)
  • ชุมชนใหญ่: มีชุมชนนักพัฒนาขนาดใหญ่และทรัพยากรการเรียนรู้มากมาย
  • เรียนรู้ง่าย: เป็นภาษาที่เหมาะสำหรับผู้เริ่มต้น
  • ไม่ต้องติดตั้งโปรแกรมพิเศษ: สามารถเขียนและทดสอบได้ในเว็บเบราว์เซอร์

พื้นฐาน JavaScript

ก่อนเริ่มเขียน JavaScript มาทำความเข้าใจพื้นฐานกันก่อน:

1. การเขียน JavaScript

JavaScript สามารถเขียนได้ 3 วิธี:

  • Inline: เขียนในแท็ก HTML โดยตรง
  • Internal: เขียนในแท็ก <script> ภายในไฟล์ HTML
  • External: เขียนในไฟล์แยกต่างหาก (.js)

2. การแสดงผล

JavaScript มีวิธีแสดงผลหลายแบบ:

  • console.log() - แสดงผลใน Console
  • alert() - แสดงผลในกล่องข้อความ
  • document.write() - เขียนลงในเอกสาร HTML
  • innerHTML - เปลี่ยนเนื้อหาของ Element

โปรแกรม JavaScript แรก

มาเริ่มต้นด้วยโปรแกรม "Hello, World!" กันเถอะ:

<!DOCTYPE html> <html> <head> <title>โปรแกรม JavaScript แรก</title> </head> <body> <h1>ยินดีต้อนรับสู่ JavaScript</h1> <script> // แสดงข้อความใน Console console.log("Hello, World!"); // แสดงข้อความในกล่องข้อความ alert("สวัสดี JavaScript!"); // เปลี่ยนเนื้อหาของหน้าเว็บ document.write("<p>นี่คือโปรแกรม JavaScript แรกของฉัน!</p>"); </script> </body> </html>

ตัวแปรและชนิดข้อมูล

ตัวแปรใน JavaScript สามารถประกาศได้ 3 วิธี:

// การประกาศตัวแปรแบบต่างๆ var name = "สมชาย"; // แบบเก่า (ไม่แนะนำ) let age = 25; // แบบใหม่ (แนะนำ) const PI = 3.14159; // ค่าคงที่ // ชนิดข้อมูลพื้นฐาน let text = "Hello"; // String (ข้อความ) let number = 42; // Number (ตัวเลข) let isTrue = true; // Boolean (จริง/เท็จ) let nothing = null; // Null (ค่าว่าง) let undefined_var; // Undefined (ไม่ได้กำหนดค่า) // การแสดงชนิดข้อมูล console.log(typeof text); // "string" console.log(typeof number); // "number" console.log(typeof isTrue); // "boolean"
คำแนะนำ: ใช้ let สำหรับตัวแปรที่ค่าเปลี่ยนแปลงได้ และ const สำหรับค่าคงที่ หลีกเลี่ยงการใช้ var

ฟังก์ชัน

ฟังก์ชันเป็นบล็อกของโค้ดที่สามารถเรียกใช้ซ้ำได้:

// การสร้างฟังก์ชัน function sayHello(name) { return "สวัสดี " + name + "!"; } // การเรียกใช้ฟังก์ชัน let greeting = sayHello("สมชาย"); console.log(greeting); // "สวัสดี สมชาย!" // ฟังก์ชันแบบ Arrow Function (ES6) const add = (a, b) => { return a + b; }; // หรือเขียนแบบสั้น const multiply = (a, b) => a * b; console.log(add(5, 3)); // 8 console.log(multiply(4, 6)); // 24

การจัดการ DOM

DOM (Document Object Model) คือการแทนค่าของเอกสาร HTML ในรูปแบบของออบเจ็กต์ JavaScript สามารถจัดการ DOM เพื่อเปลี่ยนแปลงหน้าเว็บได้:

// การเลือก Element let title = document.getElementById("title"); let buttons = document.getElementsByClassName("btn"); let paragraphs = document.getElementsByTagName("p"); // การเปลี่ยนเนื้อหา title.innerHTML = "หัวข้อใหม่"; title.textContent = "ข้อความใหม่"; // การเปลี่ยนสไตล์ title.style.color = "red"; title.style.fontSize = "24px"; // การเพิ่ม Event Listener title.addEventListener("click", function() { alert("คลิกที่หัวข้อแล้ว!"); }); // การสร้าง Element ใหม่ let newParagraph = document.createElement("p"); newParagraph.textContent = "นี่คือย่อหน้าใหม่"; document.body.appendChild(newParagraph);

ขั้นตอนต่อไป

หลังจากเรียนรู้พื้นฐาน JavaScript แล้ว คุณสามารถศึกษาหัวข้อต่อไปนี้:

  1. ตัวแปรใน JavaScript - เรียนรู้เพิ่มเติมเกี่ยวกับตัวแปร
  2. การสุ่มตัวเลข - วิธีสร้างตัวเลขสุ่ม
  3. การควบคุมการทำงาน (Conditional Statements)
  4. การวนซ้ำ (Loops)
  5. อาร์เรย์และออบเจ็กต์
  6. การจัดการ Events
  7. AJAX และ Fetch API
  8. ES6+ Features
เคล็ดลับการเรียนรู้: ฝึกเขียนโค้ดทุกวัน เริ่มจากโปรเจ็กต์เล็กๆ และค่อยๆ เพิ่มความซับซ้อน อย่าลืมใช้ Developer Tools ในเบราว์เซอร์เพื่อดีบักโค้ด