เริ่มต้นกับจาวาสคลิ๊ป

ปรับปรุง : 2563-06-29 (การใช้ chrome)

นิยามศัพท์

ภาษาจาวาสคริปต์ คือ ภาษาโปรแกรมคล้ายภาษาซี ถูกใช้ร่วมกับภาษาเอชทีเอ็มแอลในการพัฒนาเว็บเพจ ประมวลผลในเครื่องของผู้ใช้ ช่วยให้การนำเสนอเป็นแบบโต้ตอบกับผู้ใช้ได้ในระดับหนึ่ง ภาษาจาวาสคริปต์ (JavaScript Language) คือ ภาษาโปรแกรมที่มีโครงสร้างคล้ายภาษาซี ทำหน้าที่แปลความหมาย และดำเนินการทีละคำสั่ง ภาษานี้มีชื่อเดิมว่า LiveScript ถูกพัฒนาโดย Netscape Navigator เพื่อช่วยให้เว็บเพจสามารถแสดงเนื้อหา ที่มีการเปลี่ยนแปลงได้ ตามเงื่อนไข หรือสภาพแวดล้อมที่แตกต่างกัน หรือโต้ตอบกับผู้ใช้ได้มากขึ้น เพราะภาษา HTML ที่เป็นภาษาพื้นฐานของเว็บเพจ ทำได้เพียงแสดงข้อมูลแบบคงที่ (Static Display) ภาษาจาวา (Java Language) คือ ภาษาคอมพิวเตอร์ที่ถูกพัฒนาขึ้นโดยบริษัท ซันไมโครซิสเต็มส์ เป็นภาษาสำหรับเขียนโปรแกรมที่สนับสนุนการเขียนโปรแกรมเชิงวัตถุ (OOP : Object-Oriented Programming) โปรแกรมที่เขียนขึ้นถูกสร้างภายในคลาส ดังนั้นคลาสคือที่เก็บเมทอด (Method) หรือพฤติกรรม (Behavior) ซึ่งมีสถานะ (State) และรูปพรรณ (Identity) ประจำพฤติกรรม (Behavior)

Blockly

บริการที่คล้าย blockly คือ thaiall.com/scratch

ภายใต้ google for education มีบริการ try blockly ถูกใช้สำหรับการโปรแกรมด้วยภาพ สามารถประมวลผล และแสดงเป็นภาษาต่าง ๆ อาทิ javascript, python, php, lua หรือ dart แล้วมีการนำ blockly ไปต่อยอดอีกมากมาย อาทิ Code.org, Microbit, Blockly-games, CodeBug, Ozoblockly

var Count;
Count = 1;
while (Count <= 3) {
  window.alert('Hello World!');
  Count = Count + 1;
}

console and undefined

developers.google.com

มีหลายวิธี ในการเขียนโค้ด (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 เช่นเดิม ซึ่งการรับคำสั่ง เช่น 1 + 2 + 3 นี้ ทำให้นึกถึง calculator

หัวข้อ + การทำงานของเอชทีเอ็มแอล ร่วมกับ จาวาสคริ๊ป
+ เครื่องมือในการเขียนจาวาสคริ๊ป
+ ฟังก์ชันของจาวาสคริ๊ป
+ ฟังก์ชันที่สร้างโดยผู้ใช้
+ innerhtml

การใช้ alert แสดงค่าจาก textbox

การกำหนดเหตุการณ์ใน onclick
ให้อ่านค่าจาก textbox ที่อยู่ใน form
เมื่อกดปุ่ม button ให้แสดงค่านั้นผ่านฟังก์ชัน alert

<form name=fm>
<input name=txt1 value="hello2">
<input type=button 
  onclick="alert(document.fm.txt1.value);">
</form>

การใช้ Console.log เบื้องต้น

ใช้ Console.log ใน Browser

ตัวอย่าง Source code

<script>
var a =[4,1,3,5,2];
console.log(a);
console.log("a");
</script>
Firefox : Ctrl - Shift - K / Chrome : Ctrl - Shift - I  หรือ F12

การส่งค่าจาก onclick เข้าไปใน textbox

การกำหนดเหตุการณ์ใน onclick
ให้ส่งค่าเข้าไปใน textbox ที่อยู่ใน form
เมื่อกดปุ่ม button ให้ส่งค่าคงที่ไปใส่ใน textbox

<form name=fm>
<input name=txt1>
<input type=button 
  onclick="document.fm.txt1.value = 'hello1';">		
</form>

การแสดงผลด้วย document.write

การแสดงผลด้วย javascript นั้นมีหลายแบบ
การใช้ document.write
ทำให้เขียนแสดงผลบน document ทันที
กรณีนี้เรียกใช้ฟังก์ชัน random และ floor
จากคลาสชื่อ Math (Case sensitive)

<body>hello
<script type="text/javascript">
document.write(Math.floor(Math.random() * 10));
// 0 - 9
</script></body>

การแสดงผลด้วย console.log

การแสดงผลด้วย javascript นั้นมีหลายแบบ
การใช้ console.log ต้องใช้ tool ช่วยแสดงผลลัพธ์
มักใช้ฟังก์ชันนี้สำหรับการตรวจสอบผลการประมวลผล
ถ้าใช้ firefox จะอยู่ใน developer, web console

<body>
one
<script type="text/javascript">
console.log("hello");
</script>
two
</body>

Tool: Developer tools ของ chrome

เมื่อเขียนเว็บเพจเสร็จสิ้นแล้ว
สามารถตรวจสอบ Elements ของ code
ด้วย Chrome ด้วยการกดปุ่ม Ctrl+Shift+I = Elements
หรือดูข้อมูล log ที่ถูกสั่งด้วย console.log
ผ่านคำสั่งที่ในแท็ก <script>
ให้คลิ๊ก Console
หรือต้องการเปลี่ยนมุมมองการแสดงผลแบบ smart phone
ให้กดปุ่ม Ctrl+Shift+M = Toggle device toolbar
+ Chrome browser : download

Tool: HTML inspector ของ firefox

เมื่อเขียนเว็บเพจแล้ว
สามารถตรวจสอบโครงสร้างของ code ด้วย Firefox
ด้วยการกดปุ่ม Ctrl+Shift+C = Inspector
หรือดูข้อมูล log ที่ถูกสั่งด้วย console.log
ผ่านคำสั่งในแท็ก <script>
ให้กดปุ่ม Ctrl+Shift+K = web console
หรือต้องการเปลี่ยนมุมมองการแสดงผลแบบ smart phone
ให้กดปุ่ม Ctrl+Shift+M = Responsive Design View
+ Firefox browser : download

Tool: HTML emulator ของ w3schools.com

บริการของ w3schools.com
ช่วยให้นักพัฒนาเขียน webpage ด้วย HTML+Javascript
ว่าทำงานได้ถูกต้อง ตรงที่ต้องการก่อนนำไปใช้จริง
+ http://www.w3schools.com .. tryhtml_basic

Tool: Javascript emulator ของ chapman.edu

บริการของ chapman.edu
ช่วยให้นักพัฒนา (Developer) ทดสอบเขียน Javascript
ว่าทำงานได้ถูกต้อง ตรงที่ต้องการก่อนนำไปใช้จริง
+ http://math.chapman.edu/~jipsen/js/

Tool: Javascript emulator ของ jsfiddle.net

บริการของ jsfiddle.net [signup]
ช่วยให้นักพัฒนาเขียน webpage ด้วย HTML+Javascript
ว่าทำงานได้ถูกต้อง ตรงที่ต้องการก่อนนำไปใช้จริง
ผลการทดสอบสามารถบันทึกไว้ได้
แชร์ผลงานให้เพื่อน มีบริการ fork เพื่อเพิ่มรุ่นของ script
+ https://jsfiddle.net/burinruj/m2j56a3b/
Terms : fork = สาขา ทางแยก ส้อม

Tool: Javascript shell ของ mozilla.com

Mozilla พัฒนา shell command ที่รองรับ javascript ซึ่งแนะนำการสอน Datastructure ด้วยภาษานี้ ในหนังสือ Data Structures & Algorithms with JavaScript ของ Michael McMillan เมื่อ download แฟ้ม jsshell-win32.zip และ unzip แล้วเปิดโปรแกรม js.exe ก็จะใช้งาน shell ได้ทันที + https://archive.mozilla.org/pub/firefox/

Tool: Node.js เบื้องต้น

Node.js shell
ทำงานด้วย Instance ชื่อ repl.REPLServer
Read-Eval-Print-Loop (REPL)
https://nodejs.org/api/repl.html
รับฟังก์ชัน และมีการคืนค่า (return)
หากสิ่งที่สั่งไปไม่มีการ return จะแจ้ง undefined
แต่ถ้ามีการ return ก็จะไม่แจ้ง undefined
เช่น 1+1; หรือ a=5; หรือ a=[1]; หรือ _.length
หรือ a=1; b=2; output=a+b; ผลลัพธ์คือ 3
หรือ [1,2]
---
กรณีที่จะพบคำว่า undefined มีดังนี้
กรณีที่ 1 console.log(5);
ส่ง output คือ 5 แต่ไม่ return ใด ๆ
จึงพบคำว่า undefined ต่อท้าย
กรณีที่ 2 function x() { return 5; }
เป็นการประกาศฟังก์ชันเท่านั้น
แต่ต่อไปสั่ง x() ก็จะพบ 5 ที่ return ถูกต้อง
กรณีที่ 3 var a=5; คือ การประกาศ
หากเริ่มต้นด้วย var ก็จะไม่ return ใด ๆ
จึงพบคำว่า undefined ต่อท้าย
กรณีที่ 4 a=1; b=2; c=3; d=4; console.log(a,b,c,d);
ผลคือ 1 2 3 4 ตามด้วย undefined
---
ตัวอย่างสร้างแฟ้ม x.js ผ่าน DOS Prompt
echo a = [1, 2, 3]; > x.js
echo a.forEach((v) =^> {console.log(v);}); >> x.js
---
การใช้บริการ hosting บน firebase ทำงานกับ node.js
http://www.thaiall.com/blog/burin/7733/

สร้าง และเรียกใช้ function

ฟังก์ชันแบบธรรมดา
สร้างฟังก์ชัน myFun()
แล้วเรียกใช้ myFun() จำนวน 3 ครั้ง
+ w3schools.com .. tryhtml_basic

<script type="text/javascript">
myFun();
myFun();
myFun();
function myFun() { 
document.write ('hello world' + "<br/>"); 
}
</script>

การส่งค่า และประมวลผลใน function

ฟังก์ชันแบบรับค่า
สร้างฟังก์ชัน myCal()
แล้วเรียกใช้ myCal() จำนวน 3 ครั้ง
แต่ละครั้งส่งค่าต่างกัน

<script type="text/javascript">
myCal(1);
myCal(2);
myCal(3);
function myCal(v) { 
if (v < 2) { document.write ('less' + "<br/>"); }
if (v == 2) { document.write ('ok' + "<br/>"); }
if (v > 2) { document.write ('more' + "<br/>"); }
}
</script>

การส่งค่า ประมวลผล คืนค่าด้วย function

ฟังก์ชันแบบส่งและคืนค่า
สร้างฟังก์ชัน myCal()
แล้วเรียกใช้ myCal() จำนวน 3 ครั้ง
แต่ละครั้งส่งค่าต่างกัน และรับต่างกัน

<script type="text/javascript">
document.write(myCal(1));
var v2 = myCal(2);
document.write(myCal(1) + myCal(3));
document.write("" + myCal(1) + myCal(3));
// 41046
function myCal(v1) { 
if (v1 < 2) { v3 = 4; }
if (v1 == 2) v3 = 5; 
if (v1 > 2) v3 = 6;
return v3;
}
</script>

การเรียนใช้ function จาก onclick

สคริ๊ปนี้แบ่งการทำงานเป็น 2 ส่วนคือ html และ javascript ซึ่งแสดงให้เห็นว่าเมื่อเขียนฟังก์ชันขึ้นมาชื่อ doFm() แล้วกดปุ่มในฟอร์ม ก็จะเรียกใช้ฟังก์ชันนี้ ทำหน้าที่ส่งค่าให้กับ textbox ใน form

<form name=fm>
<input name=txt1>
<input type=button onclick="javascript:doFm();">	
</form>
<script type="text/javascript">
function doFm() { 
  document.fm.txt1.value = 'hello3'; 
}
</script>

การเขียนปิรามิดของตัวเลขในฟังก์ชัน

การทำซ้ำด้วย for
เป็นกิจกรรมปกติของคอมพิวเตอร์ที่ทำประจำ
แต่การทำซ้ำซ้อนกัน ก็เกิดขึ้นได้
เพื่อให้ได้ผลตามต้องการ
ซึ่งปิรามิดเหมาะกับการฝึกอัลกอริทึมที่ดี
ตัวอย่างอีกมากมายที่ teachpro.htm

<font face="courier new" size="6">
<script type="text/javascript">
pyramid(5);
function pyramid(k) {
  for(i=1;i<=k;i++) {
    document.write( i + " - ")
    for(j=1;j<=i;j++) {
      document.write( 11 - j - i )
    }
    document.write("<br/>");
  }
}
</script>

ต.ย. การเขียน code พิมพ์ 1 - 10 ใน console ของ browser

+ w3schools/jsref_reference

การพิมพ์ 1 ถึง 10 พบว่า ใน Browser ทั้ง chrome และ firefox เมื่อกด f12 เข้า Developer Tools เลือกแถบ Console
1. พิมพ์ clear()
2. พิมพ์ for (i = 0; i < 5; i++) { console.log(i); }
3. พิมพ์ function s() { t=""; for (i = 0; i < 5; i++) { t+=i + "\n"; } return t; } console.log(s());
4. พิมพ์ console.log(s());

ตัวอย่างอื่นที่น่าสนใจ

<input type=button onclick="javascript:console.log('hello5');" value="Ctrl-M">
<h1 onclick="this.innerHTML='Hello text'">Click on this text!</h1>

JavaScript Display Possibilities
จาวาสคลิ๊ปสามารถแสดงข้อมูลด้วยวิธีที่แตกต่างกันหลายวิธี
1. เขียนเข้าไปใน alert box ใช้ window.alert()
2. เขียนเข้าไปใน HTML output ใช้ document.write()
3. เขียนเข้าไปใน HTML element ใช้ innerHTML()
4. เขียนเข้าไปใน Browser console ใช้ console.log()
+ http://www.w3schools.com/js/js_output.asp

แนะนำบริการเกี่ยวกับ Javascript

http://alexgorbatchev.com/SyntaxHighlighter/
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
http://www.pcjs.org/
http://www.cambus.net/emulators-written-in-javascript/
https://fir.sh/projects/jsnes/
http://www.calormen.com/jsbasic/
http://www.w3schools.com/js/js_htmldom_document.asp
http://www.programminghub.io/
http://www.somkiat.cc/top-programming-language-july-2016/

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com