พื้นฐานของจาวาสคริปต์ คอร์ส JavaScript ส่วนที่ 2 ตั้งแต่ Beginner ถึง Advanced

เผยแพร่แล้ว: 2021-10-22

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

พื้นฐานของ JavaScript – สารบัญ:

  1. พื้นฐาน JavaScript
  2. การดำเนินการทีละบรรทัด
  3. สองวิธีในการสิ้นสุดคำแนะนำ
  4. ความคิดเห็น

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

หากคุณใช้ Mac แป้นพิมพ์ลัดเพื่อเปิดคอนโซลคือการกด "option + command + J" หลังจากที่คุณเปิด Chrome หากคุณใช้อุปกรณ์ Windows คุณสามารถใช้แป้นพิมพ์ลัดของ “Control + Shift + J” เพื่อเปิดคอนโซล JavaScript เมื่อคุณเปิด Chrome หรือคุณสามารถไปที่เมนูด้านบนและไปที่ View -> Developer -> JavaScript Console

พื้นฐาน JavaScript

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

ตัวอย่างเช่น คำบางคำมีความหมายต่อกลไก JavaScript ที่รันโค้ดของเรา เช่น คีย์เวิร์ด "alert" ที่เราใช้ในบทช่วยสอนก่อนหน้านี้ มีความหมายในการแสดงการแจ้งเตือนไปยังผู้ใช้ด้วยคำเฉพาะที่พวกเขาใส่ในวงเล็บ . ในกรณีของเรา เราเขียนว่า "สวัสดี ชาวโลก!" ดังนั้นเราจึงได้รับการแจ้งเตือนว่า "สวัสดีชาวโลก!"

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

การดำเนินการทีละบรรทัด

เมื่อพูดถึงพื้นฐาน JavaScript สิ่งแรกที่คุณควรทราบคือโค้ดที่คุณเขียนจะถูกดำเนินการทีละบรรทัดจากบนลงล่าง รูปแบบการรันโค้ดนี้เรียกอีกอย่างว่า JavaScript ว่าเป็น "ภาษาการเขียนโปรแกรมที่ตีความ"

ในทางตรงกันข้าม ภาษาโปรแกรมบางภาษาเป็น “ภาษาโปรแกรมคอมไพล์” ตัวอย่างภาษาที่คอมไพล์ได้แก่ C, C++, C#, Swift, Java และอื่นๆ ความแตกต่างหลัก ๆ คือ ภาษาโปรแกรมที่คอมไพล์แล้ว โค้ดทั้งหมดที่คุณเขียนจะถูก "คอมไพล์" และจะถูกประมวลผลเป็นชิ้นเดียวโดยคอมพิวเตอร์ นั่นเป็นเหตุผลว่าทำไมการเริ่มต้นเรียนรู้ภาษาโปรแกรมคอมไพล์จึงยากขึ้น เนื่องจากการระบุตำแหน่งที่คุณทำผิดพลาดในโปรแกรมได้ยากขึ้น

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

สองวิธีในการสิ้นสุดคำแนะนำ

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

ขึ้นอยู่กับประเภทของคำสั่งที่เราเขียน โดยทั่วไปเราจะใช้คำสั่งใดคำสั่งหนึ่งเพื่อจบหรือจัดแพ็คเกจชุดคำสั่ง เราจะใช้วงเล็บประเภทต่างๆ สำหรับฟังก์ชันและประเภทข้อมูลต่างๆ ตัวอย่างเช่น ใน alert("สวัสดีชาวโลก"); โค้ดที่เราได้ดำเนินการไปก่อนหน้านี้ วงเล็บที่ล้อมรอบการเขียน Hello world จะบอกคอมพิวเตอร์ว่าควรแจ้งเตือนอะไร และเครื่องหมายอัฒภาคที่ส่วนท้ายของคำสั่งจะบอกคอมพิวเตอร์ว่า คำแนะนำนี้สิ้นสุดที่นี่ คุณสามารถย้ายไปยังคำสั่งถัดไปได้ ซึ่งคล้ายกับวิธีที่เราใช้จุด “.” เพื่อจบประโยคเป็นภาษาอังกฤษ

ความคิดเห็น

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

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

คุณสามารถเพิ่มความคิดเห็นได้สองวิธีคือ JavaScipt อย่างแรกคือการเพิ่มความคิดเห็น "บรรทัดเดียว" ง่ายๆ ด้วยเครื่องหมายทับสองอันดังนี้:

// this is a comment

ด้วยวิธีนี้สิ่งที่คุณเขียนหลังจากเครื่องหมายทับทั้งสองจะถูกละเว้นในบรรทัดเฉพาะที่คุณใส่เครื่องหมายทับ คุณสามารถทำซ้ำได้หลายครั้งเพื่อให้มีความคิดเห็นหลายบรรทัดครอบคลุมดังนี้:

// this is a comment.
// this is another comment.
// you can keep commenting like this.

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

ไปข้างหน้าและคัดลอกและวางโค้ดต่อไปนี้ลงในคอนโซล JavaScript ที่คุณเปิดที่ Chrome

// greet user
alert("Hello, User!");
alert("Hi, User!");

หากคุณต้องการฝึกฝนเพิ่มเติมในการเขียนโค้ดทั้งหมดด้วยตัวเอง คุณก็สามารถทำได้เช่นกัน สิ่งหนึ่งที่คุณควรทราบเกี่ยวกับการเขียนโค้ดหลายบรรทัดในคอนโซลคือเพื่อไปยังบรรทัดถัดไปโดยไม่ต้องดำเนินการ คุณสามารถกด "shift + enter" เพื่อดำเนินการดังกล่าว มิฉะนั้นหลังจากเขียนโค้ดบรรทัดเดียวแล้ว หากคุณกด Enter ระบบจะเรียกใช้โค้ดบรรทัดนั้น ในตัวอย่างนี้ นี่ไม่ใช่ปัญหาใหญ่และจริงๆ แล้วมันก็ดีที่จะดำเนินการทีละบรรทัดเช่นกัน เพราะเรามีตัวอย่างง่ายๆ ที่สามารถทำงานในสไตล์นั้นได้เช่นกัน

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

javascript_basicsjavascript_basics

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

เมื่อคุณทำภารกิจท้าทายเสร็จแล้ว หรือหากติดขัดในระหว่างการแข่งขัน คุณสามารถดูรหัสการแก้ปัญหาด้านล่าง ก่อนที่จะดูวิธีแก้ปัญหา ฉันขอแนะนำให้ลองใช้ด้วยตัวเองเสมอ เพราะคุณจะเรียนรู้สิ่งที่ดีที่สุดเมื่อคุณฝึกฝนมันจริงๆ หากคุณทำภารกิจสำเร็จสำเร็จ คุณควรดูหน้าจอดังนี้:

javascript_basics

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

อีกวิธีในการแสดงความคิดเห็นโค้ดคือการใช้เครื่องหมายทับและเครื่องหมายดอกจัน ด้วยวิธีนี้ เราสามารถสร้างความคิดเห็นแบบบรรทัดเดียวหรือหลายบรรทัดในโค้ดของเราได้

/* a single line comment */
/* the commenting starts when we put a forward slash and an asterisk
and the commented areas ends
when we close of the comment with an asterisk and the forward slash
like this */

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

JavaScript basics. Part 2 JavaScript course from Beginner to Advanced robert whitney avatar 1background

ผู้เขียน: โรเบิร์ต วิทนีย์

ผู้เชี่ยวชาญ JavaScript และผู้สอนที่โค้ชแผนกไอที เป้าหมายหลักของเขาคือการยกระดับประสิทธิภาพการทำงานของทีมโดยการสอนผู้อื่นถึงวิธีการร่วมมืออย่างมีประสิทธิภาพขณะเขียนโค้ด

หลักสูตร JavaScript จากระดับเริ่มต้นถึงระดับสูงใน 10 บล็อกโพสต์:

  1. จะเริ่มเขียนโค้ดใน JavaScript ได้อย่างไร?
  2. พื้นฐาน JavaScript
  3. ตัวแปรและประเภทข้อมูลต่างๆ ใน ​​JavaScript
  4. ตัวอย่างและโครงสร้างการควบคุม
  5. ในขณะที่ลูปและสำหรับลูป
  6. Java array
  7. ฟังก์ชันจาวาสคริปต์
  8. วัตถุ JavaScript
  9. เมธอด JavaScript และอื่นๆ
  10. สรุปหลักสูตรจาวาสคริปต์