JavaScript for Beginner | สอน JavaScript ตั้งแต่เริ่มจนเขียนแอปได้ | Crash Course Series
HTML-код
- Опубликовано: 24 июл 2024
- 🔥 คอร์สฟรี!! PasaComputer x KBTG ชวนมาเรียน JavaScript for Beginner ซึ่งเป็นหนึ่งใน Crash Course Series ที่สอน JavaScript ตั้งแต่เริ่มจนเขียนแอปได้ เหมาะมากๆ สำหรับผู้เรียนที่ยังไม่เคยมีพื้นฐานมาก่อน
ภาษาจาวาสคริปต์นั้นเป็นภาษายอดนิยมที่สุดติดต่อกัน 8 ปีซ้อน ในคอร์สนี้จะปูพื้นฐานเพื่อให้ผู้เรียนสามารถนำไปต่อยอดเรียนรู้ไลบลารี เฟรมเวิร์ค เช่น React, Vue, Angular, และ Node.js เป็นต้น
📌 ดาวน์โหลดไฟล์ประกอบการสอน github.com/lvarayut/Crash-Cou...
เนื้อหา
00:00 Introduction
04:27 What is JavaScript?
15:43 Variables
21:53 Data Types
36:37 Arithmetic Operators
41:53 Conditions
49:44 Functions
54:20 Flow Controls
01:00:42 DOM Manipulation
01:14:47 Events
01:21:54 Outroduction
‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣❥
อย่าลืมกดไลท์ กดแชร์ และพบกันใหม่ในคลิปหน้าครับ
🎉ติดตาม Facebook ได้ที่ / pasacomputer
ผมชอบดูการสอนผ่านยูทูปบ่อยๆ หลายๆค่าย แต่ต้องบอกว่าค่ายนี้การถ่ายทอดไม่เหมือนกับเจ้าอื่นๆเลย คลิป1ชั่วโมงกว่า ที่นั่งดูได้ไม่เมื่อ การถ่ายทอดมันดูสนุกและเข้าใจง่าย ขอบคุณมากครับที่ทำคลิปดีๆแบบนี้ ทำออกมาบ่อยๆนะครับ
เห็นด้วยมากๆ
ผมมือมั่วหัดใหม่ครับ ... คลิปนี้เสียงเพราะและชัดเจนมาก ดูแล้วเข้าใจง่ายมากๆ ครับ พูดได้แค่ว่า "สุดยอด"
มารายงานตัวค่าาา ขอบคุณค่ะ
สำหรับมือผู้เริ่มต้น ในที่สุดก็เจอคนพูดภาษาไทยเป็นภาษาไทยสักที 5555 //เข้าใจง่าย เห็นภาพชัดเจน ดีมากเลย
ขอบคุณสำหรับคอร์สดีๆนะคะ :-)
ขอบคุณครับ สอนดีมากๆครับ
ขอบพระคุณครับ
สอนดีมากๆครับ
ขอบคุณครับ
สอนดีมากครับผม เยี่ยมเลยครับติดตามครับ
สอนลึกและละเอียดมากครับ
ขอบคุณครับ >
สุดๆ
อยากให้พี่ทำคลิปมาสอนอีกเยอะๆครับ พี่สอนเข้าใจดีครับ
สุดยอดอีกเสียงครับ ขอบคุณครับ
สอนได้ดีมากเลยครับ ขอบคุณสำหรับความรู้มากๆเลยครับ
ขอบคุณจ้า
สอนดีมากค่ะ ขอบคุณค่ะ
สอนละเอียดมากครับ ขอบคุณครับ
สุดจริงครับ
สอนดีมากครับ ขอบคุณครับ
ขอบคุณมากๆเลยครับ สอนเข้าใจง่าย รอติดตามอีกครับ ^^
สอนดีมากเลยครับ ขอบคุณที่ทำคลิปดีๆแบบนี้ออกมา ดูเข้าใจง่ายมากครับ
ขอบคุณสำหรับความรู้ครับ
อยากให้ทำคลิปสอนเลื่อยๆเลยครับ สอนดีมาก
อธิบายเข้าใจง่ายครับ ตามเรียนไปเรื่อยๆ ลื่นเฉยเลยครับ จาร์ย
สอนและ อธิบายเข้าใจง่ายมากครับ ฟังเเล้วไม่เบื่อเลย ขอบคุณที่สอนให้ความรู้ดีๆครับ
ฟังเพลินดีมากเลย ครับ
ขอบคุณมากเลยครับ สอนได้เข้าใจง่ายมากๆเลย
ขอบพระคุณมากมากครับ ชอบการสอนแบบนี้ครับ ดีงาม
เข้าใจขึ้นมากเลยครับ เห็นภาพครบถ้วน
สอนดีมากครับ น้ำเสียงฟังแล้วไม่เบื่อเลยครับ ขอบคุณสำหรับความรู้มากๆครับ
ตั้งใจเรียนคร่าขอบคุณทั้ง อ. และผู้สนับสนุนนะคะ ปล. อยากให้อ.สอน vue.js กับ angular ด้วยคร่า
อยากเรียนเรื่อง ternary operator ด้วยค้าบ
สุดยอดดด
ขอบคุณมากๆ ครับเข้าใจลูปเยอะเลย เพราะดูคลิปอื่นๆสอนลูป บอกวิธีทำแต่ไม่อธิบายกระบวนการ
สอนดีมากๆค่ะ เสียงเพราะด้วย
อยากให้พี่สอน vue js บ้างครับ
อาจารย์สอนดีมากเลยค่ะ อธิบายเข้าใจง่ายมากๆเลยค่ะ ทำต่อไปนะค่ะ
เสียงบรรยาย ฟังแล้วลื่นหู ไม่น่าเบื่อตรับ ความเร็วในการสอนพอดี ชอบครับ
เสียงน่าฟัง อธิบายเข้าใจง่ายมากค่ะ ขอบคุณสำหรับความรู้ค่ะ
ช่องนี้มีประโยชน์มากครับ ขอบคุณเนื้อหาดีๆที่ทำออกมา เป็นกำลังใจให้ครับ ทำเนื้อหามีประโยชน์ออกมาอีกเรื่อยๆนะครับ 👍
สอนพื้นฐานได้ดีมากครับ ใครที่ผ่านมาแนะนำ
ขอบคุณมากครับ 1 ชม.กว่าที่ได้ มีประโยชน์มากๆครับ
อยากให้พี่สอน vue+nuxt หน่อยครับ
ขอบคุณมากครับ อธิบายดีมาก ต้องไปเรียนพวก DOM เพิ่มจะได้ใช้งานได้หลากหลายมากขึ้น ^^
สอนดีมากครับ และที่สำคัญคือน่าจะเป็นประโยชน์สำหรับคนที่ทุนน้อยงบน้อยมากครับ
ตั้งแต่เรียนมาหลายคน คนนี้สอนละเอียดและรู้เรื่องสุดแล้วครับ ขอบคุณครับ
สอนเป็นขั้นเป็นตอน จังหวะการเปลี่ยนหน้าจอเนื้อหา และการใช้น้ำเสียงดีมากเลยค่ะฟังเพลินไม่ง่วงเลย ชอบมากๆ
ตอนนี้กำลังเรียนรู้การใช้งาน Cypress ไปเรื่อยๆอยู่ และต้องใช้ความรู้ Javascript (ที่ติดลบมากๆ)ในการเขียน งมไปเรื่อยๆ จนมีพี่แนะนำช่องนี้ให้ดู ก็ประทับใจมากเลยค่ะ จะเรียนคอร์สต่อไปอย่างตั้งใจเลย!
ต่อไปขอ typescript ได้ไหมครับ
กำลังเรียนด้วยตัวเอง ไม่เคยเรียนมาก่อน ขอบคุณครับ
อยากให้สอน node.js บ้างครับ
Font ของตัวหนังสือ สอนหน่อยสิครับ อยากได้ตัวเขียนแบบในคลิป
อยากรบกวนให้อธิบายคำว่า &sig= หน่อยครับว่ามันคืออะไร
parameter '.gallery' มาจากไหนครับ รบกวนอธิบายหน่อยครับ
กราบขอบพระคุณเป็นอย่างสูงเลยครับอาจารย์
ตรงวินาที 40:46 ตัว Code format ที่ใส่วงเล็บให้อัตโนมัติต้องลง Extention อะไรเหรอคะ
เสียงคนสอนน่าฟังมากครับ
อยากถามหน่อยครับ ใช้ plugin อะไรให้มันเปลี่ยนการแสดงผลพวก symbol ต่างๆ อะครับ >= -> ≧
สอนเข้าใจมากครับ
แต่ผมพยายามจะเปลี่ยน search engine เป็น url อื่นไปไม่เป็นเลยครับ
มาเรียนวันนี้ หน้าจอ ระบบไม่เหมือนวันน้้นเลยครับ มึนตั้งเเต่นาทีที่ 10 ครับ ไปต่อไม่ได้เลย
มีแอพพิเคชั่นหรือ โปรแกรมสอน javascript อย่างอื่นๆมีไหมครับ ลองหาสอนเพิ่มเติมบน PC
กระชับ และ เข้าใจง่าย ดีครับ🙏
ใช้ theme ตัวไหนครับ
ถ้าไม่มีกล้องก็สามารถเรียนได้ใช่ไหมงับ
พอจะแนะนำ extension ที่ใช้อยู่ได้ไหมครับ เฟี้ยวฟ้าวมาก
ถ้าเป็นการเลื่อน Cursor ไปแก้ไขโค้ดในที่ต่างๆ ผมจะใช้ VIM ครับ 😊
1:14:00 มันพิมพ์
ขอบคุณมากๆสำหรับความรู้ดีๆที่เอามาแบ่งปันครับ ขอรบกวนสอบถามเพิ่มครับ หลังจากเรียนพื้นฐานคอร์สนี้แล้ว ควรเรียนคอร์สไหนต่อดีครับ
แนะนำให้เรียนต่อตามนี้เลยครับ:
1. เรียนโครงสร้างภาษา JavaScript ให้แน่นขึ้นด้วยคอร์ส Functaional Programming in JavaScript ruclips.net/video/NGbnxiKN9Zw/видео.html
2. ลงคอร์สฟรีอีกตัวที่ผมทำไว้เพื่อฝึกทำโปรเจค 21 โปรเจคโดยใช้ภาษา JavaScript js21.dev/
3. เรียน React ซึ่งเป็นไลบรารีที่ยอดนิยมที่สุดในการสร้างเว็บแอปพลิเคชัน คอร์ส React for Everyone ruclips.net/video/mXjxKhWNHNo/видео.html
ในคลิป โปรแกรม VS Code ใช้ Color Theme ตัวไหนหรอครับ
ใช้ Solarized dark theme ครับ ส่วนฟอนท์ใช้ตัว Victor Mono (rubjo.github.io/victor-mono/)
@@PasaComputer ขอบคุณครับ
สอบถามนิดนึงครับอาจารย์ วิธีนี่กับการ fetch มันต่างกันอย่างไรครับ
ข้อมูลที่ได้ตอนนี้จะเป็นข้อมูล url รูปภาพที่สามารถเปิดได้บนเว็บไซต์ทันทีเลยครับ แต่ถ้าเเป็น API ที่รีเทิร์นข้อมูลประเภทที่จะนำมาใช้งานต่อ หรือเป็นข้อมูลที่ไม่ใช่ url รูปภาพตรงๆ ก็จะใช้ไลบรารี axios หรือ fetch ยิงแทน
PasaComputer ขอบคุณครับอาจารย์
ขอสอบถามครับ ทำไมรูปถึงออกมาซ้ำกัน ครับ
W3
ผมทำตามจนได้แสดงภาพออกมาครบถ้วนครับ
สงสัยตรง พื้นที่ที่แสดงภาพ ใน div class="gallery"
ไม่ทราบว่า กำหนดขนาดพื้นทีแสดงภาพ ได้ตรงใหนครับ ตัวอย่าง ถ้าผมอยากให้วางรูปเรียงเต็มความกว้างของหน้าจอเลย แล้วค่อยปัดลงมาเรื่อยๆ
ยังไงก็ขอบคุณครับ ได้ความรู้มากเลย
ทำในcssได้เลยครับ
ขอบคุณครับ
ผมขอสอบถามหน่อยครับ ทำไม เราถึงใช้ const กับ ตัวแปร object ครับ ใช้ let ไม่ได้หรอครับ เราใช้ const กับค่าคงที่ เปลี่ยนค่าไม่ได้ แต่ใช้กับ object กลับเปลี่ยนค่า ได้ แถมเพิ่ม property ได้อีก
จริงๆ ใช้ let หรือ const ก็ได้เช่นเดียวกันครับ แต่เราจะนิยมใช้ const ให้มากที่สุด เพราะเวลาอ่านโค้ดจะไล่ได้ง่ายขึ้น รู้ว่าตัวแปรใดเป็นตัวแปรที่ reassign ค่าไม่ได้ และตัวแปรใดเปลี่ยนแปลงได้ ตัว object ก็เช่นเดียวกันครับ ถ้าเราไม่ได้อยากให้ตัวแปร reassign ค่า เราก็จะใช้ const (Reassign ค่ากับ Mutable จะต่างกันโดย const ในภาษา JavaScript จะป้องกันการ Reassign ค่า แต่ตัว properties ต่างๆ ยังคง Mutable เปลี่ยนแปลงได้)
รับสอนใหมครับ
พี่ครับxmlคืออะไรครับ
46:28 ใช้ตัว extension ไหนเหรอครับทำไม >= มันสวยจัง 555
มาจากฟ้อนท์ Victor Mono ครับ rubjo.github.io/victor-mono/
ทำไมเวลาผมใส่ name แล้วมันมีขีด ------- ตรงกลางของ name ครับ
comment ทีเดียว 3 แถว. เรากดปุมไหนคร้บ?
สวัสดีครับ อ. ผมเป็นผู้เริ่มต้นนะครับ ผมได้ลองเขียนโค้ดตามในคลิปแล้ว พอถึงขั้นตอนของ สไตล์ css แล้ว มันไม่แสดงผลครับ ไม่รู้ว่าเป็นเพราะอะไร อ.แนะนำด้วยครับ ขอบคุณครับ
ไม่แสดงผลหมายถึงหน้าเว็บไซต์ไม่แสดงรูปแบบตาม styles ที่กำหนดไว้ใน index.css หรือเปล่าครับ ถ้าเป็นอย่างนั้นต้องลองเช็คดูว่า link index.css ที่ใส่ไว้ใน index.html ใส่ถูกต้องหรือเปล่า
พี่ครับตัวเครื่องหมาย === = อะไรพวกนี้พี่โหลดตัวไหนเหรอครับมันดูง่ายดีครับ
เป็น Font ของ Victor Mono github.com/rubjo/victor-mono ครับ
@@PasaComputer ขอบคุณมากครับ
เครื่องหมาย >= มันไม่มีต้องเท่าไงครับ พิมพ์ในแบบที่พิมพ์มันไม่ คำนวณให้ครับ
รันไม่ได้ ขึ้นว่าอะไรครับผม โพสตัวโค้ดที่รันไม่ได้ให้ดูได้ไหมครับ
งง ตอนใส่ Attribute souce นาทีที่ 13.58 คือใส่ยังไง ครับ
src ใน script คือ attribute ที่ระบุที่อยู่ของไฟล์ที่เราต้องการดึงเข้ามาใช้ครับ ในที่นี้เราระบุไฟล์ index.js เพื่อดึงเข้ามาใช้ในหน้าแอพพลิเคชัน
@@PasaComputer ขอบคุณครับ กระจ่างมาก
เปิดคลิปนี้มาปุ๊ป โฆษณาสคริปท์สอน TabNine มาพอดีเลย 555
ถ้ามีคอร์สออนไลน์ Frontend ลงเรียนเลยนะ
ขอบคุณครับ ถ้ามีเมื่อไหร่จะมาอัพเดตนะครับ
สวัสดีครับ ผมดึงรูปภาพมาไม่ได้ครับ เหมือนว่าลิ้งค์รูปภาพมันใช้ไม่ได้ครับ พอมีวิธีแก้ไขไหมครับ
ใช้ได้ปกตินะครับผมพึ่งเรียนวันนี้
@@fullmetal5943 ครับ ขอบคุณครับ ผมเขียนผิดเองครับ
มีวิธี ไม่ให้คนอื่นเห็น code JavaScript ของเรา ไม่ครับ
พอเปิด Inspect ก็จะเห็นหมดเลย
stackoverflow.com/questions/6869312/how-do-i-hide-javascript-code-in-a-webpage
จริงๆ ผมมาย่อยให้ก็ได้ครับ ถ้าไม่อยากอ่าน คำตอบของ stackoverflow
คำตอบสั้นๆ :: ตราบใดที่ Web Browser สามารถรัน Javascript ได้ ยังไงก็ต้องเห็น Code ที่เขียนไว้ครับ ไม่มีทางอื่น ยังไงก็ต้องเห็น
คำตอบยาวๆ :: สมมติว่า อยากจะป้องกัน Alogithm หรือ Logic บางอย่างจริงๆ เช่น สมมติ มี function expensiveFunction(number1, number2) { //expensiveAlgorithm return expensive result } ให้ยก function นี้ทั้ง function ไปอยู่บน server ครับ แล้วเขียน api ไป call function นี้บน server ที่เก็บไว้ จริงๆ มีทางเลือกมากกมายเลยเช่น google cloud function สุดท้าย ต่อให้มีคนเห็น Code ของเรา เค้าจะเห็นแค่ ว่าเราเรียก function อะไรครับ แค่นั้น เลย เค้าไม่รู้ logic ภายใน expensiveFunction ของเรา และ เค้าเองก็ไม่สามารถเรียก function นั้นได้ด้วยถ้าเค้าไม่มีสิทธิ์
เพิ่มเติม 1 :: ไม่ควรเอา logic แพงๆ ใส่ไว้ใน Frontend อยู่แล้ว (แพงแต่ละคนไม่เหมือนกันนะครับ ไปนิยามกันเอาเอง)
เพิ่มเติม 2 :: ถ้าจะเอา logic แพงๆ ใส่ไว้ใน Frontend แล้วใช้เทคนิค Obfuscate ผมมองว่าไร้ประโยชน์ ครับ มันแค่ทำให้การอ่านยากขึ้นเฉยๆ แต่ไม่ใช่อ่านไม่ได้
DOM คือ ดอมินิก ทอเร็ตโต้ 5555
สอนโครตDee!!
45:31
ฟ้อนอ่านลำบากมากครับ
ดูแล้วเข้าใจง่ายครับ ไม่ง่วงด้วย❤❤
ขอบคุณครับ
ขอบคุณสำหรับความรู้ครับ
ขอบคุณครับ