เริ่มเรียน Javascript (JS)

ถ้าช็อคโกแลตเป็นขนมที่เด็กน้อยทุกคนเคยทาน
Javascript ก็ไม่ต่างอะไรกับภาษาพื้นฐาน ที่นักพัฒนาซอฟต์แวร์ทุกคน
ต่างเคยได้ยินถึงชื่อเสียงเรียงนามของมัน.. และคุ้นเคยเป็นอย่างดี

วันนี้เจ้าของบล็อกจะมาเขียนแนะนำเกี่ยวกับ “Javascript” ค่ะ🤗

ก่อนอื่นเลย ต้องขอขอบคุณทางบ้าน 20Scoops CNX ที่ให้โอกาสเราได้เรียนรู้และศึกษาพื้นฐาน Javascript จาก course ของ Udemy ซึ่ง course นี้ได้ลงถึงรายละเอียดและที่มาของแต่ละตัวแปรและคำศัพท์ที่เกี่ยวข้องกันเลยทีเดียว แต่บทความนี้เราจะขอพูดถึงเฉพาะ Concept และแนวทางการเรียนรู้เบื้องต้นที่เจ้าของคอร์สเขาบอกว่าดี ไปดูกันว่ามีอะไรบ้าง

Javascript คืออะไร ?

Javascript คือ ภาษาคอมพิวเตอร์ สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ที่เกิดมาเพื่อเป็นส่วนเสริมสำคัญของภาษา HTML(Hypertext Markup Language) เปรียบเทียบอย่างง่าย เมื่อ HTML คือตัวโครงสร้างของเว็บไซต์, CSS(Cascading Style Sheets) ช่วยตกแต่งโครงสร้างให้สวยงาม เจ้า Javascript ก็จะเสริมให้เว็บไซต์สามารถโต้ตอบกับผู้ใช้งานได้มากขึ้น ไม่ได้เป็นเพียงเว็บไซต์ที่มีโครงสร้างธรรมดาๆเท่านั้น

Giphy.com : ตัวอย่างการนำ Javascript ไปใช้ในการ Validate Form

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

สำหรับใครที่ยังไม่รู้ว่า HTML และ CSS คืออะไร อยากรู้ลองเข้าไปเรียนคอร์สนี้ดูได้ ฟรีและเรียนรู้ได้ไว จัดไปจ้า https://www.codecademy.com/learn/learn-html-css ✨

การเริ่มต้น

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

Giphy.com

เริ่มเรียนรู้ถึงองค์ประกอบของภาษา จากจุดเล็กๆแล้วค่อยๆประกอบกันให้ซับซ้อนขึ้นตามลำดับ จนกระทั่งสามารถเข้าใจทุกส่วนได้ ก่อนจะสื่อสารได้ เราต้องรู้ก่อนว่าภาษาอังกฤษมีพยัญชนะกี่ตัว มีสระกี่ตัว A E I O U จะนำมันมาประกอบเป็นคำได้ยังไง? แล้วจะนำคำมาประกอบเป็นประโยคยังไง? คำไหนเป็นคำนาม กริยา กรรม แล้วประโยคที่ได้จะนำมาเรียบเรียง มาพูดเล่าเรื่องได้อย่างไร

Javascript ก็เช่นกัน เราควรเริ่มทำความเข้าใจมัน ก่อนที่จะนำมันไปใช้งาน

(1) ทำไมต้อง Javascript

การตั้งคำถามจะทำให้เราอยากรู้คำตอบ และกระตุ้นความอยากเรียนของเราให้มีมากขึ้น เช่น ทำไมเราต้องเรียน Javascript? แล้วมีภาษาอื่นใช้ทดแทนกันได้ไหม? มันดียังไงทำไมถึงฮิตจัง? ถ้าเราสามารถเขียน Javascript ได้จะเกิดผลดีอะไรกับตัวเราบ้าง เป็นต้น

(2) เข้าใจธรรมชาติของภาษาคอมพิวเตอร์

ถ้าภาษาอังกฤษต้องมีพยัญชนะ จาวาสคริปต์ก็ต้องมีตัวแปร เป็นสิ่งที่ขาดไม่ได้ “ตัวแปร” หรือ variable จะถูกใช้เป็นตัวแทนในการทำงานต่างๆในโปรแกรม ก่อนที่เราจะนำตัวแปรไปใช้งานได้ เราต้องทำการประกาศตัวแปรให้โปรแกรมได้รับรู้ก่อน ว่ามีตัวแปรตัวนี้อยู่นะ โดยตัวแปรก็จะมีชนิดและสถานะของมันที่แตกต่างกันออกไป

(3) จับตัวแปรมากระทำ

คอมพิวเตอร์หรือในภาษาไทยว่า คณิตกรณ์ ชื่อบ่งบอกชัดเจนว่ามันเกี่ยวข้องกับคณิตศาสตร์แน่นอน🤔 ตัวภาษาของมันจึงอิงหลักการจากคณิตศาสตร์เป็นหลัก เมื่อได้ตัวแปรมา เราจะนำมันมาใช้หรือกระทำอะไรบางอย่างต่อกันด้วย Operator ไม่ว่าจะเป็นบวก ลบ คูณ หาร เท่ากับ ไม่เท่ากับ หรืออื่นๆ ซึ่งในส่วนนี้เราสามารถนำหลักเบื้องต้นของคณิตศาสตร์ทั่วไปมาใช้ได้ ยกตัวอย่างเช่น 3+ 4 * 5 เราจะได้ผลลัพธ์เท่ากับ 23 ไม่ใช่ 35 เพราะมันอิงตามลำดับขั้นการคำนวณ ถ้าอยากให้ได้ผลลัพธ์เท่ากับ 35 เราจะต้องใช้วงเล็บมาเพื่อกำหนดขอบเขตให้ชัดเจน เป็น (3+4)*5 การทำงานกับ Javascript จะใช้หลักการนี้เช่นเดียวกัน เข้าไปดูรายละเอียดเพิ่มเติมได้ที่นี่

(4) ไม่ต้องลึก แต่ต้องรู้

อ่านมาจนถึงตรงนี้ หลายคนอาจจะเถียงว่าแค่รู้จักบวกลบคูณหาร จริงเท็จ กับลำดับการคำนวณของมัน จะสามารถเขียนภาษาใดภาษาหนึ่งได้เลยเหรอ ตอบเลยค่ะ ว่า “ไม่ได้” (อ้าว😂) แต่มันเป็นพื้นฐานก่อนการลงลึกหลังจากที่เราเข้าใจคณิตศาสตร์เบื้องต้น เมื่อเรามีตัวแปรและต้องการให้มันทำอะไรซักอย่าง เราก็จะสามารถทำได้ไม่ติดขัด

ส่วนอีกเรื่องสำคัญที่เราต้องศึกษาคือ Syntax หรือรูปแบบของภาษา เฉกเช่นภาษาอื่น Javascript มีเอกลักษณ์ของตัวมันเอง เช่น จะประกาศตัวแปรให้มีชนิดเป็นตัวอักษรหรือ String เราไม่สามารถทำได้เลยด้วยการบอกว่า ฉันคือตัวอักษร แต่ต้องเอาตัวอักษรไปไว้ใน ‘ ’ หรือ “ ” แบบนี้ -> ‘ฉันคือตัวอักษร’

ตัวอย่างการประกาศตัวแปร ชื่อว่า text โดยมี type เป็น String

นอกจากนี้ยังมีการทำงานอื่นที่ตัวภาษามันมีให้อยู่แล้ว เช่น

อยากแสดงผลจะใช้คำสั่ง console.log()

ตัวอย่างการใช้ฟังก์ชัน console.log() เพื่อแสดงผลข้อความ

อยากแจ้งเตือนใช้ alert()

ตัวอย่างการใช้งานคำสั่ง alert() เพื่อแจ้งเตือนข้อความ

อยากให้เกิดการทำงานซ้ำจนกว่าจะพอใจด้วย If-Else, Do While, For หรืออื่นๆ

ตัวอย่างการใช้ฟังก์ชัน While ในการทำงานซ้ำของการแสดงผลข้อความ

จะเห็นได้ว่ามันเยอะแยะไปหมด ซึ่งเราไม่จำเป็นต้องรู้ทั้งหมดลึกซึ้ง เหมือนภาษาอังกฤษที่เราอาจจะไม่รู้คำศัพท์บางคำ แต่เราก็สามารถสื่อสารได้ระดับหนึ่งเมื่อเข้าใจพื้นฐาน การเรียน Javascript ก็ไม่จำเป็นต้องรู้ลึกทั้งหมด

แค่เพียงต้องรู้อะไรที่เราจะนำไปใช้ก็พอ

(5) ตัวช่วย

Javascript มีตัวช่วยอย่าง Library หรือ Framework ที่นักพัฒนาท่านอื่นๆได้ทำไว้ ที่เราสามารถเอามาใช้ได้โดยไม่ต้องเขียนเอง สะดวกสบายเลยทีเดียว แต่ แต่.. เคยได้ยินประโยคนี้ไหม ตนเป็นที่พึ่งเห็นตน ก่อนที่เราจะรับความช่วยเหลือจากใคร เราต้องพยายามทำให้ได้ด้วยตัวเองก่อน ถ้าเราไม่เข้าใจพื้นฐาน Javascript เลย บวกลบเหล่านั้นคืออะไร syntax หรือ function ตรงนี้ใช้ยังไง เราก็จะไม่สามารถเข้าใจตัว Library หรือ Framework ที่มีคนเขียนไว้ได้เลย😓 ข้อดีของการเรียนรู้ไปด้วยตัวเองก่อนนำของคนอื่นมาใช้คือ ถ้าเราเรียนรู้พื้นฐานไปในระดับหนึ่ง เราจะสามารถสร้าง Library มาใช้เป็นของตัวเองได้ เช่น สร้างสคริปต์สำหรับขอบคุณคนที่เข้ามาอ่านบทความในเว็บไซต์ โดยเปลี่ยนภาษาทักทายได้อัตโนมัติ เป็นต้น

(6) ลองเลย เดี๋ยวก็รู้

ถ้าอยากพูดภาษาอังกฤษได้แบบเจ้าของภาษา แต่เราเอาแต่อ่านทฤษฎี ไม่เคยฝึกเปล่งเสียงออกมาเลยสักครั้ง เราจะรู้ได้ยังไงว่าเราพูดมันได้จริงๆหรือเปล่า

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

เกริ่นมาซะยาว(มากๆ😅) เดี๋ยวนี้มีแหล่งเรียนรู้ Javascript เยอะมากกก ใครสนใจคอร์สที่ให้ link ไว้ด้านบนก็ลองไปสอยมาเก็บไว้เรียนได้ค่ะ คอร์สดี อธิบายตั้งแต่ที่มาของภาษาและแนะนำ tools สำหรับศึกษาเพิ่มเติมด้วยตนเองไว้ให้อีกด้วย

• เรียนแบบเล่มเกมไปทีละด่าน https://js.checkio.org
• เรียนแบบเรียนรู้ทุกรายละเอียด พร้อมแบบฝึกหัด https://www.w3schools.com/js/default.asp
• คอร์สต่างๆตามเลือกสรร https://www.udemy.com , https://www.codecademy.com

เขียน Javascript ได้ที่ไหน?

ถ้าไม่อยากลงโปรแกรมอะไรเพิ่มให้หนักเครื่องในการทดลองหรือเรียนรู้ ตัว JS สามารถเขียนในเว็บบราวเซอร์อย่าง Google Chrome ได้เลย ด้วยการเข้า Google Chrome เลือก More Tools ตามด้วย Developer Tools (for Mac: กด Option+Command+I) จะมีกล่องเครื่องมือขึ้นมา และแถบเมนู Elements, Console, Sources, Network … ให้เลือกที่แถบ Console ในแถบนี้จะสามารถพิมพ์โค้ด Javascript เข้าไปได้เลย ลองพิมพ์สองบรรทัดง่ายๆดูได้ค่ะ

let name = 'ใส่ชื่อตรงนี้'
alert('Thank you '+ name +' for reading this article :D')

จะมีหน้าต่าง Pop-up โผล่ขึ้นมา เห็นไหม ว่าไม่ใช่เรื่องยุ่งยากเลย แค่สองบรรทัดก็ให้ผลลัพธ์ได้แล้ว😎🤘🏻 หรือใครจะหันไปใช้ Text Editor อื่นๆ เช่น Sublime, Visual Studio Code เพื่อเขียนก็ได้เลย ไม่มีปัญหา อยู่ที่ความถนัดส่วนบุคคลค่ะ

สุดท้ายนี้ ขอขอบคุณท่านผู้อ่านที่อยู่ด้วยกันมาจนถึงบรรทัดสุดท้าย
แล้วพบกันใหม่ในบทความหน้านะค้าา บ๊ายบาย😄💕