JavaScript ง่ายอะไรเบอร์นี้ Ep.0– Introduction

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

JavaScript หรือที่หลาย ๆ คนเรียกสั้น ๆ ว่า JS หนึ่งในภาษาที่หลายคนคงรู้จักกันดี ซึ่ง Javascript กับ Java นั้น ไม่มีความเกี่ยวข้องกันซึ่งหลายคนคงรู้แล้วล่ะ แต่ก็อาจจะมีบางคนสับสน อาจจะเพราะว่าชื่อคล้ายกัน แต่ไวยากรณ์และการทำงานค่อนข้างที่จะแตกต่างกัน โดย JavaScript เป็นภาษาสคริปต์ที่ทำงานโดยรันอยู่บนเว็บบราวเซอร์ได้เลย ซึ่งถ้าท่านใดที่กำลังเขียนเว็บโดยใช้ Backend Web Frameworks ไม่ว่าจะเป็น Django หรือ Flask ถ้าอยากอัพหรือติดปีกสกิลตัวเอง คุณจำเป็นต้องเรียน JS ครับ

เป้าหมายของซีรี่ย์นี้

ก่อนอื่นขอบอกเป้าหมายในการเขียนบทความซีรี่ย์นี้กันก่อนครับ ผมหวังว่าเมื่อคุณเรียนจนจบซีรี่ย์บทความนี้คุณจะ

1. รู้และเข้าใจ JavaScript และสามารถบอกได้ว่า JavaScript นำไปใช้งานในด้านไหนได้บ้าง
2. เข้าใจคำสั่งพื้นฐานและไวยากรณ์ โครงสร้างภาษาของ JavaScript
3. เขียน JavaScript เพื่อแสดงผลลูกเล่นต่าง ๆ บนเว็บได้
4. ต่อยอดไปศึกษา Frontend Frameworks ได้ ไม่ว่าจะเป็น Angular, React, Vue เป็นต้น(เพราะว่ามีพื้นฐานที่ดีแล้วนั่นเอง)

คำมั่นของผู้เขียน

โดยผมได้เขียบบทความนี้ขึ้นมาหลังจากเคยเกริ่นไว้ช่วงสิ้นปีไว้แล้วว่า

แอดมินอาจจะต้องเพิ่ม Javascript เข้ามาในเพจด้วยครับ ซึ่งปีหน้าก็คงจะมี Tutorials เกี่ยวกับภาษานี้เข้ามาด้วย เพราะว่า Javascript มีส่วนเกี่ยวข้องโดยตรงกับ Full Stack Developer ซึ่งก็จะตรงกับแนวทางของเพจ STACKPYTHON ซึ่งนอกจากจะใช้ Python เป็น Back-end (Server Side) โดยใช้ Django และ Flask แล้ว เรายังจะต้องใช้ Javascript ในด้าน Front-end (Client Side) โดยอาจจะเลือกศึกษาเฟรมเวิร์คซักตัวหรือตัวไหนก็ได้ตามที่ต้องการเลยครับ ที่เป็นที่นิยมกันมากที่สุด ก็ 3 ตัวนี้เลย Vue.js, React.js และ Angular

Frontend Frameworks(Angular, React, Vue)

ซึ่งแน่นอนว่าทั้ง 3 ตัวนี้ ก็ย่อมมีความแตกต่างกัน และ Learning Curve ก็มีความแตกต่างกันแน่นอน โดยเหล่า Developers ส่วนใหญ่นั้น ให้ความเห็นเกี่ยวกับ Learning Curve ของทั้ง 3 ตัวนี้ว่า

Angular จะมี Learning Curve ที่สูงที่สุด รองลงมาก็คือ React และสุดท้ายตัวที่มี Learning Curve ที่ต่ำสุดก็คือ Vue ครับ นั่นหมายความว่า Vue นั้น จะง่ายที่สุดในการเรียนรู้ และตอนนี้จำนวน Stars ใน GitHub ทาง Vue ก็แซงทั้ง Angular และ React ไปเรียบร้อย และตัว Docs ของทาง Vue ก็เขียนไว้ค่อนข้างดีและเข้าใจง่ายด้วยครับ (แน่นอนว่าแอดมินค่อนข้างชื่นชอบ Vue และให้น้ำหนักมาทางตัวนี้เป็นพิเศษ แต่เพื่อน ๆ ก็สามารถเลือกตัวไหนก็ได้ตามต้องการเลยครับ)

โดยลองมาดูทางบริษัทหรือผู้ที่ได้สร้างและพัฒนาเฟรมเวิร์คทั้ง 3 ตัวนี้ขึ้นมาครับ
Angular → Google
React.js → Facebook
Vue.js → Evan You

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

แต่ข้อแนะนำสำหรับมือใหม่เลยคือ อย่าเพิ่งกระโดดมาเรียนเฟรมเวิร์คแบบทันทีทันใด อย่าข้ามขั้นตอนครับ ถ้าเราข้าม เราจะติดและเรียนไม่รู้เรื่องแน่ สุดท้ายก็ต้องวนกลับไปเรียนพื้นฐานก่อนอยู่ดี เราจำเป็นต้องมีพื้นฐาน Javascript ก่อนครับ ก็เหมือนกับการเรียน Back-end Frameworks เช่น Flask หรือ Django ก็ต้องมีความเข้าใจพื้นฐานของภาษา Python ก่อนเสมอ

คำแนะนำในการเรียน Frontend

และอีกหนึ่งข้อแนะนำก่อนจะมาเรียน Javascript เพื่อเรียนรู้ Front-end Framework เพื่อพัฒนาด้าน UI & Web Design เราจำเป็นต้องศึกษาภาษาเหล่านี้(HTML และ CSS อาจไม่ใช่ภาษาโปรแกรมมิ่งที่แท้จริง แต่แอดมินขอพูดรวมไปด้วยเลยครับ) ตามขั้นตอน และเหล่านี้แอดมินขอสรุปไว้ตามลำดับ
1. HTML
2. CSS + Bootstrap
3. Javascrip (Fundamental)
4. Javascript Frameworks ง่ายสุดไปหายากสุด (เลือกได้เลยซักตัว แต่แนะนำ JQuery อันดับแรก+เลือกเอาซักตัว 3 อันหลัง)
- JQuery
- Vue.js
- React.js
- Angular

HTML

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

CSS + Bootstrap

ถัดมาจะเห็นว่า ในส่วนของข้อที่ 2 หลัง CSS จะมีการเพิ่ม Bootstrap เข้ามา ซึ่งตัว Bootstrap นั้นเป็น CSS Framework ที่พัฒนาโดย Twitter เป็นหนึ่งใน Front-end Framework ที่ได้รับความนิยมสูงสุด เนื่องด้วยข้อดีของมันคือ สามารถพัฒนาได้อย่างรวดเร็วและที่สำคัญเลยคือรองรับทุกหน้าจอหรือ Responsive Design นั่นเอง แต่ก็อาจจะมีจุดอ่อนเหมือนกันนั่นก็คือ ดูเป็น Template เดียวกันมีหน้าตาเว็บที่เราสร้าง จะไปคล้ายคลึงกับเว็บไซต์อื่น ๆ ที่ใช้ Bootstrap เหมือนกัน เพราะว่า Components หรือ Template มาจากแหล่งเดียวกันนั่นเอง และก็อาจจะ Customize ยากซักหน่อย จริง ๆ ก็ Override ได้แหละแต่ก็ต้องอาศัยประสบการณ์และลงมือลงแรงกันสักหน่อย

Credit photo: https://me.me/i/html-css-js-mr-website-dev-human-d6d432644b47443c9632d8115cf6dcce

JavaScript

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

ซึ่งในตอนนี้อย่างที่หลายท่านคงรู้ JavaScript ในสมัยนี้ไม่ได้ทำงานได้เพียงแค่ฝั่ง Frontend แต่ยังมี Node.js ที่เป็นที่นิยมในการทำ Back-end ด้วยเช่นกัน เรียกได้ว่า ศึกษา Javascript เพียงตัวเดียว สามารถทำได้ทั้ง Back-end และ Front-end จนกลายร่างไปเป็น Full Stack Web Developer ได้เลย แต่เดี๋ยวก่อน หลายคนคงแอบคิดว่าผมจะปันใจไปให้ Javascript ในการทำด้าน Back-end ด้วยเลยรึเปล่า คำตอบคือ ไม่ครับ ในความคิดยังคงมีแค่ Django และ Flask เพราะว่าจะนำ JavaScript มาใช้ในฝั่ง Frontend เท่านั้น

ครับสำหรับ JavaScript ง่ายอะไรเบอร์นี้ Ep.0 - Introduction ก็จบลงเพียงเท่านี้ครับ ซึ่งพออ่านมาจนถึงตรงนี้ผมเชื่อว่าทุกท่านคงจะพอมองภาพรวมกันออกแล้วครับ หลังจากนั้นเราก็ลุยไปพร้อม ๆ กันใน Ep.1 กันได้เลยครับ

ถ้าชื่นชอบบทความนี้หรือเห็นว่าเป็นประโยชน์ ก็อย่าลืมแชร์ไปให้เพื่อน ๆ ได้อ่านกันด้วยนะครับหรือไม่ก็กด Clap เพื่อซัพพอร์ตบทความนี้ หรือไม่ก็แลกเปลี่ยนความคิดเห็นกันได้ที่คอมเมนต์ด้านล่างเลยครับ

Sonny STACKPYTHON

ท่านสามารถติดตามพวกเราได้ที่ stackpython ตามช่องทางด้านล่างนี้ได้เลยครับ

Instagram: stackpython

Facebook: stackpython

Website: stackpython.co

YouTube: stackpython