พื้นฐานการทำงานร่วมกันของ HTML, CSS และ JavaScript

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

เป้าหมายของเราในบทนี้คือการทำให้คุณเข้าใจว่า:

HTML ทำหน้าที่สร้างโครงสร้างของเว็บไซต์
CSS ทำหน้าที่จัดรูปแบบหน้าตาของเว็บไซต์
JavaScript ทำหน้าที่เพิ่มลูกเล่นและการตอบสนองให้กับเว็บไซต์

HTML คืออะไรและมีหน้าที่อะไร

HTML หรือ HyperText Markup Language คือภาษาที่ใช้ในการสร้างโครงสร้างของเว็บไซต์ เปรียบเสมือนโครงกระดูกของร่างกาย HTML บอกเบราว์เซอร์ว่าเนื้อหาอะไรควรแสดงที่ส่วนไหนของหน้าเว็บ เช่น หัวข้อ, ย่อหน้า, รูปภาพ, ลิงก์ และอื่นๆ

HTML ใช้สิ่งที่เรียกว่า "แท็ก" (Tag) ในการกำหนดโครงสร้างของเนื้อหา แท็กมักจะมาเป็นคู่ คือแท็กเปิดและแท็กปิด เช่น <p> (แท็กเปิดสำหรับย่อหน้า) และ </p> (แท็กปิดสำหรับย่อหน้า) เนื้อหาที่อยู่ระหว่างแท็กเปิดและแท็กปิดจะถูกตีความว่าเป็นย่อหน้า

ตัวอย่าง HTML:

<!DOCTYPE html>
<html>
<head>
  <title>เว็บไซต์ของฉัน</title>
</head>
<body>
  <h1>ยินดีต้อนรับ!</h1>
  <p>นี่คือย่อหน้าแรกของเว็บไซต์</p>
  <img src="my_image.jpg" alt="รูปภาพของฉัน">
</body>
</html>

ในตัวอย่างนี้:

<!DOCTYPE html> บอกเบราว์เซอร์ว่านี่คือเอกสาร HTML5
<html> คือแท็กรากของเอกสาร HTML
<head> ประกอบด้วยข้อมูลเกี่ยวกับเอกสาร เช่น ชื่อเรื่อง (<title>)
<body> ประกอบด้วยเนื้อหาที่แสดงบนหน้าเว็บ
<h1> คือหัวข้อระดับ 1
<p> คือย่อหน้า
<img> คือรูปภาพ (src คือที่อยู่ของรูปภาพ และ alt คือคำอธิบายรูปภาพ)

CSS คืออะไรและมีหน้าที่อะไร

CSS หรือ Cascading Style Sheets คือภาษาที่ใช้ในการจัดรูปแบบหน้าตาของเว็บไซต์ เปรียบเสมือนเสื้อผ้าที่ทำให้ร่างกายดูดี CSS ช่วยให้เรากำหนดสี, ฟอนต์, ขนาดตัวอักษร, ระยะห่าง, ตำแหน่งขององค์ประกอบต่างๆ และอื่นๆ อีกมากมาย

CSS ทำงานโดยการเลือกองค์ประกอบ HTML ที่ต้องการจัดรูปแบบ (Selector) และกำหนดคุณสมบัติ (Property) และค่า (Value) ที่ต้องการ ตัวอย่างเช่น หากเราต้องการให้หัวข้อ <h1> มีสีแดง เราสามารถใช้ CSS ดังนี้:

h1 {
  color: red;
}

ในตัวอย่างนี้:

h1 คือ Selector (เลือกองค์ประกอบ <h1>)
color คือ Property (คุณสมบัติสี)
red คือ Value (ค่าสีแดง)

CSS สามารถเขียนได้ 3 แบบ:

Inline CSS: เขียนภายในแท็ก HTML โดยตรง (ไม่แนะนำให้ใช้บ่อยๆ)
```
<h1 style="color: blue;">หัวข้อสีฟ้า</h1>
    
```

Internal CSS: เขียนภายในแท็ก <style> ในส่วน <head> ของ HTML

<head>
  <title>เว็บไซต์ของฉัน</title>
  <style>
    h1 {
      color: green;
    }
  </style>
</head>

External CSS: เขียนในไฟล์ CSS แยกต่างหาก (นามสกุล .css) และเชื่อมโยงกับ HTML (แนะนำให้ใช้)
```
<head>
  <title>เว็บไซต์ของฉัน</title>
  <link rel="stylesheet" href="style.css">
</head>
    
```
ไฟล์ style.css:
```
h1 {
  color: orange;
}
    
```

JavaScript คืออะไรและมีหน้าที่อะไร

JavaScript คือภาษาโปรแกรมที่ใช้ในการเพิ่มลูกเล่นและการตอบสนองให้กับเว็บไซต์ เปรียบเสมือนสมองที่ทำให้ร่างกายเคลื่อนไหวและตอบสนองต่อสิ่งต่างๆ JavaScript ช่วยให้เราสร้างปฏิสัมพันธ์กับผู้ใช้, เปลี่ยนแปลงเนื้อหาของเว็บไซต์แบบไดนามิก, สร้างแอนิเมชั่น, และอื่นๆ อีกมากมาย

JavaScript ทำงานโดยการเขียนโค้ดที่เบราว์เซอร์จะอ่านและดำเนินการ โค้ด JavaScript สามารถเขียนได้ภายในแท็ก <script> ใน HTML หรือในไฟล์ JavaScript แยกต่างหาก (นามสกุล .js)

ตัวอย่าง JavaScript:

<script>
  alert("สวัสดี!");
</script>

โค้ดนี้จะแสดงกล่องข้อความ "สวัสดี!" บนหน้าเว็บ

JavaScript สามารถใช้ในการจัดการเหตุการณ์ (Event) ต่างๆ ที่เกิดขึ้นบนหน้าเว็บ เช่น การคลิกปุ่ม, การเลื่อนเมาส์, การโหลดหน้าเว็บ ตัวอย่างเช่น หากเราต้องการให้แสดงข้อความเมื่อผู้ใช้คลิกปุ่ม เราสามารถใช้ JavaScript ดังนี้:

<button onclick="alert('ปุ่มถูกคลิก!');">คลิกฉัน</button>

ในตัวอย่างนี้ onclick คือ Event Handler ที่จะเรียกใช้ฟังก์ชัน alert('ปุ่มถูกคลิก!'); เมื่อปุ่มถูกคลิก

วิธีที่ HTML, CSS และ JavaScript ทำงานร่วมกัน

HTML, CSS และ JavaScript ทำงานร่วมกันเพื่อสร้างเว็บไซต์ที่สวยงามและใช้งานง่าย HTML สร้างโครงสร้าง, CSS จัดรูปแบบ, และ JavaScript เพิ่มลูกเล่นและการตอบสนอง

ตัวอย่างการทำงานร่วมกัน:

สมมติว่าเราต้องการสร้างปุ่มที่มีพื้นหลังสีฟ้าและเมื่อคลิกแล้วจะเปลี่ยนเป็นสีแดง เราสามารถทำได้ดังนี้:

<!DOCTYPE html>
<html>
<head>
  <title>ปุ่มเปลี่ยนสี</title>
  <style>
    .my-button {
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="my-button" onclick="changeColor(this)">คลิกฉัน</button>

  <script>
    function changeColor(button) {
      button.style.backgroundColor = "red";
    }
  </script>
</body>
</html>

ในตัวอย่างนี้:

HTML สร้างปุ่ม (<button>)
CSS จัดรูปแบบปุ่มให้มีพื้นหลังสีฟ้า, ตัวอักษรสีขาว, และเคอร์เซอร์เป็นรูปมือ (.my-button)
JavaScript เปลี่ยนสีพื้นหลังของปุ่มเป็นสีแดงเมื่อถูกคลิก (changeColor())

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