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

ชอบภาพใน Spotlight บน Windows 10

เปิดคอมพิวเตอร์ขึ้นมาทีไรก็เห็นภาพสวย
ตรวจสอบ พบว่า
เป็นบริการ Spotlight ใน Windows 10
ก็อยากเก็บไว้เป็นที่เป็นทาง
เปิดดูวิธีการใน https://www.beartai.com/beartai-tips/74769
กับอีกหลายคำแนะนำในหลายเว็บไซต์ ก็อยากทำบ้าง
แต่อยากให้ง่ายกว่าที่อ่านมาหน่อย
แบบ one click แล้ว ผ่าน batch file แล้วได้เห็นภาพเลย

ขั้นตอนการใช้ batchfile
1. Right click บน link
http://www.thaiall.com/assembly/myspotlight.bat
หรือ
https://raw.githubusercontent.com/thaiall/programming-page/master/batch/myspotlight.bat
แล้ว Save link as ไปไว้ที่ Desktop

2. เปิด Windows Explorer เลือก Desktop
แล้ว Double click เพื่อ run myspotlight.bat
ถ้า Windows protected your PC ขึ้นมาเตือน
ให้เลือก More info
แล้วคลิ๊ก Run anyway

3. ถ้าทุกอย่างเรียบร้อย
โปรแกรม Windows explorer จะเปิดภาพแรกขึ้นมา
และเปิด Folder ที่เก็บภาพทั้งหมดให้

 

สรุปว่า
ผมเขียน Batch file ชื่อ myspotlight.bat
ทำหน้าที่คัดลอกแฟ้มภาพ ที่เก็บไว้อยู่แล้ว
ไปวางไว้ในห้อง myspotlight บน desktop
แล้วเปลี่ยนชื่อ และเลือกมา เฉพาะแฟ้มภาพใหญ่ที่ขนาดเกิน 100KB

บริการนี้เป็นของ Windows 10
ตรวจสอบบริการ โดยกด Right click บน Desktop
เลือก Personalize, Lock screen,
Background Preview = “Windows spotlight

Windows Spotlight is a feature included by default in Windows 10 that downloads pictures and advertisements automatically from Bing and displays them when the lock screen is being shown on a computer running Windows 10. Users are occasionally given an opportunity to mark whether they wish to see more or fewer images of a similar type, and sometimes the images are overlaid with links to advertisements. In 2017, Microsoft began adding location information for many of the photographs.
https://en.wikipedia.org/wiki/Windows_Spotlight

ตัวอย่างการใช้คำสั่ง rename
https://technet.microsoft.com/en-us/library/bb490987.aspx
ตัวอย่างการเขียน for
https://www.microsoft.com/resources/documentation/windows/xp/all/proddocs/en-us/for.mspx?mfr=true
ตัวอย่างการเขียน goto
https://stackoverflow.com/questions/37515901/where-does-goto-eof-return-to

https://gist.github.com/thaiall/ebf9a005fa322f559c0f04960fe727b9

ใช้ bootstrap ทำเมนูไว้ใช้งาน

Bootstrap อาจแปลว่า สิ่งที่ช่วยทำให้ง่ายขึ้น หรือ สิ่งที่ทำได้ด้วยตัวเอง

Bootstrap คือ Front-end Framework ที่ช่วยพัฒนาเว็บไซต์ได้เร็วขึ้น ง่ายขึ้น
ซึ่ง Bootstrap มีเครื่องมือหลักให้ 4 อย่าง คือ
1) Scaffolding หรือ Grid system ช่วยจัด column และ row บน screen เพื่อจัด Layouts
2) Base CSS ช่วยจัด form, table, icons หรือ buttons
3) Components ช่วยจัด Navbar หรือ Pagination หรือ Progress bars หรือ Media object
4) JavaScript ช่วยจัด Dropdown, Tab, Popover, Collapse, Carousel

มีตัวอย่างการเรียกใช้ที่ http://www.thaiall.com/web2

เมนูคอมพิวเตอร์ ก็คล้ายกับเมนูอาหาร มีตัวเลือกมากมายให้เลือกสั่ง ต้ม ผัด แกง ทอด ไอศครีม เมนูคอมพิวเตอร์ที่คุ้นตาก็จะมี file, edit, view, help เป็นต้น นักพัฒนา (Developer) จะเลือกเครื่องมือจัดเมนูให้ผู้ใช้ (User) เข้าถึงบริการต่าง ๆ ที่พัฒนาขึ้น ต่อไปเป็นตัวอย่างการทดสอบ menu  ทั้ง 6 แบบ ที่ใช้ bootstrap กับ Java script ข้างนอก และเขียนเอง
ซึ่งแชร์ source code 6 แบบ

ขั้นตอนการทดสอบ ให้เห็นภาพเมนู มีดังนี้
1. download clone (repository)
จาก ใน https://github.com/thaiall/programming-page
ได้แฟ้ม programming-page-master.zip
เมื่อวันที่ 28 กันยายน 2560 มีขนาด 4,713,347 bytes

2. start โปรแกรม apache ใน xampp

3. unzip แฟ้มในข้อแรก
ได้ห้อง programming-page-master
แล้วย้าย folder นี้ไปไว้ใน c:\xampp\htdocs

4. เปิด menu แบบที่ 1
ด้วย http://localhost/programming-page-master/php/menu01.php
จนถึง menu06.php
ซึ่งทั้ง 6 แบบทำงานแบบ client-sided script

https://gist.github.com/thaiall/8e2a113c7cde54d4e18c217ba3dd8dae

 

5. พบว่า menu01.php – menu03.php ใช้ bootstrap

6. พบว่า menu04.php ใช้ javascript ของ DHTML Menu version 3.3.19

7. พบว่า menu05.php ใช้ jqueryui.com

8. พบว่า menu06.php เขียน javascript และ css ใช้เอง

มีหน้าตาของ Menu ทั้ง 6 แบบ ดังนี้

menu01.php
menu01.php
menu02.php
menu02.php
menu03.php
menu03.php
menu04.php
menu04.php
menu05.php
menu05.php
menu06.php
menu06.php
signin.php
signin.php

 

ข้อมูลเปิด (Open Data) และเกี่ยวกับ data.go.th

ข้อมูลเปิด (open data)
ข้อมูลเปิด (open data)

Open Data

.. เคยอ่านวัตถุประสงค์ของ data.go.th แล้วก็ชื่นชม
ข้อแรก คือ ทำให้ผู้ใช้บริการทั้งภาคประชาชน ภาคธุรกิจเอกชน รวมถึงหน่วยงานของรัฐ  สามารถค้นหาและเข้าถึงข้อมูลที่มีคุณภาพของภาครัฐได้ง่าย ข้อมูลที่เปิดให้ Download จากเว็บไซต์พบว่า มีหลายรูปแบบ อาทิ excel, json และ xml แล้วบรรทัดสุดท้ายของหน้า About พูดถึง ข้อมูลเปิด ว่าจะช่วยเพิ่มประสิทธิภาพของการให้บริการ แล้วยังช่วยลดค่าใช้จ่ายของหน่วยงานราชการได้

ท่านที่สนใจก็เข้าไปสืบค้นข้อมูลกันได้นะครับ
ที่ https://data.go.th/About.aspx

สำนักงานรัฐบาลอิเล็กทรอนิกส์ (องค์การมหาชน) (สรอ.)

[เพิ่มเติม]
เกี่ยวกับข้อมูล Data ผมก็สนใจจึงทำโฮมเพจไว้หลายหน้าที่เกี่ยวข้อง ดังนี้

http://www.thaiall.com/xml

http://www.thaiall.com/ajax

http://www.thaiall.com/lampang/index.php

http://www.github.com/thaiall

[Top Open Data]

ข้อมูลที่ถูก Download มากที่สุด คือ พิกัดตำบลจาก data.go.th
วันที่ 25 กันยายน 2560 พบมีคนเข้าชม จำนวนการเข้าชม 46423 ครั้ง
เป็นข้อมูลขอบเขตการปกครอง ของ กรมการปกครอง

ได้แฟ้มพิกัดตำบลของทั้งประเทศ
จำนวน 7768 รายการ จาก data.go.th มาในแฟ้ม tambon.xlsx
แล้วแปลงเป็น csv แต่เรียงตามรหัสตำบลเก็บในแฟ้ม tambon.csv
เลือกเฉพาะลำปางได้ 97 ตำบล เก็บในแฟ้ม tambon_lampang.csv
นับจาก tambon.xlsx ด้วย pivot table ในลำปางมี 97 ตำบล
สรุปว่ายืนยันข้อมูลว่าตรงกับรายการข้อมูลที่มีจริงใน tambon_lampang.csv
ตรวจตำแหน่งของ ต.ศาลา อ.เกาะคา จ.ลำปาง
พบว่า latitude,longitude ไปตกกลางทุ่งนา
หลังศูนย์แสดงสินค้าเซรามิกและหัตถอุตสาหกรรม จังหวัดลำปาง
ห่างทางหลวงไปหลายร้อยเมตร

ทั้งหมดเก็บไว้ที่ https://github.com/thaiall/lampang

อยากแก้ไข source code ของเราในเครื่องเราที่อยู่ใน Github.com เริ่มจาก pull แล้วค่อย push

ทบทวนกันนิดนึง  .. ก่อนไป clone vscode ของ microsoft
ปัจจุบันมีบัญชีใน Github.com แล้วอยากแก้ไข code ทั้งของเรา และของเขา บนเครื่องคอมพิวเตอร์ของเรา ถ้าเป็นของเราก็ push กลับไปได้ เริ่มจาก pull มาในเครื่องเรา พอแก้ไข code เสร็จ ก็ push กลับเข้าไป

clone vscode
clone vscode

มีขั้นตอนดังนี้

1. ติดตั้ง git หา Download
ได้ที่ https://git-scm.com/download

2. เข้า cmd หรือไม่ก็ใช้ Atom editor เป็นอีกทางเลือกนึง
สร้างห้องเตรียมรับ repository ที่จะดึงมาแก้ไข
อาทิ d:\git\mygitfriends
แล้ว cd d:\git\mygitfriends

3. พบห้อง DOS> หลัง run cmd
เคยเล่าขั้นตอน 9 ข้อใน http://www.thaiall.com/blog/burin/8875/
หรืออ่านเพิ่มเติมที่ https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes
วันนี้สั้นหน่อย แบบรวบรัด
DOS> git init
DOS> git config –global user.email “test@test.com”
DOS> git config –global user.name “test”
DOS> git remote -v เพื่อดูว่าเชื่อมต่อทิ้งไว้แล้วหรือไม่ จะได้ไม่ซ้ำ เช่น burin
DOS> git remote remove burin แค่นี้ก็ล้างข้อมูลที่เคยเชื่อมต่อไว้ แต่ folder ไม่หายนะครับ
DOS> git remote add mytest https://github.com/thaiall/mygitfriends.git
DOS> git pull mytest master ก็ดึง branch:master ตามลิงค์ข้างต้นมาในเครื่อง ต่อไปก็เรียก mytest
ข้อมูลมาเยอะเลย ไม่ถาม user & password เพราะเป็น public และมีรูปนึกศึกษาเพียบเลย
DOS> notepad README.md
แล้วเพิ่ม This is my test on 16 september 2017. ต่อท้ายไปอีก 1 บรรทัด
เอาละ Mission complete แล้วนะ ต่อจากนี้ก็ push ล่ะ
DOS> git add README.md
เพื่อให้ git รู้ว่ามีรายการเปลี่ยนแปลง คือ “แฟ้มนี้นะ ที่ส่งเข้าประกวด”
DOS> git commit -m “i want to write lesson at http://www.thaiall.com/blog
DOS> git push -u mytest master
ผมเลิกใช้คำว่า origin จะได้ไม่สับสน เพราะเราใช้อะไรก็ได้ ไม่ต้อง origin
จากนี้ก็จะลบข้อมูลการทดสอบทิ้งหละครับ เพราะ Mission complete
เนื่องจาก login github.com ไว้แล้ว เมื่อ push ก็ไม่ถาม user & password อีก

4. ถ้าต้องการ project ใน github.com ไม่ต้อง pull ก็ได้
ใช้ clone เพื่อ download ลงมาเลย แบบนี้แก้แล้ว push กลับไม่ได้นะครับ
เริ่มต้นก็ลบทุกอย่างใน current directory ก่อน clone อะไรมาได้ ก็จะได้รู้

4.1 แบบ pull
เริ่มจากกำหนดชื่อ branch อาทิ mytest ในเครื่องเรา ที่จะเชื่อมกับ branch master
แบบนี้คล้ายกับ clone แต่หวังจะ push ถึงได้ใช้ pull
DOS> git init
DOS> git remote add mytest https://github.com/thaiall/mygitfriends.git
DOS> git pull mytest master
มาเลย

4.2 แบบ clone ไม่ต้องอะไร สั่ง git clone ตามด้วย url ก็มาเลย
ไม่ต้องสั่ง git init ก็ได้ download มาเลย แล้วสร้าง Folder แยกให้
DOS> git clone https://github.com/schacon/ticgit
DOS> git clone https://github.com/thaiall/mygitfriends
DOS> git clone https://github.com/toyoshim/SyobonAction
DOS> git clone https://github.com/Microsoft/vscode
ถ้ารอ download นาน แล้วอยากยกเลิก ก็กด Ctrl+C หรือ close window

น้องวงศ์แชร์แนวคำถาม ในกลุ่มโปรแกรมเมอร์ไทย ลองแกะ for ดู

ตอน i=9 ไล่ ascii ผิดครับ ภาพนี้แก้ไข
ตอน i=9 ไล่ ascii ผิดครับ ภาพนี้แก้ไข

<introduction>
อ่านโจทย์ที่น้อง Wongsakorn แชร์มาในกลุ่มสมาคมโปรแกรมเมอร์ไทย
บอกว่าเป็นแนวข้อสอบที่ ม. เห็นแล้วก็สนใจ สมาชิกเข้าไปเม้นท์เพียบ
https://www.facebook.com/groups/ThaiPGAssociateSociety/
มาโปรแแกรมเดียวแต่มี 12 คำถาม
เท่าที่ดูเป็นภาษา C ปรับเพิ่ม include แล้วเอาไปลองที่ jdoodle.com ได้
https://www.jdoodle.com/c-online-compiler
</introduction>

https://gist.github.com/thaiall/3f682a040fa1ebdd5d68dcbdede05750

<question>
คำถาม 12 ข้อมีดังนี้
1. loop for ทำงานกี่รอบ
2. ถ้า i=9 แล้วค่า t1 คืออะไร
3. ถ้า i=9 แล้วค่า s2[9] คืออะไร
4. ถ้า i=5 แล้วค่า t1 คืออะไร
5. ถ้า i=5 แล้วค่า t2 คืออะไร
6. ถ้า i=1 แล้วค่า t1 คืออะไร
7. ถ้า i=1 แล้วค่า t2 คืออะไร
8. ถ้า i=1 แล้วค่า s2[1] คืออะไร
9. ถ้าออก for แล้วค่า i คืออะไร
10. ถ้าออก for แล้วค่า sum คืออะไร
11. ถ้าออก for แล้วค่า s1[1] คืออะไร
12. ถ้าออก for แล้วค่า s2[7] คืออะไร
</question>

<process>
1. ดู code แล้วก็ต้องลองนำไป compile
เพราะถ้าตอบแล้วก็อยากพิสูจน์คำตอบ ว่าใช่หรือไม่
สุดท้ายแล้ว ผมก็ไม่ได้แก้ code ให้เฉลยตามโจทย์
เพราะดูผลจาก excel ก็น่าจะได้คำตอบครบแล้ว
แต่อาจนับผิดตำแหน่งใน Ascii table นั่นก็เป็น human error หละครับ

2. ลอง code ภาษา C
ที่ https://www.jdoodle.com/c-online-compiler

3. source code ไม่ได้มีเฉพาะ while, for และ variable
แต่มี function เข้ามาเกี่ยวข้อง ตัวแปรแบบ Array of character
และการตรวจสอบค่าก็เกี่ยวกับ Ascii table ชัดเจน
https://www.cs.bu.edu/teaching/cpp/string/array-vs-ptr/

4. ค่าของ Array of character และ strlen
ทดสอบ code กันก่อน ไปดู code จริง

#include <stdio.h>
 #include <string.h>
 void main() {
 char var1[] ="abcdef"; // strlen คืนค่า 6
 char var2[5] = "abc"; // size of the array is determined at compile-time
 char var3[5] = {'a', 'b', 'c', '\0'};
 char var4[3] = "abc";
 printf("%zu\n %zu\n",strlen(var1),strlen(var2)); //6 3
 printf("%zu\n %zu\n",strlen(var3),strlen(var4)); //3 3
 printf("%zu\n %s\n %c\n %c\n",strlen(var3),var4,var4[0],var4[2]); //3 abc a c
 // http://www.cplusplus.com/reference/cstdio/printf/
 // var1 = "abc"; can not do this for array of character in c language
 }

5. ฟังก์ชัน strcmp กับ strcat กับ strcpy
ทดสอบ code กันก่อน ไปดู code จริง
https://www.tutorialspoint.com/c_standard_library/c_function_strcmp.htm

void main() {
 #include <stdio.h>
 #include <string.h>
 void main() {
 char var1[] ="abcd";
 char var2[5] = "abc";
 char var3[5] = "ABC";
 char var4[2] = {'a','\0'};
 char var5[2] = {'0','\0'}; //
 if(strcmp(var1,var2)>0) printf("true"); else printf("false"); // true : [3] 100 > 0
 if(strcmp(var2,var3)>0) printf("true"); else printf("false"); // true : [0] 97 > 65
 if(strcmp(var3,var4)>0) printf("true"); else printf("false"); // false : [0] 65 > 97
 if(strcmp(var4,var5)>0) printf("true"); else printf("false"); // true : [0] 97 > 30
 if(strcmp(var5,var1)>0) printf("true"); else printf("false"); // false : [0] 30 > 97
 strcpy(var4,var2); // var4 replaced by var2
 if(strcmp(var2,var4)==0) printf("true"); else printf("false"); // true : [0] abc = abc
 printf("%s %s",var2,var4); //abc abc
 strcpy(var5,var1); // var5 replaced by var1
 printf("%s %s",var1,var5); //abcd abcd
 strcat(var3,var4); // var3 = var3(ABC) + var4(abc) = ABCabc
 printf("%s %s",var3,var4); //ABCabc abc
 }

6. โปรแกรมนี้ใช้ mod ด้วย
ทดสอบ code กันก่อน ไปดู code จริง

char var1[] ="abcd";
printf("%i",var1[0] % 2); // 1
printf("%i",var1[1] % 2); // 0
printf("%i",var1[2] % 2); // 1

ในโจทย์ต้อง mod y คือตัวที่ 25 ในภาษาอังกฤษ น่าจะ mod 2 แล้วได้ 1 นะ

7. มีคำถามเรื่อง i ที่ออกจาก for แล้ว
ภาษา c จะคำนวนค่า i แล้วเปรียบเทียบ
ดังนั้นค่า i จะเป็นค่าที่อยู่นอกเงื่อนไขของ for

int i;
for(i=5;i>0;i=i-2) {}
printf("%i",i); // -1

8.มีคำถามหนึ่งที่เค้าไม่ได้ถาม แต่ผมสงสัย
คือ char ที่ไม่มีค่า หาก -1 จะได้เท่าใด คำตอบ คือ -1 เหมือนเดิม
เพราะค่าที่จองไว้ default เป็น 0 หมด
แต่ถ้าพิมพ์ค่าที่เกินจากที่จอง โปรแกรมไม่ error แต่เอาที่ไหนมาก็ไม่รู้
เช่น v[20] ออกมาเป็น 55 นั่นหละครับ

char v[10] = "abcde";
v[9] = v[9] - 1;
printf("%i %i %i %i %i",v[1],v[5],v[6],v[9],v[20]); // 98 0 0 -1 55

9. ถ้าเข้าใจฟังก์ชันทั้ง 4 แล้วก็เหลือแต่วน loop
ปกติก็จะทำเป็นตารางแบบ excel มี header แยก column ตามตัวแปร หรือตามชอบ
row ก็เป็นค่าของ i เท่าที่ดู code ก็ไม่เปลี่ยนค่า i กระทันหัน วนจนจบเลย
จากนี้ผมจะไปเปิด excel ช่วยล่ะครับ

10. สรุปว่าคำตอบทั้งหมด ผมไม่ได้ตอบนะ
แต่ดูจาก excel ที่ได้จากการไล่ค่าใน loop
ซึ่งเก็บเรื่องนี้ไว้ไปเล่าต่อ หากมีโอกาสน่ะครับ
เพราะผมเล่า for ซ้อน for กับ mod แค่นั้นก็เหนื่อยล่ะ
</process>

ภาพนี้ไล่ลำดับ i=9 ผิด ทำภาพมาใหม่อยู่ด้านบน
ภาพนี้ไล่ลำดับ i=9 ผิด ทำภาพมาใหม่อยู่ด้านบน

MDB Viewer Plus สำหรับเปิดแฟ้ม .mdb หาก Microsoft Access รุ่นใหม่เปิดไม่ได้

MDB Viewer Plus คือ โปรแกรมช่วยในการเปิดแฟ้ม .mdb ที่สร้างมาจาก Microsoft Access 97 สามารถ download รุ่น Portable มาใช้ได้
ใช้โปรแกรมนี้เปิด NorthWind.mdb โดยคลิ๊ก Menu bar, File, Open แล้วเลือกแฟ้มก็จะเปิดตารางทั้งหมดมาให้เห็น สามารถเลือก Menu bar, Table, Export table เป็นแฟ้มแบบ .csv หรือ .xml เป็นต้น หรือ Menu bar, Table, Generate SQL – Create และทดสอบ Execute คำสั่ง SQL ได้

MDB Viewer Plus is a freeware viewer plus editor for opening Microsoft Access MDB and ACCDB database files. It does not need to be installed to run. It uses Microsoft Data Access Components (MDAC) which is installed as part of Windows.
http://www.alexnolan.net/software/MDBPlus.zip

mdb viewe rplus
mdb viewe rplus

http://www.thaiall.com/project/projectdbnwind.htm
http://www.alexnolan.net/software/mdb_viewer_plus.htm

ติดเกมมาริโอ้แมว ตอนที่ 3 ทำให้แมวจาก github ดิ้นด้วย MinGW บน Msys (แบบไม่ build SDL เอง)

Github นี่ดีนะครับ ยิ่งค้น ยิ่งเจออะไรอีกเยอะ
Github นี่ดีนะครับ ยิ่งค้น ยิ่งเจออะไรอีกเยอะ

ที่มาของเรื่อง
พบรหัสต้นฉบับเกมมาริโอ้แมว ที่ใช้ mouse ควบคุมตัวละครแมวกระโดดดึ๋ง ๆ ตอนนี้ต้องการเพียงนำ Source code มา compile, link แล้วก็ run ไม่คิดจะแก้ หรือปรับ code หากไม่จำเป็นจริง (ที่ต้องแก้ code เพราะ compile ไม่ผ่าน) และใน code ใช้ SDL (Simple DirectMedia Layer) เป็นพระเอกเรื่อง Media ซึ่งเป็น package ที่เก่ามาก (ราว 5 ปีแล้ว) ไม่ได้ใช้ SDL2 ซึ่งใหม่กว่า และ SDL ส่วนใหญ่ก็มี release ประมาณปี 2013 หรือก่อนนั้น .. สรุปว่าพบปัญหาก็ค่อย ๆ แก้ไขไปทีละเรื่อง

lesson การใช้ SDL เขียนเกม ละเอียดเลย
lesson การใช้ SDL เขียนเกม ละเอียดเลย

ในตอนหน้าคิดจะเล่าเรื่อง MinGW-W64 ตอนที่แล้วใช้ Cygwin
แต่ตอนนี้เล่าเรื่องใช้ MinGW ที่ติดตั้ง package msys มีเรื่องเล่าดังนี้

1. เลือกเครื่องมือแปลเกม
พบ Code เกม Cat mario ภาษา C++ เขียนโดยคนญี่ปุ่น
แชร์ใน Github.com นำมาลอง compile ด้วย GCC
เลือกใช้ MinGw (Minimalist GNU for Windows) เพราะเป็น GCC บน Windows
รุ่นที่ให้ Download เลือก mingw-get-setup.exe
Modified 2013-10-04 – version 0.6.2-beta-20131004-1
https://sourceforge.net/projects/mingw/files/Installer/
โปรแกรมแนวเดียวกันมีอีกหลายโปรแกรม อาทิ MinGW-W64 หรือ MSys2

download mingw_get 2013
download mingw_get 2013

2. เลือก package ระหว่าง install มีให้เลือกมากมาย
แต่ถ้าจะ compile เกมด้วย gcc ก็เลือกที่จำเป็นเพียงไม่กี่ตัว
เริ่มจากเลือกห้องลงโปรแแกรมใน c:\MinGW
และมี package 3 ตัวหลักดังนี้

- mingw-developer-toolkit
- mingw32-gcc-g++
- msys-base
mingw package
mingw package

3. หลังติดตั้งเสร็จ ก็ไป download รหัสต้นฉบับมาเตรียม compile
ก็ download เกมจาก https://github.com/angelXwind/OpenSyobonAction
แล้วผมก็นำ .cpp จำนวน 3 แฟ้มมาแก้ไข
เพราะรุ่นของ g++ ที่ใช้ในปัจจุบันเป็นรุ่นใหม่กว่าที่ผู้พัฒนาคนก่อนใช้เมื่อหลายปีก่อน
ทำให้ต้องแก้ทั้ง main.cpp loadg.cpp และ dxlib.gcc
และต้องเตรียมแฟ้มเข้าห้อง include, lib, bin(sdl-config) และ dll(.exe)
หลังเตรียม และทดสอบ ก็ upload ทั้งหมดเข้า repository
ที่ fork มาที่ https://github.com/thaiall/OpenSyobonAction
สรุปว่าท่านที่สนใจก็จะได้เห็นทั้งรุ่นก่อนปรับปรุง และรุ่นปรับปรุง

4. ใน MinGw มี msys ที่กำหนดให้เห็น G++ มาแล้ว
เริ่มต้นเข้า shell prompt หรือ bash
ด้วยการ run C:\MinGW\msys\1.0\msys.bat
ซึ่ง msys จะกำหนด config ให้รู้จักกับ G++ ที่ติดมากับ MinGWแล้ว
ไม่ได้อาศัย Path ของ Windows
ดังนั้นการกำหนด path ไปมองที่เก็บ G++ ในห้องอื่นผ่าน Windows+Pause Break
เพื่อแก้ path ใน Environment variables ไม่ได้ทำให้การเห็นรุ่นของ G++ เปลี่ยนไป
แต่การเปลี่ยน path มีผลต่อการเห็นรุ่น G++ ใน MinGW-w64 เพราะลง Msys แยกได้

มี msys 2 ตัว ก็มี g++ คนละ version
มี msys 2 ตัว ก็มี g++ คนละ version

5. ไปหา SDL source code มา build (ปี 2013 หรือประมาณนั้น)
ทั้ง SDL, SDL_mixer, SDL_gfx, SDL_image, SDL_mixer, SDL_ttf, freetype
https://www.libsdl.org/release/SDL-devel-1.2.15-mingw32.tar.gz
http://www.ferzkopp.net/Software/SDL_gfx-2.0/SDL_gfx-2.0.24.tar.gz
https://www.libsdl.org/projects/SDL_image/release/SDL_image-1.2.12.tar.gz
https://www.libsdl.org/projects/SDL_mixer/release/SDL_mixer-1.2.11.tar.gz
https://www.libsdl.org/projects/SDL_ttf/release/SDL_ttf-2.0.11.tar.gz
https://downloads.sourceforge.net/freetype/freetype-2.8.tar.bz2 (required by SDL_ttf)

$ .\configure
$ make
$ make install
gcc ไม่มี -V แต่ configure ไม่ผ่าน พบใน config.log
gcc ไม่มี -V แต่ configure ไม่ผ่าน พบใน config.log

ก็ผ่านไปหลายตัวครับ ติดตรง SDL_mixer ที่คนอื่นก็ติดกัน
อ่านได้ที่
– https://forums.libsdl.org/viewtopic.php?t=1431&sid=1856a055ebc60448105ee35a3779c7b2
https://forums.libsdl.org/viewtopic.php?p=10686
ไปแก้แฟ้ม configure แล้ว แต่ก็ติดจุดอื่นอีก

Line 2459 จาก "$ac_compiler -V >&5"
Line 2453 จาก "$ac_compiler -V >&5"
Line 11044 จาก "$ac_compiler -V >&5"
Line 11050 จาก "$ac_compiler -V >&5"

หลังเปลี่ยนจาก -V เป็น -v ก็มีปัญหาอื่นตามมาอีก
สรุปก็ต้องยอมแพ้ ไม่ใช้ include, lib และ dll ที่ได้จากการ build เอง
แต่ไปหาคัดลอกจาก github.com ที่เค้า share ไว้มาใช้เลย แล้วก็ใช้ได้
เหมือนที่ผม share ใน github.com นั่นหละครับ แต่ผมเลือกที่ต้องใช้กับ cat mario
ไม่ต้อง install แต่ copy เข้าไปวางใน folder ที่กำหนดเท่านั้น
ปล. ก็ไปหามาลองใช้หลายแหล่งเหมือนกัน กว่าจะลงตัว

ปัญหา -V ของ configure นี้มีหลายคนพูดถึงกันในหลายโปรแกรม ลองไปอ่านกันได้
syrinx พบปัญหา -V กับ compiling with gcc 4.7.2 and autoconf 2.69
https://superuser.com/questions/846768/
monodromy พบปัญหา -V กับ gcc-4.8.2
https://bbs.archlinux.org/viewtopic.php?id=177400
Pradeep Gupta พบปัญหา -V กับ ruby บน ubuntu
https://serverfault.com/questions/580489/

6. ปัญหาการ Build ไม่ได้เกิดกับ SDL ทุกโปรแกรม
ที่ build ไม่ผ่านก็พบกับ SDL_mixer ตั้งแต่ใช้ configure และก่อนที่จะพบปัญหาใน SDL_mixer พบว่า SDL_ttf ต้องใช้ Freetype2 ก็ต้องไป download และ build ก่อนที่ SDL_mixer จะผ่านไป ไม่อัตโนมัติเหมือนที่ทำให้ cygwin และการเป็น source code รุ่นเก่า ของหลายโปรแกรม ที่ยึดโยงกับ source code ที่ได้มา (ตั้งใจไม่แก้ source code ไปตาม package รุ่นใหม่) ทำให้สงสัยว่าอีกหลายโปรแแกรมที่ make install ผ่านแล้วนั้น จะเข้ากันได้ในตอน compile หรือไม่
ปัจจุบันใช้ compiler G++ รุ่นใหม่อย่าง 6.3.0 (Dec 2016) หรือ 7.1.0 (May 2017)
https://gcc.gnu.org/releases.html
สรุปว่า ข้อ 5 กับข้อ 6 ผมเล่าปัญหาให้ฟังว่า build แล้วติด เมื่อทำใน environment นี้

build sdl_ttf แต่ถามหา freetype2 ก็ต้องไป build มาก่อน
build sdl_ttf แต่ถามหา freetype2 ก็ต้องไป build มาก่อน

7. หลังแก้ไข code ให้รับ G++ รุ่นใหม่
แล้วเตรียมสภาพแวดล้อมที่เอื้อต่อการ compile เหมือนที่ทำในข้อ 3 ได้แก่ เตรียมแฟ้มเข้าไปในห้อง include, lib, bin (แฟ้ม sdl-config) และ dll(ห้อง .exe)
– ในการใช้ compiler G++ สามารถใช้กับ cmd ได้กับโปรแกรมทั่วไป
แต่การแปลเกมนี้ ต้องใช้ sdl-config ที่ต้องใช้ ascii ตัวที่ 96 เพื่อทำงานส่วนนี้
หากใช้กับ cmd ไม่ว่าจะใช้ ‘ หรือ ” หรือ $( ก็ไม่ผ่าน
ต้องไป compile บน bash (/usr/bin/sh)
– การ compile บน bash ที่ใช้ msys มีขั้นตอนดังนี้
$ g++ -c main.cpp
$ g++ -c loadg.cpp
$ g++ -c DxLib.cpp
$ g++ main.o loadg.o DxLib.o -o SyobonAction `sdl-config –libs` -lSDL_gfx -lSDL_image -lSDL_mixer -lSDL_ttf
$ SyobonAction.exe
สรุปคือโปรแกรม SyobonAction สามารถ run ได้ทั้งใน msys, cmd และ explorer
แต่ต้องมีแฟ้ม .dll ให้พร้อมเรียกใช้ระหว่าง runtime หลายแฟ้ม
พบปัญหาว่า จะ run .exe ต้องมี .dll หลายแฟ้ม
แก้ไขด้วย การใช้โปรแกรม 7z ทำ .exe ช่วย extract ก่อน run
มีวิธีทำ installer.exe = 7z(.exe(start after extract) + *.dll + folders)
http://ntsblog.homedev.com.au/index.php/2015/05/14/self-extracting-archive-runs-setup-exe-7zip-sfx-switch/

8. สรุปอีกครั้งเรื่อง run
ในการเรียก SyobonAction.exe
จะต้องมี .dll หลายแฟ้มรองรับขณะ runtime
อีกนัยหนึ่ง .dll นี่ใช้ตอน run
อาจอยู่ห้องเดียวกันกับ .exe หรือไปอยู่ใน /system32 หรือ /syswow64 ก็ได้
ประกอบด้วย

SDL.dll
SDL_gfx.dll
SDL_image.dll
SDL_mixer.dll
SDL_ttf.dll
libpng12-0.dll
zlib1.dll

 

ปล. แนะนำบทเรียนเขียนเกม ด้วย SDL (บทเรียนของเค้าน่าสนใจ)
เรื่อง Beginning Game Programming v2.0
ที่ http://lazyfoo.net/tutorials/SDL/

ติดเกมมาริโอ้แมว ตอนที่ 2 มาดูกันทำให้แมวดิ้นบน Cygwin ว่าง่ายเพียงใด

รุ่นน้อง ส่งเกม SyobonAction หรือ Cat Mario มาให้ 
เริ่มจาก unzip แล้วลองเล่น จากนั้นก็เปิดดูเห็น source code .cpp 3 แฟ้ม ก็อยากจะลองแปลดู เข้าดู MakeFile เห็นว่าใช้ GCC ก็จำได้ว่าเคยใช้แบบงูงูปลาปลา ราวปี 2550 ก็ 10 ปีมาแล้ว จึงได้เวลารื้อฟื้นซะที

He is the jumper.
He is the jumper.

ท้าวความก่อน
โปรแกรม CYGWIN (Unix Simulator) คือ ชุดโปรแกรมจำลองสภาพแวดล้อมลินุกซ์ (Linux) บนวินโดวส์ (Windows) เพื่อจำลองสภาพแวดล้อม (Simulate) ให้เหมือนทำงานบนลีนุกซ์ และเตรียมเครื่องมือที่จำเป็นให้เหมือนกับบนลีนุกซ์ โปรแกรมนี้จำเป็นต่อการ Compile Source code มากมาย ที่ถูกพัฒนาให้ใช้ตัวแปลภาษาสำหรับ Linux
อาทิ GCC หรือ XWin หรือ Xterm ซึ่งช่วยให้นักพัฒนาเขียน Source code
แล้วนำไป Compile ได้ทั้งบน Linux และ Windows โดยไม่ต้องปรับแก้รหัสต้นฉบับ

มี shell ให้ใช้ แต่ถ้าไม่ติดตั้ง package ที่ต้องการ ก็จะเรียกไม่พบ อยากใช้อะไรก็ต้องคลิ๊ก
มี shell ให้ใช้ แต่ถ้าไม่ติดตั้ง package ที่ต้องการ ก็จะเรียกไม่พบ อยากใช้อะไรก็ต้องคลิ๊ก

ข้อจำกัดสำคัญของ Cygwin
ที่คะเนไว้ คือ มีทางเลือกอื่นที่มีประสิทธิภาพกว่าในการใช้ Linux พัฒนา Software อาทิ ถ้าเขียนโปรแกรมที่จำเป็นต้องใช้สภาพแวดล้อมของ Linux เพื่อให้ได้ execute code ไป run บน Windows การเขียนบน Linux โดยตรง จะมีประสิทธิภาพกว่าเขียนบน Windows ทำให้ความนิยมลดลง หากเลือกใช้งาน Cygwin ในการทำงานจริง หรือหวังประสิทธิภาพ

กรอบแนวคิด (Conceptual Framework)
อันที่จริง การพัฒนาเกม CatMario มีได้หลายแนวคิด แต่ model นี้น่าจะเป็นแนว ๆ นี้

CatMario = Win(Cygwin(Source && (G++ && SDL) && (XServer && Xterm)))

ความราบรื่น
หลังจากไปทบทวนความหลังกับ Cygwin เพื่อ compile, link และ run กับ Source code ของ SyobonAction พบว่า ราบรื่นมาก ไม่ติดปัญหาเกี่ยวกับเครื่องมือ แต่แก้ source code นิดหน่อย เพราะ code เมื่อ 7 ปีก่อน มาเจอ compiler ในปัจจุบัน ก็มีสะดุดบ้าง โปรแกรมละ จุด สองจุด สามจุด และได้อัพโหลด .cpp ตัวแก้ไขเข้า github.com ที่ผมไป FORK มาแล้ว หากไปใช้ตัวแก้ไขก็จะไม่ต้องแก้ไข code เมื่อส่งให้ g++ รุ่น 6.3.0 หรือ 7.1.0 ทำการ Compile

สรุปขั้นตอนการใช้งาน  Cygwin 64 เมื่อต้นกันยายน 2560

1. Download โปรแกรม
เข้า
http://www.cygwin.com
เลือก download setup-x86_64.exe
ได้มาเป็น version 2.881 (64 bit) เพราะผมใช้ Win10 64bit แบบ OEM
โปรแกรมนี้ไม่ไปแก้ไขค่าในระบบ Windows เพียงแต่ Unzip เป็นสำคัญ
ดังนั้นเข้า Apps and Features หรือ Program and Features ก็จะไม่พบ
ถ้าจะ uninstall Cygwin ก็เพียงแต่ remove folder เท่านั้นเอง

download cygwin ได้ที่นี่
download cygwin ได้ที่นี่

2. Next ไปตลอด
– Download source = Install from Internet
– Root Directory = C:\cygwin64 เค้ากำหนดมาก็ไม่ได้แก้ไข
– Local Package Directory = D:\pub ไว้เก็บแฟ้มที่ Download มาก่อน install
– Connection = Direct Connection
– Download Site = http://mirrors.sonic.net
– Select Package = default
– Next

3. หลังติดตั้งเสร็จ ใช้เวลา Download ประมาณ 5 นาที
สำรวจดู พบว่า ในห้อง c:\cygwin64 มีแฟ้ม cygwin.bat
จะได้พบหน้าต่างใหม่ และมี $ prompt เหมือนที่พบใน Linux Bash
หลังติดตั้งได้แฟ้มมา 4,809 แฟ้ม ขนาดรวม 108 MB

4. ติดตั้ง Package เพิ่มเติม มีเป้าหมาย 3 อย่าง
4.1 ต้องการ Compiler ของ G++ หรือ C++ นั่นเอง
4.2 ต้องการ Library ของ SDL (ใน Cygwin ง่าย แต่ใน MinGW ยากเลย)
4.3 X terminal สำหรับเล่นเกม เพราะแฟ้มที่ได้มาถูกทดสอบ run ในนั้น

ขั้นตอนให้ได้ 3 อย่าง มีดังนี้
เริ่มจาก run setup-x86_64.exe อีกรอบ แล้วเลือก Package จะ View แบบ Full แล้ว Search หาแฟ้มที่ต้องการ หรือสำรวจผ่าน View แบบ Category ก็ได้

[devel]
6.3.0-2 gcc-g++ : GNU Compiler Collection (C++)
6.3.0-2 gcc-core: GNU Compiler Collection (C, OpenMP)
1.2.15-3 libSDL-devel: Simple DirecMedia Layer core library
1.2.12-6 libSDL_image-devel: SDL image loading library
2.0.24-1 libSDL_gfx-devel: SDL primitive graphics library
1.2.12-4 libSDL_mixer-devel: Multi-channel audio mixer for SDL
2.0.11-1 libSDL_ttf-devel: SDL text rendering library
[x11]
1.19.2-1 xorg-server-devel: X.Org SDK for developing drivers and extensions for the Xorg X server
330-1 xterm: X11 terminal emulator

install package in cygwin
install package in cygwin

หลังติดตั้งทั้ง 9 Package และผองเพื่อน
แฟ้มเพิ่มขึ้นมาเป็น 16056 แฟ้ม ขนาดรวม 624 MB

 

หน้าตา folder ของ cygwin และ catmario
หน้าตา folder ของ cygwin และ catmario

5. มีเกมอยู่ใน c:\catmario
Download : https://github.com/thaiall/OpenSyobonAction
แล้วก็ unzip source code ลงห้อง c:\catmario
$ cd /cygdrive/c/catmario/
$ g++ -c main.cpp
$ g++ -c loadg.cpp
$ g++ -c DxLib.cpp
$ g++ main.o loadg.o DxLib.o -o SyobonAction `sdl-config –libs` -lSDL_gfx -lSDL_image -lSDL_mixer -lSDL_ttf

ตัวอักษร  ` เป็น Ascii ตัวที่ 96 ใช้  ALT+96 ได้ แต่ใช้  ‘ หรือ  ” หรือ $(  ไม่ได้

compile and link .. เห็นแปลก ๆ คือ warning นะครับ
compile and link .. เห็นแปลก ๆ คือ warning นะครับ

6. การสั่งให้เกมทำงาน
$ XWin :0 คือ X Server เป็นพื้นที่ทำงาน
$ DISPLAY=:0.0 xterm คือ X Terminal และ Display ต้องพิมพ์ใหญ่
$ /cygdrive/c/catmario/SyobonAction.exe
แฟ้ม SyobonAction.exe มีขนาด 294 KB
จะ Run ปกติใน CYGWIN64 Terminal ไม่ได้
พบ error message ที่โปรแกรมดักไว้
ว่า Unable to init SDL: No available video device

สั่ง run catmario ใน cygwin
สั่ง run catmario ใน cygwin

ต่อไปจะหาเวลา
ไปขยายความใน http://www.thaiall.com/cygwin เป็นลำดับต่อไป
แต่ต้องหา Case ก่อนครับ นาน ๆ ได้เข้าโปรแกรมเก่า เล่าเรื่องเก่าสักครั้ง

xterm
xterm

การนำเอกสารที่แชร์ใน google drive เข้าไปเป็นของตนเอง

อ.ธาม เชื้อสถาปนศิริ
อ.ธาม เชื้อสถาปนศิริ

พบการแชร์ในสื่อสังคม
เป็นเอกสารน่าสนใจ จากบัญชีเฟสบุ๊ค ของ อ.ธาม เชื้อสถาปนศิริ
https://www.facebook.com/time.chuastapanasiri
แชร์เอกสารใน google drive ผ่าน facebook แบบ public
เรื่อง จริยธรรมวารสารศาสตร์ (Journalist ethics)
ที่ https://drive.google.com/../view
มีจำนวน 189 หน้า ขนาด 27 MB ถือว่าไม่ใหญ่มากนัก เพราะรูปภาพทั้งนั้น

time.chuastapanasiri
time.chuastapanasiri

เปิดเข้าไปดู
เห็นบน menu bar มีคำว่า เพิ่มใน “ไดร์ฟของฉัน
เพราะขณะนั้นเปิด gmail.com ทิ้งไว้แล้ว
กดแล้วก็เข้าเลย แล้วเข้า “จัดระเบียบ
พบแฟ้มใน ไดร์ฟของฉัน คลิ๊กแฟ้ม
แล้วเลือก “เปิดการแชร์ลิงก์ ให้ทุกคนที่มีลิงก์สามารถดูได้
ที่ https://drive.google.com/open?id=0B..WM
เอกสารนี้ท่านก็แชร์เก็บไว้ได้ เพียงแต่มีบัญชีของ google.com เท่านั้น

ชอบภาพหลายมุมมองครับ