เริ่มต้นที่นี่
สรุปจากสไลด์วิชา Web Technology 960241 (Piyavach K.) ครบทุกบทตั้งแต่ HTML ไปจนถึงการเขียน server ด้วย Express ทุกบทมีแบบทดสอบท้ายบท ตรวจคำตอบได้ทันทีในเบราว์เซอร์
โครงสร้างรายวิชา
| หัวข้อตาม course outline | หน้าในเว็บนี้ |
|---|---|
| 1. ความรู้เบื้องต้นของเทคโนโลยีเว็บ | รู้จัก Web Technology |
| 2. ภาษากำกับการแสดงผล (HTML) | HTML |
| 3. ภาษากำหนดรูปแบบ (CSS, SASS/SCSS) | CSS & SCSS |
| 4. การเก็บชิ้นงาน (Repository & Version control) | Git & GitHub |
| 5.1 Client-side — JavaScript ES6 | JS พื้นฐาน, Array, OOP, Async, DOM |
| 5.2 API และ HTTP protocol (XMLHttpRequest, fetch, axios) | API, HTTP & fetch |
| 5.3 Server-side — NodeJS, Express, ฐานข้อมูล, TypeScript | Node, Express & Database |
บทเรียนทั้งหมด
1. รู้จัก Web Technology
WWW, Tim Berners-Lee, HTML/URI/URL/HTTP, Web 1.0–3.0, Client-Server, Front-end vs Back-end
เข้าเรียน2. HTML
โครงสร้างเอกสาร, DOCTYPE, meta, semantic element ของ HTML5, form, input ทุกชนิด, media
เข้าเรียน3. CSS & SCSS
selector ทุกแบบ, pseudo-class vs pseudo-element, animation, CSS variable, SASS/SCSS, mixin
เข้าเรียน4. Git & GitHub
local vs remote repository, staging area, คำสั่ง git ที่ต้องจำ, merge conflict และวิธีแก้
เข้าเรียน5. JavaScript พื้นฐาน
var/let/const, ชนิดข้อมูล, == vs ===, เงื่อนไข, loop, scope, hoisting, arrow function, template string, spread/rest, JSON
เข้าเรียน6. Array & Callback
push/pop/shift/unshift, splice/slice, map/filter/reduce/sort, find, destructuring, callback function
เข้าเรียน7. OOP, Prototype & Module
class, constructor, extends/super, private field #, prototype chain, import/export module
เข้าเรียน8. Async, Promise & AJAX
setTimeout/setInterval, ปัญหา asynchronous, Promise, async/await, Promise.any, AJAX
เข้าเรียน9. DOM & Event
getElementById/querySelector, innerHTML vs textContent, สร้าง/ลบ element, event handler 3 แบบ, bubbling vs capturing
เข้าเรียน10. API, HTTP & fetch
HTTP/1.0–2.0, header/body, method, status code, XMLHttpRequest, fetch, axios, REST/GraphQL/SOAP
เข้าเรียน11. Node, Express & DB
npm/npx, สร้าง server, route, CRUD กับ MariaDB และ MongoDB, ORM/ODM, TypeScript
เข้าเรียนแบบทดสอบมี 3 แบบ
| แบบ | ทำอะไร | การตรวจ |
|---|---|---|
| multiple choice | เลือก 1 ตัวเลือกจาก 4 | เทียบตัวเลือกที่ถูก |
| เติมคำตอบ | พิมพ์ชื่อคำสั่ง ผลลัพธ์ หรือค่าที่ได้ | ไม่สนตัวพิมพ์เล็กใหญ่ |
| coding | เขียน JS / HTML / CSS / SQL จริงในกล่องโค้ด | ตรวจโครงสร้างคำสั่ง ไม่สนการเว้นบรรทัด |