สร้างเว็บแอพพลิเคชั่นด้วย JavaScript (Building 20 Projects) from Udemy

What's inside

Learning objectives

เข้าใจการเขียน html5 , css3 ร่วมกับ javascript ในการทำ 20 โปรเจกค์
เรียนรู้การเผยแพร่เว็บไซต์ที่พัฒนาด้วย html5 , css3 , javascript
เพิ่มทักษะด้านการพัฒนาเว็บฝั่ง frontend (html5,css3,javascript) ภายใน 20 โปรเจกต์

กำหนดลูกเล่นให้เว็บด้วยเทคนิค scroll to top และ page scroll progress indicator
เรียนรู้การใช้งาน javascript ทำงานร่วมกับ api ต่างๆ
ได้โค้ดประกอบการสอนในแต่ละหัวข้อ

เข้าใจการเขียน html5 , css3 ร่วมกับ javascript ในการทำ 20 โปรเจกค์
เรียนรู้การเผยแพร่เว็บไซต์ที่พัฒนาด้วย html5 , css3 , javascript
เพิ่มทักษะด้านการพัฒนาเว็บฝั่ง frontend (html5,css3,javascript) ภายใน 20 โปรเจกต์
กำหนดลูกเล่นให้เว็บด้วยเทคนิค scroll to top และ page scroll progress indicator
เรียนรู้การใช้งาน javascript ทำงานร่วมกับ api ต่างๆ
ได้โค้ดประกอบการสอนในแต่ละหัวข้อ

Syllabus

บทนำ

แนะนำเนื้อหา

ข้อกำหนดคอร์สเรียน

ติดตั้งเครื่องมือพื้นฐาน

ติดตั้ง Visual Studio Code + Extension

Project 1 - Click to Copy

ตัวอย่างโปรเจกต์

ออกแบบเว็บด้วย HTML

ตกแต่งเว็บด้วย CSS

คัดลอกข้อความด้วย JavaScript

Project 2 - Clock Light/Dark Mode

ดึงข้อมูลเวลาด้วย JavaScript

สลับโหมด (Toggle)

กำหนด Effect การเปลี่ยนโหมด

Project 3 - Input Character Count

นับจำนวนตัวอักษรด้วย JavaScript

Project 4 - Increment Counter

แสดงตัวเลขด้วย JavaScript

Project 5 - Modal & Popup

แสดง Popup ด้วย JavaScript

Project 6 - Page Progress Indicator

ภาพประกอบการสอน

กำหนด Style ให้ Progress Bar

กำหนด Scroll Event

Project 7 - Vowels Counting

นับสระด้วย JavaScript

Project 8 - Scroll To Top

กำหนด Style ให้ปุ่ม Scroll

ซ่อนและแสดงปุ่มด้วย JavaScript

กำหนด Event Scroll To Top

Project 9 - Password Visibility Toggle

ซ่อนและแสดงรหัสผ่าน

Project 10 - Image Gallery Popup

ดึงภาพจาก Attribute

แสดงภาพเต็ม (Full Image)

แสดง Modal

ซ่อน Modal

Project 11 - Sticky Navigation

Style Active Class

Project 12 - Random Notification

ฟังก์ชั่นสุ่มข้อความแจ้งเตือน

สร้างกล่องแจ้งเตือน

กำหนด Style ด้วย CSS

Project 13 - Sound Board

สร้างปุ่มด้วย JavaScript

ฟังก์ชั่นหยุดเสียง

Project 14 - ข้อมูลประเทศและเมืองหลวง (Countries API)

API ประกอบการสอน

ดึงข้อมูลจาก API

กรองข้อมูลจาก API

แสดงข้อมูลในหน้าเว็บ

ตกแต่งหน้าเว็บด้วย CSS

Project 15 - Hidden Search Widget

สลับโหมดค้นหา (Toggle)

Project 16 - แอพแปลงอุณหภูมิ (Temperature Converter)

ดึงตัวเลขและหน่วยอุณหภูมิ

แปลงเซลเซียสเป็นฟาเรนไฮน์และเคลวิน

แปลงฟาเรนไฮน์เป็นเซลเซียสและเคลวิน

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in สร้างเว็บแอพพลิเคชั่นด้วย JavaScript (Building 20 Projects) with these activities:

ทบทวนพื้นฐาน HTML, CSS และ JavaScript

Show steps

ทบทวนความรู้พื้นฐาน HTML, CSS และ JavaScript เพื่อให้เข้าใจเนื้อหาของคอร์สได้ดียิ่งขึ้น

Show steps

อ่านเอกสารประกอบการเรียน HTML, CSS และ JavaScript
ทำแบบฝึกหัด HTML, CSS และ JavaScript
ดูวิดีโอสอน HTML, CSS และ JavaScript

อ่านหนังสือ Eloquent JavaScript

Show steps

อ่านหนังสือ Eloquent JavaScript เพื่อเรียนรู้ JavaScript อย่างละเอียด

View Putting Knowledge to Work on Amazon

Show steps

อ่านหนังสือ Eloquent JavaScript
ทำความเข้าใจเนื้อหาในหนังสือ
ทำแบบฝึกหัดในหนังสือ

อ่านหนังสือ JavaScript: The Good Parts

Show steps

อ่านหนังสือ JavaScript: The Good Parts เพื่อทำความเข้าใจหลักการเขียน JavaScript ที่ดี

View Putting Knowledge to Work on Amazon

Show steps

อ่านหนังสือ JavaScript: The Good Parts
ทำความเข้าใจเนื้อหาในหนังสือ
นำความรู้จากหนังสือไปประยุกต์ใช้ในการเขียนโค้ด

Four other activities

Expand to see all activities and additional details

Show all seven activities

ฝึกเขียนโค้ด JavaScript ES6

Show steps

ฝึกเขียนโค้ด JavaScript ES6 เพื่อให้คุ้นเคยกับไวยากรณ์และฟังก์ชันใหม่ๆ

Show steps

ทำแบบฝึกหัด JavaScript ES6 จากเว็บไซต์ต่างๆ
ลองเขียนโปรแกรมง่ายๆ ด้วย JavaScript ES6
อ่านบทความเกี่ยวกับ JavaScript ES6

ศึกษาเพิ่มเติมเกี่ยวกับการใช้งาน API

Show steps

เรียนรู้เพิ่มเติมเกี่ยวกับการใช้งาน API เพื่อให้สามารถดึงข้อมูลจากแหล่งต่างๆ มาแสดงผลในเว็บแอปพลิเคชันได้

Show steps

ค้นหาและศึกษาบทความหรือวิดีโอสอนเกี่ยวกับการใช้งาน API
ลองใช้งาน API ต่างๆ ที่น่าสนใจ
สร้างโปรเจกต์เล็กๆ ที่มีการใช้งาน API

สร้างเว็บแอปพลิเคชันอย่างง่าย

Show steps

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

Show steps

วางแผนและออกแบบเว็บแอปพลิเคชัน
เขียนโค้ด HTML, CSS และ JavaScript
ทดสอบและแก้ไขข้อผิดพลาด
ปรับปรุงและพัฒนาเว็บแอปพลิเคชัน

เขียนบล็อกสรุปความรู้ที่ได้จากคอร์ส

Show steps

เขียนบล็อกสรุปความรู้ที่ได้จากคอร์สเพื่อทบทวนความรู้และแบ่งปันความรู้ให้กับผู้อื่น

Show steps

เลือกหัวข้อที่น่าสนใจจากคอร์ส
สรุปเนื้อหาและเขียนบล็อก
เผยแพร่บล็อก

Career center

Learners who complete สร้างเว็บแอพพลิเคชั่นด้วย JavaScript (Building 20 Projects) will develop knowledge and skills that may be useful to these careers:

นักพัฒนาเว็บไซต์ส่วนหน้า

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

See salaries and explore the career path for นักพัฒนาเว็บไซต์ส่วนหน้า

ผู้พัฒนาแอปพลิเคชัน JavaScript

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

See salaries and explore the career path for ผู้พัฒนาแอปพลิเคชัน JavaScript

นักพัฒนาเว็บ

นักพัฒนาเว็บ สร้างและดูแลเว็บไซต์และเว็บแอปพลิเคชันทั้งหมด ความรู้ในภาษาโปรแกรมมิ่งฝั่ง Front End เป็นสิ่งสำคัญสำหรับอาชีพนี้ หลักสูตรนี้ช่วยให้คุณพัฒนาทักษะที่จำเป็นในการใช้ HTML5, CSS3 และ JavaScript ผ่านการสร้าง 20 โปรเจกต์ที่หลากหลาย ซึ่งรวมถึงการสร้างแอปแปลงอุณหภูมิ แอปคำนวณดัชนีมวลกาย และระบบค้นหาข้อมูลจาก API ประสบการณ์ในการสร้างโปรเจกต์เหล่านี้จะช่วยให้คุณมีความมั่นใจในการทำงานจริงในฐานะ นักพัฒนาเว็บ

See salaries and explore the career path for นักพัฒนาเว็บ

นักพัฒนาเว็บไซต์อิสระ

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

See salaries and explore the career path for นักพัฒนาเว็บไซต์อิสระ

ผู้พัฒนาอินเทอร์เฟซผู้ใช้

ผู้พัฒนาอินเทอร์เฟซผู้ใช้ มุ่งเน้นไปที่การสร้างอินเทอร์เฟซที่ใช้งานง่ายและสวยงามสำหรับเว็บไซต์และแอปพลิเคชัน หลักสูตรนี้ช่วยให้คุณพัฒนาทักษะที่จำเป็นในการใช้ HTML5, CSS3 และ JavaScript เพื่อสร้างอินเทอร์เฟซที่ตอบสนองต่อผู้ใช้ คุณจะได้เรียนรู้การสร้างลูกเล่นต่างๆ เช่น การแสดงผลเวลา การสลับโหมด และการสร้าง Popup ซึ่งเป็นองค์ประกอบสำคัญของอินเทอร์เฟซผู้ใช้ที่ดี นอกจากนี้ การเรียนรู้การใช้งาน API จะช่วยให้คุณสามารถดึงข้อมูลจากแหล่งต่างๆ มาแสดงผลในอินเทอร์เฟซได้อย่างมีประสิทธิภาพ

See salaries and explore the career path for ผู้พัฒนาอินเทอร์เฟซผู้ใช้

ผู้สอนการพัฒนาเว็บ

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

See salaries and explore the career path for ผู้สอนการพัฒนาเว็บ

นักออกแบบเว็บไซต์

นักออกแบบเว็บไซต์ สร้างสรรค์รูปลักษณ์และความรู้สึกของเว็บไซต์ โดยคำนึงถึงประสบการณ์ผู้ใช้และความสวยงาม หลักสูตรนี้ช่วยให้คุณเข้าใจหลักการออกแบบเว็บไซต์ที่ดีผ่านการใช้งาน HTML5 และ CSS3 ในการสร้าง 20 โปรเจกต์ คุณจะได้เรียนรู้การตกแต่งเว็บด้วย CSS การกำหนดลูกเล่นต่างๆ และการสร้างหน้าเว็บที่น่าสนใจ ซึ่งเป็นทักษะที่สำคัญสำหรับ นักออกแบบเว็บไซต์ นอกจากนี้ การเรียนรู้การใช้งาน JavaScript จะช่วยให้คุณสามารถสร้างเว็บไซต์ที่มีการโต้ตอบกับผู้ใช้ได้มากขึ้น

See salaries and explore the career path for นักออกแบบเว็บไซต์

ผู้ให้คำปรึกษาด้านเว็บ

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

See salaries and explore the career path for ผู้ให้คำปรึกษาด้านเว็บ

วิศวกรส่วนหน้า

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

See salaries and explore the career path for วิศวกรส่วนหน้า

ผู้เชี่ยวชาญด้านประสบการณ์ผู้ใช้

ผู้เชี่ยวชาญด้านประสบการณ์ผู้ใช้ มุ่งเน้นไปที่การปรับปรุงประสบการณ์ผู้ใช้บนเว็บไซต์และแอปพลิเคชัน หลักสูตรนี้ช่วยให้คุณเข้าใจถึงวิธีการที่ HTML5, CSS3, และ JavaScript มีผลต่อประสบการณ์ของผู้ใช้งานจริง คุณจะได้เรียนรู้แนวทางในการพัฒนาเว็บไซต์ที่ใช้งานง่ายและตอบสนองความต้องการของผู้ใช้ได้ดีที่สุด

See salaries and explore the career path for ผู้เชี่ยวชาญด้านประสบการณ์ผู้ใช้

นักเขียนเทคนิคด้านเว็บ

นักเขียนเทคนิคด้านเว็บ เขียนเอกสาร คู่มือ และบทความเกี่ยวกับเทคโนโลยีเว็บ หลักสูตรนี้ช่วยให้คุณมีความเข้าใจอย่างลึกซึ้งในการทำงานของ HTML5, CSS3 และ JavaScript ซึ่งเป็นสิ่งจำเป็นสำหรับ นักเขียนเทคนิคด้านเว็บ คุณจะได้เรียนรู้การอธิบายแนวคิดทางเทคนิคที่ซับซ้อนให้เข้าใจง่ายและวิธีการสร้างเอกสารที่ชัดเจนและถูกต้อง

See salaries and explore the career path for นักเขียนเทคนิคด้านเว็บ

ผู้ทดสอบเว็บไซต์

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

See salaries and explore the career path for ผู้ทดสอบเว็บไซต์

ผู้จัดการโครงการเว็บไซต์

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

See salaries and explore the career path for ผู้จัดการโครงการเว็บไซต์

นักวิเคราะห์เว็บไซต์

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

See salaries and explore the career path for นักวิเคราะห์เว็บไซต์

ผู้ดูแลระบบเว็บไซต์

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

See salaries and explore the career path for ผู้ดูแลระบบเว็บไซต์

Reading list

We've selected one books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in สร้างเว็บแอพพลิเคชั่นด้วย JavaScript (Building 20 Projects).

Putting Knowledge to Work

Save

Focuses on the elegant and effective features of JavaScript, helping you avoid common pitfalls and write cleaner, more maintainable code. It's particularly useful for understanding the core concepts and best practices. While not directly covering the 20 projects, it provides a solid foundation for understanding the underlying JavaScript principles used in those projects. This book is highly regarded by JavaScript developers.

Putting Knowledge to Work

Paperback

Check price

Putting Knowledge to Work

Kindle Edition

Check price

สร้างเว็บแอพพลิเคชั่นด้วย JavaScript (Building 20 Projects)

What's inside

Learning objectives

Syllabus

Save this course

Activities

Career center

Reading list

Share

Similar courses