เริ่มต้นกับ javascript
นิยามศัพท์ ภาษาจาวาสคริปต์ คือ ภาษาโปรแกรมคล้ายภาษาซี ถูกใช้ร่วมกับภาษาเอชทีเอ็มแอลในการพัฒนาเว็บเพจ ประมวลผลในเครื่องของผู้ใช้ ช่วยให้การนำเสนอเป็นแบบโต้ตอบกับผู้ใช้ได้ในระดับหนึ่ง ภาษาจาวาสคริปต์ (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;
}
หัวข้อ
+ การทำงานของเอชทีเอ็มแอล ร่วมกับ จาวาสคริ๊ป
+ เครื่องมือในการเขียนจาวาสคริ๊ป
+ ฟังก์ชันของจาวาสคริ๊ป
+ ฟังก์ชันที่สร้างโดยผู้ใช้
+ 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>
การส่งค่าจาก 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 ครั้ง
+ http://www.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>
ตัวอย่างอื่นที่น่าสนใจ
<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/


"Imagination is more important than knowledge" - Albert Einstein
http://goo.gl/72BPC