เริ่มต้นเป็น Developer ง่าย ๆ ตอนที่ 1 ( Front-end )

หลายคนต้องการเป็นโปรแกรมเมอร์ แต่ไม่รู้จะเริ่มต้นอย่างไร เรามาเริ่มต้นเป็นโปรแกรมเมอร์กัน จะได้รู้ว่าตัวเองชอบจริง ๆ หรือ ชอบตามเทรนด์กันแน่…!

Photo by Emile Perron on Unsplash

การเริ่มต้นต้องรู้อะไรบ้าง????

โดยจะแยกออกเป็น 2 ตอนนะครับ ตอน 1 : Front-end ส่วนที่เราต้องรู้มีอะไรบ้าง เริ่มกันเลย.. → run..

Front-end คืออะไร

สำหรับนักพัฒนา หรือ Developer คือส่วนของหน้าบ้าน (User Interface : UI) ไม่ว่าจะเป็นหน้า โฮม หน้าเว็บ ลิ้งต่าง ๆ เป็นส่วนที่ผู้ใช้งานเห็น ซึ่งความสำคัญของ Front-end คือ ทำอย่างไรให้เว็บไซต์มีหน้าตาให้ได้รับความสนใจและการใช้งานสะดวกสบาย ทำให้ผู้ใช้งานประทับใจมากที่สุด ^_^

Front-end Developer ควรมีทักษะด้านใดบ้าง

• Web Designer
• Web Developer (Javascript, CSS, HTML5, JavaScript Frameworks )

ในที่นี้จะเน้นไปทาง Web Developer

Javascript ES6

Photo by Shahadat Rahman on Unsplash

Javascript จะมีการประกาศตัวแปร variable ไว้ 4 วิธีด้วยกัน

1. var

เป็นการประกาศตัวแปรแบบ global scope คือ ประกาศค่าและใช้ค่าร่วมกันได้

• จากตัวอย่าง การประกาศ i เป็นตัวแปรประเภท var ซึ่งเป็นการประกาศแบบ global scope จากบรรทัดที่ 9 หลังจากที่การทำงานของ loop for สิ้นสุด i ในบรรทัดที่ 9 ก็ยังจะเก็บค่าไว้ มีค่าเป็น 1 ซึ่งเกิดจากการทำงานของ loop for

2. let

การประกาศตัวแปรในรูปแบบ let จะเป็นการประกาศในรูปแบบ block scope จะอยู่ในขอบเขตที่เราทำการประกาศเท่านั้น

จากตัวอย่าง การประกาศ i เป็นตัวแปรประเภท let ซึ่งเป็นการประกาศแบบ block scope จากบรรทัดที่ 9 หลังจากการทำงาน Loop for เสร็จ ในบรรทัดที่ 9 ค่าของตัวแปร i จะไม่มีค่า

• จากตัวอย่าง การประกาศ i เป็นตัวแปรประเภท let ซึ่งเป็นการประกาศแบบ block scope จากบรรทัดที่ 9 หลังจากการทำงาน Loop for เสร็จ ในบรรทัดที่ 9 ค่าของตัวแปร i จะไม่มีค่า

3. const

การประกาศตัวแปรใหม่ ที่เพิ่มเข้ามาใน ES6 / TypeScipt ทำให้เราสามารถสร้างตัวแปรคงที่ได้ เพื่อความเป็นระเบียบของการเขียนโค๊ดได้สวยงามและง่ายมากขึ้น

• จากตัวอย่าง ตัวแปร news ที่ประกาศเป็นตัวแปรในรูปแบบ const จะไม่สามารถเปลี่ยนแปลงค่าได้เลย จะมีค่าคงที่เป็น 123 เสมอ

4. ไม่ระบุตัวแปร

เป็นการประกาศตัวตัวแปรไว้ข้างบนนอกสุด จะเป็นการประกาศในรูปแบบ global scope

• จากตัวอย่าง บรรทัดที่ 3-4 จะไม่มีการระบุชนิดของตัวแปร ในรูปแบบนี้เป็นการประกาศตัวแปรแบบ global scope เมื่อดูผลลัพธ์ บรรทัดที่ 7 และ 11 จะได้ ผลลัพธ์ คือ Volvo

HTML & CSS

Photo by Ilya Pavlov on Unsplash

HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) เป็นการเริ่มต้นในการเขียนเว็บไซต์ต่าง ๆ ที่มีหน้าตา สเกล รูปแบบต่าง ๆ เกิดจากการใช้ html และ css ในการพัฒนาขึ้นมาจนมาเป็นในรูปของเว็บไซต์

รูปแบบ HTML

รูปแบบ HTML + CSS

JavaScript Frameworks (AngularJS)

Photo by Luca Bravo on Unsplash

AngularJS เป็น JavaScript Framework ถูกพัฒนาจาก Google เพื่อลดการใช้งานของข้อมูลในเครื่อง Server ใช้ในการพัฒนาเว็บแอปพลิเคชั่นในรูปแบบ single-page application และยังสามารถรองรับการใช้งานกับภาษาทางด้านโปรแกรมอื่นๆได้หลากหลาย โดยการสร้าง Single-Page Application โดย AngularJS มีส่วนประกอบอยู่ 3 ส่วน ได้แก่

• HTML
• CSS
• Javascript

รูปแบบการใช้งาน AngularJS

โดยส่วนใหญ่จะใช้งานร่วมกับ Bootstrap จะกล่าวในตอนต่อไป ***