สร้างเว็บ เริ่มตั้งแต่ 0 มันจะยากสักแค่ไหนกัน

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

เรื่องมันมีอยู่ว่า ผมอยากทำเว็บที่หน้าตาเหมือนเว็บนี้ www.theverge.com แต่อยากได้ฟีเจอร์ที่เป็นของตัวเองที่เว็บนั้นไม่มีด้วย ผมก็เลยลองหาธีมใน wordpress ดู แต่ปรากฏว่ามันหายากมากๆ อันที่ใกล้เคียงที่สุดก็ปรับแต่งยากด้วย (จริงๆธีม wordpress นอกจากสี มันปรับแต่งยากทุกอันแหละ) ก็เลยิดว่า พอละ Wordpress เนี่ย เรามาลองทำเว็บของตัวเองบ้างดีกว่า

ว่าแล้วก็ลองดราฟต์ดีไซน์เลย

พอดีไซน์เสร็จแล้วก็มาแบ่งสัดส่วนว่าตรงไหนควรจะแยก element ตรงไหนควรจะไว้ด้วยกัน

พอเสร็จแล้วก็มาถึงขั้นลงสี
*DISCLAIMER* ผมไม่ได้ใช้ Dreamweaver ในการเขียนเว็บ เพราะ UI มันรกเกินไป และ render engine ก็ไม่ตรงตามที่รันบนเบราส์เซอร์ด้วย หากใครจะลองทำตามดูก็ได้ แต่บอกไว้ก่อนว่า ไม่มีการลากวางนะครับ

แต่ก่อนที่จะลงสี เราก็ต้องมีเทมเพลทก่อน ผมก็เลยสร้างไฟล์ .html โง่ๆมาไฟล์นึง แล้วก็ใส่ element ที่แบ่งไว้คร่าวๆลงไป จากนั้นก็ถึงคราวที่จะลงสีจริงๆแล้ว

ภาษาที่ผมจะใช้ในนี้มีทั้งหมด 5 ภาษาด้วยกัน แต่ในโพสนี้ เห็นว่าเพิ่งจะเริ่มต้น ก็เลยขอพูดถึงแค่ 3 ภาษาก่อนละกัน สำหรับหน้าเว็บ หรือภาษาเดเวล็อปส์เตอร์ เอ้ย เดเวค็อปเปอร์ เอ้ย เดเวล็อปเปอร์ เอ้ย ถูกแล้ว ที่พวก developer เรียกกันก็คือ front-end (ฟร้อนต์เอ็นด์) ประกอบด้วย 3 ภาษาหลักๆ คือ HTML CSS และ JavaScript ส่วนใครที่จะใช้ Pug กับ Sass แทน HTML กับ CSS ก็แล้วแต่ ผมศึกษามาแค่นี้ ก็เขียนตามนี้แล้วกัน
ก่อนอื่น มารู้จักกับ IDE สุดเก่งของผมก่อนเลย

*IDE หรือ Integrated Developing Environment หรือที่เข้าใจกันแบบชาวบ้านๆเลยก็คือโปรแกรมที่เอาไว้เขียนโปรแกรมนั่นแหละ

จริงๆมันเป็นแค่ text editor เหมือน notepad นั่นแหละ แต่ว่ามันเก่งกว่าโน้ตแพ็ดหน่อยนึงก็คือ มันไฮไลต์ syntax หรือ ประโยคคำสั่งสำหรับสั่งให้คอมพิวเตอร์ทำงานบางอย่าง ให้ตามประเภทของคำสั่งและตามภาษาที่เราใช้เขียน ซึ่งตัวนี้เจ๋งมากๆ มันรู้จักแทบจะทุกภาษาที่ฮิตๆเลย ข้อเสียของมันก็คือ มันคอมไพล์ภาษาที่ต้องการคอมไพล์เลอร์อย่าง C, C++, C#, Java ไม่ได้ มันก็เลยเหมาะที่จะมาใช้เขียนเว็บมากกว่า

ขอแนะนำ โปรแกรมที่ผมใช้เขียนเว็บมาตลอด 3 ปี จากทีมผู้สร้าง Github มันคืออออ… Atom นั่นเองครับ
ข้อดีของมันก็คือ มันเบา และเราสามารถ customize มันได้ ใส่ธีมสีๆ หรือติดตั้งปลั๊กอินให้มันเก่งขึ้นไปอีกก็ทำได้ อีกอย่างหนึ่งก็คือ มันรองรับการพัฒนาร่วมกับ version control อย่าง github หรือ ค่ายอื่นอย่าง bitbucket ด้วย
พูดไปก็เหนื่อยเปล่า เรามาลองเขียนกันเลยดีกว่า

ก่อนที่ผมจะเริ่มสร้างโปรเจคผมก็จะ new folder มาก่อน เพื่อเก็บไฟล์ในโปรเจคทั้งหมด จากนั้น ผมเพิ่งจะเรียนรู้มาว่า เวลาเรารันเว็บเนี่ย มันจะหาไฟล์ชื่อ index.html ก่อน เพราะฉะนั้น เราจะเริ่มจากไฟล์ที่ชื่อ index.html
แล้วพอเราเริ่มพิมพ์คำว่า html มันก็จะขึ้น suggestion ให้ว่า เราจะเรียกใช้ประโยคนี้หรือเปล่า พอเรากด enter หรือ return บน mac มันก็จะเปลี่ยนเป็นประโยคเต็มให้เลย ทำให้ประยัดเวลา และลดการพิมพ์ผิดได้เยอะเลย

จากนั้นผมก็จะสร้างไฟล์ใหม่ชื่อว่า desktop.css เพราะนี่จะเป็นรูปแบบสำหรับ desktop ส่วนรูปแบบสำหรับแท็บเล็ต มือถือ ฯลฯ ผมก็จะแยกเป็น tablet.css, mobile.css ฯลฯ เพื่อให้ง่ายเวลาแก้ไข
เสร็จแล้วเราก็พิมพ์ link ไปที่ไฟล์ html มันก็จะ suggest มาให้เราว่า เราต้องการใส่ stylesheet ใช่ไหม ซึ่งมันเป็นสิ่งที่ผมต้องการ ณ ขณะนี้ ผมก็กด enter แล้วก็แก้ไขชื่อไฟล์ที่เราจะเรียก
จากนั้น ในไฟล์ desktop.css ก็เริ่มกำหนด style ให้แต่ละ element โดย class จะแทนด้วย . แล้วตามด้วยชื่อคลาส ส่วน id จะแทนด้วย # แล้วตามด้วยชื่อ id
สิ่งที่ผมสงสัยตอนเริ่มเขียน css ใหม่ๆก็คือ แล้วมันต่างกันยังไง ใส่แค่ id เฉยๆ หรือ class เฉยๆไม่ได้หรอ คำตอบก็คือ ได้ แต่ข้อแตกต่างก็คือ ตอนเราเอาไปใช้กับ javascript แล้ว เวลามันเรียก element มันจะเรียกจาก class หรือ id หรือชื่อ tag ก็ได้ แต่เวลาเรียกจาก id มันจะเรียกได้เฉพาะ element ตัวแรกที่ใช้ id นั้น ส่วน class มันจะเรียกขึ้นมาทีเดียวทุกตัวเลย แล้วเก็บไว้เป็นรูปแบบของ array แล้วก็ให้เราเลือกเองได้ทีหลังว่าจะเอาตัวไหน. ใน element นึง เราสามารถใส่ class ได้หลายตัว โดยแบ่งด้วยเว้นวรรค ส่วน id เราควรจะใช้ 1 id ต่อ 1 element และ vice versa

เอาล่ะ พอเสร็จแล้วเราก็จะได้หน้าเว็บแบบ static มา 1 หน้า ซึ่งตอนนี้มันยังทำอะไรไม่ได้นอกจากแสดงผลสิ่งที่เราพิมพ์ไปมาให้ดู
แล้วถ้าเราจะทำให้ปุ่มมันเปลี่ยนไปมาเวลาเอาเมาส์ไปชี้หรือคลิ๊ก ทำยังไง
มี 2 วิธี วิธีแรก ใส่ selector ที่ชื่อ hover และ focus ให้กับ element นั้นๆ จากนั้นเราก็กำหนดว่าเวลาเอาเมาส์ไปชี้มันควรจะมีหน้าตาเป็นยังไง ซึ่งข้อดีของวิธีนี้ก็คือ เราไม่ต้องไปวุ่นวายกับ javascript แต่มันก็จะทำได้แค่ตัวมันเอง มันไม่สามารถไปบังคับให้ element อื่นเปลี่ยนตามมันได้ ทำมีให้วิธีที่ 2 ก็คือ เพิ่ม attribute ที่ชื่อ onmouseover กับ onmouseout แล้วก็ onclick ให้กับ element นั้นๆ และในแต่ละ attribute ก็ใส่ฟังก์ชั่น javascript ลงไป เช่น hover(this) หรือ leave(this) ซึ่งเดี๋ยวเราจะมาอธิบายตรงนี้กัน

วิธีนี้จะทำให้เราสามารถสั่งให้หน้าเว็บทำอะไรก็ได้ ตั้งแต่เปลี่ยนหน้าตาของหน้าเว็บ ไปจนถึงโหลดข้อมูลจากแหล่งข้อมูลอื่นๆมา หรือแม้แต่คำนวนอะไรบางอย่าง ซึ่งเวลาที่เราจะเรียกใช้ฟังก์ชั่น เราก็ต้องประกาศฟังก์ชั่นก่อน ซึ่งการประกาศฟังก์ชั่น ก็ต้องทำที่ส่วนของ javascript จะฝังไว้ในหน้า html เลย หรือจะแยกออกมาเหมือน css ก็ได้

การประกาศฟังก์ชั่นก็ตรงไปตรงมา ก็คือ function functionName(){} ซึ่ง javascript ไม่บังคับให้กำหนด return type เหมือน java ทำให้ค่อนข้างที่จะ flexible เวลาเขียน เพราะไม่ต้องคิดมาก คิดอะไรไม่ออกก็ function functionName(){} ไปก่อน จะ return หรือไม่ก็ค่อยว่ากัน เหมือนๆกับเวลาประกาศตัวแปร ที่เวลาเราคิดอะไรไม่ออกก็ var ไว้ก่อน มันเก็บได้ทุกอย่างแหละ แม้กระทั่ง array หรือฟังก์ชั่นเองก็ได้ (แต่อย่าเลย เดี๋ยวจะมึนหัวเอา) จะให้มันเก็บอะไรก็ค่อยว่ากัน
มาต่อกันตรงที่เราค้างเอาไว้ ทำไมชื่อฟังก์ชั่น hover() ถึงมี this อยู่ข้างในวงเล็บ? เพราะว่า this ในภาษา javascript หมายถึง ตัวเอง element ที่เรียกฟังก์ชั่นนี้ แล้วเวลารับ เราก็ต้องมีพารามิเตอร์มารับมันด้วย
แล้วเวลาเราเขียนโค้ดมันจะง่าย เพราะจะได้ไม่ต้องทำโค้ดใหม่ให้กับทุกๆปุ่มที่จะใช้

จากนั้น พอเราเขียนทั้ง 3 ส่วนได้แล้ว เราก็จะได้หน้าเว็บที่ interactive หรือตอบโต้กับเราได้
ดูตัวอย่างของเว็บจากโค้ดที่ผมเขียนไปได้ที่ http://app.nonther.com/preview/tutorial1
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้เวลาจะดูโค้ด สำหรับ mac: กด command + option + I | สำหรับ Windows: กด F12 หรือ ctrl + shift + I เพื่อเปิด Web Inspector
แต่แค่นั้น มันยังไม่ทำให้เว็บทำงานได้จริงๆหรอก เพราะมันยังต้องมีส่วนที่จำเป็นต้องโหลดข้อมูลอีก ไหนจะจัดการข้อมูลที่จะเพิ่มขึ้นมาเรื่อยๆ ที่ผมอธิบายไปตั้งแต่ต้นเพิ่งจะได้แค่ 1% ของทั้งโปรเจคเอง ไว้เดี๋ยวคราวหน้าจะมาพูดถึง library ของ javascript เพราะมันเป็นหัวใจสำคัญของการทำเว็บยุคใหม่เลยล่ะ

Appendix:
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้Tag คือส่วนหนึ่งของ html มี 2 แบบ คือแท็กที่ไม่ต้องปิด กับแท็กที่ต้องปิด แท็กที่ไม่ต้องปิดมีหน้าตาประมาณนี้ <img src=“image.jpeg”> ส่วนแท็กที่ต้องปิดมีหน้าตาประมาณนี้ <div></div>
Attribute คือส่วนประกอบของแท็ก มีหน้าที่ระบุข้อมูลเพิ่มเติมของ tag เช่น class, id, src
Element คือ ชิ้งส่วนหนึ่งชิ้นในหน้า html ที่ถูกสร้างขึ้นด้วย แท็ก
Selector คือ ซินแท็กซ์หนึ่งใน css ที่ใช้เลือก element ที่มีชื่อ class หรือ tag เหมือนกัน
Parameter คือ ตัวแปรของฟังก์ชั่นที่รับค่ามาตอนที่เรียกใช้ เช่น printf("hello world"); printf เป็นฟังก์ชั่น "hello world" เป็นพารามิเตอร์
Static page คือ หน้าเว็บนิ่งๆที่ไม่ได้ทำอะไร
Interactive page คือ หน้าเว็บที่สามารถตอบโต้กับผู้ใช้ได้