ปูพื้นฐานการเขียนเว็บด้วย HTML, CSS และ JavaScript

บทความนี้แนะนำพื้นฐานการพัฒนาเว็บแบบเป็นขั้นตอน โดยไล่จาก HTML สำหรับสร้างโครงสร้างหน้าเว็บ ต่อด้วย CSS สำหรับตกแต่ง และปิดท้ายด้วย JavaScript บน React/Next.js สำหรับสร้างเว็บแอปพลิเคชันแบบไดนามิกและโต้ตอบได้

เนื้อหาแบ่งเป็น 3 ส่วนที่ต่อยอดกัน:

ส่วนที่ 1 — HTML: โครงสร้าง หัวข้อ ลิงก์ รูปภาพ รายการ และแบบฟอร์ม
ส่วนที่ 2 — CSS: การใส่สไตล์ทั้ง 3 แบบ, class, navigation bar และ Flexbox
ส่วนที่ 3 — JavaScript กับ Next.js: React component และพื้นฐาน JavaScript สำหรับสร้าง UI

ส่วนที่ 1: พื้นฐาน HTML#

1.1 HTML คืออะไร?#

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

1.2 เตรียมเครื่องมือและตั้งค่าโปรเจกต์#

ข้อกำหนดเบื้องต้น: ติดตั้ง VS Code จาก code.visualstudio.com ↗

VS Code เป็น IDE (Integrated Development Environment) หรือเครื่องมือที่ใช้สำหรับเขียนโค้ด

การตั้งค่าโปรเจกต์

# สร้างโฟลเดอร์สำหรับโปรเจกต์
mkdir web-basics
cd web-basics

# สร้างโฟลเดอร์สำหรับไฟล์ HTML
mkdir 01_html
cd 01_html

# เปิด VS Code ในโฟลเดอร์ปัจจุบัน
code .

bash

1.3 โครงสร้างพื้นฐานของ HTML#

ใน VS Code ให้สร้างไฟล์ชื่อ index.html พิมพ์ html:5 แล้วกด Enter/Tab เพื่อสร้างโครงสร้าง HTML เริ่มต้น:

html:5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>

</body>
</html>

html

องค์ประกอบพื้นฐานของ HTML

Element	คำอธิบาย
`<!DOCTYPE html>`	ประกาศว่าเอกสารนี้เป็น HTML5
`<html>`	รากของเอกสาร HTML
`<head>`	บรรจุข้อมูลเมตาดาต้า (ไม่แสดงบนหน้าเว็บ)
`<title>`	กำหนดชื่อหน้าเว็บ แสดงที่แถบชื่อเบราว์เซอร์
`<body>`	บรรจุเนื้อหาที่แสดงบนหน้าเว็บ
`<h1>` - `<h6>`	หัวข้อขนาดต่างๆ (h1 ใหญ่สุด)
`<p>`	ย่อหน้าข้อความ
`<a href="URL">`	ลิงก์ไปยังหน้าเว็บอื่น
`<img src="..." alt="...">`	แทรกรูปภาพ

1.4 แสดงตัวอย่างหน้าเว็บใน VS Code#

หากต้องการดูตัวอย่างหน้าเว็บโดยไม่ต้องเปิดเบราว์เซอร์แยก ให้คลิกขวาที่ไฟล์ index.html แล้วเลือก Open in Integrated Browser:

Open in Integrated Browser

หน้าเว็บจะแสดงตัวอย่างภายใน VS Code ทันที:

Integrated Browser preview

1.5 หัวข้อและย่อหน้า#

แท็ก <h1> ถึง <h6> ใช้กำหนดหัวข้อ (heading) โดย <h1> เป็นหัวข้อสำคัญและมีขนาดใหญ่ที่สุด ไล่ลงไปจนถึง <h6> ที่เล็กที่สุด ควรใช้ <h1> เพียงหัวข้อหลักหัวข้อเดียวต่อหนึ่งหน้า แล้วใช้ <h2>–<h6> สำหรับหัวข้อย่อยตามลำดับความสำคัญ ส่วนแท็ก <p> ใช้สำหรับย่อหน้าข้อความทั่วไป

เพิ่มเนื้อหาภายใน <body>:

<body>
  <h1>Karn Yongsiriwit</h1>
  <p>Welcome to my website</p>
  <h2>News</h2>
  <p>Read the latest news from our website</p>
  <h2>Events</h2>
  <p>We have many upcoming events</p>
</body>

html

Heading and paragraph

1.6 ลิงก์ (Anchor Tag)#

แท็ก <a> (anchor) ใช้สร้างลิงก์เชื่อมไปยังหน้าเว็บอื่น โดยกำหนดปลายทางผ่านแอตทริบิวต์ href ลิงก์ภายใน (internal link) จะชี้ไปยังไฟล์ในโปรเจกต์เดียวกันด้วยชื่อไฟล์หรือพาธแบบสัมพัทธ์ เช่น about.html ส่วนลิงก์ภายนอก (external link) จะชี้ไปยังเว็บไซต์อื่นด้วย URL แบบเต็ม เช่น https://melivecode.com

สร้างไฟล์ชื่อ about.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About</title>
</head>
<body>
  <h1>About Me</h1>
</body>
</html>

html

ใน index.html เพิ่มลิงก์สำหรับหน้าเว็บภายในและภายนอก:

<!-- Internal link -->
<a href="about.html">About Us</a>

<!-- External link -->
<a href="https://melivecode.com">Visit MeLiveCode</a>

html

Link

1.7 รูปภาพ#

แท็ก <img> ใช้แสดงรูปภาพบนหน้าเว็บ โดยระบุตำแหน่งไฟล์ผ่านแอตทริบิวต์ src ซึ่งอาจเป็นไฟล์ในเครื่อง (เช่น cat_meme.jpg) หรือ URL ของรูปภาพจากอินเทอร์เน็ต ส่วนแอตทริบิวต์ alt ใช้กำหนดข้อความทางเลือกที่จะแสดงเมื่อโหลดรูปไม่สำเร็จ และช่วยด้านการเข้าถึง (accessibility) นอกจากนี้ยังกำหนดขนาดได้ด้วย width และ height:

<!-- Local image -->
<img src="cat_meme.jpg" alt="A funny cat" width="100px" height="150px" />

<!-- Image from the internet -->
<img src="https://melivecode.com/img/logo.png" alt="A bear writing code" height="150px" />

html

Link and image

1.8 รายการ (Lists)#

HTML รองรับการแสดงข้อมูลแบบรายการสองรูปแบบ ได้แก่ รายการแบบไม่มีลำดับ (unordered list) ที่ใช้แท็ก <ul> และแสดงเป็นจุด (bullet points) เหมาะกับข้อมูลที่ไม่เรียงลำดับ และรายการแบบมีลำดับ (ordered list) ที่ใช้แท็ก <ol> และแสดงเป็นตัวเลข เหมาะกับข้อมูลที่ต้องเรียงตามลำดับ โดยแต่ละรายการย่อยจะอยู่ในแท็ก <li> (list item):

<!-- Unordered list -->
<ul>
  <li>A new teacher joined the team</li>
  <li>Heavy rain in the city</li>
  <li>Weekend market opens downtown</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Welcome event</li>
  <li>National holiday</li>
  <li>Semester break</li>
</ol>

html

แท็ก	คำอธิบาย
`<ul>`	รายการไม่มีลำดับ (bullet points)
`<ol>`	รายการมีลำดับ (ตัวเลข)
`<li>`	รายการย่อย

List

1.9 ตาราง (Tables)#

แท็ก <table> ใช้แสดงข้อมูลในรูปแบบตาราง โดยแต่ละแถวอยู่ในแท็ก <tr> (table row) ช่องหัวตารางใช้แท็ก <th> (table header) ซึ่งจะแสดงเป็นตัวหนาและจัดกึ่งกลางโดยอัตโนมัติ ส่วนช่องข้อมูลปกติใช้แท็ก <td> (table data)

สร้างไฟล์ชื่อ table.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table</title>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
    <tr>
      <td>Karn Yong</td>
      <td>30</td>
      <td>Bangkok</td>
    </tr>
    <tr>
      <td>Parkpoom Beer</td>
      <td>25</td>
      <td>Chiang Mai</td>
    </tr>
  </table>
</body>
</html>

html

แท็ก	คำอธิบาย
`<table>`	กำหนดขอบเขตของตาราง
`<tr>`	แถวของตาราง (table row)
`<th>`	ช่องหัวตาราง (table header)
`<td>`	ช่องข้อมูล (table data)

คลิกขวาที่ไฟล์ table.html แล้วเลือก Open in Integrated Browser (ดูหัวข้อ 1.4) เพื่อดูผลลัพธ์:

Table

1.10 แบบฟอร์ม (Forms)#

แท็ก <form> ใช้รับข้อมูลจากผู้ใช้และส่งข้อมูลไปยังเซิร์ฟเวอร์

สร้างไฟล์ชื่อ login.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
</head>
<body>
  <h1>Login</h1>
  <form action="login.php" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" />
    <br />
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" />
    <br />
    <input type="checkbox" id="remember" name="remember" />
    <label for="remember">Remember me</label>
    <br/>
    <input type="submit" value="Login" />
  </form>
</body>
</html>

html

Form

องค์ประกอบของแบบฟอร์ม

Element	วัตถุประสงค์
`<form action="">`	กำหนดขอบเขตสำหรับรับข้อมูล; `action` ระบุตำแหน่งที่ส่งข้อมูล
`<label for="id">`	กำหนดชื่อให้ input; ช่วยเรื่อง accessibility
`<input>`	ประเภท input ต่างๆ (text, password, checkbox, submit)
`id` attribute	เชื่อม input กับ label
`name` attribute	ชื่อตัวแปร/พารามิเตอร์สำหรับส่งข้อมูล

หมายเหตุ: สำหรับ HTML elements และตัวอย่างเพิ่มเติม สามารถดูได้ที่ W3Schools HTML ↗

ส่วนที่ 2: พื้นฐาน CSS#

2.1 CSS คืออะไร?#

CSS (Cascading Style Sheet) เป็นภาษาที่ใช้กำหนดรูปแบบและสไตล์ (รูปลักษณ์) ของหน้าเว็บ เช่น สีพื้นหลัง ตำแหน่งองค์ประกอบ ฟอนต์ และอื่นๆ

2.2 การตั้งค่าโปรเจกต์#

# เข้าไปที่โฟลเดอร์โปรเจกต์
cd web-basics

# สร้างโฟลเดอร์สำหรับไฟล์ CSS
mkdir 02_css
cd 02_css

# เปิด VS Code ในโฟลเดอร์ปัจจุบัน
code .

bash

ใน VS Code สร้างไฟล์ชื่อ index.html พิมพ์ html:5 แล้วกด Enter/Tab เพื่อสร้างโครงสร้าง HTML เริ่มต้น:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Practice</title>
</head>
<body>

</body>
</html>

html

2.3 วิธีใส่ CSS มี 3 แบบ#

CSS ใส่ให้หน้าเว็บได้ 3 วิธี ไล่จากใช้งานเฉพาะจุดไปจนถึงจัดการง่ายที่สุด ได้แก่ inline, internal และ external

1. Inline CSS

เพิ่มสไตล์โดยตรงใน element โดยใช้ attribute style:

<body style="background-color: beige;">
  <h1 style="color: darkblue;">Hello World</h1>
</body>

html

2. Internal CSS (Style Element)

แท็ก <style> ใช้กำหนด CSS ภายในไฟล์ HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Styled Page</title>
  <style>
    body {
      background-color: beige;
    }
    h1 {
      color: darkblue;
      font-size: 32px;
    }
  </style>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

html

3. External CSS (แนะนำ)

สร้างไฟล์ CSS แยกและเชื่อมโยงใน HTML — เป็นวิธีที่นิยมใช้มากที่สุดเพราะจัดการสไตล์ได้ง่ายที่สุด

ไฟล์: style.css

body {
  background-color: beige;
  margin: 0;
}

h1 {
  color: darkblue;
}

css

ไฟล์: index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Styled Page</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

html

CSS example

2.4 รูปแบบของ CSS Rule#

CSS rule มีโครงสร้างดังนี้:

selector {
  property: value;
  property: value;
}

css

ส่วน	คำอธิบาย
`selector`	เลือก HTML elements ที่จะใช้สไตล์ (element, class, หรือ id)
`property`	คุณสมบัติที่ต้องการกำหนด (background-color, color, font-size, margin, padding)
`value`	ค่าของคุณสมบัตินั้น (aqua, #FF0000, 16px)

หมายเหตุ: สำหรับอ้างอิง CSS properties สามารถดูได้ที่ W3Schools CSS Reference ↗

2.5 CSS Classes และ Div Elements#

Class ใน CSS ใช้กำหนดสไตล์ที่สามารถนำไปใช้กับหลาย elements

แก้ไขไฟล์เดิมต่อจากหัวข้อก่อนหน้า โดยเพิ่มเฉพาะโค้ดด้านล่าง (...existing... คือโค้ดเดิมที่มีอยู่แล้ว ไม่ต้องแก้)

ไฟล์: style.css

/* ...existing styles... */

.box {
  border: 2px solid brown;
  width: 200px;
  padding: 10px;
  margin: 10px;
}

css

ไฟล์: index.html

<body>
  <!-- ...existing content... -->

  <div class="box">
    <h1>Box 1</h1>
    <p>This is the content of box 1</p>
  </div>
  <div class="box">
    <h1>Box 2</h1>
    <p>This is the content of box 2</p>
  </div>
</body>

html

CSS classes and div

Concept	คำอธิบาย
`<div>`	คอนเทนเนอร์ทั่วไปสำหรับรวม elements เข้าด้วยกัน
`.classname`	CSS class selector (เริ่มต้นด้วยจุด)
`#idname`	CSS ID selector (เริ่มต้นด้วยเครื่องหมาย #)

สร้างแถบนำทางโดยใช้ <ul> และ <li> — แก้ไขไฟล์เดิมต่อจากหัวข้อก่อนหน้า โดยเพิ่มเฉพาะโค้ดด้านล่าง (...existing... คือโค้ดเดิมที่มีอยู่แล้ว ไม่ต้องแก้)

ไฟล์: style.css

/* ...existing styles... */

.navMenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: darkgreen;
  overflow: hidden;
}

.navItem {
  float: left;
}

.navItem a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 14px 16px;
  text-align: center;
}

.navItem a:hover {
  background-color: #115511;
}

css

ไฟล์: index.html

<body>
  <!-- Add the navigation bar at the top of the body -->
  <ul class="navMenu">
    <li class="navItem"><a href="index.html">Home</a></li>
    <li class="navItem"><a href="about.html">About Us</a></li>
    <li class="navItem"><a href="contact.html">Contact</a></li>
  </ul>

  <!-- ...existing content... -->
</body>

html

Navigation bar

คำอธิบายคุณสมบัติ CSS

Property	Value	คำอธิบาย
`list-style-type`	`none`	ลบ bullet points ออกจากรายการ
`margin`	`0`	ลบระยะห่างภายนอก
`padding`	`0`	ลบระยะห่างภายใน
`background-color`	`darkgreen`	กำหนดสีพื้นหลัง
`overflow`	`hidden`	ครอบ elements ที่ลอยอยู่ภายใน parent
`float`	`left`	วางรายการแนวนอน
`text-decoration`	`none`	ลบเส้นใต้ลิงก์
`display`	`block`	ทำให้ทั้งพื้นที่คลิกได้

2.7 Flexbox Layout#

Flexbox เป็นระบบจัดวางของ CSS ที่ช่วยเรียง elements เป็นแถวหรือคอลัมน์ได้ง่าย เมื่อกำหนด display: flex element นั้นจะเป็น flex container และลูกทุกตัวจะเป็น flex items ที่แบ่งพื้นที่ จัดกึ่งกลาง และเว้นระยะห่างได้โดยไม่ต้องใช้ float

Responsive คือหน้าเว็บที่ปรับการแสดงผลตามขนาดจอโดยอัตโนมัติ ในตัวอย่างนี้ flex-wrap: wrap ทำให้การ์ดขึ้นบรรทัดใหม่เองเมื่อจอแคบ

สร้างไฟล์ใหม่ในโฟลเดอร์เดิมด้วยชื่อใหม่ทั้งคู่ เพื่อไม่แก้ทับโค้ดเดิม

ไฟล์: flexbox.css

body {
  background-color: beige;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.card {
  width: 200px;                  /* set an equal width for every card */
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* no margin needed — the container uses gap for spacing */
}

.card img {
  width: 100%;
  height: 140px;                 /* height is required for object-fit to work */
  object-fit: cover;
  border-radius: 4px;
}

css

ไฟล์: flexbox.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Cards</title>
  <link rel="stylesheet" href="flexbox.css" />
</head>
<body>
  <h1>Popular Attractions</h1>
  <div class="container">
    <div class="card">
      <img src="https://www.melivecode.com/attractions/1.jpg" alt="Phi Phi Islands" />
      <h2>Phi Phi Islands</h2>
    </div>
    <div class="card">
      <img src="https://www.melivecode.com/attractions/2.jpg" alt="Eiffel Tower" />
      <h2>Eiffel Tower</h2>
    </div>
    <div class="card">
      <img src="https://www.melivecode.com/attractions/3.jpg" alt="Times Square" />
      <h2>Times Square</h2>
    </div>
    <div class="card">
      <img src="https://www.melivecode.com/attractions/4.jpg" alt="Mount Fuji" />
      <h2>Mount Fuji</h2>
    </div>
  </div>
</body>
</html>

html

ลองเปิดหน้าเว็บบนเบราว์เซอร์แล้วปรับขนาดหน้าต่างเบราว์เซอร์ให้กว้าง/แคบ เพื่อทดสอบการแสดงผลบนหน้าจอขนาดต่างๆ ได้

Flexbox cards

คุณสมบัติ Flexbox

Property	คำอธิบาย
`display: flex`	ทำให้ element เป็น flex container
`flex-wrap: wrap`	อนุญาตให้ items ขึ้นบรรทัดใหม่
`justify-content: center`	จัด items กึ่งกลางแนวนอน
`gap`	เพิ่มระยะห่างระหว่าง flex items

หมายเหตุ: สำหรับคำอธิบาย Flexbox อย่างละเอียด ดูได้ที่ CSS-Tricks Flexbox Guide ↗

ส่วนที่ 3: JavaScript กับ Next.js#

3.1 Next.js คืออะไร?#

React.js เป็นไลบรารี JavaScript สำหรับสร้างส่วนติดต่อผู้ใช้ (Frontend)
Next.js เป็นเฟรมเวิร์กที่สร้างขึ้นบน React.js ทำให้สร้างเว็บแอปพลิเคชันได้สะดวกขึ้น
Node.js เป็นสภาพแวดล้อม JavaScript ที่ให้ JavaScript ทำงานนอกเบราว์เซอร์ได้

3.2 การติดตั้ง Node.js#

ข้อกำหนดเบื้องต้น: ติดตั้ง Node.js (LTS) จาก nodejs.org ↗

บน Linux (Ubuntu) แนะนำให้ติดตั้งผ่าน nvm (Node Version Manager):

# ดาวน์โหลดและติดตั้ง nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.7/install.sh | bash

# โหลด nvm เข้า shell ปัจจุบัน (แทนการเปิด terminal ใหม่)
\. "$HOME/.nvm/nvm.sh"

# ดาวน์โหลดและติดตั้ง Node.js
nvm install 24

# ตรวจสอบเวอร์ชัน Node.js
node -v # ควรแสดง "v24.20.0"

# ตรวจสอบเวอร์ชัน npm
npm -v # ควรแสดง "11.19.0"

bash

3.3 สร้างโปรเจกต์ Next.js#

# เข้าไปที่โฟลเดอร์โปรเจกต์
cd web-basics

# สร้างโปรเจกต์ Next.js ใหม่ (--js บังคับใช้ JavaScript แทน TypeScript)
npx create-next-app@16 03_js_nextjs --js

# ครั้งแรกจะถามให้ติดตั้งแพ็กเกจ ให้พิมพ์ y แล้วกด Enter:
# Need to install the following packages:
# create-next-app@16.3.4
# Ok to proceed? (y) y

# หมายเหตุ: Next.js 16 จะไม่ถามตัวเลือกทีละข้อเหมือนเวอร์ชันก่อน
# แต่จะใช้ค่าเริ่มต้นให้เลย ได้แก่ ESLint, Tailwind CSS, App Router,
# ไม่มีโฟลเดอร์ src/ และ import alias "@/*"

# เข้าไปในโปรเจกต์
cd 03_js_nextjs

# เปิด VS Code ในโฟลเดอร์ปัจจุบัน
code .

# เปิด terminal ใน VS Code แล้วเริ่ม development server
npm run dev

bash

เปิดเบราว์เซอร์และไปที่ http://localhost:3000 ↗ เพื่อดูแอปพลิเคชัน

Next.js dev server

3.4 ส่วนเสริม VS Code ที่แนะนำ#

ติดตั้งส่วนเสริม ES7+ React/Redux/React-Native snippets สำหรับรองรับ React ใน VS Code

3.5 โครงสร้าง React Component#

ใน Next.js (App Router) หน้าเว็บถูกสร้างเป็น React components ในโฟลเดอร์ app

ไฟล์: app/page.js

เคล็ดลับ: พิมพ์ short key rfc แล้วกด Enter (จากส่วนเสริม ES7+ React snippets) เพื่อสร้างโครง React component ให้อัตโนมัติ ก่อนแก้เป็นโค้ดด้านล่าง

rfc snippet

export default function Page() {
  return (
    <div>
      <div className='box'>
        <h1>Hello World, Next.js</h1>
        <p>Welcome to React!</p>
      </div>
    </div>
  )
}

javascript

Hello World React

แนวคิดสำคัญ

Concept	คำอธิบาย
`export default`	ส่งออก component ให้สามารถนำเข้า/ใช้ได้
`function Component()`	การประกาศ Functional Component
`return (...)`	ส่งค่า JSX (UI markup) กลับ
`className`	React ใช้ `className` แทน `class`
JSX	JavaScript + XML — ไวยากรณ์คล้าย HTML ใน JavaScript

หมายเหตุ: ใน React/Next.js ให้ใช้ className แทน class สำหรับกำหนดสไตล์ element

3.6 การเพิ่ม CSS#

ไฟล์: app/style.css

.box {
  border: 2px solid brown;
  width: 200px;
  padding: 10px;
  margin: 10px;
  background-color: beige;
}

css

ไฟล์: app/layout.js

import './style.css'

export const metadata = {
  title: 'Next.js Tutorial',
  description: 'Learn JavaScript with Next.js',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

javascript

React with CSS

พื้นฐาน JavaScript ใน React/Next.js — ต่อไปนี้เป็นบทเรียนย่อยที่ไล่จากพื้นฐานที่สุดไปหาการนำไปใช้จริง แต่ละหัวข้อให้สร้างไฟล์ page.js ในโฟลเดอร์ของตัวเองภายใต้ app/ แล้วเปิดดูตาม URL ที่ระบุ

3.7 ตัวแปร (Variables)#

สร้างไฟล์ app/01_var/page.js — เข้าถึงที่ http://localhost:3000/01_var ↗

export default function VarPage() {
  const name = "Karn";
  let age = 25;
  const isStudent = true;

  return (
    <div>
      <h1>Variables</h1>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Student: {isStudent ? "Yes" : "No"}</p>
    </div>
  );
}

javascript

Variables

Keyword	การใช้งาน
`var`	ไม่ควรใช้ — มีปัญหาเรื่อง scope
`let`	ใช้สำหรับตัวแปรที่ค่าเปลี่ยนแปลงได้
`const`	ใช้สำหรับตัวแปรที่ค่าไม่เปลี่ยนแปลง

3.8 อาร์เรย์ (Arrays)#

สร้างไฟล์ app/02_array/page.js — เข้าถึงที่ http://localhost:3000/02_array ↗

export default function ArrayPage() {
  const fruits = ["Orange", "Banana", "Mango", "Strawberry"];

  return (
    <div>
      <h1>Arrays</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

javascript

Arrays

หมายเหตุ: prop key จำเป็นสำหรับรายการเพื่อให้ React ติดตามว่ารายการใดเปลี่ยนแปลง

3.9 ออบเจกต์ (Objects)#

สร้างไฟล์ app/03_object/page.js — เข้าถึงที่ http://localhost:3000/03_object ↗

export default function ObjectPage() {
  const user = {
    name: "Karn Yongsiriwit",
    role: "Developer",
    country: "Thailand"
  };

  return (
    <div>
      <h1>Objects</h1>
      <p>Name: {user.name}</p>
      <p>Role: {user.role}</p>
      <p>Country: {user.country}</p>
    </div>
  );
}

javascript

Objects

ออบเจกต์เก็บข้อมูลเป็นคู่ key-value ใช้ dot notation (user.name) สำหรับเข้าถึงคุณสมบัติ

3.10 อาร์เรย์ของออบเจกต์ (Array of Objects)#

สร้างไฟล์ app/04_array_objects/page.js — เข้าถึงที่ http://localhost:3000/04_array_objects ↗

export default function ArrayObjectsPage() {
  const attractions = [
    { id: 1, name: "Phi Phi Islands", country: "Thailand" },
    { id: 2, name: "Eiffel Tower", country: "France" },
    { id: 3, name: "Times Square", country: "USA" },
    { id: 4, name: "Mount Fuji", country: "Japan" }
  ];

  return (
    <div>
      <h1>Array of Objects</h1>
      {attractions.map((attraction) => (
        <div key={attraction.id} style={{ border: "1px solid #ccc", margin: "10px", padding: "10px" }}>
          <h2>{attraction.name}</h2>
          <p>Country: {attraction.country}</p>
        </div>
      ))}
    </div>
  );
}

javascript

Array of Objects

อาร์เรย์ของออบเจกต์เป็นวิธีที่พบบ่อยที่สุดในการแสดงข้อมูลบนหน้าเว็บ ใช้ map() เพื่อวนลูปและแสดงแต่ละรายการ

3.11 ฟังก์ชัน (Functions)#

สร้างไฟล์ app/05_function/page.js — เข้าถึงที่ http://localhost:3000/05_function ↗

export default function FunctionPage() {
  // Function Declaration — add two numbers
  function add(a, b) {
    return a + b;
  }

  // Function Expression — assign a function to a variable
  const square = function (n) {
    return n * n;
  };

  // Arrow Function — multiply two numbers
  const multiply = (a, b) => {
    return a * b;
  };

  // Arrow Function (implicit return) — a short one-liner
  const subtract = (a, b) => a - b;

  // check whether the person is an adult
  const isAdult = (age) => {
    return age >= 18;
  };

  // build a greeting message
  const greet = (name, timeOfDay) => {
    return `Good ${timeOfDay}, ${name}!`;
  };

  return (
    <div>
      <h1>Functions</h1>
      <h2>Basic Calculations</h2>
      <p>5 + 3 = {add(5, 3)}</p>
      <p>7 × 7 = {square(7)}</p>
      <p>4 × 6 = {multiply(4, 6)}</p>
      <p>10 - 4 = {subtract(10, 4)}</p>

      <h2>Conditional Logic</h2>
      <p>Age 20 is adult: {isAdult(20) ? "Yes" : "No"}</p>
      <p>Age 15 is adult: {isAdult(15) ? "Yes" : "No"}</p>

      <h2>Template Strings</h2>
      <p>{greet("Karn", "morning")}</p>
      <p>{greet("Somchai", "evening")}</p>
    </div>
  );
}

javascript

Functions

รูปแบบฟังก์ชัน

Type	Syntax	Use Case
Function Declaration	`function name() {}`	ใช้ทั่วไป เรียกได้ก่อนประกาศ
Function Expression	`const name = function() {}`	เมื่อกำหนดให้ตัวแปร
Arrow Function	`const name = () => {}`	สั้น ทันสมัย ใช้บ่อยใน React
Arrow (Implicit Return)	`const name = () => value`	ฟังก์ชันบรรทัดเดียว ไม่ต้องมี `return`

การตั้งชื่อฟังก์ชัน

Convention	Rule	Valid Examples	Invalid
camelCase	คำแรกพิมพ์เล็ก คำต่อไปพิมพ์ใหญ่	`getUserData`, `calculateTotal`, `isValid`	`GetUserData`, `get_user_data`
Verb-first	เริ่มด้วยคำกริยาที่อธิบายการกระทำ	`fetchUser`, `saveData`, `deleteItem`	`user`, `data`, `item`
Booleans	ใช้คำนำหน้า `is`, `has`, `can`, `should`	`isLoggedIn`, `hasPermission`, `canEdit`	`logged`, `permission`, `editable`

ตัวอย่างเพิ่มเติม: ฟังก์ชันกับ map()

ฟังก์ชันมีประโยชน์มากเมื่อทำงานกับอาร์เรย์ สามารถส่งฟังก์ชันไปเรียกภายใน map() เพื่อแปลงหรือจัดรูปแบบข้อมูลแต่ละรายการ:

export default function FunctionMapPage() {
  const products = [
    { id: 1, name: "Laptop", price: 25000 },
    { id: 2, name: "Mouse", price: 500 },
    { id: 3, name: "Keyboard", price: 1500 }
  ];

  // calculate the price after a 10% discount
  const calculateDiscount = (price) => {
    return price * 0.9;
  };

  // format as currency
  const formatCurrency = (amount) => {
    return `฿${amount.toLocaleString()}`;
  };

  return (
    <div>
      <h1>Functions with Arrays</h1>
      <h2>Product Prices (after 10% discount)</h2>
      {products.map((product) => (
        <div key={product.id} style={{ border: "1px solid #ccc", margin: "10px", padding: "10px" }}>
          <h3>{product.name}</h3>
          <p>Original price: {formatCurrency(product.price)}</p>
          <p>Discounted price: {formatCurrency(calculateDiscount(product.price))}</p>
        </div>
      ))}
    </div>
  );
}

javascript

Functions with Arrays

เคล็ดลับ: ฟังก์ชันช่วยให้นำโค้ดกลับมาใช้ใหม่ได้และทำให้ components เป็นระเบียบ แบ่งตรรกะที่ซับซ้อนออกเป็นฟังก์ชันเล็กๆ ที่เน้นเฉพาะหน้าที่

3.12 การแสดงผลตามเงื่อนไข (Conditional Rendering)#

สร้างไฟล์ app/06_condition/page.js — เข้าถึงที่ http://localhost:3000/06_condition ↗

ใน JSX เราแสดงผลตามเงื่อนไขได้ 2 แบบหลัก คือ && (แสดงเมื่อเงื่อนไขเป็นจริง) และ ternary ? : (เลือกแสดงระหว่างสองกรณี)

export default function ConditionPage() {
  const isLoggedIn = true;
  const score = 75;

  return (
    <div>
      <h1>Conditional Rendering</h1>

      {/* && — render only when the condition is true */}
      {isLoggedIn && <p>Welcome back!</p>}

      {/* ternary — choose between two cases */}
      <p>Status: {isLoggedIn ? "Online" : "Offline"}</p>
      <p>Result: {score >= 50 ? "Pass" : "Fail"}</p>
    </div>
  );
}

javascript

Conditional Rendering

Pattern	Syntax	ใช้เมื่อ
Logical AND	`{cond && <p>...</p>}`	แสดง element เฉพาะตอนเงื่อนไขเป็นจริง
Ternary	`{cond ? A : B}`	เลือกแสดงระหว่างสองกรณี

หมายเหตุ: อย่าใช้ if/else ตรง ๆ ภายใน JSX — ให้ใช้ && หรือ ternary หรือเตรียมค่าไว้ในตัวแปรก่อน return

3.13 การกรองและค้นหาข้อมูล (filter และ find)#

สร้างไฟล์ app/07_filter_find/page.js — เข้าถึงที่ http://localhost:3000/07_filter_find ↗

filter() คืน อาร์เรย์ใหม่ ของทุกรายการที่ตรงเงื่อนไข ส่วน find() คืน รายการแรกเพียงตัวเดียว ที่ตรงเงื่อนไข ทั้งคู่มักใช้คู่กับ map()

export default function FilterFindPage() {
  const products = [
    { id: 1, name: "Laptop", price: 25000 },
    { id: 2, name: "Mouse", price: 500 },
    { id: 3, name: "Keyboard", price: 1500 },
    { id: 4, name: "Monitor", price: 6000 }
  ];

  // filter — keep only products priced at 2000 or less
  const cheapProducts = products.filter((product) => product.price <= 2000);

  // find — get the first product whose id equals 3
  const selected = products.find((product) => product.id === 3);

  return (
    <div>
      <h1>Filter and Find</h1>

      <h2>Products under 2,000</h2>
      <ul>
        {cheapProducts.map((product) => (
          <li key={product.id}>{product.name} - {product.price}</li>
        ))}
      </ul>

      <h2>Selected Product</h2>
      <p>{selected.name} - {selected.price}</p>
    </div>
  );
}

javascript

Filter and Find

Method	คืนค่า	ใช้เมื่อ
`filter()`	อาร์เรย์ใหม่ (หลายรายการ)	ต้องการทุกรายการที่ตรงเงื่อนไข
`find()`	รายการเดียว (หรือ `undefined`)	ต้องการรายการแรกที่ตรงเงื่อนไข

เคล็ดลับ: filter() + map() เป็นคู่ที่ใช้บ่อยที่สุดในการแสดงข้อมูลบางส่วนบนหน้าเว็บ เช่น กรองก่อนแล้วค่อยวนลูปแสดงผล

3.14 สารบัญ#

อัปเดต app/page.js เพื่อสร้างลิงก์ไปยังหน้าทั้งหมด:

import Link from 'next/link'

export default function Home() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>JavaScript Lessons</h1>
      <ul>
        <li><Link href="/01_var">Variables</Link></li>
        <li><Link href="/02_array">Arrays</Link></li>
        <li><Link href="/03_object">Objects</Link></li>
        <li><Link href="/04_array_objects">Array of Objects</Link></li>
        <li><Link href="/05_function">Functions</Link></li>
        <li><Link href="/06_condition">Conditional Rendering</Link></li>
        <li><Link href="/07_filter_find">Filter and Find</Link></li>
      </ul>
    </div>
  )
}

javascript

Table of contents

สรุป#

ส่วนที่ 1: HTML#

ใช้สำหรับสร้างโครงสร้างและเนื้อหาหน้าเว็บ
Elements สำคัญ: หัวข้อ ย่อหน้า ลิงก์ รูปภาพ รายการ แบบฟอร์ม
ใช้ semantic HTML เพื่อ accessibility ที่ดีขึ้น

ส่วนที่ 2: CSS#

ใช้สำหรับตกแต่งหน้าเว็บ
3 วิธีในการใช้ CSS: inline, internal, external
ใช้ไฟล์ CSS ภายนอกเพื่อการจัดการที่ดีขึ้น
Flexbox สำหรับ responsive layouts

ส่วนที่ 3: JavaScript กับ Next.js#

React/Next.js สำหรับเว็บแอปพลิเคชันแบบไดนามิก
ตัวแปร: const (ค่าไม่เปลี่ยน), let (ค่าเปลี่ยนได้)
อาร์เรย์สำหรับรายการข้อมูล และออบเจกต์สำหรับข้อมูลแบบ key-value
อาร์เรย์ของออบเจกต์สำหรับโครงสร้างข้อมูลที่ซับซ้อน
ฟังก์ชันสำหรับนำโค้ดกลับมาใช้ใหม่ (ฟังก์ชันปกติและ arrow function)
ใช้ map(), filter(), find() และ conditional rendering เพื่อแสดงข้อมูลใน React

บทความถัดไป: เนื้อหาที่เจาะลึกลงไปใน React และ Next.js (เช่น component props, state, hooks, การดึงข้อมูลจาก API และการทำ routing) จะอยู่ในบทความถัดไป

ส่วนที่ 1: พื้นฐาน HTML#

1.1 HTML คืออะไร?#

1.2 เตรียมเครื่องมือและตั้งค่าโปรเจกต์#

1.3 โครงสร้างพื้นฐานของ HTML#

1.4 แสดงตัวอย่างหน้าเว็บใน VS Code#

1.5 หัวข้อและย่อหน้า#

1.6 ลิงก์ (Anchor Tag)#

1.7 รูปภาพ#

1.8 รายการ (Lists)#

1.9 ตาราง (Tables)#

1.10 แบบฟอร์ม (Forms)#

ส่วนที่ 2: พื้นฐาน CSS#

2.1 CSS คืออะไร?#

2.2 การตั้งค่าโปรเจกต์#

2.3 วิธีใส่ CSS มี 3 แบบ#

2.4 รูปแบบของ CSS Rule#

2.5 CSS Classes และ Div Elements#

2.6 แถบนำทาง (Navigation Bar)#

2.7 Flexbox Layout#

ส่วนที่ 3: JavaScript กับ Next.js#

3.1 Next.js คืออะไร?#

3.2 การติดตั้ง Node.js#

3.3 สร้างโปรเจกต์ Next.js#

3.4 ส่วนเสริม VS Code ที่แนะนำ#

3.5 โครงสร้าง React Component#

3.6 การเพิ่ม CSS#

3.7 ตัวแปร (Variables)#

3.8 อาร์เรย์ (Arrays)#

3.9 ออบเจกต์ (Objects)#

3.10 อาร์เรย์ของออบเจกต์ (Array of Objects)#

3.11 ฟังก์ชัน (Functions)#

3.12 การแสดงผลตามเงื่อนไข (Conditional Rendering)#

3.13 การกรองและค้นหาข้อมูล (filter และ find)#

3.14 สารบัญ#

สรุป#

ส่วนที่ 1: HTML#

ส่วนที่ 2: CSS#

ส่วนที่ 3: JavaScript กับ Next.js#

แหล่งข้อมูลเพิ่มเติม#

Login to comment

Comments 0

Delete Comment