vscode & JavaScript

#พื้นฐานการเขียนเว็ปไซต์

#javascript #vscode

การเขียน JavaScript (JS) สำหรับผู้เริ่มต้นสามารถทำได้ง่าย ๆ โดยไม่จำเป็นต้องติดตั้งโปรแกรมอะไรมากมายในตอนแรก สามารถเริ่มต้นได้ด้วยวิธีพื้นฐานที่สุดคือการใช้ เบราว์เซอร์ และ ไฟล์ HTML

1. วิธีการเริ่มต้นเขียน JavaScript เบื้องต้น

1.1 การเขียนในเบราว์เซอร์ (Console)

เป็นวิธีที่ง่ายและรวดเร็วที่สุดในการทดลองเขียนโค้ดสั้น ๆ:

1. เปิดเว็บเบราว์เซอร์ (เช่น Chrome, Firefox).

2. คลิกขวาที่หน้าเว็บใดก็ได้ แล้วเลือก "Inspect" หรือ "Developer Tools" (เครื่องมือสำหรับนักพัฒนา).

3. ไปที่แท็บ "Console" (คอนโซล).

4. คุณสามารถพิมพ์คำสั่ง JavaScript ลงไปได้เลย ตัวอย่างเช่น:

◦ พิมพ์ alert("Hello World!"); แล้วกด Enter จะมีหน้าต่างแจ้งเตือนปรากฏขึ้น

◦ พิมพ์ console.log("นี่คือข้อความในคอนโซล"); แล้วกด Enter ข้อความจะแสดงในคอนโซล

1.2 การเขียนในไฟล์ HTML (สำหรับเว็บไซต์)

เนื่องจาก JavaScript ถูกออกแบบมาเพื่อใช้ในเบราว์เซอร์เป็นหลัก การรวมโค้ดเข้ากับ HTML จึงเป็นวิธีที่นิยมที่สุด:

1. สร้างไฟล์ HTML: สร้างไฟล์ใหม่ในโปรแกรมแก้ไขข้อความ (เช่น VS Code, Notepad) แล้วบันทึกเป็นชื่อ เช่น index.html.

2. เพิ่มแท็ก <script>: แทรกโค้ด JavaScript ของคุณไว้ภายในแท็ก <script> ในไฟล์ HTML:

HTML

<!DOCTYPE html>

<html>

<head>

<title>My First JS</title>

</head>

<body>

<h1>ลองเขียน JavaScript</h1>

<script>

// นี่คือการเขียน JavaScript

// สั่งให้แสดงผลข้อความในคอนโซล

console.log("โค้ด JavaScript ทำงานแล้ว!");

// สั่งให้เปลี่ยนเนื้อหาของแท็ก h1

document.querySelector('h1').innerText = 'JavaScript เปลี่ยนข้อความแล้ว!';

</script>

</body>

</html>

3. เปิดไฟล์: เปิดไฟล์ index.html ด้วยเว็บเบราว์เซอร์ (ดับเบิลคลิก).

1.3 การแยกไฟล์ JavaScript

สำหรับโปรเจกต์ที่ซับซ้อนขึ้น ควรแยกโค้ด JavaScript ออกเป็นไฟล์ต่างหาก:

1. สร้างไฟล์ JS: สร้างไฟล์ใหม่ แล้วบันทึกเป็นชื่อ เช่น app.js.

2. เขียนโค้ดในไฟล์ app.js:

JavaScript

// app.js

console.log("โค้ดจากไฟล์ app.js ทำงานแล้ว!");

alert("สวัสดี!");

3. เชื่อมโยงในไฟล์ HTML: ใช้แอตทริบิวต์ src ในแท็ก <script> เพื่อเชื่อมโยงไปยังไฟล์ app.js:

HTML

<!DOCTYPE html>

<html>

<head>

<title>External JS</title>

</head>

<body>

<h1>การเชื่อมโยงไฟล์ภายนอก</h1>

<script src="app.js"></script>

</body>

</html>

2. พื้นฐานสำคัญที่ควรรู้

แนวคิด คำอธิบายโดยย่อ ตัวอย่างโค้ด

ตัวแปร (Variables) ใช้เก็บข้อมูล มีคีย์เวิร์ดหลักคือ var, let, และ const let name = "Alice"; const PI = 3.14;

ชนิดข้อมูล (Data Types) JavaScript มีชนิดข้อมูลเช่น string (ข้อความ), number (ตัวเลข), boolean (จริง/เท็จ), object (วัตถุ), array (แถวลำดับ) let age = 30; let isStudent = true;

ฟังก์ชัน (Functions) กลุ่มของคำสั่งที่ทำหน้าที่เฉพาะอย่าง เพื่อนำกลับมาใช้ซ้ำได้ function greet(name) { return "Hello, " + name; }

เงื่อนไข (Conditions) การตัดสินใจในการทำงานของโปรแกรม เช่น if, else if, else if (age >= 18) { console.log("Adult"); }

ลูป (Loops) การทำซ้ำคำสั่งชุดเดิมหลาย ๆ ครั้ง เช่น for, while for (let i = 0; i < 5; i++) { console.log(i); }