HTML, CSS, JavaScript 101

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

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

HTML คืออะไร?#

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

เตรียมเครื่องมือ#

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

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

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

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

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

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

bash

โครงสร้างพื้นฐานของ 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="...">`	แทรกรูปภาพ

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

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

<body>
  <h1>เว็บไซต์ กานต์ ยงศิริวุฒิ</h1>
  <p>ยินดีต้อนรับสู่เว็บไซต์ของเรา</p>
  <h2>ข่าวสาร</h2>
  <p>อ่านข่าวสารจากเว็บไซต์ของเรา</p>
  <h2>กิจกรรม</h2>
  <p>เรามีกิจกรรมมากมาย</p>
</body>

html

Heading and paragraph

ลิงก์ (Anchor Tag)#

สร้างไฟล์ชื่อ 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>เกี่ยวกับฉัน</h1>
</body>
</html>

html

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

<!-- ลิงก์ภายใน -->
<a href="about.html">เกี่ยวกับเรา</a>

<!-- ลิงก์ภายนอก -->
<a href="https://melivecode.com">เยี่ยมชม MeLiveCode</a>

html

รูปภาพ#

แท็ก <img> ใช้แสดงรูปภาพโดยระบุตำแหน่งไฟล์ (src) และข้อความทางเลือก (alt):

<!-- รูปภาพในเครื่อง -->
<img src="cat_meme.jpg" alt="แมวประหลาด" width="100px" height="150px" />

<!-- รูปภาพจากอินเทอร์เน็ต -->
<img src="https://melivecode.com/img/logo.png" alt="หมีกำลังเขียนโค้ด" height="150px" />

html

Link and image

รายการ (Lists)#

HTML รองรับทั้งรายการแบบไม่มีลำดับ (bullet points) และรายการแบบมีลำดับ (ตัวเลข):

<!-- รายการไม่มีลำดับ -->
<ul>
  <li>ดิท มีครูใหม่</li>
  <li>ฝนตกหนักที่อาร์เอสยู</li>
  <li>ตลาดอาร์เอสยู หน้าอาคาร 6</li>
</ul>

<!-- รายการมีลำดับ -->
<ol>
  <li>รับน้อง</li>
  <li>วันหยุดชาติ</li>
  <li>ปิดเทอม</li>
</ol>

html

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

แบบฟอร์ม (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>เข้าสู่ระบบ</h1>
  <form action="login.php" method="POST">
    <label for="username">ชื่อผู้ใช้:</label>
    <input type="text" id="username" name="username" />
    <br />
    <label for="password">รหัสผ่าน:</label>
    <input type="password" id="password" name="password" />
    <br />
    <input type="checkbox" id="remember" name="remember" />
    <label for="remember">จดจำฉัน</label>
    <br/>
    <input type="submit" value="เข้าสู่ระบบ" />
  </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#

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

# สร้างโฟลเดอร์สำหรับไฟล์ 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

CSS คืออะไร?#

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

Inline CSS#

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

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

html

รูปแบบ CSS#

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

selector {
  property: value;
  property: value;
}

css

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

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

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 ไว้ในไฟล์ภายนอกเป็นวิธีที่นิยมใช้มากที่สุดเพราะทำให้จัดการสไตล์ได้ง่ายขึ้น

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

ส่วนเสริม Live Server#

ติดตั้งส่วนเสริม Five Server ใน VS Code เพื่อให้เบราว์เซอร์โหลดอัตโนมัติเมื่อมีการเปลี่ยนแปลงโค้ด:

ไปที่ Extensions
ค้นหา “Five Server”
ติดตั้งส่วนเสริม
คลิกขวาที่ index.html และเลือก “Open with Five Server”

CSS Classes และ Div Elements#

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

ไฟล์: style.css

body {
  background-color: beige;
}

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

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>CSS Classes</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="box">
    <h1>กล่องที่ 1</h1>
    <p>นี่คือเนื้อหาในกล่องที่ 1</p>
  </div>
  <div class="box">
    <h1>กล่องที่ 2</h1>
    <p>นี่คือเนื้อหาในกล่องที่ 2</p>
  </div>
</body>
</html>

html

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

สร้างแถบนำทางโดยใช้ <ul> และ <li>:

ไฟล์: style.css

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

.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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navigation Bar</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <ul class="navMenu">
    <li class="navItem"><a href="index.html">หน้าแรก</a></li>
    <li class="navItem"><a href="about.html">เกี่ยวกับเรา</a></li>
    <li class="navItem"><a href="contact.html">ติดต่อ</a></li>
  </ul>
  <h1>ยินดีต้อนรับ</h1>
</body>
</html>

html

คำอธิบายคุณสมบัติ 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`	ทำให้ทั้งพื้นที่คลิกได้

Flexbox Layout#

Flexbox ใช้จัดเรียงเนื้อหาแบบยืดหยุ่นสำหรับ responsive layouts:

ไฟล์: style.css

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

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

.card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  margin: 10px;
}

.card img {
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
}

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>Flexbox Cards</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>สถานที่ท่องเที่ยวยอดนิยม</h1>
  <div class="container">
    <div class="card">
      <img src="https://www.melivecode.com/attractions/1.jpg" alt="หมู่เกาะพีพี" />
      <h2>หมู่เกาะพีพี</h2>
    </div>
    <div class="card">
      <img src="https://www.melivecode.com/attractions/2.jpg" alt="หอไอเฟล" />
      <h2>หอไอเฟล</h2>
    </div>
    <div class="card">
      <img src="https://www.melivecode.com/attractions/3.jpg" alt="ไทม์สแควร์" />
      <h2>ไทม์สแควร์</h2>
    </div>
    <div class="card">
      <img src="https://www.melivecode.com/attractions/4.jpg" alt="ภูเขาไฟฟูจิ" />
      <h2>ภูเขาไฟฟูจิ</h2>
    </div>
  </div>
</body>
</html>

html

คุณสมบัติ Flexbox#

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

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

ปุ่มลัดที่มีประโยชน์#

Action	Windows/Linux	macOS
คัดลอก	`Ctrl + C`	`Cmd + C`
วาง	`Ctrl + V`	`Cmd + V`
บันทึก	`Ctrl + S`	`Cmd + S`
ตัด	`Ctrl + X`	`Cmd + X`
เลิกทำ	`Ctrl + Z`	`Cmd + Z`
ทำซ้ำ	`Ctrl + Y`	`Cmd + Y`

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

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

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

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

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

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

# สร้างโปรเจกต์ Next.js ใหม่
npx create-next-app@15 nextjs-tutorial

# เลือกตัวเลือกเมื่อถูกถาม:
# - Project name: nextjs-tutorial (หรือชื่อที่ต้องการ)
# - TypeScript: No
# - ESLint: Yes
# - Tailwind CSS: No (สำหรับเรียนรู้พื้นฐาน)
# - App Router: Yes
# - Customize default import alias: No

# ไปที่โปรเจกต์
cd nextjs-tutorial

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

# เปิด Terminal ใน VS Code และเริ่ม development server
npm run dev

bash

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

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

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

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

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

ไฟล์: app/page.js

export default function Page() {
  return (
    <div>
      <div className='box'>
        <h1>Hello World, Next.js</h1>
        <p>ยินดีต้อนรับสู่ React!</p>
      </div>
    </div>
  )
}

javascript

แนวคิดสำคัญ#

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

การเพิ่ม 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

พื้นฐาน JavaScript ใน React/Next.js#

1. ตัวแปร (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>ตัวแปร</h1>
      <p>ชื่อ: {name}</p>
      <p>อายุ: {age}</p>
      <p>เป็นนักเรียน: {isStudent ? "ใช่" : "ไม่ใช่"}</p>
    </div>
  );
}

javascript

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

2. อาร์เรย์ (Arrays)#

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

export default function ArrayPage() {
  const fruits = ["ส้ม", "กล้วย", "มะม่วง", "สตรอว์เบอร์รี"];

  return (
    <div>
      <h1>อาร์เรย์</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

javascript

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

3. ออบเจกต์ (Objects)#

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

export default function ObjectPage() {
  const user = {
    name: "กานต์ ยงศิริวุฒิ",
    role: "นักพัฒนา",
    country: "ไทย"
  };

  return (
    <div>
      <h1>ออบเจกต์</h1>
      <p>ชื่อ: {user.name}</p>
      <p>ตำแหน่ง: {user.role}</p>
      <p>ประเทศ: {user.country}</p>
    </div>
  );
}

javascript

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

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

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

export default function ArrayObjectsPage() {
  const attractions = [
    { id: 1, name: "หมู่เกาะพีพี", country: "ไทย" },
    { id: 2, name: "หอไอเฟล", country: "ฝรั่งเศส" },
    { id: 3, name: "ไทม์สแควร์", country: "อเมริกา" },
    { id: 4, name: "ภูเขาไฟฟูจิ", country: "ญี่ปุ่น" }
  ];

  return (
    <div>
      <h1>อาร์เรย์ของออบเจกต์</h1>
      {attractions.map((attraction) => (
        <div key={attraction.id} style={{ border: "1px solid #ccc", margin: "10px", padding: "10px" }}>
          <h2>{attraction.name}</h2>
          <p>ประเทศ: {attraction.country}</p>
        </div>
      ))}
    </div>
  );
}

javascript

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

5. ฟังก์ชัน (Functions)#

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

export default function FunctionPage() {
  // ฟังก์ชันบวกเลขสองตัว
  function add(a, b) {
    return a + b;
  }

  // Arrow function คูณเลขสองตัว
  const multiply = (a, b) => {
    return a * b;
  };

  // Arrow function แบบสั้น (implicit return)
  const subtract = (a, b) => a - b;

  // ฟังก์ชันตรวจสอบว่าเป็นผู้ใหญ่หรือไม่
  const isAdult = (age) => {
    return age >= 18;
  };

  // ฟังก์ชันสร้างคำทักทาย
  const greet = (name, timeOfDay) => {
    return `สวัสดี${timeOfDay}, ${name}!`;
  };

  return (
    <div>
      <h1>ฟังก์ชัน</h1>
      <h2>การคำนวณพื้นฐาน</h2>
      <p>5 + 3 = {add(5, 3)}</p>
      <p>4 × 6 = {multiply(4, 6)}</p>
      <p>10 - 4 = {subtract(10, 4)}</p>

      <h2>ตรรกะแบบมีเงื่อนไข</h2>
      <p>อายุ 20 เป็นผู้ใหญ่: {isAdult(20) ? "ใช่" : "ไม่ใช่"}</p>
      <p>อายุ 15 เป็นผู้ใหญ่: {isAdult(15) ? "ใช่" : "ไม่ใช่"}</p>

      <h2>เทมเพลตสตริง</h2>
      <p>{greet("Karn", "ตอนเช้า")}</p>
      <p>{greet("Somchai", "ตอนเย็น")}</p>
    </div>
  );
}

javascript

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

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: "แล็ปท็อป", price: 25000 },
    { id: 2, name: "เมาส์", price: 500 },
    { id: 3, name: "คีย์บอร์ด", price: 1500 }
  ];

  // ฟังก์ชันคำนวณราคาหลังหักส่วนลด 10%
  const calculateDiscount = (price) => {
    return price * 0.9;
  };

  // ฟังก์ชันจัดรูปแบบสกุลเงิน
  const formatCurrency = (amount) => {
    return `฿${amount.toLocaleString()}`;
  };

  return (
    <div>
      <h1>ฟังก์ชันกับอาร์เรย์</h1>
      <h2>ราคาสินค้า (หลังหักส่วนลด 10%)</h2>
      {products.map((product) => (
        <div key={product.id} style={{ border: "1px solid #ccc", margin: "10px", padding: "10px" }}>
          <h3>{product.name}</h3>
          <p>ราคาเดิม: {formatCurrency(product.price)}</p>
          <p>ราคาหลังหักส่วนลด: {formatCurrency(calculateDiscount(product.price))}</p>
        </div>
      ))}
    </div>
  );
}

javascript

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

สารบั�#

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

import Link from 'next/link'

export default function Home() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>บทเรียน JavaScript</h1>
      <ul>
        <li><Link href="/01_var">ตัวแปร</Link></li>
        <li><Link href="/02_array">อาร์เรย์</Link></li>
        <li><Link href="/03_object">ออบเจกต์</Link></li>
        <li><Link href="/04_array_objects">อาร์เรย์ของออบเจกต์</Link></li>
        <li><Link href="/05_function">ฟังก์ชัน</Link></li>
      </ul>
    </div>
  )
}

javascript

สรุป#

ส่วนที่ 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() เพื่อแสดงรายการใน React

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

ฝึกสร้างหน้า HTML กับ elements ต่างๆ
ลองใช้ CSS styling และ Flexbox layouts
สร้างโปรเจกต์ React/Next.js เล็กๆ ด้วยสิ่งที่เรียนมา
ศึกษา JavaScript ขั้นสูงเพิ่มเติม (conditionals, loops, async/await)
เรียนรู้เรื่อง React hooks (useState, useEffect) สำหรับการโต้ตอบ

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

HTML คืออะไร?#

เตรียมเครื่องมือ#

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

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

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

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

ลิงก์ (Anchor Tag)#

รูปภาพ#

รายการ (Lists)#

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

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

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

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

CSS คืออะไร?#

Inline CSS#

รูปแบบ CSS#

Internal CSS (Style Element)#

External CSS (แนะนำ)#

ส่วนเสริม Live Server#

CSS Classes และ Div Elements#

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

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

Flexbox Layout#

คุณสมบัติ Flexbox#

ปุ่มลัดที่มีประโยชน์#

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

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

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

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

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

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

แนวคิดสำคัญ#

การเพิ่ม CSS#

พื้นฐาน JavaScript ใน React/Next.js#

1. ตัวแปร (Variables)#

2. อาร์เรย์ (Arrays)#

3. ออบเจกต์ (Objects)#

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

5. ฟังก์ชัน (Functions)#

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

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

การใช้ฟังก์ชันกับ map()#

สารบั�#

สรุป#

ส่วนที่ 1: HTML#

ส่วนที่ 2: CSS#

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

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

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

Login to comment

Comments 0

Delete Comment