บทเรียน HTML
<!DOCTYPE html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>
<h1>This
is a Heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
ตัวอย่างอธิบาย
- องค์ประกอบ HTML ทุกชนิดสามารถมีแอตทริบิวต์ได้
- แอตทริบิวต์hrefระบุ <a>URL
ของหน้าเว็บที่ลิงก์นั้นนำไป
- แอตทริบิวต์srcระบุ <img>เส้นทางไปยังรูปภาพที่จะแสดง
- แอตทริบิวต์widthต่างๆheightให้<img>ข้อมูลขนาดสำหรับรูปภาพ
- แอตทริบิวต์altนี้ <img>ใช้สำหรับใส่ข้อความทางเลือกแทนรูปภาพ
- แอตทริบิวต์ นี้styleใช้สำหรับเพิ่มสไตล์ให้กับองค์ประกอบ เช่น
สี ฟอนต์ ขนาด และอื่นๆ
- แอตทริบิวต์langของ<html>แท็กจะประกาศภาษาของหน้าเว็บ
- แอตทริบิวต์ นี้titleกำหนดข้อมูลเพิ่มเติมบางอย่างเกี่ยวกับองค์ประกอบนั้น
ๆ
·
-----------------------------------------------------
รูปภาพ HTML
ถูกกำหนดด้วย<img>แท็ก
<img>
ไฟล์ต้นฉบับ ( src), ข้อความทางเลือก ( alt), widthและheightจะถูกระบุเป็นแอตทริบิวต์:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
-----------------------------------------------------
แท็ก นี้<br>ใช้กำหนดการขึ้นบรรทัดใหม่
และเป็นองค์ประกอบว่างเปล่าที่ไม่มีแท็กปิด:
-----------------------------------------------------
แท็ก นี้<a>ใช้สำหรับกำหนดไฮเปอร์ลิงก์ แอตทริบิวต์ hrefจะระบุ URL ของหน้าเว็บที่ลิงก์นั้นนำไป
<a href="https://www.w3schools.com">Visit W3Schools</a>
-----------------------------------------------------
แท็ก นี้<img>ใช้สำหรับฝังรูปภาพลงในหน้า HTML โดยsrcแอตทริบิวต์จะระบุพาธไปยังรูปภาพที่จะแสดง:
<img src="img_girl.jpg">
-----------------------------------------------------
แท็<img>กควรมีแอตทริบิวต์ `width` widthและ ` heightheight` ซึ่งระบุความกว้างและความสูงของรูปภาพ
(เป็นพิกเซล):
<img src="img_girl.jpg" width="500" height="600">
-----------------------------------------------------
แอตทริบิวต์ ที่จำเป็นaltสำหรับ<img> แท็กจะระบุข้อความทางเลือกสำหรับรูปภาพ ในกรณีที่รูปภาพไม่สามารถแสดงได้ด้วยเหตุผลบางประการ
เช่น การเชื่อมต่อช้า ข้อผิดพลาดในsrcแอตทริบิวต์
หรือหากผู้ใช้ใช้โปรแกรมอ่านหน้าจอ
<img src="img_girl.jpg" alt="Girl with a
jacket">
-----------------------------------------------------
แอตทริบิวต์ นี้styleใช้สำหรับเพิ่มสไตล์ให้กับองค์ประกอบ
เช่น สี ฟอนต์ ขนาด และอื่นๆ
<p style="color:red;">This is a red
paragraph.</p>
-----------------------------------------------------
คุณควรใส่langแอตทริบิวต์ไว้ภายใน<html>แท็กเสมอ เพื่อประกาศภาษาของหน้าเว็บ
เพื่อช่วยให้เครื่องมือค้นหาและเบราว์เซอร์ทำงานได้ดียิ่งขึ้น
ตัวอย่างต่อไปนี้ระบุภาษาอังกฤษเป็นภาษาที่ใช้:
สามารถเพิ่มรหัสประเทศลงในรหัสภาษาในlang แอตทริบิวต์ได้เช่นกัน
ดังนั้นอักขระสองตัวแรกจะกำหนดภาษาของหน้า HTML และอักขระสองตัวสุดท้ายจะกำหนดประเทศ
<!DOCTYPE html>
<html lang="en"> or <html lang="en-US">
<body>
...
</body>
</html>
หัวข้อ HTML แต่ละหัวข้อจะมีขนาดเริ่มต้น
แต่คุณสามารถกำหนดขนาดให้กับหัวข้อใดก็ได้โดยstyleใช้แอตทริบิวต์ในคุณสมบัติ CSS font-size:
<h1 style="font-size:60px;">Heading 1</h1>
นี่คือคำศัพท์ / คำสั่ง HTML ที่ใช้บ่อย เรียงจากพื้นฐาน → ใช้งานจริง พร้อมคำแปลไทย
โครงสร้างเว็บพื้นฐาน
<!DOCTYPE html> = ประกาศเอกสาร HTML
<html> = เริ่มต้นเอกสาร HTML
<head> = ส่วนข้อมูลเว็บไซต์
<title> = ชื่อหน้าเว็บ
<body> = เนื้อหาหน้าเว็บ
<meta> = ข้อมูลเพิ่มเติมของเว็บ
<link> = เชื่อมไฟล์ภายนอก
<style> = เขียน CSS ภายใน
<script> = เขียน JavaScript
ข้อความ
<h1> = หัวข้อใหญ่ที่สุด
<h2> = หัวข้อระดับ 2
<h3> = หัวข้อระดับ 3
<h4> = หัวข้อระดับ 4
<h5> = หัวข้อระดับ 5
<h6> = หัวข้อระดับ 6
<p> = ย่อหน้า
<br> = ขึ้นบรรทัดใหม่
<hr> = เส้นคั่น
<strong> = ตัวหนาเน้นความสำคัญ
<b> = ตัวหนา
<em> = ตัวเอียงเน้นความสำคัญ
<i> = ตัวเอียง
<u> = ขีดเส้นใต้
<mark> = ไฮไลต์ข้อความ
<small> = ตัวอักษรเล็ก
<sub> = ตัวห้อย
<sup> = ตัวยก
<del> = ข้อความขีดฆ่า
<ins> = ข้อความแทรกเพิ่ม
<blockquote> = ข้อความอ้างอิง
<q> = คำพูดสั้น
<code> = โค้ด
<pre> = ข้อความคงรูป
ลิงก์
<a> = ลิงก์
href = ที่อยู่ลิงก์
target = วิธีเปิดลิงก์
_blank = เปิดแท็บใหม่
_self = เปิดหน้าเดิม
download = ดาวน์โหลดไฟล์
รูปภาพ / สื่อ
<img> = รูปภาพ
src = ที่อยู่ไฟล์
alt = ข้อความแทนรูป
width = ความกว้าง
height = ความสูง
<audio> = เสียง
<video> = วิดีโอ
<source> = แหล่งไฟล์
controls = ปุ่มควบคุม
autoplay = เล่นอัตโนมัติ
loop = เล่นซ้ำ
muted = ปิดเสียง
รายการ
<ul> = รายการแบบจุด
<ol> = รายการแบบตัวเลข
<li> = รายการย่อย
<dl> = รายการคำอธิบาย
<dt> = หัวข้อคำอธิบาย
<dd> = รายละเอียด
ตาราง
<table> = ตาราง
<tr> = แถว
<td> = ช่องข้อมูล
<th> = หัวตาราง
<thead> = ส่วนหัวตาราง
<tbody> = เนื้อหาตาราง
<tfoot> = ท้ายตาราง
colspan = รวมคอลัมน์
rowspan = รวมแถว
ฟอร์ม
<form> = ฟอร์ม
<input> = ช่องรับข้อมูล
<textarea> = กล่องข้อความ
<button> = ปุ่ม
<label> = ป้ายชื่อ
<select> = เมนูเลือก
<option> = ตัวเลือก
<fieldset> = กลุ่มฟอร์ม
<legend> = หัวข้อกลุ่ม
Input Type ที่ใช้บ่อย
text = ข้อความ
password = รหัสผ่าน
email = อีเมล
number = ตัวเลข
date = วันที่
time = เวลา
checkbox = ช่องติ๊ก
radio = ปุ่มเลือก
file = อัปโหลดไฟล์
submit = ส่งข้อมูล
reset = รีเซ็ต
search = ค้นหา
tel = เบอร์โทร
url = URL
Layout / โครงสร้างเว็บ
<div> = กล่องแบ่งส่วน
<span> = กล่องข้อความ
<header> = ส่วนหัวเว็บ
<nav> = เมนูนำทาง
<main> = เนื้อหาหลัก
<section> = ส่วนเนื้อหา
<article> = บทความ
<aside> = แถบด้านข้าง
<footer> = ส่วนท้ายเว็บ
Attribute ที่ใช้บ่อย
id = รหัสเฉพาะ
class = กลุ่มคลาส
name = ชื่อ
value = ค่า
placeholder = ข้อความตัวอย่าง
required = บังคับกรอก
disabled = ปิดการใช้งาน
readonly = อ่านอย่างเดียว
checked = เลือกแล้ว
selected = ถูกเลือก
hidden = ซ่อน
style = กำหนด CSS
title = คำอธิบาย
tabindex = ลำดับแท็บ
Semantic HTML
<figure> = กลุ่มรูปภาพ
<figcaption> = คำอธิบายรูป
<details> = เนื้อหาพับได้
<summary> = หัวข้อพับ
<time> = เวลา
<address> = ที่อยู่
<abbr> = คำย่อ
<cite> = อ้างอิงผลงาน
<kbd> = ปุ่มคีย์บอร์ด
<progress> = แถบความคืบหน้า
<meter> = มาตรวัด
HTML Entity
= เว้นวรรค
< = <
> = >
& = &
" = "
© = ลิขสิทธิ์ ©
® = เครื่องหมาย ®
™ = ™
รวมแล้วประมาณ
120+ คำสั่ง / คำศัพท์ HTML ที่ใช้บ่อยที่สุด ครอบคลุมตั้งแต่เริ่มต้นจนทำเว็บจริงได้ครับ
=================
HTML คืออะไร — HyperText Markup Language
โครงสร้าง HTML — Structure
<!DOCTYPE html> — ประกาศเวอร์ชัน HTML
<html> — เอกสารหลัก
<head> — ส่วนหัวเอกสาร
<body> — ส่วนเนื้อหา
<title> — ชื่อหน้าเว็บ
<meta> — ข้อมูลเมตา
<link> — เชื่อมไฟล์ภายนอก
<script> — เพิ่ม JavaScript
<style> — เขียน CSS
<h1> — หัวข้อหลัก
<h2> — หัวข้อย่อย
<h3> — หัวข้อระดับ 3
<h4> — หัวข้อระดับ 4
<h5> — หัวข้อระดับ 5
<h6> — หัวข้อระดับ 6
<p> — ย่อหน้า
<br> — ขึ้นบรรทัดใหม่
<hr> — เส้นคั่น
<strong> — ตัวหนา
<b> — ตัวหนาแบบทั่วไป
<em> — ตัวเอียงเน้นความหมาย
<i> — ตัวเอียง
<u> — ขีดเส้นใต้
<mark> — ไฮไลต์ข้อความ
<small> — ตัวอักษรเล็ก
<del> — ข้อความลบ
<ins> — ข้อความเพิ่ม
<sub> — ตัวห้อย
<sup> — ตัวยก
<code> — โค้ด
<pre> — ข้อความรูปแบบเดิม
<blockquote> — ข้อความอ้างอิง
<q> — คำพูดสั้น
<abbr> — คำย่อ
<cite> — อ้างอิงผลงาน
<address> — ที่อยู่
<span> — กลุ่มข้อความ
<div> — กล่องแบ่งส่วน
<a> — ลิงก์
href — ที่อยู่ลิงก์
target="_blank" — เปิดแท็บใหม่
download — ดาวน์โหลดไฟล์
<img> — รูปภาพ
src — แหล่งรูปภาพ
alt — ข้อความแทนรูป
width — ความกว้าง
height — ความสูง
<figure> — กลุ่มรูป
<figcaption> — คำอธิบายรูป
<picture> — รูปหลายขนาด
<source> — แหล่งข้อมูล
<audio> — เสียง
<video> — วิดีโอ
controls — ปุ่มควบคุม
autoplay — เล่นอัตโนมัติ
loop — เล่นซ้ำ
muted — ปิดเสียง
poster — รูปปกวิดีโอ
<iframe> — ฝังเว็บ
<embed> — ฝังไฟล์
<object> — วัตถุภายนอก
<map> — แผนที่รูป
<area> — พื้นที่คลิก
<svg> — กราฟิกเวกเตอร์
<canvas> — วาดภาพ
<ul> — รายการไม่เรียง
<ol> — รายการเรียงลำดับ
<li> — รายการย่อย
<dl> — รายการคำอธิบาย
<dt> — หัวข้อคำอธิบาย
<dd> — รายละเอียด
<table> — ตาราง
<tr> — แถว
<td> — ช่องข้อมูล
<th> — หัวตาราง
<thead> — ส่วนหัวตาราง
<tbody> — เนื้อหาตาราง
<tfoot> — ท้ายตาราง
colspan — รวมคอลัมน์
rowspan — รวมแถว
<caption> — ชื่อตาราง
<colgroup> — กลุ่มคอลัมน์
<col> — คอลัมน์
<form> — ฟอร์ม
action — ปลายทางส่งข้อมูล
method — วิธีส่งข้อมูล
GET — ส่งผ่าน URL
POST — ส่งแบบซ่อน
<input> — ช่องรับข้อมูล
type="text" — ข้อความ
type="password" — รหัสผ่าน
type="email" — อีเมล
type="number" — ตัวเลข
type="date" — วันที่
type="time" — เวลา
type="file" — อัปโหลดไฟล์
type="checkbox" — ช่องเลือก
type="radio" — เลือกเดียว
type="submit" — ปุ่มส่ง
type="reset" — รีเซ็ต
type="button" — ปุ่มทั่วไป
placeholder — ข้อความตัวอย่าง
required — บังคับกรอก
readonly — อ่านอย่างเดียว
disabled — ปิดใช้งาน
maxlength — จำนวนสูงสุด
min — ค่าน้อยสุด
max — ค่ามากสุด
<textarea> — ช่องข้อความยาว
<select> — เมนูเลือก
<option> — ตัวเลือก
<optgroup> — กลุ่มตัวเลือก
<label> — ป้ายกำกับ
<fieldset> — กลุ่มฟอร์ม
<legend> — หัวข้อกลุ่ม
<button> — ปุ่ม
<datalist> — รายการแนะนำ
<output> — ผลลัพธ์
<progress> — แถบความคืบหน้า
<meter> — ค่าวัด
<header> — ส่วนหัวเว็บ
<nav> — เมนูนำทาง
<main> — เนื้อหาหลัก
<section> — ส่วนเนื้อหา
<article> — บทความ
<aside> — เนื้อหาข้าง
<footer> — ส่วนท้าย
<details> — เนื้อหาพับได้
<summary> — หัวข้อพับ
<dialog> — กล่องโต้ตอบ
open — เปิดแสดง
id — รหัสองค์ประกอบ
class — กลุ่ม CSS
style — CSS ภายใน
name — ชื่อข้อมูล
value — ค่า
hidden — ซ่อน
tabindex — ลำดับแท็บ
contenteditable — แก้ไขได้
draggable — ลากได้
spellcheck — ตรวจคำ
translate — แปลภาษา
lang — ภาษา
dir — ทิศทางข้อความ
title — คำอธิบาย
data-* — ข้อมูลกำหนดเอง
accesskey — ปุ่มลัด
autofocus — โฟกัสอัตโนมัติ
HTML Comment
<!-- --> — หมายเหตุ
Entity
— เว้นวรรค
< — เครื่องหมาย <
> — เครื่องหมาย >
& — เครื่องหมาย &
© — ลิขสิทธิ์
® — เครื่องหมายการค้า
charset="UTF-8" — รองรับภาษา
viewport — รองรับมือถือ
SEO HTML — ปรับค้นหา
Semantic HTML — โครงสร้างความหมาย
Accessibility — รองรับผู้ใช้
Responsive Web — เว็บหลายขนาด
Favicon — ไอคอนเว็บ
Meta Description — คำอธิบายเว็บ
Meta Keywords — คีย์เวิร์ด
Open Graph — แชร์โซเชียล
Canonical URL — URL หลัก
Robots Meta — ควบคุมบอท
Lazy Loading — โหลดช้า
loading="lazy" — โหลดรูปเมื่อจำเป็น
srcset — รูปหลายขนาด
sizes — ขนาดรูป
async — โหลดสคริปต์ไม่รอ
defer — โหลดหลัง HTML
DOM — โครงสร้างเอกสาร
Element — องค์ประกอบ
Tag — แท็ก
Attribute — คุณสมบัติ
Nested Element — ซ้อนองค์ประกอบ
Parent Element — องค์ประกอบแม่
Child Element — องค์ประกอบลูก
Empty Tag — แท็กเดี่ยว
Inline Element — แสดงบรรทัดเดียว
Block Element — แสดงเต็มบรรทัด
HTML5 — HTML รุ่นใหม่
Web Storage — เก็บข้อมูลเว็บ
Local Storage — เก็บถาวร
Session Storage — เก็บชั่วคราว
Microdata — ข้อมูลโครงสร้าง
JSON-LD — ข้อมูล SEO
ARIA — การเข้าถึง
role — บทบาทองค์ประกอบ
aria-label — ป้ายกำกับ
aria-hidden — ซ่อนการเข้าถึง
Web Components — องค์ประกอบเว็บ
Template — แม่แบบ
<template> — เทมเพลต
<slot> — ช่องเนื้อหา
Shadow DOM — DOM แยก
Custom Element — องค์ประกอบกำหนดเอง
Manifest — ข้อมูลแอป
PWA — เว็บแอป
Service Worker — ทำงานเบื้องหลัง
Offline Mode — ออฟไลน์
Geolocation — ตำแหน่ง
Drag and Drop — ลากวาง
Clipboard API — คลิปบอร์ด
Fullscreen API — เต็มจอ
WebSocket — เชื่อมต่อสด
IndexedDB — ฐานข้อมูลเบราว์เซอร์
Fetch API — ดึงข้อมูล
CORS — สิทธิ์โดเมน
MIME Type — ประเภทไฟล์
CDN — เครือข่ายไฟล์
Minify — ย่อโค้ด
Validation — ตรวจโค้ด
W3C Validator — ตรวจมาตรฐาน
DevTools — เครื่องมือนักพัฒนา
Inspect Element — ตรวจองค์ประกอบ
HTML Boilerplate — โครงสร้างเริ่มต้น
Landing Page — หน้าแรก
Portfolio Website — เว็บผลงาน
Blog Layout — เว็บบล็อก
Navbar — เมนูบน
Sidebar — เมนูข้าง
Hero Section — ส่วนเปิดเว็บ
Card Layout — การ์ด
Grid Layout — ตารางจัดวาง
Flex Layout — ยืดหยุ่น
Responsive Navbar — เมนูมือถือ
Login Form — ฟอร์มล็อกอิน
Register Form — สมัครสมาชิก
Contact Form — ติดต่อ
Search Box — ช่องค้นหา
Pagination — แบ่งหน้า
Breadcrumb — เส้นทางเว็บ
Modal — หน้าต่างเด้ง
Accordion — พับขยาย
Carousel — สไลด์
Timeline — เส้นเวลา
Dashboard — หน้าควบคุม
Admin Panel — หลังบ้าน
FAQ Section — คำถามพบบ่อย
Testimonial — รีวิว
Pricing Table — ตารางราคา
Footer Menu — เมนูท้าย
Newsletter — สมัครข่าวสาร
Cookie Banner — แจ้งคุกกี้
Loading Screen — หน้าโหลด
Error Page 404 — หน้าไม่พบ
Sitemap — แผนผังเว็บ
XML Sitemap — แผนผัง XML
Robots.txt — ควบคุมบอท
SEO Friendly URL — URL ดีต่อ SEO
Meta Tag Optimization — ปรับ Meta
Page Speed — ความเร็วเว็บ
Compression — บีบอัด
Caching — แคช
Security Header — หัวความปลอดภัย
HTTPS — การเชื่อมต่อปลอดภัย
SSL — ใบรับรอง
Cross Browser — รองรับหลายเบราว์เซอร์
Mobile First — ออกแบบมือถือก่อน
Dark Mode — โหมดมืด
Accessibility Testing — ทดสอบการเข้าถึง
Performance Audit — ตรวจประสิทธิภาพ
Lighthouse — เครื่องมือวัดเว็บ
Deployment — นำเว็บขึ้นใช้งาน
Hosting — โฮสต์เว็บ
Domain — ชื่อเว็บไซต์
DNS — ระบบชื่อโดเมน
FTP — ส่งไฟล์
Git — จัดการเวอร์ชัน
GitHub Pages — โฮสต์ฟรี
Netlify — โฮสต์เว็บ
Vercel — โฮสต์เว็บ
Static Website — เว็บคงที่
Dynamic Website — เว็บไดนามิก
SPA — เว็บหน้าเดียว
SSR — เรนเดอร์ฝั่งเซิร์ฟเวอร์
SSG — สร้างเว็บล่วงหน้า
API Integration — เชื่อม API
REST API — API มาตรฐาน
JSON — รูปแบบข้อมูล
AJAX — โหลดข้อมูลไม่รีเฟรช
Authentication — ยืนยันตัวตน
Authorization — สิทธิ์ใช้งาน
Session — เซสชัน
Cookie — คุกกี้
Web Hosting Upload — อัปเว็บ
HTML Email Template — เทมเพลตอีเมล
AMP HTML — เว็บเร็วมือถือ
Structured Data — ข้อมูลโครงสร้าง
Schema Markup — สคีมา
Rich Snippets — ผลค้นหาเสริม
Web Accessibility — การเข้าถึงเว็บ
Frontend Development — พัฒนาหน้าเว็บ
UI Structure — โครงสร้างหน้าตา
HTML Professional Workflow — กระบวนการทำงานมืออาชีพ
=========================================
รวม คำศัพท์ + คำสั่ง CSS ที่ใช้บ่อย พร้อมคำแปลไทย (เน้นตั้งแต่พื้นฐาน → ใช้งานจริง)
พื้นฐาน CSS
color = สีตัวอักษร
background = พื้นหลัง
background-color = สีพื้นหลัง
background-image = รูปพื้นหลัง
background-size = ขนาดพื้นหลัง
background-repeat = การทำซ้ำพื้นหลัง
background-position = ตำแหน่งพื้นหลัง
opacity = ความโปร่งใส
visibility = การมองเห็น
display = รูปแบบการแสดงผล
ขนาดและระยะ
width = ความกว้าง
height = ความสูง
max-width = ความกว้างสูงสุด
min-width = ความกว้างต่ำสุด
max-height = ความสูงสูงสุด
min-height = ความสูงต่ำสุด
margin = ระยะห่างภายนอก
margin-top = ระยะบน
margin-right = ระยะขวา
margin-bottom = ระยะล่าง
margin-left = ระยะซ้าย
padding = ระยะห่างภายใน
padding-top = ระยะบนด้านใน
padding-right = ระยะขวาด้านใน
padding-bottom = ระยะล่างด้านใน
padding-left = ระยะซ้ายด้านใน
เส้นขอบ
border = เส้นขอบ
border-width = ความหนาขอบ
border-style = รูปแบบขอบ
border-color = สีขอบ
border-radius = มุมโค้ง
outline = เส้นรอบนอก
box-shadow = เงากล่อง
text-shadow = เงาข้อความ
ตัวอักษร
font-family = แบบอักษร
font-size = ขนาดตัวอักษร
font-weight = ความหนา
font-style = รูปแบบตัวอักษร
line-height = ระยะห่างบรรทัด
letter-spacing = ระยะห่างตัวอักษร
word-spacing = ระยะห่างคำ
text-align = จัดตำแหน่งข้อความ
text-decoration = ตกแต่งข้อความ
text-transform = แปลงตัวอักษร
text-indent = ย่อหน้า
white-space = ช่องว่างข้อความ
vertical-align = จัดแนวตั้ง
ตำแหน่ง
position = การกำหนดตำแหน่ง
static = ตำแหน่งปกติ
relative = ตำแหน่งสัมพันธ์
absolute = ตำแหน่งอิสระ
fixed = ติดหน้าจอ
sticky = ติดเมื่อเลื่อน
top = ด้านบน
right = ด้านขวา
bottom = ด้านล่าง
left = ด้านซ้าย
z-index = ลำดับชั้น
Flexbox
display:flex = เปิด Flexbox
flex-direction = ทิศทาง
row = แนวนอน
column = แนวตั้ง
justify-content = จัดแนวหลัก
align-items = จัดแนวรอง
align-content = จัดหลายบรรทัด
flex-wrap = ตัดบรรทัด
gap = ช่องว่าง
flex-grow = ขยาย
flex-shrink = ย่อ
flex-basis = ขนาดเริ่มต้น
Grid
display:grid = เปิด Grid
grid-template-columns = คอลัมน์
grid-template-rows = แถว
grid-column = ตำแหน่งคอลัมน์
grid-row = ตำแหน่งแถว
grid-gap = ช่องว่าง Grid
place-items = จัดตำแหน่ง
รูปภาพ
object-fit = ปรับรูปให้พอดี
object-position = ตำแหน่งรูป
filter = เอฟเฟกต์ภาพ
clip-path = ตัดรูปทรง
การเคลื่อนไหว
transition = การเปลี่ยนแบบนุ่มนวล
transition-duration = เวลาเปลี่ยน
transition-delay = หน่วงเวลา
animation = ภาพเคลื่อนไหว
animation-name = ชื่อแอนิเมชัน
animation-duration = ระยะเวลา
animation-delay = หน่วงเวลา
animation-iteration-count = จำนวนรอบ
transform = แปลงรูป
Transform
translate() = ย้ายตำแหน่ง
rotate() = หมุน
scale() = ย่อ/ขยาย
skew() = เอียง
Overflow
overflow = เนื้อหาล้น
overflow-x = ล้นแนวนอน
overflow-y = ล้นแนวตั้ง
scroll-behavior = เลื่อนนุ่มนวล
Cursor และ Interaction
cursor = รูปเมาส์
pointer-events = เหตุการณ์เมาส์
user-select = เลือกข้อความ
resize = ปรับขนาด
Selector
* = เลือกทั้งหมด
#id = เลือก ID
.class = เลือก Class
element = เลือกแท็ก
:hover = เมื่อชี้เมาส์
:active = เมื่อกด
:focus = เมื่อเลือก
:checked = เมื่อถูกเลือก
:first-child = ตัวแรก
:last-child = ตัวสุดท้าย
::before = ก่อนเนื้อหา
::after = หลังเนื้อหา
Responsive
@media = Media Query
min-width = กว้างขั้นต่ำ
max-width = กว้างสูงสุด
vw = ความกว้างหน้าจอ
vh = ความสูงหน้าจอ
% = เปอร์เซ็นต์
rem = หน่วยราก
em = หน่วยสัมพันธ์
px = พิกเซล
ค่า CSS ที่ใช้บ่อย
none = ไม่มี
block = บล็อก
inline = บรรทัดเดียว
inline-block = ผสม
hidden = ซ่อน
visible = แสดง
auto = อัตโนมัติ
inherit = รับค่าจากแม่
initial = ค่าเริ่มต้น
unset = ยกเลิกค่า
center = กึ่งกลาง
space-between = กระจายช่องว่าง
space-around = ช่องว่างรอบ
repeat() = ทำซ้ำ
calc() = คำนวณค่า
var() = ตัวแปร CSS
@keyframes = สร้างแอนิเมชัน
นี่คือชุดคำศัพท์/คำสั่ง CSS ที่ใช้บ่อยที่สุดสำหรับเริ่มเรียนจนใช้งานจริงได้ครับ।
CSS คืออะไร — What is CSS
ประวัติ CSS — CSS History
โครงสร้าง CSS — CSS Structure
วิธีเขียน CSS — Writing CSS
Inline CSS — CSS แบบในแท็ก
Internal CSS — CSS ภายในไฟล์
External CSS — CSS ภายนอกไฟล์
การเชื่อมไฟล์ CSS — Linking CSS Files
Selector คืออะไร — What is Selector
Universal Selector (*) — ตัวเลือกทั้งหมด
Element Selector — ตัวเลือกแท็ก
Class Selector (.) — ตัวเลือกคลาส
ID Selector (#) — ตัวเลือกไอดี
Group Selector — รวมตัวเลือก
Descendant Selector — ตัวเลือกลูกหลาน
Child Selector (>) — ตัวเลือกลูกโดยตรง
Adjacent Selector (+) — ตัวเลือกถัดไป
General Sibling (~) — ตัวเลือกพี่น้อง
Attribute Selector — ตัวเลือกแอตทริบิวต์
Pseudo-class — คลาสพิเศษ
:hover — เมาส์ชี้
:active — กำลังกด
:focus — กำลังโฟกัส
:visited — ลิงก์ที่เคยเข้า
:first-child — ลูกตัวแรก
:last-child — ลูกตัวสุดท้าย
:nth-child() — เลือกลำดับ
:not() — ไม่ใช่
:checked — เลือกแล้ว
Pseudo-element — อิลิเมนต์พิเศษ
::before — ก่อนเนื้อหา
::after — หลังเนื้อหา
::first-letter — ตัวอักษรแรก
::first-line — บรรทัดแรก
Comment CSS — คอมเมนต์
Color — สี
Background Color — สีพื้นหลัง
Text Color — สีตัวอักษร
RGB Color — สีแบบ RGB
HEX Color — สี HEX
HSL Color — สี HSL
Opacity — ความโปร่งใส
Background Image — รูปพื้นหลัง
Background Repeat — การทำซ้ำพื้นหลัง
Background Position — ตำแหน่งพื้นหลัง
Background Size — ขนาดพื้นหลัง
Background Attachment — ตรึงพื้นหลัง
Gradient — ไล่สี
Linear Gradient — ไล่สีเส้นตรง
Radial Gradient — ไล่สีวงกลม
Font Family — ตระกูลฟอนต์
Font Size — ขนาดฟอนต์
Font Weight — ความหนา
Font Style — รูปแบบตัวอักษร
Google Fonts — ฟอนต์ออนไลน์
Text Align — จัดข้อความ
Text Decoration — ตกแต่งข้อความ
Text Transform — แปลงข้อความ
Text Shadow — เงาข้อความ
Letter Spacing — ระยะตัวอักษร
Word Spacing — ระยะคำ
Line Height — ระยะบรรทัด
White Space — ช่องว่าง
Overflow Text — ข้อความล้น
Text Overflow — ตัดข้อความ
Direction — ทิศทางข้อความ
Writing Mode — โหมดเขียน
List Style — รูปแบบรายการ
List Image — รูปรายการ
Cursor — รูปเมาส์
Width — ความกว้าง
Height — ความสูง
Max Width — กว้างสูงสุด
Min Width — กว้างต่ำสุด
Max Height — สูงสุด
Min Height — ต่ำสุด
Margin — ระยะห่างนอก
Padding — ระยะห่างใน
Border — เส้นขอบ
Border Radius — มุมโค้ง
Border Color — สีขอบ
Border Width — ความหนาขอบ
Border Style — รูปแบบขอบ
Outline — เส้นรอบนอก
Box Shadow — เงากล่อง
Box Sizing — ขนาดกล่อง
Display — การแสดงผล
Display Block — บล็อก
Display Inline — อินไลน์
Inline Block — อินไลน์บล็อก
Visibility — การมองเห็น
Overflow — เนื้อหาล้น
Overflow X — ล้นแนวนอน
Overflow Y — ล้นแนวตั้ง
Position — ตำแหน่ง
Static Position — ตำแหน่งปกติ
Relative Position — ตำแหน่งสัมพัทธ์
Absolute Position — ตำแหน่งอิสระ
Fixed Position — ตำแหน่งคงที่
Sticky Position — ตำแหน่งติดตาม
Z-index — ลำดับชั้น
Float — ลอยวัตถุ
Clear — ล้าง Float
Flexbox — กล่องยืดหยุ่น
Display Flex — เปิด Flex
Flex Direction — ทิศทาง Flex
Flex Wrap — การขึ้นบรรทัด
Justify Content — จัดแนวนอน
Align Items — จัดแนวตั้ง
Align Content — จัดเนื้อหา
Gap — ระยะห่าง
Order — ลำดับ
Flex Grow — ขยาย
Flex Shrink — ย่อ
Flex Basis — ขนาดเริ่มต้น
Align Self — จัดตัวเอง
CSS Grid — ตาราง CSS
Grid Template Columns — คอลัมน์
Grid Template Rows — แถว
Grid Gap — ช่องว่างตาราง
Grid Area — พื้นที่ Grid
Grid Column — คอลัมน์ Grid
Grid Row — แถว Grid
Place Items — จัดวาง
Place Content — จัดเนื้อหา
Transform — แปลงวัตถุ
Translate() — ย้ายตำแหน่ง
Rotate() — หมุน
Scale() — ย่อขยาย
Skew() — เอียง
Matrix() — เมทริกซ์
Transition — การเปลี่ยน
Transition Duration — เวลาเปลี่ยน
Transition Delay — หน่วงเวลา
Transition Timing — ความเร็วเปลี่ยน
Animation — แอนิเมชัน
@keyframes — กำหนดเฟรม
Animation Delay — หน่วงแอนิเมชัน
Animation Duration — เวลาแอนิเมชัน
Animation Iteration — จำนวนรอบ
Animation Direction — ทิศทางแอนิเมชัน
Animation Fill Mode — เติมค่า
Filter — ฟิลเตอร์
Blur() — เบลอ
Brightness() — ความสว่าง
Contrast() — คอนทราสต์
Grayscale() — ขาวดำ
Sepia() — ซีเปีย
Hue Rotate() — หมุนสี
Drop Shadow() — เงา
Object Fit — พอดีวัตถุ
Object Position — ตำแหน่งวัตถุ
Clip Path — ตัดรูป
Mask — หน้ากาก
Aspect Ratio — อัตราส่วน
Resize — ปรับขนาด
User Select — เลือกข้อความ
Pointer Events — เหตุการณ์เมาส์
Caret Color — สีเคอร์เซอร์
Scroll Behavior — เลื่อนนุ่มนวล
Scroll Snap — ล็อกเลื่อน
Media Query — Responsive
Breakpoint — จุดเปลี่ยนขนาด
Mobile First — มือถือก่อน
Desktop First — เดสก์ท็อปก่อน
Viewport — พื้นที่แสดงผล
rem — หน่วย rem
em — หน่วย em
px — พิกเซล
% — เปอร์เซ็นต์
vh — ความสูงหน้าจอ
vw — ความกว้างหน้าจอ
calc() — คำนวณค่า
clamp() — จำกัดค่า
min() — ค่าน้อยสุด
max() — ค่าสูงสุด
Variable CSS — ตัวแปร CSS
:root — รากเอกสาร
var() — เรียกตัวแปร
Import CSS — นำเข้าไฟล์
@media — คำสั่งสื่อ
@import — นำเข้า
@font-face — เพิ่มฟอนต์
@supports — ตรวจสอบรองรับ
Specificity — ลำดับความสำคัญ
Inheritance — การสืบทอด
Cascade — การเรียงลำดับ
Important (!important) — บังคับค่า
Normalize CSS — ปรับมาตรฐาน
Reset CSS — รีเซ็ตค่า
CSS Architecture — โครงสร้าง CSS
BEM Method — วิธีตั้งชื่อ BEM
OOCSS — CSS เชิงวัตถุ
SMACSS — โครงสร้าง SMACSS
Atomic CSS — CSS แบบอะตอม
Utility Class — คลาสยูทิลิตี้
Dark Mode — โหมดมืด
Light Mode — โหมดสว่าง
Theme System — ระบบธีม
CSS Performance — ประสิทธิภาพ
CSS Variables Theme — ธีมตัวแปร
Responsive Navbar — เมนูตอบสนอง
Responsive Card — การ์ดตอบสนอง
Hero Section — ส่วนหัวเว็บ
Landing Page CSS — หน้าแรกเว็บ
Sidebar Design — แถบข้าง
Modal Popup — หน้าต่างเด้ง
Tooltip — กล่องคำแนะนำ
Accordion — เมนูพับ
Carousel CSS — สไลด์ภาพ
Skeleton Loading — โหลดจำลอง
Glassmorphism — กระจกใส
Neumorphism — นูนเงา
Gradient Button — ปุ่มไล่สี
Hover Effect — เอฟเฟกต์เมาส์
Card Animation — แอนิเมชันการ์ด
Image Overlay — ซ้อนภาพ
Sticky Header — หัวติดจอ
Timeline Design — ไทม์ไลน์
Masonry Layout — เลย์เอาต์อิฐ
CSS Debugging — ดีบัก CSS
DevTools CSS — เครื่องมือพัฒนา
Inspect Element — ตรวจองค์ประกอบ
Performance Audit — ตรวจประสิทธิภาพ
CSS Optimization — ปรับแต่ง CSS
Minify CSS — ย่อ CSS
Purge CSS — ลบโค้ดเกิน
Critical CSS — CSS สำคัญ
Lazy Loading Style — โหลดช้า
CSS Compression — บีบอัด CSS
Sass — CSS Preprocessor
SCSS — รูปแบบ Sass
Variables Sass — ตัวแปร Sass
Nesting Sass — ซ้อนโค้ด
Mixins — ชุดคำสั่ง
Functions Sass — ฟังก์ชัน
Extend — ขยายคลาส
Partials — ไฟล์ย่อย
Modules Sass — โมดูล
Compile Sass — คอมไพล์
Tailwind CSS — เฟรมเวิร์ก CSS
Bootstrap CSS — บูตสแตรป
Bulma CSS — บัลมา
Foundation CSS — ฟาวเดชัน
Material UI — ดีไซน์ Material
Animate CSS — ไลบรารีแอนิเมชัน
PostCSS — ประมวลผล CSS
Autoprefixer — เติม Prefix
CSSNano — ย่อ CSS
PurgeCSS Tool — ลบ CSS
CSS Grid Layout Project — โปรเจกต์ Grid
Flexbox Project — โปรเจกต์ Flex
Portfolio Design — เว็บผลงาน
Dashboard UI — หน้าควบคุม
Admin Panel CSS — แอดมิน
E-commerce Layout — เว็บขายของ
Blog Design — เว็บบล็อก
Login Form CSS — ฟอร์มล็อกอิน
Registration Form — สมัครสมาชิก
Pricing Table — ตารางราคา
Responsive Table — ตารางตอบสนอง
Mega Menu — เมนูใหญ่
Notification Badge — ป้ายแจ้งเตือน
Progress Bar — แถบความคืบหน้า
Loading Spinner — โหลดหมุน
Toggle Switch — สวิตช์
Rating Stars — ดาวคะแนน
Stepper UI — ขั้นตอน
Tabs UI — แท็บ
Pagination — แบ่งหน้า
CSS Accessibility — การเข้าถึง
Contrast Accessibility — สีเข้าถึงง่าย
Focus State — สถานะโฟกัส
ARIA Styling — สไตล์ ARIA
Reduced Motion — ลดแอนิเมชัน
Print CSS — CSS สำหรับพิมพ์
Multi Column Layout — หลายคอลัมน์
Writing Systems — ระบบเขียน
International Fonts — ฟอนต์สากล
RTL Layout — ขวาไปซ้าย
CSS Houdini — Houdini CSS
Container Query — คิวรีคอนเทนเนอร์
Subgrid — ตารางย่อย
Nesting CSS Native — ซ้อน CSS
Scroll Animation — แอนิเมชันเลื่อน
View Transition API — เปลี่ยนหน้า
CSS Layers — ชั้น CSS
Accent Color — สีควบคุม
Color Scheme — ชุดสี
Dynamic Viewport — หน้าจอไดนามิก
Advanced Selectors — ตัวเลือกขั้นสูง
CSS Patterns — รูปแบบ CSS
Design System — ระบบออกแบบ
Component CSS — CSS คอมโพเนนต์
Reusable CSS — ใช้ซ้ำ
Production CSS — CSS ระดับใช้งานจริง
Enterprise CSS — CSS องค์กร
CSS Best Practices — แนวปฏิบัติที่ดี
Professional CSS Workflow — เวิร์กโฟลว์มืออาชีพ
CSS Mastery — ความเชี่ยวชาญ CSS
=================================
คำศัพท์/คำสั่ง JavaScript ที่ใช้บ่อยมาก พร้อมคำแปล (รวมทั้งคำสั่ง, คีย์เวิร์ด, เมธอด, DOM, Array, Async)
พื้นฐาน (Basic)
var = ประกาศตัวแปรแบบเก่า
let = ประกาศตัวแปรเปลี่ยนค่าได้
const = ประกาศค่าคงที่
true = จริง
false = เท็จ
null = ค่าว่าง
undefined = ยังไม่มีค่า
NaN = ไม่ใช่ตัวเลข
typeof = ตรวจชนิดข้อมูล
instanceof = ตรวจชนิดอ็อบเจกต์
new = สร้างอ็อบเจกต์ใหม่
delete = ลบค่า/คุณสมบัติ
ชนิดข้อมูล (Data Types)
String = ข้อความ
Number = ตัวเลข
BigInt = จำนวนเต็มขนาดใหญ่
Boolean = ค่าจริง/เท็จ
Object = วัตถุ
Array = อาเรย์
Symbol = ค่าระบุเอกลักษณ์
Map = เก็บข้อมูลแบบคู่คีย์-ค่า
Set = เก็บค่าที่ไม่ซ้ำ
ตัวดำเนินการ (Operators)
เงื่อนไข (Condition)
วนลูป (Loops)
ฟังก์ชัน (Functions)
Array
push() = เพิ่มท้าย
pop() = ลบท้าย
shift() = ลบหน้า
unshift() = เพิ่มหน้า
splice() = เพิ่ม/ลบข้อมูล
slice() = ตัดข้อมูล
concat() = รวมอาเรย์
join() = รวมเป็นข้อความ
sort() = เรียงลำดับ
reverse() = กลับลำดับ
find() = ค้นหาค่าแรก
findIndex() = หาตำแหน่ง
filter() = กรองข้อมูล
map() = แปลงข้อมูล
reduce() = รวมค่า
some() = มีบางตัวตรงเงื่อนไข
every() = ทุกตัวตรงเงื่อนไข
includes() = มีข้อมูลหรือไม่
indexOf() = หาตำแหน่ง
flat() = คลายอาเรย์ซ้อน
String
length = ความยาวข้อความ
charAt() = ตัวอักษรตำแหน่ง
includes() = มีข้อความไหม
indexOf() = หาตำแหน่ง
replace() = แทนที่
replaceAll() = แทนที่ทั้งหมด
split() = แยกข้อความ
trim() = ลบช่องว่าง
toUpperCase() = ตัวพิมพ์ใหญ่
toLowerCase() = ตัวพิมพ์เล็ก
substring() = ตัดข้อความ
slice() = ตัดข้อความ
Object
DOM
document = เอกสารเว็บ
window = หน้าต่างเว็บ
getElementById() = หา ID
getElementsByClassName() = หา class
querySelector() = เลือกตัวแรก
querySelectorAll() = เลือกทั้งหมด
createElement() = สร้างแท็ก
appendChild() = เพิ่มลูก
remove() = ลบ
innerHTML = เนื้อหา HTML
innerText = ข้อความ
textContent = เนื้อหา
classList = จัดการคลาส
style = จัดการ CSS
setAttribute() = ตั้งค่า attribute
getAttribute() = อ่าน attribute
Events
onclick = คลิก
onchange = เปลี่ยนค่า
oninput = พิมพ์ข้อมูล
onsubmit = ส่งฟอร์ม
onload = โหลดเสร็จ
addEventListener() = เพิ่มอีเวนต์
preventDefault() = ยกเลิกค่าเริ่มต้น
stopPropagation() = หยุดการส่งต่อ
เวลา
Date() = วันที่เวลา
getFullYear() = ปี
getMonth() = เดือน
getDate() = วัน
getHours() = ชั่วโมง
setTimeout() = หน่วงเวลา
setInterval() = ทำซ้ำตามเวลา
clearTimeout() = ยกเลิกเวลา
clearInterval() = ยกเลิกวนเวลา
Async
โมดูล
import = นำเข้า
export = ส่งออก
default = ค่าเริ่มต้น
Console
console.log() = แสดงผล
console.error() = แสดงข้อผิดพลาด
console.warn() = คำเตือน
console.table() = แสดงตาราง
console.clear() = ล้างหน้าจอ
คำสั่งสำคัญอื่นๆ
JSON.parse() = แปลง JSON เป็น Object
JSON.stringify() = แปลง Object เป็น JSON
Math.random() = สุ่มค่า
Math.floor() = ปัดลง
Math.ceil() = ปัดขึ้น
Math.round() = ปัดเศษ
parseInt() = แปลงเป็นจำนวนเต็ม
parseFloat() = แปลงทศนิยม
isNaN() = ตรวจ NaN
eval() = รันโค้ดข้อความ
try = ทดลองทำ
catch = จับข้อผิดพลาด
throw = โยนข้อผิดพลาด
finally = ทำตอนจบ
รวมประมาณ 150+ คำศัพท์/คำสั่ง JavaScript ที่ใช้บ่อย ตั้งแต่พื้นฐานถึงใช้งานจริงได้เลยครับ
JavaScript คืออะไร — What is JavaScript
การติดตั้ง JavaScript — Installing JavaScript
การใช้ <script> — Using <script> Tag
Inline Script — สคริปต์ภายในแท็ก
Internal Script — สคริปต์ภายในไฟล์ HTML
External Script — สคริปต์ภายนอกไฟล์
console.log() — แสดงผลใน Console
alert() — กล่องแจ้งเตือน
prompt() — รับข้อมูลจากผู้ใช้
confirm() — กล่องยืนยัน
ตัวแปร var — Variable var
ตัวแปร let — Variable let
ตัวแปร const — Constant Variable
การตั้งชื่อตัวแปร — Variable Naming
ชนิดข้อมูล — Data Types
String — ข้อความ
Number — ตัวเลข
Boolean — ค่าจริงเท็จ
Undefined — ยังไม่มีค่า
Null — ค่าว่าง
BigInt — เลขขนาดใหญ่
Symbol — ค่าสัญลักษณ์
typeof — ตรวจชนิดข้อมูล
การแปลงข้อมูล — Type Conversion
String() — แปลงเป็นข้อความ
Number() — แปลงเป็นตัวเลข
Boolean() — แปลงเป็น Boolean
Template Literal `${}` — แทรกตัวแปรในข้อความ
Escape Character — อักขระพิเศษ
String Concatenation — ต่อข้อความ
Operator — ตัวดำเนินการ
+ บวก — Addition
- ลบ — Subtraction
* คูณ — Multiplication
/ หาร — Division
% หารเอาเศษ — Modulus
** ยกกำลัง — Exponentiation
++ เพิ่มค่า — Increment
-- ลดค่า — Decrement
Assignment Operator — ตัวกำหนดค่า
== เท่ากัน — Equal
=== เท่ากันแบบเข้มงวด — Strict Equal
!= ไม่เท่ากัน — Not Equal
!== ไม่เท่ากันแบบเข้มงวด — Strict Not Equal
> มากกว่า — Greater Than
< น้อยกว่า — Less Than
>= มากกว่าหรือเท่ากับ
<= น้อยกว่าหรือเท่ากับ
Logical Operator — ตัวดำเนินการตรรกะ
&& และ — AND
|| หรือ — OR
! ไม่ — NOT
if — เงื่อนไข
else — เงื่อนไขอื่น
else if — เงื่อนไขเพิ่มเติม
Nested if — เงื่อนไขซ้อน
Ternary Operator ? : — เงื่อนไขย่อ
switch — เลือกหลายกรณี
case — กรณี
default — ค่าเริ่มต้น
for Loop — วนซ้ำ for
while Loop — วนซ้ำ while
do...while — วนซ้ำ do while
Nested Loop — ลูปซ้อน
break — หยุดลูป
continue — ข้ามรอบ
Infinite Loop — ลูปไม่สิ้นสุด
Function — ฟังก์ชัน
Function Declaration — ประกาศฟังก์ชัน
Function Expression — นิพจน์ฟังก์ชัน
Arrow Function => — ฟังก์ชันลูกศร
Parameter — พารามิเตอร์
Argument — อาร์กิวเมนต์
Return — ส่งค่ากลับ
Default Parameter — ค่าเริ่มต้น
Rest Parameter ... — รับหลายค่า
Scope — ขอบเขตตัวแปร
Global Scope — ขอบเขตทั่วโลก
Local Scope — ขอบเขตภายใน
Block Scope — ขอบเขตบล็อก
Array — อาร์เรย์
สร้าง Array — Create Array
เข้าถึงสมาชิก Array — Access Array
push() — เพิ่มท้าย
pop() — ลบท้าย
shift() — ลบหน้า
unshift() — เพิ่มหน้า
length — ความยาวอาร์เรย์
splice() — แทรก/ลบข้อมูล
slice() — ตัดข้อมูล
concat() — รวมอาร์เรย์
join() — รวมเป็นข้อความ
indexOf() — หาตำแหน่ง
includes() — ตรวจข้อมูล
find() — ค้นหา
filter() — กรองข้อมูล
map() — แปลงข้อมูล
reduce() — รวมค่า
sort() — เรียงข้อมูล
reverse() — กลับลำดับ
Object — อ็อบเจ็กต์
Property — คุณสมบัติ
Method — เมธอด
Object Literal — สร้าง Object
this Keyword — คีย์เวิร์ด this
Object.keys() — ดึงคีย์
Object.values() — ดึงค่า
Object.entries() — ดึงคู่ข้อมูล
Destructuring — แยกค่า
Spread Operator ... — กระจายค่า
DOM — Document Object Model
document.getElementById() — เลือกด้วย ID
querySelector() — เลือกตัวแรก
querySelectorAll() — เลือกทั้งหมด
innerHTML — แก้ HTML
textContent — แก้ข้อความ
innerText — ข้อความแสดงผล
style — เปลี่ยน CSS
classList.add() — เพิ่มคลาส
classList.remove() — ลบคลาส
Event — เหตุการณ์
onclick — คลิก
ondblclick — ดับเบิลคลิก
mouseover — เมาส์ผ่าน
mouseout — เมาส์ออก
keydown — กดปุ่ม
keyup — ปล่อยปุ่ม
submit — ส่งฟอร์ม
change — เปลี่ยนค่า
Event Listener — ตัวฟังเหตุการณ์
addEventListener() — เพิ่ม Event
Event Object — ข้อมูล Event
preventDefault() — ยกเลิกค่าเริ่มต้น
stopPropagation() — หยุดส่งต่อ
Form Validation — ตรวจฟอร์ม
Regex — นิพจน์ปกติ
Date Object — วันที่
new Date() — สร้างวันเวลา
Time Methods — เมธอดเวลา
Math Object — คณิตศาสตร์
Math.random() — สุ่มเลข
Math.floor() — ปัดลง
Math.ceil() — ปัดขึ้น
Math.round() — ปัดเศษ
JSON — รูปแบบข้อมูล
JSON.stringify() — แปลงเป็น JSON
JSON.parse() — แปลงกลับ
Local Storage — เก็บข้อมูลเครื่อง
localStorage.setItem() — บันทึก
localStorage.getItem() — อ่านข้อมูล
Session Storage — เก็บชั่วคราว
Cookie — คุกกี้
BOM — Browser Object Model
window Object — หน้าต่าง
setTimeout() — หน่วงเวลา
setInterval() — ทำซ้ำเวลา
clearTimeout() — หยุดหน่วง
clearInterval() — หยุดวน
Callback Function — ฟังก์ชันย้อนกลับ
Promise — สัญญา
then() — จัดการสำเร็จ
catch() — จัดการผิดพลาด
finally() — ทำเสมอ
Async — ทำงานไม่พร้อมกัน
Await — รอผลลัพธ์
async/await — เขียน Async
Fetch API — ดึงข้อมูล API
fetch() — เรียก API
HTTP Request — คำขอเว็บ
REST API — API มาตรฐาน
ES6 — JavaScript รุ่นใหม่
Module — โมดูล
export — ส่งออก
import — นำเข้า
Class — คลาส
Constructor — ตัวสร้าง
Inheritance — การสืบทอด
extends — สืบทอดคลาส
Getter — ดึงค่า
Setter — ตั้งค่า
Encapsulation — การห่อหุ้ม
Polymorphism — หลายรูปแบบ
OOP — เชิงวัตถุ
Prototype — ต้นแบบ
Prototype Chain — โซ่ต้นแบบ
Closure — การปิดขอบเขต
Hoisting — ย้ายประกาศ
Strict Mode "use strict"
Error Handling — จัดการข้อผิดพลาด
try...catch — ดักข้อผิดพลาด
Throw Error — โยนข้อผิดพลาด
Debugging — ดีบัก
debugger — หยุดตรวจโค้ด
DevTools — เครื่องมือนักพัฒนา
Performance — ประสิทธิภาพ
Memory Leak — หน่วยความจำรั่ว
Event Loop — วงจรเหตุการณ์
Call Stack — สแต็กการเรียก
Microtask Queue — คิวงานย่อย
Macrotask Queue — คิวงานหลัก
Web API — เว็บ API
Geolocation API — ตำแหน่ง
Clipboard API — คลิปบอร์ด
Drag and Drop — ลากวาง
Canvas API — วาดภาพ
SVG — กราฟิกเวกเตอร์
Animation JS — แอนิเมชัน
Intersection Observer — ตรวจการแสดงผล
Mutation Observer — ตรวจ DOM
WebSocket — เชื่อมต่อเรียลไทม์
IndexedDB — ฐานข้อมูลเบราว์เซอร์
Service Worker — ทำงานพื้นหลัง
PWA — เว็บแอป
Offline Mode — ใช้ออฟไลน์
Web Storage API — ระบบเก็บข้อมูล
npm — ตัวจัดการแพ็กเกจ
Node.js — รัน JS ฝั่งเซิร์ฟเวอร์
npm install — ติดตั้งแพ็กเกจ
Package.json — ข้อมูลโปรเจกต์
Express.js — เฟรมเวิร์ก Node
Routing — เส้นทาง
Middleware — ตัวกลาง
CRUD — เพิ่มอ่านแก้ลบ
MongoDB — ฐานข้อมูล
API Server — เซิร์ฟเวอร์ API
Authentication — ยืนยันตัวตน
JWT — Token Login
Encryption — เข้ารหัส
Web Security — ความปลอดภัยเว็บ
XSS — โจมตีสคริปต์
CSRF — ปลอมคำขอ
CORS — แชร์ทรัพยากร
Unit Test — ทดสอบหน่วย
Jest — เครื่องมือทดสอบ
ESLint — ตรวจโค้ด
Prettier — จัดรูปแบบโค้ด
Babel — แปลงโค้ด
Webpack — รวมไฟล์
Vite — เครื่องมือพัฒนา
TypeScript — JavaScript แบบมีชนิดข้อมูล
React พื้นฐาน — React Basics
Vue พื้นฐาน — Vue Basics
Angular พื้นฐาน — Angular Basics
Next.js — React Framework
State Management — จัดการสถานะ
Redux — จัดการ State
Pinia — Vue Store
SPA — Single Page App
SSR — Server Side Render
CSR — Client Side Render
MVC Pattern — รูปแบบ MVC
Design Pattern — รูปแบบออกแบบ
Singleton Pattern
Factory Pattern
Observer Pattern
Clean Code — โค้ดสะอาด
Refactoring — ปรับโค้ด
SOLID Principles — หลัก SOLID
Git พื้นฐาน — Git Basics
GitHub — จัดเก็บโค้ด
Deployment — นำขึ้นใช้งาน
CI/CD — อัตโนมัติพัฒนา
Docker พื้นฐาน — Docker Basics
Cloud Deployment — ขึ้น Cloud
Firebase — Backend สำเร็จรูป
Supabase — Backend Open Source
Realtime Database — ฐานข้อมูลเรียลไทม์
GraphQL — ภาษาคิวรี API
WebRTC — สื่อสารเรียลไทม์
Microservices — บริการย่อย
SSR Hydration — โหลดฝั่งเซิร์ฟเวอร์
Lazy Loading — โหลดเมื่อจำเป็น
Code Splitting — แยกโค้ด
Tree Shaking — ลบโค้ดไม่ใช้
SEO JavaScript — SEO สำหรับ JS
Accessibility — รองรับผู้ใช้ทุกคน
Responsive JS — รองรับหลายจอ
Progressive Enhancement
SSR Optimization — ปรับ SSR
Performance Audit — ตรวจประสิทธิภาพ
Lighthouse — เครื่องมือตรวจเว็บ
Memory Optimization — ปรับหน่วยความจำ
Web Components — องค์ประกอบเว็บ
Shadow DOM — DOM แยกส่วน
Custom Elements — สร้างแท็กเอง
Template Element — แม่แบบ
Serverless Functions — ฟังก์ชันไร้เซิร์ฟเวอร์
Edge Functions — ฟังก์ชันขอบเครือข่าย
AI API Integration — เชื่อม AI
Automation Scripts — สคริปต์อัตโนมัติ
Browser Extension — ส่วนเสริมเบราว์เซอร์
Electron.js — แอป Desktop
Mobile JS — แอปมือถือ
React Native — สร้างแอปมือถือ
Testing E2E — ทดสอบทั้งระบบ
Cypress — เครื่องมือทดสอบ
Playwright — ทดสอบเว็บ
Enterprise JavaScript — ระดับองค์กร
Full Stack JavaScript — เต็มระบบ
JavaScript Professional Project — โปรเจกต์มืออาชีพ
