undefined ใน console ของ browser มาได้อย่างไร

เพื่อตอบคำถามว่า undefined
เมื่อสั่ง console.log(5); นั้น มาได้อย่างไร

undefined console in google chrome
undefined console in google chrome

http://www.thaiall.com/java/js01.htm

ก็คงต้องชวนอ่านเรื่อง และดูจากตัวอย่าง ต่อไปนี้

มีหลายวิธี
ในการเขียนโค้ด (code) และประมวลผล (run) การทำงานของโค้ดด้วยภาษา javascript อาทิ เขียนโค้ดแล้วบันทึกในแฟ้ม x.htm แล้วประมวลผลใน browser หรือ เขียนบน เว็บไซต์ที่บริการแบบ online หรือ เขียนโค้ดแล้วใช้ node.js เป็นตัวแปล (interpreter) หรือ เขียนใน console บน browser ซึ่งการเขียน code พื้นฐานและทดสอบใน console บน browser นั้น ถือว่าเป็นวิธีการที่ง่ายที่สุด เสมือนเขียน javascript บน IDE (Integrated Development Environment)

การเขียนใน console บน browser
หากเลือกใช้ chrome browser ก็เข้าสู่ console ด้วยการกด F12 หรือ Ctrl-Shift-I หรือเลือก Developer Tools จาก Menu bar จะพบหน้าต่างที่มีบริการหลายอย่าง อาทิ การเป็น inspector เพื่อดู sources, elements หรือดูค่าที่ปรากฎใน console หรือ รับคำสั่งประมวลผลใน console ซึ่งหน้าต่าง console มักรองรับการสั่งงานด้วยคำสั่ง console.log(…); เพื่อติดตามตรวจสอบ ตัวแปรที่ต้องการติดตาม เนื่องจากเว็บเพจมี javascript ในการประมวลผล หากต้องการทราบว่าข้อมูล ณ ตำแหน่งใด มีค่าใดแล้ว การใช้ console.log(…) จะเหมาะสมอย่างยิ่ง เพราะผลของคำสั่งนี้จะไม่แสดงผลใน webpage แต่จะแสดงผลใน console window ทำให้ทราบข้อมูลที่ต้องการ

ในกรณีรับคำสั่งประมวลผลใน console
หากส่งค่าให้คำนวณ เช่น 1 + 2 + 3 ก็จะ return 6 มาตามปกติ
แต่ถ้าใช้คำสั่ง console.log(1 + 2 + 3); มักพบคำว่า undefined ปรากฎขึ้นมาอีก 1 บรรทัดเสมอ เนื่องจาก console window มีหน้าที่หลัก เป็นพื้นที่ในการรองรับการประมวลผล และ return value
หากพิมพ์คำสั่งใด ก็ต้องมีการ return value เสมอ หากไม่ return value ก็จะทำการ return undefined ต่อท้ายทุกครั้ง และคำสั่ง console.log(..); ไม่มีการ return ค่าโดยตรง แต่เป็นการส่งค่ามาแสดงผลใน console window โดยตรง ซึ่งไม่ใช่การ return value

ตัวอย่างการทำงานใน console window กับการ return ค่า
ตามภาพการใช้คำสั่ง พบว่า ตัวอย่างที่ 1, 2 และ 6 จะ return ค่าให้ console ได้ปกติ ตัวอย่างที่น่าสนใจ คือ คำสั่งที่ 8 แม้จะพิมพ์เพียง ; คือ เสมือนไม่สั่งอะไรเลย ใน console window ก็ยังแสดงคำว่า undefined เพราะไม่มีการคืนค่าใด ตัวอย่างที่ 2 เป็นการประกาศ และกำหนดค่า จะมีการคืนค่าออกมา จึงแสดงเลข 5 เป็นผลลัพธ์ แต่ ตัวอย่างที่ 3 เป็นการประกาศค่า ที่ไม่คืนค่าหลังประกาศ เนื่องจากใช้ var จึงแสดง undefined ตัวอย่างที่ 4 และ 5 แม้ใช้ console.log() แต่การพิมพ์คำสั่งนี้โดยตรงใน console จะไม่คืนค่าให้ console window แต่แสดงผลทันที หากใช้คำสั่งนี้ใน javascript ก็จะส่งค่าให้กับ console window เพื่อแสดงผลได้ปกติ ซึ่งเป็นคนละสถานการณ์ ตัวอย่างที่ 6 สามารถรับคำสั่งได้หลายคำสั่ง แล้วทำทีละคำสั่ง แต่คำสั่งสุดท้ายต้องเป็นการคืนค่าโดยตรง จะสลับให้ console.log() อยู่บรรทัดสุดท้าย ก็จะพบคำว่า undefined เช่นเดิม

calculator on google
calculator on google

การใช้บริการ hosting บน firebase.com เบื้องต้น

หน้าแรกของ firebase
หน้าแรกของ firebase

เค้าว่า Firebase ดีอย่างนู้น อย่างนั้น อย่างนี้ ต้องลองจะได้เห็นกับตา
ก็อ่านมาแล้วว่าดีอย่างไร แต่สิบปากว่าไม่เท่าตาเห็น สิบตาเห็นไม่เท่าลงมือคลำ
1. เริ่มต้นกับการเข้าเว็บไซต์ firebase.com
2. คลิ๊กปุ่ม See our new website เพราะเค้าบอกว่าเค้าปรับไซต์ใหม่
3. คลิ๊กปุ่ม GET STARTED FOR FREE
4. พบหน้า Sign in ของ account.google.com แสดงว่า firebase เชื่อมกับ google
เหมือนกับเว็บไซต์มากมายที่เชื่อมกับ facebook เช่น chilindo.com เป็นต้น
ถ้าระแวงไม่กล้าใช้อีเมลของ gmail.com ก็แนะนำให้สมัครใหม่เลยครับ
แต่ผมว่าไม่มีอะไรนะครับ เพราะ url ด้านบนก็ชัดเจนว่าเชื่อมต่อกันถูกต้อง
5. เข้าหน้า Welcome to Firebase คลิ๊ก CREATE NEW PROJECT
Project name = “missgrand2016th”
Country/region = “Thailand”
แล้วคลิ๊ก CREATE PROJECT

https://missgrand2016th.firebaseapp.com
https://missgrand2016th.firebaseapp.com

6. คลิ๊ก GET STARTED ในหัวข้อ Hosting เพราะผมสนใจหัวข้อนี้
7. เค้าอธิบายว่า Deploy web and mobile web apps in seconds using a secure global content delivery network
แล้วมีปุ่มให้คลิ๊ก GET STARTD เพื่อยืนยันว่าเราเข้าไม่ผิดที่
เพราะตั้งใจ ปรับใช้ (deploy) ทั้ง web และ mobile web apps จริง ๆ
8. พบหน้า Set up hosting มี 2 ขั้นตอน คือ 1. Install และ 2. Deploy
เว็บแสดงคำว่า “$ npm install -g firebase-tools” ให้ดู
คลิ๊ก Continue
9. แล้วแสดงคำว่า
Sign in to Google: “$ firebase login”
Initiate your project: “$ firebase init”
Deploy your website: “$ firebase deploy”
คลิ๊ก FINISH
10. หน้า DASHBOARD แสดงคำว่า
https://missgrand2016th.firebaseapp.com
คลิ๊ก CONNECT CUSTOM DOMAIN
11. พบหน้า Connect custom domain มี 3 ขั้นตอน คือ 1. Add domain 2. Verify ownership 3. Go live
ไม่ต้องเข้าไปนะครับ ถ้ายังไม่มี domain name ที่จะเข้าไปเชื่อม
12. ไป download โปรแกรม Node.js
จาก https://nodejs.org/en/ แล้วติดตั้ง
ผมได้มารุ่น 4.4.7 สกุล .msi ขนาด 9.60 MB
แล้วอ่านคำแนะนำจาก http://www.artit-k.com/firebase-hosting/
เขียนโดย http://www.artit-k.com/author/Ethan/
13. บน Win8 ทำการ Search หา “Node.js command prompt” แล้วก็ run as administrator
จะพบหน้าต่างที่มี C:\Windows\system32>
14. พิมพ์คำสั่ง C:\Windows\system32>npm install -g firebase-tools ในหน้าต่าง Command prompt
มีรายงานออกมา 1 หน้า เป็นรายการ module ที่ติดตั้งไปทั้งหมด
15. พิมพ์คำสั่ง firebase login แล้วตามด้วย Y + Allow access
แล้ว sign in ผ่านระบบ account.google.com
พบหน้า Firebase CLI ต้องการ ก็ให้คลิ๊ก อนุญาต
จะพบหน้า Firebase login succeeded
มีคำว่า You’re now signed in to the Firebase CLI.
You may immediately close this window and continue using Firebase from the terminal.
ปิด browser แล้วกลับเข้า Command prompt
16. พิมพ์คำสั่ง d: แล้ว cd /firebase ซึ่งเป็นห้องที่สร้างไว้แล้วสำหรับงานนี้
แล้วพิมพ์คำสั่ง firebase init แล้วตามด้วย Y
แล้วกดปุ่ม enter ยืนยันบริการ database กับ hosting ที่เลือกไว้
แล้วกดลูกศรลง เลือก “missgrand2016th” แล้วกด enter
แล้วถาม database.rules.json ก็กด enter
แล้วถาม public directory ก็กด enter
แล้วถาม index.html ก็กด y
17. พบว่าใน d:\firebase มี 3 แฟ้ม
คือ .firebaserc , database.ruels.json และ firebase.json
แล้วใน d:\firebase\public พบ index.html
18. ลองเปิด https://missgrand2016th.firebaseapp.com
ยังพบคำว่า site not found เหมือนก่อนเข้า Node.js
19. พิมพ์คำสั่ง firebase deploy ซึ่งเป็นการอัพโหลดแฟ้มทั้งหมดไปยัง firebaseapp.com
ผลคือ Deploy complete ก็จะพบกับหน้าเว็บ

firebase in command promptfirebase in command prompt
20. หลังปรับปรุงแฟ้ม index.html และเพิ่มภาพเข้าไป 228 แฟ้ม
แล้วสั่ง firebase deploy ใหม่ ก็พบว่า Deploy complete อีกครั้ง
การสั่ง deploy แต่ละครั้งจะ upload แฟ้มทั้งหมดใหม่
เป็นการ deploy ใหม่หมด ไม่ได้ทำเฉพาะแฟ้มที่มีการ update

หน้าแรกของโฮมเพจที่ deploy แล้วหน้าแรกของโฮมเพจที่ deploy แล้ว
21. ถ้าลบ 227 ภาพในห้อง public เหลือแต่ index.html แล้วสั่ง firebase deploy ใหม่
ก็จะ upload และ update เฉพาะแฟ้ม index.html นั้น
ทำให้แฟ้มอื่นใน firebaseapp.com หายไปหมด เพราะถือเป็นการ upload ยกเซต

สถิติการ deployสถิติการ deploy
22. เวลาในการอัพโหลดผ่าน firebase deploy สำหรับ 228 แฟ้ม รวมขนาด 18 MB
ผ่าน ADSL ใช้เวลาประมาณ 2 นาทีครึ่ง นานขณะที่ preparing public directory
23. ต้องการใช้บริการควบคุม firebase ผ่าน browser
ก็พิมพ์คำสั่ง firebase open
24. การแสดงผลภาษาไทย แก้ไขผ่าน meta charset ไม่ได้
ต้องใช้ editor ทำการ save as .html เป็น utf8 แล้วการกำหนด charset จึงจะมีผล