Factory Pattern

>> นี่เป็น design pattern ที่ต้องการจะสื่อว่า ออบเจ็กต์ที่เราต้องการนั้น เราไม่ต้องสนใจว่ามันสร้างมาอย่างไร เพียงบอกชนิด (หรือชื่อ) ของออบเจ็กต์ เดี๋ยว design pattern นี้จะสร้างออบเจ็กต์ตามต้องการนั้นมาให้ครับ

>> factory pattern จะมีเมธอดสำหรับสร้างออบเจ็กต์ให้เอง โดยทั่วไปจะตั้งชื่อเมธอดนี้อย่างไรก็ได้ สมมติเป็นเรื่องการสร้างรูปทรงเรขาคณิต อาจตั้งชื่อว่า getShape, ถ้าเป็นเรื่องการสร้างไฟล์ logger อาจตั้งชื่อว่า createLogger หรือเป็นเรื่องการสร้างผลไม้กระป๋อง อาจตั้งชื่อว่า buildFruitCan ก็ตามสะดวก

>> factory pattern เริ่มต้นด้วย interface ที่กำหนดกติกาใดๆให้กับคลาสที่ต้องการ implement หรือนำไปใช้ครับ จากตัวอย่างนี้เป็นการสร้างรูปทรงเรขาคณิตสามแบบ คือ Rectangle, Square และ Circle ทั้งสามคลาสล้วน implement เจ้า interface ที่ชื่อ Shape เพื่อให้ตัวเองสามารถเรียกเมธอด draw ได้

>> หัวใจสำคัญของ factory pattern นั้น จะต้องมีคลาสที่ทำหน้าที่เป็นโรงงานครับ คลาสดังกล่าวนี้จะมีเมธอดในการสร้างออบเจ็กต์ Rectangle, Square และ Circle ตามตัวอย่างคือเมธอด getShape โดยกำหนดให้มันรับ input เป็นชนิดหรือชื่อของรูปทรงเรขาคณิตเข้ามา แล้วเอาไปเทียบว่าเป็นชนิดหรือชื่อของออบเจ็กต์รูปทรงเรขาคณิตชิ้นไหน ก็คืนออบเจ็กต์ชิ้นนั้นออกไป

>> ประยุกต์อย่างไร? ในงานที่ผมทำอยู่นี้ ผมต้องวาดกราฟจาก google chart tools (https://developers.google.com/chart/?hl=th) แต่ละกราฟใช้ข้อมูลเดียวกัน ต่างเพียงชนิดของกราฟเท่านั้น ดังนั้นผมจะสร้างคลาส GoogleChartFactory ขึ้นมา เพื่อให้สามารถ createChartByType โดยระบุชนิดของกราฟว่าต้องการแบบไหน ในขณะนี้มีสี่แบบได้แก่ column chart, line chart, bar chart และ table chart แต่ละแบบก็จะมีคลาสเป็นของตัวเอง ได้แก่ ColumnChart, LineChart, BarChart และ TableChart ซึ่งจะต้องมีเมธอด draw ไว้สำหรับวาดกราฟเหมือนกันหมด ผมจึงให้พวกมัน implement เจ้า interface ชื่อ GoogleChart เพราะถูกกำหนดให้มีกติกา draw ไว้ภายในครับ

>> สรุป factory pattern เหมาะสำหรับงานที่ต้องการออบเจ็กต์อารมณ์โรงงานที่มีเครื่องจักรสามารถสร้างออบเจ็กต์ให้ได้ทำนองว่าเป็นกลุ่มก้อนเดียวกัน โดยเราสนใจเพียงสิ่งที่ป้อนให้กับมัน (เช่นชื่อกราฟ) มากกว่าที่จะสนใจว่ามันสร้างออบเจ็กต์ (วาดกราฟ) ให้เราได้อย่างไร

>> ผมขอยกมาเพียง chart diagram นะครับ ส่วนโค้ดภาษาจาวาประยุกต์เขียน pattern นี้อย่างไร โปรดเยี่ยมชมลิงค์ต้นฉบับด้านล่างนี้ได้เลยครับ
http://www.tutorialspoint.com/design_pattern/factory_pattern.htm

Proxy Pattern

>> นี่เป็น design pattern ที่ต้องการจะสื่อว่า แหล่งทรัพยากรหรือข้อมูลใดๆที่เราต้องการนั้นอยู่ไกลและราคาแพงครับ เพราะถ้าอยู่ใกล้มากๆและราคาถูกขนาดว่าเรียกปุ๊บได้ใช้ปั๊บ design นี้ก็คงเกิดยากจริงไหม หรือจะกล่าวว่าช่องทางการเข้าถึงทรัพยากรหรือข้อมูลใดๆนั้นมีน้อยก็ย่อมได้ จึงต้องเกิดการกระจายไงล่ะ แต่เหตุผลนี้ก็มีคะแนนน้อยมากอยู่ดี

>> รูปแบบ (pattern) แบบ proxy ก็คือเรามีแหล่งทรัพยากร ในที่นี้ก็คือ server เอาง่ายๆว่าเป็นเครื่อง server แล้วกัน (ใกล้ตัวดี) เก็บสิ่งที่เราต้องการเอาไว้ พอเราอยากได้ก็จะติดต่อไปยัง server แล้วโหลดสิ่งนั้นมา ติดต่อครั้งหนึ่งก็โหลดเอาจาก server ครั้งหนึ่ง เป็นเช่นนี้เรื่อยไปครับ

>> ทีนี้ถ้าพวกเรามีกันสิบคนติดต่อไปยัง server ก็จะได้การติดต่อสิบครั้งจริงไหม ต่างคนก็ต่างโหลดสิ่งที่ตัวเองต้องการ ก็ว่ากันไป แล้วถ้าพวกเรามีกันเป็นพันเป็นหมื่นหรือแสนหรือล้านคนล่ะ? เจ้า server ก็ต้องเหนื่อยลิ้นห้อยหรือไม่ก็หัวใจวายแน่ๆ

>> แก้ปัญหานี้อย่างไร เด็กชายสมชายยกมือตอบทันทีว่า ซื้อเครื่อง server เพิ่มครับ! ใช่ ถ้าสมชายมีเงินมากพอจะซื้อ server เพิ่มเรื่อยๆล่ะก็ ก็ถือว่าแก้ปัญหาได้แล้ว แต่ความจริงไม่เป็นเช่นนั้นสิ เพราะ server มักมีราคาแพงมากถึงมากที่สุด สำคัญคือทรัพยากรหรือข้อมูลบางอย่างก็ไม่ได้มีอยู่ทั่วไปเสียด้วย ไหนจะต้องป้อนข้อมูลซ้ำๆให้ server แบบเกลื่อนกลาดด้วยงั้นเหรอ ไม่~ไม่ดีเลย

>> จึงมีการคิดค้น proxy หรือเครื่อง proxy ซึ่งเป็นตัวแทนของ server ขึ้นมา ยามใดที่เราหรือใครๆต้องการทรัพยากรก็แค่ร้องขอไปที่ proxy ก่อน จากนั้น proxy จะตรวจสอบว่าทรัพยากรนี้มีเก็บอยู่ที่มันหรือไม่ ถ้าไม่มีมันก็จะไปโหลดเอาจาก server หนึ่งครั้ง แต่ถ้ามีแล้วมันก็จะไม่ไปโหลดที่ server อีก (โหลดครั้งเดียว) ดังนั้นทรัพยากรอะไรก็ตามที่ซ้ำๆกัน คนแรกที่ร้องขอผ่าน proxy เท่านั้นที่ต้องคอยนานหน่อย เพราะ proxy ต้องติดต่อไปโหลดจาก server ส่วนคนต่อๆไปไม่ต้องคอยนาน เพราะทรัพยากรนั้นมีเก็บไว้ที่ proxy แล้วนั่นเอง

>> ผมขอยกมาเพียง chart diagram นะครับ ส่วนโค้ดภาษาจาวาประยุกต์เขียน pattern นี้อย่างไร โปรดเยี่ยมชมลิงค์ต้นฉบับด้านล่างนี้ได้เลยครับ
http://www.tutorialspoint.com/design_pattern/proxy_pattern.htm

ประโยชน์ของ Design Patterns

>> Design patterns ช่วยให้การจัดโครงสร้างความสัมพันธ์ของแต่ละคลาสภายในโปรแกรมหรืองานใดๆเป็นไปอย่างง่ายดายได้อย่างไร?

ความเห็นที่ 1) ก่อนจะตอบคำถามนี้ แรกเลยต้องทำความเข้าใจก่อนว่าปัญหาที่มักพบเจอในการเขียนโปรแกรมคือ เมื่อโปรแกรมมีความซับซ้อนและจำนวนโค้ดมากขึ้น คนในทีมก็ยากจะทำงานร่วมกันได้เพราะแต่ละคนมีรูปแบบการเขียนโค้ดที่ไม่เหมือนกัน ในกรณีที่โปรแกรมต้องการพัฒนาให้มีฟังก์ชันในการทำงานที่มากกว่าเดิมก็ทำได้ยาก เพราะตัวโค้ดเองถูกพัฒนาโดยไม่มีรูปแบบ

>> ดังนั้น design patterns จึงถูกพัฒนาขึ้นเพื่อใช้เป็นรูปแบบการเขียนโปรแกรมเพื่อแก้ปัญหาโค้ดที่ดูซับซ้อนให้ดูได้ง่ายขึ้น ทำให้ผู้พัฒนาและทีมสามารถเข้าใจสิ่งที่โปรแกรมต้องทำได้ง่ายขึ้น และสามารถเพิ่มฟังก์ชันใหม่ๆเข้าไปในระบบได้ง่ายขึ้น โดยรูปแบบต่างๆถูกคิดค้นมาเพื่อใช้ในงานที่ต่างกัน ได้แก่
- Creational
- Structural
- Behavioral
ที่มา : https://samyarn.com/2014/basic-design-pattern/

ความเห็นที่ 2) โดย (ขอเรียกว่าอาจารย์นะครับ) อาจารย์ pigproxtube

ภาษา JavaScript ฉบับผู้เริ่มต้น part 14-2

: ฟังก์ชันก็คือค่าของตัวแปร (จบเรื่องฟังก์ชัน)

>> ฟังก์ชันของภาษาจาวาสคริปต์เป็นเหมือนกับค่าที่เรากำหนดให้กับตัวแปรครับ ตัวอย่างเช่น

var x = 10;

เราบอกได้ว่า ค่าคงที่ (literal) สิบถูกกำหนดให้กับตัวแปร x หรือก็คือตัวแปร x มีค่าเท่ากับสิบ ดังนั้นจากคำกล่าวที่ว่า 'ฟังก์ชันก็คือค่าของตัวแปร' จึงสามารถเขียนได้ในรูปแบบต่อไปนี้ด้วยครับ

var x = function( ) { return 10; };

document.write( x() ); ผลลัพธ์เท่ากับ 10

>> ซึ่งจากตัวอย่างข้างต้น หากเราเขียนว่า document.write( x ); เฉยๆแบบนี้ก็จะได้ค่าเป็นฟังก์ชันที่ถูกกำหนดให้ x หรือก็คือค่า "function ( ) { return 10; }" นั่นเอง

>> และเรียกค่าของตัวแปรที่ถูกกำหนดให้เป็นฟังก์ชันว่า Function Literal โดยพิสูจน์ได้จากตัวอย่างต่อไปนี้

var x = 10;
document.write( typeof(x) ); ผลลัพธ์เท่ากับ number
var y = function() { };
document.write( typeof(y) ); ผลลัพธ์เท่ากับ function

>> เราสามารถส่งค่าที่เป็น function เหมือนกับการส่งค่าประเภทอื่นๆ ตัวอย่างเช่น
var x = 10;
var y = x;
document.write( y ); ผลลัพธ์เท่ากับ 10

ในทำนองเดียวกัน

var x = function() { return 99; };
var y = x;
document.write( y() ); ผลลัพธ์เท่ากับ 99

>> ย้อนกลับไปเรื่องของ array กับฟังก์ชันที่ชื่อว่า sort โดยปกติจะแปลงค่าในอาร์เรย์ทั้งหมดเป็นสตริงแล้วนำมาเปรียบเทียบกันใช่ไหมครับ ถ้าค่าทั้งหมดนั้นเป็นตัวเลข ก็จะได้ชุดตัวเลขที่เรียงลำดับจากน้อยไปหามาก ดังนี้
var x = [30, 20, 40, 50, 10];
x.sort();
document.write( x.join() ); ผลลัพธ์เท่ากับ 10,20,30,40,50

>> ทว่าเราสามารถกำหนดค่าการ sort ให้เป็นแบบอื่นได้ (เช่น เรียงลำดับจากมากไปหาน้อย) โดยส่งค่าฟังก์ชันต่อไปนี้เข้าไป
var maxToMin = function( first, second ) { return second - first; };
x.sort( maxToMin );
document.write( x.join() ); ผลลัพธ์เท่ากับ 50,40,30,20,10

>> อ่านเพิ่มเติมเกี่ยวกับอัลกอริทึมการ sort พร้อมเหตุผล
http://www.w3schools.com/jsref/jsref_sort.asp

>> โอกาสหน้าพบกับ Object และ Class หัวใจของการ design pattern ที่น่าหลงไหล เรื่องสุดท้ายก่อนที่เราจะไปมันส์กันต่อกับการสร้างเกมด้วยภาษาจาวาสคริปต์ครับผม

ภาษา JavaScript ฉบับผู้เริ่มต้น part 14-1

: ฟังก์ชันหรือก็คือค่าของตัวแปรในรูปแบบฟังก์ชัน

>> ฟังก์ชัน (function) คืออะไรคะ?
ตอบ โดยทั่วไปคือกลุ่มโค้ดที่เขียนซ้ำๆในโปรแกรม ใช้อัลกอริทึมเดียวกันทั้งหมด เราจะแยกกลุ่มโค้ดเหล่านั้นออกมา ตั้งชื่อให้กับมัน และเรียกพวกมันโดยรวมว่าฟังก์ชันครับ

>> ประโยชน์ของฟังก์ชันคืออะไรครับ
ตอบ เพราะฟังก์ชันคือโค้ดที่เขียนด้วยอัลกอริทึมเดียวกัน (เขียนโค้ดเหมือนกัน) เมื่อเราแยกโค้ดเป็นฟังก์ชันต่างๆ ก็จะทำให้แก้ไขโปรแกรมได้ง่ายขึ้น เมื่อแก้ไขเพียงจุดเดียวก็จะทำให้จุดอื่นๆที่เรียกใช้ฟังก์ชันเดียวกันนี้ได้รับผลไปด้วย ทั้งยังอำนวยความสะดวกปกปิดโค้ดที่ซับซ้อนซึ่งเราไม่ได้มุ่งเน้นในลอจิกของเรา ตัวอย่างเช่น
document.write( ) สามารถแสดงข้อความออกไปที่หน้าเว็บบราเซอร์ได้
array.join( ) สามารถคืนค่าเป็นสตริงของสมาชิกทั้งหมดออกมาได้

>> จะสร้างฟังก์ชันได้อย่างไรล่ะ?
ตอบ เราควรทราบก่อนว่าฟังก์ชันของภาษาจาวาสคริปต์นั้น นอกจากจะใช้แบ่งโปรแกรมออกเป็นการทำงานย่อยๆแล้ว มันยังสามารถเป็นค่าของตัวแปรได้อีกด้วย แต่ก่อนจะกล่าวถึงประเด็นหลัง มาเรียนรู้วิธีการสร้างฟังก์ชันขึ้นมาก่อน

function functionName( parameters ) { ... }

แจกแจงดังนี้
- อันดับแรกคือคีย์ function ต้องเขียนแบบนี้เลยนะ
- ต่อไปก็ functionName ซึ่งจะตั้งชื่ออะไรก็ได้ เหมือนกับการตั้งชื่อตัวแปร ทว่าขอให้สื่อความหมายต่อกระบวนการที่ทำเป็นใช้ได้
- วงเล็บ ( และ ) จำเป็นต้องมีเสมอ
- parameters มีหรือไม่มีก็ได้ มีกี่ตัวก็ได้ มันก็คือชื่อตัวแปรใดๆก็ได้ที่เป็นทางผ่านของ input ที่ต้องการส่งให้กับฟังก์ชัน
- วงเล็บ { และ } จำเป็นต้องมีเสมอ
- สุดท้ายคือโค้ดที่เป็นอัลกอริทึมของฟังก์ชัน และหากฟังก์ชันนี้ส่งค่าผลลัพธ์กลับออกไปได้ ก็ควรระบุคีย์ return ด้วยนะ

>> สำคัญมาก เหล่า parameters ต่างๆที่ถูกกำหนดขึ้น รวมถึงทุกตัวแปรที่ประกาศในฟังก์ชันเป็นตัวแปร local ทั้งหมด

>> ตัวอย่างการสร้างฟังก์ชันบวกเลขสองจำนวน

function summation(x, y) {
return x + y;
}

document.write( summation(10, 20) ); ผลลัพธ์คือ 30
document.write( summation(-10, 10) ); ผลลัพธ์คือ 0

>> รู้จักกับตัวแปร arguments
ตัวแปร arguments เป็น implicit หรือก็คือตัวแปรที่จาวาสคริปต์เตรียมไว้ให้ใช้ สามารถอ้างอิงเพื่อใช้งานได้เลย มันมีชนิดเป็น array และเราสามารถนำมันมาประยุกต์ใช้ได้ดังตัวอย่างต่อไปนี้ สมมติเขียนฟังก์ชัน summation ขึ้นใหม่ ให้รับค่ามาบวกกันเท่าไรก็ได้

function summation() {
var sum = 0;
for(var i = 0; i < arguments.length; i++) { sum = sum + arguments[i]; }
return sum;
}

document.write( summation(10, 20) ); ผลลัพธ์คือ 30
document.write( summation(10, 20, 30, 40) ); ผลลัพธ์คือ 100
document.write( summation() ); ผลลัพธ์คือ 0

>> part นี้ยาวเกินไปแล้ว ไว้ part หน้าเราจะมาคุยกันว่าฟังก์ชันที่เป็นค่าของตัวแปรได้อีกด้วยนั้นเป็นเช่นไร

>> อ้อ ขอแนะนำ blog ของ Level Up Studio ไว้ด้วยนะครับ เห็นว่าทำ blog ได้สวยถูกใจดี พร้อมเนื้อหาการใช้ foreach กับ array ครับ
http://blog.levelup.in.th/2010/06/30/javascripts-foreach-foreach-%E0%B9%83%E0%B8%99-javascript/

ภาษา JavaScript ฉบับผู้เริ่มต้น part 13

: ทบทวนเรื่องการประกาศและขอบเขตการใช้งานตัวแปร

>> ตัวแปรในภาษาจาวาสคริปต์ใดๆสามารถเก็บข้อมูลชนิดใดก็ได้ (untyped)

>> การประกาศตัวแปรด้วยคีย์ var ซ้ำกันสามารถทำได้ ให้ผลเป็นตัวแปรเดียวกัน เช่น
var x = 10;
var x = 20;
document.write( x ); ได้ผลลัพธ์เท่ากับ 20

>> การเรียกใช้ตัวแปรที่ไม่ได้กำหนดค่าให้ จะให้ผลเป็น undefined เสมอ

>> การเรียกใช้ตัวแปรที่ไม่ได้ประกาศไว้ จะให้ผลเป็น undeclared error

>> ตัวแปรในภาษาจาวาสคริปต์แยกได้ สอง ขอบเขต คือ global กับ local

>> ขอบเขต global คือการประกาศตัวแปรนอกฟังก์ชัน ส่วนขอบเขต local คือการประกาศตัวแปรในฟังก์ชัน

>> ตัวแปรที่อยู่ในขอบเขต global สามารถเรียก ณ ที่ใดในสคริปต์ก็ได้ (ในหน้า html นั้น) ต่างจากตัวแปรที่อยู่ในขอบเขต local สามารถเรียกได้ภายในฟังก์ชันเท่านั้น

>> สามารถประกาศตัวแปร global ชื่อเดียวกับ local ได้ และหากเรียกใช้ตัวแปรดังกล่าวภายในฟังก์ชัน จะถือว่าเรียกใช้ตัวแปร local นะจ๊ะ ตัวอย่างเช่น
var x = 10;
function area() {
var x = 20;
document.write( x );
}

area(); ผลลัพธ์คือ 20
document.write( x ); ผลลัพธ์คือ 10

>> หากละคีย์ var สำหรับการประกาศตัวแปร local ด้วยตัวอย่างข้างต้น จะถือเป็นการกำหนดค่าให้ตัวแปร global หรือก็คือการกำหนดค่าใหม่ให้กับตัวแปรที่ถูกประกาศแล้วผ่านฟังก์ชันเท่านั้นเอง
var x = 10;
function area() {
x = 20;
document.write( x );
}

area(); ผลลัพธ์คือ 20
document.write( x ); ผลลัพธ์คือ 20

>> ตัวแปรในภาษาจาวาสคริปต์ไม่มีระบบ block-level ตัวอย่างต่อไปนี้สามารถแสดงค่าของ y ได้แม้ว่าจะประกาศมันภายใน scope ของ if-else
function typeOfNumber( x ) {
if ( x >= 0 ) { var y = "positive integer"; }
else { var y = "negative integer"; }
document.write( y );
}

typeOfNumber( 10 ); ผลลัพธ์คือ "positive integer"

>> ในฟังก์ชันใดๆของจาวาสคริปต์ ตัวแปร local ที่ถูกประกาศจะเก็บไว้ในหน่วยความจำชั่วคราว เมื่อลำดับการประกาศตัวแปรนั้นไม่ถูกต้อง ค่าที่ได้จึงเป็น undefined ไม่ใช่ undeclared error แม้กระทั่งมีตัวแปร global ถูกประกาศไว้ก่อน แล้วเรียกชื่อของตัวแปร global นั้นภายในฟังก์ชัน ค่าที่ได้ก็ยังคงเป็น undefined ด้วยเหตุผลเดียวกัน ตัวอย่างเช่น
var x = 10;
function test() {
document.write( x );
var x = 30;
}

test(); ผลลัพธ์คือ undefined

>> เราสามารถแก้ไขผลลัพธ์ของตัวอย่างข้างต้นให้ถูกต้องด้วยการลบบรรทัด
var x = 30; ทิ้งไป เท่านี้มันก็จะไปใช้ค่าของตัวแปร global แทน

>> โอกาสหน้าพบกับเรื่อง Functions ก่อนจะโถมเข้าเรื่องคลาสกับออบเจ็กต์แบบจัดหนักเต็มลูกสูบฉบับผู้เริ่มต้นเช่นเคยครับ

ภาษา JavaScript ฉบับผู้เริ่มต้น part 12-3

: Arrays กับฟังก์ชันของมัน (จบตอนอาร์เรย์)

>> ฟังก์ชัน join(separator:string) : string
คืนสตริงใหม่ที่เกิดจากคั้นด้วย separator ตัวอย่างเช่น
var weights = [10, 20, 30];
document.write( weights.join() ); ผลคือ "10,20,30"
document.write( weights.join("/") ); ผลคือ "10/20/30"

>> ฟังก์ชัน reverse() : void
เปลี่ยนลำดับสมาชิกภายในอาร์เรย์จากหน้าไปหลัง จากหลังมาหน้า
weights.reverse();
document.write( weights.join() ); ผลคือ "30,20,10"

>> ฟังก์ชัน sort(function:Function) : Array
เรียงลำดับค่าในอาร์เรย์ตามเงื่อนไขของ function ที่มีชนิดเป็นฟังก์ชัน (Function) (รายละเอียดละไว้ก่อน ไว้ค่อยคุยกันทีหลังนะจ๊ะ) หากไม่กำหนด คือเขียนแค่ sort() เฉยๆ จะเปลี่ยนค่าในอาร์เรย์ทั้งหมดเป็นสตริง แล้วนำมาเปรียบเทียบกันเจ้าค่ะ โดยการเปลี่ยนแปลงนี้เกิดขึ้นในตัวอาร์เรย์เองเลยด้วย
var myGirlfriends = [ "Pro", "Phai", 2 ];
myGirlfriends.sort();
document.write( myGirlfriends.join() ); ผลคือ "2,Phai,Pro"

>> ฟังก์ชัน concat(value...) : Array
เพิ่มสมาชิกให้อาร์เรย์แบบต่อเนื่องไปเรื่อยๆ (ได้อาร์เรย์ใหม่) โดยที่ตัวอาร์เรย์เดิมยังมีสมาชิกคงเดิม
var agents = [ "A", "B", "C" ];
var agentList = agents.concat( "D", "E" );
document.write( agentList.join() ); ผลคือ "A,B,C,D,E"
document.write( "<br/>" );
document.write( agents.join() ); ผลคือ "A,B,C"

>> ขอบคุณ JavaScript Programming Guide ที่นำความรู้มาให้ และนี่คือฟังก์ชันอื่นๆเพิ่มเติมจากที่ได้ยกตัวอย่างครับ
http://www.w3schools.com/jsref/jsref_obj_array.asp

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

ภาษา JavaScript ฉบับผู้เริ่มต้น part 12-2

: Arrays กับความสามารถของมัน

>> เมื่อเพื่อนๆได้รู้จักอาร์เรย์ไปบ้างแล้ว เพื่อนๆควรทราบว่าเราสามารถสร้างอาร์เรย์ว่างได้ หรือก็คืออาร์เรย์ที่มีขนาดเป็นศูนย์ หรือกล่าวว่ายังไม่มีสมาชิกนั่นเอง เราเรียกอาร์เรย์ลักษณะนี้ว่า Empty Array ครับ

- สร้าง array ด้วย array literal ตัวอย่างเช่น
var sims = [ ];
- สร้าง array ด้วย array constructor ตัวอย่างเช่น
var weights = new Array();

>> เรายังสามารถจองพื้นที่หรือจองขนาดของอาร์เรย์ได้ด้วย เช่น จองอาร์เรย์สำหรับเก็บหมายเลขโทรศัพท์ของซิมจำนวนสิบหมายเลข จะเขียนได้ว่า
var sims = new Array(10);

>> เราสามารถสอบถามขนาดของอาร์เรย์ได้ โดยถามจากพร็อพเพอร์ตี้ชื่อ length ดังนี้
sims.length จะได้ค่าเท่ากับ 10
weights.length จะได้ค่าเท่ากับ 5

>> และยังปรับลดขนาดของอาร์เรย์ได้ดั่งใจ ตัวอย่างเช่น

sims.length = 3; หมายความว่าขณะนี้เหลือซิมเพียงสามหมายเลขเท่านั้น คือหมายเลข ณ sims[0], sims[1] และ sims[2] ที่เหลือหายไปสิ้นแล้ว โปรดระวังการลดขนาดอาร์เรย์ เพราะจะทำให้สูญเสียข้อมูล

weights.length = 20; หมายความว่าขณะนี้มีผู้ต้องการเข้าร่วมโครงการลดน้ำหนักเพิ่มเป็น 20 คน (จากเดิม 5 คน) ซึ่งการเพิ่มขนาดของอาร์เรย์ไม่ส่งผลกระทบใดๆต่อข้อมูลเดิมที่มีอยู่

>> ตัวอย่างต่อไปนี้คือโปรแกรมสอบถามความต้องการของผู้ที่ต้องการซื้อบ้านในโครงการที่มีชื่อว่า 'ปันบ้านสร้างมิตร คืนชีวิตที่เป็นสุขให้กับคุณและครอบครัว'

เราจะสังเกตได้ว่ามีการอ้างถึงตัวแปรที่มีชนิดเป็นอาร์เรย์ด้วย ดังนี้

- elements.length ขอขนาดของอาร์เรย์ตามจำนวนสมาชิกที่บรรจุอยู่ภายในฟอร์ม ซึ่งได้ค่าเท่ากับ 4

- elements[optionSize - 1] อ้างถึงสมาชิกลำดับที่ 4 (มีค่า index เท่ากับ 3) หรือก็คือตัวเลือกที่มีชื่อว่า 'เลือกทั้งหมด' นั่นแหละครับ

- elements[index] หมายถึงตัวเลือกใดๆที่บรรจุอยู่ภายในฟอร์ม จากโค้ดเป็นไปได้สามค่า ได้แก่ elements[0], elements[1] และ elements[2] หรือก็คือตัวเลือกลำดับที่ 1, 2 และ 3

>> ตัวอย่างนี้แถมเรื่องฟังก์ชัน (Function) มาด้วย แน่นอนว่าจะต้องกล่าวถึงใน part ต่อๆไป จบเรื่องฟังก์ชันคงได้มันส์กันมากกว่านี้ หุหุ สวัสดีครับ

ภาษา JavaScript ฉบับผู้เริ่มต้น part 12-1

: Arrays ที่น่าพิสมัย

>> ในที่สุดก็มาถึงโครงสร้างข้อมูลที่ซับซ้อนขึ้นอีกนิด แต่ไม่ได้ยากเกินจะเข้าใจ หลายคนรู้จักแล้ว หลายคนลืม หลายคนต้องเปิดตำราหรือเว็บเพื่อกระตุ้นหน่วยความจำ และหลายคนเพิ่งได้รู้รวมถึงผมด้วย ดังนั้นโอกาสนี้เราจะมาตอบสามคำถามที่ควรรู้เกี่ยวกับอาร์เรย์ (array) ครับ

1) อาร์เรย์คืออะไร?
2) อาร์เรย์สร้างอย่างไร?
3) อาร์เรย์ใช้อย่างไร?

>> อาร์เรย์คืออะไร?
ตอบ ของ่ายๆเลยนะครับ คือตัวแปรชุด มีเป็นชุด มีเป็นเซต เหมามาแบบยกชุด ตัวอย่างเช่น
- น้องซื้อซิมป๊ะ เนี่ยเบอร์ละยี่สิบบาท เหลือสิบเบอร์แล้วสวยๆทั้งนั้น จะเห็นว่าซิมโทรศัพท์ยกมาเป็นชุด อาจตั้งชื่อตัวแปรนี้ว่า sim มีจำนวนทั้งสิ้นสิบตัวแปร จึงเขียนเป็น sim1, sim2, sim3, ...sim10 เป็นต้น
- นี่พวกเรา! เพราะวันนี้เราจะมาลดความอ้วนกัน เรามีกันห้าคน ไหนบอกซิว่าก่อนลดใครมีน้ำหนักเท่าไรบ้าง จะเห็นว่าน้ำหนักยกมาเป็นชุด อาจตั้งชื่อตัวแปรนี้ว่า weight มีจำนวนทั้งสิ้นห้าตัวแปร จึงเขียนเป็น weight1, weight2, ...weight5

ดังนั้นอาร์เรย์ก็คือคอลเลคชันของ elements ที่แต่ละ element เอาไว้เก็บข้อมูลที่มีความสัมพันธ์ในทิศทางเดียวกัน เช่น เก็บเบอร์โทรศัพท์ทั้งหมดหรือเก็บค่าน้ำหนักทั้งหมด เป็นต้น

แต่จาวาสคริปต์ใจดีกว่านั้น คือให้อาร์เรย์ชื่อใดๆสามารถเก็บข้อมูลต่างชนิดกันได้ เราจะเอาเบอร์โทรศัพท์ไปเก็บรวมกับค่าน้ำหนักก็ยังได้ แล้วตั้งชื่อเก๋ๆว่า simAndWeight แบบนี้ก็ได้ ทว่าไม่แนะนำนะครับ เพราะมันเลอะเทอะเกินไป แยกเป็นประเภทๆจะดีกว่า

>> อาร์เรย์สร้างอย่างไร?
ตอบ จากตัวอย่างที่ยกมาข้างต้น ตัวแปร sim มีสิบตัว ตัวแปร weight อีกห้าตัว แต่ที่น่ากลัวคือในทางปฏิบัติจริงๆแล้วจำนวนอาจมากกว่านี้หลายเท่า กรี๊ด! (ใครจะมานั่งประกาศตัวแปรเป็นร้อยๆเป็นพันๆชื่อจริงไหม หรืออาจมี!?) ซึ่งเหล่านี้ควรถูกจัดการด้วยอาร์เรย์ด้วยวิธีการสร้างอาร์เรย์ดังนี้ครับ
- สร้างด้วย Array Literal
- สร้างด้วย Array Constructor

>> สร้างด้วย Array Literal
literal ก็คือค่าที่ใช้กำหนดให้กับตัวแปร เป็นตัวอักษร ตัวเลข เป็นสตริงหรืออื่นๆ โดยมีรูปแบบคือ
var arrayName = [ value1, value2, ..., valueN ];
ตัวอย่างเช่น
var sims = ["0843677455", "0893666451", "0815501956", "0893991999", "0873677454", "0819606857", "0890900090", "0831545678", "0821221222", "0800000000"];

>> สร้างด้วย Array Constructor
ก็เหมือนกับตอนประกาศตัวแปรชนิดออบเจ็กต์ครับ คือต้องมีคำสั่ง new มาร่วม โดยมีรูปแบบคือ
var arrayName = new Array( value1, value2, ..., valueN );
ตัวอย่างเช่น
var weights = new Array(60, 63, 75, 120, 40);

>> อาร์เรย์ใช้อย่างไร?
ตอบ ใช้ง่ายมากครับ เพียงใส่ตัวเลขที่เรียกว่า index ลงไประหว่างเครื่องหมาย [ และ ] ก็จะสามารถเข้าถึงค่าที่เก็บไว้ภายในตัวแปรอาร์เรย์นั้นๆได้เลย โดยมีกฎกติกาเพิ่มเติมมาเพียงเล็กน้อยเท่านั้น กล่าวคือค่าของ index ถูกกำหนดให้เริ่มต้นที่เลขศูนย์ ดังนั้น index ใดๆที่เราต้องการเข้าถึงจึงต้องลบด้วยหนึ่งเสมอ
ตัวอย่างเช่น
- พี่ค่ะ หนูอยากได้ซิมหมายเลข "0843677455" นั่นคือ sims[0]
- พี่ขา หนูขอดูเบอร์ "0893666451" หน่อยสิคะ นั่นคือ sims[1]
- พี่ๆ หยิบเบอร์ "0815501956" ให้ผมที นั่นคือ sims[2]
- น้องๆพี่เอาเบอร์ "0800000000" นั่นคือ sims[9]
- และถ้ามีกวนทีนขอซิมที่ไม่มีอยู่ในรายการ เช่นขอเบอร์ "0888888888" นั่นคืออ้างมั่ว ค่าที่ได้แทนที่จะเป็นหมายเลขโทรศัพท์ก็จะได้ undefined หรือกำปั้นนั่นเอง

>> หมายเหตุ อาร์เรย์นั้นไม่ว่าจะสร้างด้วยวิธี literal หรือ constructor ไม่มีความแตกต่างกัน ได้เป็นชนิดออบเจ็กต์ทั้งคู่ สามารถหดยืดขนาดได้อัตโนมัติซึ่งจะขอยกไปเล่ายัง part ต่อไป สวัสดีครับ

ภาษา JavaScript ฉบับผู้เริ่มต้น part 11

: การจัดการ errors ด้วย try/catch

>> อะไรคือ error เหรอจ๊ะ?
ตอบ คือความผิดพลาดต่างๆที่เกิดขึ้นกับโปรแกรม ไม่ว่าจะเกิดขึ้นจากสภาพแวดล้อมที่โปรแกรมนั้นทำงานอยู่ หรือเกิดจากอัลกอริทึมของเราเอง หรือกระทั่งเกิดจากการเขียนโปรแกรมผิดไวยากรณ์ ขอยกตัวอย่างง่ายๆดังนี้นะครับ แม่จะทำกับข้าว แต่ว่ารสดีหมด จึงใช้ลูกชายจอมซนไปซื้อมาให้หน่อย ถ้าเกิดว่าลูกชายสามารถซื้อรสดีกลับมาให้แม่ได้แสดงว่าโปรแกรมนี้ทำงานปกติ เอาล่ะครับ เหตุการณ์ต่อไปนี้อาจเกิดขึ้น ซึ่งถือเป็นข้อผิดพลาดในลักษณะที่แตกต่างกัน

- กรณีที่ 1 ถ้าเกิดแม่บอกว่าเอามอไซค์ไปนะลูก แต่ลูกกลับดื้อเดินไปเฉยเลย กว่าแม่จะได้รสดีเธอก็หมดอารมณ์ทำกับข้าวไปเสียแล้ว... ความผิดพลาดนี้คือสภาพแวดล้อมขณะที่โปรแกรมทำงานครับ ในกรณีนี้คือทำงานได้ แต่ใช้เวลานานเกินไป

- กรณีที่ 2 ลูกเอามอไซค์ไปอย่างที่แม่บอก ทว่ากลับมาพร้อมผงชูรสตราชฎา? ความผิดพลาดนี้คืออัลกอริทึมผิดพลาด หรือที่เรียกว่า logic error กล่าวคือโปรแกรมไม่พัง แต่ผลลัพธ์ไปดาวอังคาร คือไม่ถูกต้องตามที่ต้องการนั่นเอง

- กรณีที่ 3 ขณะที่ลูกขับมอไซค์อยู่นั้น ปรากฏว่าขับไปชนหมา เอ๋ง!!! รถล้มได้รับบาดเจ็บถึงขั้นต้องหามส่งอนามัยหมู่บ้าน (อุ้มหมาไปรักษา เฮ้ยไม่ใช่) ลูกชายไม่สามารถซื้อรสดีกลับมาให้แม่ได้ มิหนำซ้ำกับข้าวแม่ก็ไม่ได้ทำเพราะเป็นห่วงลูก ความผิดพลาดลักษณะนี้คือ runtime error เกิดขึ้นขณะที่โปรแกรมกำลังทำงานอยู่ อาจเป็นที่หน่วยความจำ ระบบเน็ตเวิร์คหรืออะไรก็แล้วแต่ ที่มีผลทำให้สภาพแวดล้อมของโปรแกรมเปลี่ยนไป เป็นไปได้ทั้งหมดครับ ขอยกตัวอย่างง่ายๆ เช่น ตั้งตัวแปร x เก็บค่า 10 ไว้ แล้วหารมันด้วย 10 ด้วย 8 ด้วย 6 (สมมติ) ลดลงทีละสองในแต่ละรอบ สุดท้ายหาร x ด้วย 0 ก็เกิด runtime error ขึ้นจนได้ กรณีอย่างนี้จะต้องคิดให้ดี คิดอย่างหวาดระแวงเข้าไว้

- กรณีที่ 4 แม่บอกลูกว่าซื้อรสดีให้หน่อยสิจ๊ะลูกจ๋า ลูกบอกไม่! แล้วก็นั่งเล่นเกมคอมพิวเตอร์ต่อไป หรือทำอะไรก็แล้วแต่ที่เป็นการขัดขวางความตั้งใจของแม่ที่ต้องการให้ลูกไปซื้อรสดีให้ในเชิงของโครงสร้าง ความผิดพลาดลักษณะนี้มักตรวจเจอตั้งแต่สั่ง compile หรือรันโปรแกรม เขาเรียกกันว่าไวยากรณ์ผิดพลาดหรือก็คือ syntax error นั่นแหละจ้า

>> ภาษาจาวาสคริปต์มี error อยู่สามประเภทหลักๆคือ
1) Syntax Error
2) Runtime Error
3) Logic Error
และต้องเข้าใจร่วมกันว่า จาวาสคริปต์นี้ไม่ครอบคลุมความผิดพลาดที่เกิดจากการเขียน syntax ผิดนะครับ (ไวยากรณ์เล็กๆน้อยๆ ถึงผิดมันก็ยอมให้ผ่านและทำงานได้) ควรระมัดระวังนิดนึง~

>> เราจะใช้คำสั่ง try/catch ห่อและรายงานความผิดพลาดที่เกิดขึ้น โดยเขียนโค้ดตามปกติในบล็อกของ try เมื่อเกิด error ขึ้น บล็อกของ catch จะถูกรันโดยอัตโนมัติ เรียกลักษณะเช่นนี้ว่าการจัดการความผิดพลาดด้วย try/catch

โครงสร้างของ try/catch คือ

try {
...
} catch ( ex ) {
...
}

ตัวอย่างเช่น

var x = 10, y = 20;
try {
var sum = x + y + z;
} catch ( ex ) {
alert ( ex.name );
alert ( ex.message );
}

คำตอบของ ex.name คือ ReferenceError คำตอบของ ex.message คือ z is not defined หรือจะเขียนการรายงานความผิดพลาดสั้นๆเพียง

alert ( ex );

ก็จะได้ผลลัพธ์เป็น ReferenceError: z is not defined หมายความว่าตัวแปร z ไม่ถูกประกาศแล้วจะอ้างอิงได้อย่างไร ประมาณนี้ครับ

>> ใน part ต่อไปเราจะคุยกันเรื่องของ Arrays มันคืออะไร ประกาศอย่างไร ใช้อย่างไร เราจะแหกแหวกมันออกมาชม ให้ขมขื่นน้ำตาไหลรินกันเลยทีเดียวเทียว อิอิอิ

ภาษา JavaScript ฉบับผู้เริ่มต้น part 10

: Iteration Statements เหล่าคำสั่งทำซ้ำ

>> คำสั่งทำซ้ำคืออะไรเหรอ?
ตอบ เพื่อนๆเคยใช้ if เคยใช้ switch มาแล้ว ตอนนี้รู้แล้วว่าพวกมันคือทางเลือกเพื่อกระทำอย่างหนึ่งอย่างใดใช่ไหม จะทำจริงหรือทำเท็จควบคุมสมใจอยาก บัดนี้ทางเลือกเหล่านั้นอาจไม่เพียงพอครับ ไม่พอในที่นี้คือ อาจต้องเขียนโค้ดเยอะ เขียนโค้ดยาวตามปริมาณข้อมูลที่มีอยู่เป็นร้อย เป็นพัน หรือเป็นหมื่นๆ หรือไม่รู้ด้วยซ้ำว่าปริมาณข้อมูลมีอยู่มากน้อย หรือต้องเขียนจาวาสคริปต์ให้หยุดรอคำสั่งยกเลิกจากผู้ใช้งาน โปรแกรมเมนูอาหารจึงจะปิดตัวลงไป อีกหลายหลากเหตุผลที่จำเป็นต้องมีกลุ่มคำสั่งจำพวกทำซ้ำ ซึ่งได้แก่
- for statement
- while statement
- do-while statement

>> ปริมาณข้อมูลเป็นที่ทราบแน่ชัด จำนวนรอบรู้แจ้งเห็นจริง ควรเลือกใช้ for statement เหตุผลคือ?
ตอบ for ถูกคิดขึ้นเพื่องานที่รู้จำนวนอย่างแน่นอน มีตัวแปร index คอยเพิ่มหรือลดค่าใดๆเพื่อบังคับให้เกิดรอบการทำงานทำซ้ำจนกว่าค่าของ index นั้นจะขัดกับเงื่อนไข ตัวอย่างเช่น

for ( var i = 0; i < 10; i++ ) {
document.write( i );
}

ผลลัพธ์จะได้ 0123456789 แสดงออก ณ บราเซอร์ เพราะค่าของ i ต้องน้อยกว่า 10 ดังนั้นค่าสูงสุดที่ได้จึงเท่ากับ 9 นั่นเอง และในที่นี้ตัวแปร i ก็คือ index ที่บังคับการเกิดรอบดังกล่าว

>> ทำทุกอย่างได้เหมือน for แต่ถูกออกแบบให้รับกับเงื่อนไขที่เป็นจริงอยู่เสมอจึงจะทำงาน ไม่คํานึงถึงจำนวนรอบหรือการทำซ้ำที่จะเกิด เอาเป็นว่าเงื่อนไขเป็นเท็จเมื่อไรค่อยออกจากวงวน ลักษระงานแบบนี้ให้เลือกใช้ while statement ครับ เหตุผลคือ?
ตอบ จริงอยู่ที่ทั้ง while และ for สามารถกำหนดเงื่อนไขและตัวแปร index ให้ทำงานอย่างเดียวกันเป๊ะๆ ทว่าตำราหลายเล่มได้กล่าวเอาไว้ว่า หากต้องนับจำนวนหรือค่าใดๆโดยขึ้นกับรอบและตัวแปร index ให้ใช้ for, แต่หากเป็นเงื่อนไขที่ไม่เกี่ยวข้องกับที่ยกมานี้ให้ใช้ while เพราะจะสื่อความหมายได้ดีกว่า อย่างน้อยก็ทำให้รู้ว่าสนใจรอบหรือไม่ ตัวอย่างการเขียน while ให้ทำงานดุจเดียวกับ for ข้างต้น

var i = 0;
while( i < 10 ) {
document.write( i );
i++;
}

ตัวอย่างการใช้ while ที่ไม่เกี่ยวกับจำนวนรอบ : โปรแกรมป้อนเลขท้ายสองตัว

var userInput = prompt("Please, Input your last two digits in a lottery ticket in this box.");
userInput = parseInt(userInput);

while ( userInput != 88 ) {
userInput = prompt("Please, Input your last two digits in a lottery ticket in this box.");
userInput = parseInt(userInput);
}

alert("You won the prize!!!");

โปรแกรมป้อนเลขท้ายสองตัวนี้ ป้อนผิดมันจะถามอยู่เรื่อยๆ แต่ถ้าป้อนถูก (ตัวเลขที่ถูกรางวัลคือ 88) ก็จะแสดงข้อความว่าคุณถูกรางวัลนะ แล้วจบโปรแกรมไป

>> ทำทุกอย่างได้เหมือนกับ while ต่างเพียงสิ่งที่ทำนั้นทำก่อนการตรวจสอบเงื่อนไข กล่าวคือ กระทำคำสั่งที่ต้องการไปก่อนครั้งหนึ่ง แล้วค่อยถามว่าจะทำซ้ำอีกหรือไม่ ลักษณะงานแบบนี้สมควรให้ do-while statement

ตัวอย่างการเขียน do-while ที่ให้ผลลัพธ์เช่นเดียวกับ while และ for ข้างต้น

var i = 0;
do {
document.write( i );
i++;
} while( i < 10 );

มันจะทำคำสั่ง document.write ก่อนครึ้งหนึ่งแล้วค่อยไปถามว่า i ยังคงน้อยกว่า 10 หรือไม่ ซึ่งต่างจาก while ที่ต้องถามคำถามนี้ก่อน

>> เนื้องจากว่าหน้ากระดาษ (อิเล็กทรอนิกส์) นี้ยาวเกินไปแล้ว part ต่อไปจะแนะนำการจัดการ errors ด้วย try/catch ครับ สวัสดีครับ

ภาษา JavaScript ฉบับผู้เริ่มต้น part 9

: ควบคุม Keyboard ด้วย JavaScript

>> ตอนนี้ฉันรู้แล้วว่าเธอทั้งหลายรู้จักภาษาจาวาสคริปต์กันพอสมควรแล้ว ถึงแม้จะไม่ถึงครึ่งของครึ่งของครึ่ง (แอบเศร้า) แต่ก็พอนำมันมาสร้างเป็นงานชิ้นเล็กๆได้แล้วนะเออ โอกาสนี้ฉันก็เลยจะชวนเธอมาดักจับเหตุการณ์การกดปุ่มใดๆบนคีย์บอร์ดกัน เอาละสิ แล้วต้องรู้เรื่องไหนบ้าง มาๆฉันจะเล่าสิ่งที่ฉันพอจะรู้ให้ฟัง

>> เธอที่น่ารักต้องรู้จักเจ้า Event Listener ก่อนนะ (ฉันอยากให้เธอใช้ตัวนี้) แล้วมันคืออะไรเหรอจ๊ะ?
ตอบ มันก็คือนักฟัง ที่จะคอยฟังสิ่งต่างๆที่อาจเกิดขึ้นเมื่อไรก็ได้ ฟังเพื่อต้องการกระทำอย่างหนึ่งอย่างใดจากสิ่งที่ฟังนั่นเอง ยังไม่เข้าใจอะ? เอางี้ รู้จักพวกชอบแอบฟังแอบดูชาวบ้านไหม ใครกำลังดัง ใครภาพหลุด ใครตบกับใคร ใครแย่งแฟนใคร ต้าย! นั่นแหละพวกชอบนินทาชาวบ้านก็ด้วย คือฟังแล้วเอามาเล่าต่อ ขยายเรื่องจริงสร้างเรื่องเท็จสนุกสนานกันวุ่นวาย

อ่านเพิ่มเติมเกี่ยวกับ JavaScript Event Listener
- จากเว็บมาตราฐาน http://www.w3schools.com/jsref/dom_obj_event.asp
- เข้าใจมันมากขึ้นพร้อมกับตัวอย่างที่ดี https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

>> เธอที่น่ารักต้องเข้าใจว่าทุกปุ่มที่เธอกดลงไปนั้นจะให้ค่าตัวเลขออกมาเสมอ และเขา (ใครก็ไม่รู้) ได้กำหนดความหมายของแต่ละตัวเลขเอาไว้หมดแล้ว เธอกับฉันมีหน้าที่ที่จะต้องรู้ว่าตัวเลขไหนให้ความหมายว่าอย่างไรพอ คือพอเท่าที่ต้องการใช้น่ะจ๊ะคนดี

อ่านเพิ่มเติมเกี่ยวกับ JavaScript Key Code
- พร้อมช่องสำหรับกดปุ่มใดๆ แล้วมันจะคืนค่าตัวเลข code ออกมา http://www.scripttheweb.com/js/ref/javascript-key-codes/
- document การใช้งานออบเจ็กต์ event เช่นเดียวกับการเรียกใช้ event listener อ่านตรงนี้แล้วรับรองว่าเข้าใจง่ายขึ้น https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

>> ตัวอย่างต่อไปนี้จะแสดงให้เธอเห็นว่า เราสามารถขอค่าออบเจ็กต์ Element จากแท็กที่ชื่อ img เพื่อเปลี่ยนเส้นทางของภาพผ่านแอตทริบิวต์ src ของมันได้ ซึ่งภาษา HTML เวลาที่เธอต้องการแสดงรูปภาพจะเขียนได้อย่างง่ายๆดังนี้

<img src="x" />

เมื่อ x หมายถึง URL ใดๆที่อ้างอิงไปยังรูปภาพที่ต้องการนั้น จากโค้ดเราขอออบเจ็กต์ Element ของแท็ก img เก็บไว้ในตัวแปรชื่อ myImage จากนั้นตรวจจับค่าคีย์ที่จะเกิดขึ้น หากกดปุ่ม A (คีย์โค้ดคือ 65) จะเปลี่ยนค่าของ src ไปยัง URL ใหม่ แต่หากกลับไปกดปุ่ม D (คีย์โค้ดคือ 68) จะเปลี่ยนค่าของ src ไปยัง URL เดิม ลองกดปุ่มทั้งสองนี้เล่นสลับไปมาสิ

>> part หน้ามาลุยต่อกันเรื่องของลูป (Loop) เขียนภาษาจาวาสคริปต์อย่างไรให้เกิดการกระทำโค้ดซ้ำๆหลายๆรอบได้กับหัวข้อ Iteration Statements ครับ

ภาษา JavaScript ฉบับผู้เริ่มต้น part 8-2

: Condition Statement กับคำสั่ง switch statement

>> จาก part ที่ 8-1 เรื่องของ if-else-if statement คราวนี้เพื่อนๆจะได้รู้จักกับ switch statement ซึ่งมีลักษณะการทำงานแทบไม่ต่างจาก if-else-if statement เลย โดยมีโครงสร้างดังนี้

switch ( expression ) {
case value1 : break;
case value2 : break;
default :
}

เงื่อนไขหรือ expression ของ switch จะเทียบค่าว่าตรงกับค่า value ใดในแต่ละ case (จะเขียนกี่ case ก็ได้นะ) เปรียบดั่งเขียน else if ( expression ) นั่นแหละจ๊ะ เมื่อค่าของ expression ตรงกับค่าของ value ใดๆในแต่ละ case แล้วไซร้ การกระทำคำสั่งก็จะเริ่ม ณ จุดนั้น (หลังเครื่องหมาย : ) เป็นต้นไปจวบกระทั่งพบคีย์เวิร์ด break ก็จะหลุดออกจาก switch แต่หากไม่เข้า case ใดเลยก็จะไปกระทำคำสั่งใน default แทน ซึ่งเปรียบดั่งเขียน else นั่นเอง

>> ฟังแล้วงงเพราะยังไม่ค่อยชิน พาทำตัวอย่างหน่อยสิ
ตอบ จัดไป

var today = new Date();
var day = today.getDay();
switch(day) {
case 0 : day = "Sunday"; break;
case 1 : day = "Monday"; break;
case 2 : day = "Tuesday"; break;
case 3 : day = "Wednesday"; break;
case 4 : day = "Thursday"; break;
case 5 : day = "Friday"; break;
case 6 : day = "Saturday"; break;
}
alert("This day is " + day);

จากตัวอย่างข้างต้น เราสร้างออบเจ็กต์ Date ขึ้นมาโดยคำสั่ง new Date (งงหรือสงสัยข้ามไปก่อน เอาเป็นว่าให้ใช้แบบนี้เวลาสร้าง Date) ค่าของมันเก็บไว้ในตัวแปรชื่อ today ซึ่งอ้างอิงตามวันและเวลาของเครื่องคอมฯของเพื่อนๆ และเมื่อเราเอา today มาดอท (.) กับ getDay ก็จะได้ตัวเลขออกมา ซึ่งมีค่าอยู่ระหว่าง 0 ถึง 6 เราก็เลยไปตั้ง case ค่าของตัวเลข 0 ถึง 6 เพื่อเปลี่ยนค่าของตัวแปร day เป็นสตริงใดๆที่มีความหมายกับตัวเลขนั้นๆ ตัวอย่างเช่น วันนี้เป็นวันจันทร์ (ณ ขณะนี้) ค่าของ day ก็จะได้เท่ากับ 1 เมื่อนำเลขนี้ไป switch กับ case ใดๆก็เท่ากับ case 1 : ซึ่งทำคำสั่ง day = "Monday" (ตอนนี้เลข 1 ที่เคยเก็บไว้ในตัวแปร day หายไปแล้ว โดยมี "Monday" เก็บเอาไว้แทน) จากนั้นเจอคำสั่ง break โปรแกรมก็จะหลุดออกจาก switch ไปทำคำสั่ง alert ต่อไป

สามารถอ่านเกี่ยวกับ Date เพิ่มเติมได้จาก
http://www.tizag.com/javascriptT/javascriptdate.php

>> ฉันไม่เห็นการใช้ default เลย สรุปว่าใส่หรือไม่ใส่?
ตอบ ตาแหลมมากครับ คำสั่ง default จะใส่หรือไม่ใส่ก็ได้ ขึ้นอยู่กับว่าเราทราบค่าที่แน่นอนของ switch หรือเปล่า ถ้าทราบไม่ต้องใส่ครับ (ไวยากรณ์ไม่บังคับ) แต่ถ้าไม่ทราบสมควรใส่ไว้ จะได้รู้ไงว่าไม่มี case ใดๆสามารถทำตาม switch ได้เลย ดังตัวอย่างผมทราบว่าค่าของ getDay คือ 0 ถึง 6 ไม่มีค่าอื่นนอกจากนี้อีกแล้ว ดังนั้นละ default ได้อย่างสบายใจ แถมให้นิด~ คำสั่ง default ไม่จำเป็นต้องใส่ break ต่อท้ายนะครับ (ไวยากรณ์ไม่บังคับ)

>> ขอตัวอย่างที่ต้องใช้ default หน่อยสิจ๊ะ?
ตอบ จัดไปครับตามรูปภาพเลย โดยคำสั่ง prompt คือการรับข้อมูลผ่านกล่องลอย (ผมเรียกมันอย่างนี้นะ) แล้วเก็บค่าที่รับมาไว้กับตัวแปรชื่อ userInput ซึ่งจะมีไทป์เป็นสตริง เปลี่ยนค่าสตริงเป็นตัวเลขก่อนด้วย parseInt (เปลี่ยนค่าใดๆเป็น Number) จากนั้นนำค่าที่ได้ไปใช้กับ switch เหมือนตัวอย่างก่อนหน้านี้

>> ใน part 9 ต่อจากนี้ ขอนำเพื่อนๆเขียนภาษาจาวาสคริปต์ควบคุมการกดปุ่มที่แป้นพิมพ์ครับ เพื่อที่จะสลับรูปภาพจากรูปหนึ่งสู่อีกรูปหนึ่ง ไว้เจอกันนะค๊าบบบ

อ่านเกี่ยวกับคำสั่ง parseInt เพิ่มเติม
http://www.w3schools.com/jsref/jsref_parseint.asp

ภาษา JavaScript ฉบับผู้เริ่มต้น part 8-1

: Condition Statement กับคำสั่ง if-else-if statement

>> อะไรคือ condition statement เหรอ?
ตอบ ให้คิดง่ายๆอย่างนี้ครับ ทุกวันนี้เรามีถนนสำหรับให้รถวิ่ง ย่อมมีทั้งทางตรง ทางโค้งและทางแยก condition statement ก็คือทางแยกของถนนที่ว่าจะเลี้ยวซ้ายหรือขวาหรือตรงไปในทางโปรแกรมมิ่งนั่นเอง เพื่อนๆหลายคนฟังแล้วอ๋อทันที ใช่ครับ ก็คือเหล่าคำสั่งต่อไปนี้
- if-else-if statement
- switch statement

>> if-else-if statement คืออะไรเหรอ?
ตอบ มันคือเงื่อนไขให้เลือกทางหนึ่งทางใด ซึ่งมีโครงสร้างดังนี้

if ( boolean_expression ) { ... }

เมื่อ boolean_expression คือค่าที่มีผลเป็น จริง (true) หรือ เท็จ (false) เท่านั้น ตัวอย่างเช่น

var x = 10;
if(x == 10) {
alert("Yes, x equals ten");
}

คำตอบที่ได้คือข้อความ Yes, x equals ten ปรากฏขึ้นมาครับ เพราะเรากำหนดค่าของตัวแปร x เท่ากับ 10 แล้วถามการเท่ากันนี้ในเงื่อนไขของคำสั่ง if ว่าตัวแปร x เท่ากับ 10 ใช่ไหม (ด้วยเครื่องหมาย == นะจ๊ะ) คำตอบคือ true แน่นอน

var x = 0;
if(x = 10) {
alert("Yes, set x by ten");
}

คำตอบของกรณีข้างต้นนี้อันตรายมาก (ด้วยเครื่องหมาย = เพียงอันเดียว) เพราะภาษาจาวาสคริปต์ไม่ถือเป็นข้อผิดพลาดในนิพจน์ boolean_expression และถือว่าเป็น true กล่าวคือจะได้คำตอบเป็น Yes, set x by ten ออกมาอย่างแน่แท้ โดยมีกติกาดังนี้จ๊ะ
- กำหนดให้ x มีค่าเท่ากับ 0 จะตีความเป็น เท็จ
- ค่าอื่นใดที่ไม่ใช่ 0 (กระทั่งค่าลบ) จะตีความเป็น จริง
- กำหนดให้ x มีค่าเท่ากับ null จะตีความเป็น เท็จ
- กำหนดให้ x มีค่าเป็นออบเจ็กต์ (new ให้ไง) จะตีความเป็น จริง

บางคนว่าจำยากจัง จำได้บ้างไม่ได้บ้างก็ไม่ต้องกังวลไปนะ ขอให้ฝึกเขียนบ่อยๆใช้บ่อยๆเดี๋ยวก็ได้เอง สรุปว่าควรใช้เครื่องหมาย == (เท่ากับสองอัน) เสมอในเงื่อนไขหรือนิพจน์ที่เป็น boolean_expression

>> จากโค้ดตัวอย่างทั้งสองข้างต้น ขอถามว่าถ้าเกิดผมกำหนดค่าของ x เป็น -1 (ลบหนึ่ง) จะเกิดอะไรขึ้น?
ตอบ กล่องข้อความจากคำสั่ง alert ก็จะไม่ทำงานน่ะสิ ใช่ครับ!เก่งมาก หรือก็คือมันข้ามทุกคำสั่งที่อยู่ระหว่างเครื่องหมาย { และ } ของ if ไปเลยไงล่ะ ทว่าในกรณีที่เราต้องการดักจับหรือกำหนดให้ทางแยกซ้ายและขวาเกิดการกระทำอย่างหนึ่งอย่างใด (จริงก็ทำ เท็จก็ทำ) เราก็จะเขียนคำสั่ง else เพิ่มเข้าไปครับ ดังตัวอย่างนี้

var x = 5;
if(x == 10) {
alert("x equals ten");
} else {
alert("x not equals ten");
}

กำหนดให้ x มีค่าเท่ากับ 5 ดังนั้นคำตอบคือ x not equals ten ครับผม ทีนี้เอาใหม่ สร้างทางเลือกให้มากกว่าสองทางด้วยคำสั่ง else if เพิ่มเข้าไปอีก (เอาสี่ทางเลือกเลย) ดังตัวอย่างต่อไปนี้จ้า

var x = 5;
if(x >= 100) {
alert("x more than or equals one hundred");
} else if(x > 10) {
alert("x more than ten");
} else if(x < 5) {
alert("x less than five");
} else {
alert("x more than or equals five");
}

ลองทายกันสิครับว่า ข้อความใดจะปรากฏออกมา? อิอิ

>> เนื่องจากเนื้อหาเยอะเกินไป ผมขอตัด part นี้เป็น 8-1 และ 8-2 นะครับ ก่อนจะนำมันมาสร้างเป็นตัวอย่างสนุกๆให้ศึกษากันใน part 9 (ปูรากฐานสู่เกมเล็กๆขำๆ) ครั้งนี้ลาแล้ว สวัสดีครับ

ภาษา JavaScript ฉบับผู้เริ่มต้น part 7

: Expressions กับการสร้างโปรแกรมเครื่องคิดเลขง่ายๆ

>> expression คืออะไรเหรอ?
ตอบ ถ้าจะให้เข้าใจคำนี้เพื่อนๆจะต้องรู้จักคำว่า statement เสียก่อน เจ้า statement ก็คือโค้ดต่างๆที่เพื่อนๆเขียนขึ้น โดยมากมักจะจบในหนึ่งบรรทัดหรือจวบกระทั่งปิดด้วยเครื่องหมาย ; (semicolon) ตัวอย่างเช่นการประกาศตัวแปร

var x = 10;

เราเรียกบรรทัดคำสั่งลักษณะนี้ว่า statement โดยเมื่อ statement ใดๆก็ตามเกิดการทำงานแล้วได้มาซึ่งผลลัพธ์หรือค่า เราก็จะเรียกมันว่า expression ตัวอย่างเช่น

var y = x + 20;

ทั้งหมดนี้ก็คือหนึ่ง statement โดยมี x + 20 เป็น expression นั่นเองครับ

>> แสดงว่า expression ก็คือการคำนวณ เช่นการบวกอย่างนั้นหรือ?
ตอบ นั่นเป็นความเข้าใจที่ถูกต้องครับ แต่ถ้าจะให้ดีกว่านี้ เราต้องทราบว่า expression ใดๆจะเกิดขึ้นได้ต้องผ่านการกระทำจากเหล่า Operator

>> แล้วเหล่า operator คืออะไร?
ตอบ ก็คือสัญลักษณ์ที่ใช้ในการคำนวณค่า ไม่ว่าจะเป็นทางคณิตศาสตร์หรือตรรกศาสตร์ โดยพื้นฐานประกอบด้วย
- Arithmetic Operators ได้แก่ +, -, *, / , %, ++, --
- Relational Operators ได้แก่ <, >, <=, >=, ==, !=
- Logical Operators ได้แก่ &&, ||

สัญลักษณ์ตัวไหนที่ไม่รู้จักในขณะนี้ก็ไม่ต้องไปสนใจครับ เลือกใช้และศึกษาเฉพาะตัวที่ใช่ไปก่อนได้ ในที่นี้ผมเลือกบวกกับลบ (+, -)

>> มาสร้างโปรแกรมเครื่องคิดเลขง่ายๆกันเถอะ!
: หัวใจสำคัญคือ วาดกล่องสามใบ กล่องใบแรกกับใบที่สองสามารถดึงค่าออกมาเพื่อนำไปกระทำการบวกหรือลบ โดยผลลัพธ์ที่ได้ให้แสดงยังกล่องใบที่สาม

1) ใช้แท็กของภาษา html สร้างเป็นกล่องรับค่าดังรูปครับ โดยแท็กชื่อ input กำหนดไทป์ของมันเป็น text แล้วตั้งชื่อ (id) ว่า x, y และ z ตามลำดับ
2) ใช้แท็ก button สร้างเป็นปุ่มสำหรับการบวกและลบ เพิ่มเหตุการณ์คลิกให้กับปุ่ม เพื่อให้ปุ่มสามารถไปเรียกฟังก์ชันในแท็ก script
3) ในแท็ก script คำสั่งของภาษาจาวาสคริปต์ที่ว่า document.getElementById จะให้ผลลัพธ์เป็นออบเจ็กต์ Element ของชื่อนั้นๆ (หรือก็คือของ id นั้นๆ) ออกมา ในที่นี้ผมตั้งชื่อว่า elementX, elementY และ elementZ ตามลำดับ
4) เปลี่ยนค่าไทป์สตริง (String type) เป็น float (คำนวณทศนิยมได้จ้า) ด้วยฟังก์ชันชื่อ parseFloat ทีนี้ก็จะได้ค่าของ x และ y ที่มีไทป์เป็น Number แล้ว
5) ให้ x และ y บวกกันถ้ากดปุ่มบวก หรือให้ x และ y ลบกันถ้ากดปุ่มลบ
6) นำผลลัพธ์ที่ได้ไปใส่ในกล่อง z เป็นอันเรียบร้อย

>> ใน part ต่อไปเราจะคุยกันเรื่อง Condition Statement มันจะทำให้โปรแกรมของเรามีทางเลือกเพิ่มมากขึ้น ถ้าเปรียบเทียบเป็นการขับมอไซด์ ที่ผ่านมาเราเริ่มประกอบมอไซด์แล้วซิ่งตรงอย่างเดียว คราวนี้แหละ! เราจะสามารถควบคุมมันได้ จะให้มันเลี้ยวซ้ายตกคลองหรือขวาติดไฟแดงอย่างไรก็ได้ หึหึหึ น้องสก๊อยจับแน่นๆนะ

>> อ่านเพิ่มเติมเกี่ยวกับคำสั่ง document.getElementById และฟังก์ชัน parseFloat
- http://www.javascript-coder.com/javascript-form/getelementbyid-form.phtml
- http://www.w3schools.com/jsref/jsref_parsefloat.asp

ภาษา JavaScript ฉบับผู้เริ่มต้น part 6-2

: ภาพอันเปลือยเปล่าของน้อง Primitive Type และ Reference Type

>> ภาพดังที่เห็นนี้อาจไม่ถูกต้องตามโครงสร้างของหน่วยความจำไปเสียทุกอย่าง แต่เพื่อให้เพื่อนๆได้เห็นว่าหน่วยความจำที่บราวเซอร์ใช้นั้น ใช้จัดเก็บตัวแปรที่มีไทป์ประเภท primitive type ต่างจากประเภท reference type อย่างไร

>> ด้านซ้ายคือพื้นที่ที่เกิดการจองหน่วยความจำของตัวแปรที่มีไทป์ประเภท primitive type เมื่อเราประกาศตัวแปร bookPrice กับ bookName จากภาพเราสามารถอ้างอิงทั้งสองชื่อนี้เพื่อเข้าถึงค่า 25 และ "JS" ตามลำดับ

>> ด้านขวาคือพื้นที่ที่เกิดการจองหน่วยความจำของตัวแปรที่มีไทป์ประเภท reference type เมื่อเราสร้างออบเจ็กต์ (คำสั่ง new ใช้สร้างออบเจ็กต์ ออบเจ็กต์เป็นอย่างไรนั้น ไว้ค่อยคุยกันใน part ต่อๆไปเน๊อะ) จะเกิดค่าค่าหนึ่งขึ้นมา (ระบบจะจัดสรรให้เองโดยอัตโนมัติ) สมมติว่าเป็นค่า @ab1764ac ค่าดังกล่าวนี้จะอ้างอิงถึงหน่วยความจำอีกแห่งหนึ่ง เสมือนว่าเราได้หนังสือมาหนึ่งเล่มจริงๆ หนังสือที่ว่านี้อาจมีความสัมพันธ์กับตัวแปร bookPrice และ bookName ซึ่งเป็นราคาและชื่อหนังสือของมันเองเลย (คนละตัวแปรกับฝั่ง primitive type นะจ๊ะ) ครั้นเราสร้างออบเจ็กต์โดยการ new อีก ก็จะได้หนังสือเล่มใหม่ออกมาอีก (งง ก็ไม่ต้องสนใจ เดี๋ยว part ต่อๆไปจะพาทำเองครับ) โดยแต่ละเล่มที่ได้ใหม่นั้นก็จะมีราคาและชื่อหนังสือเป็นของมันเอง ของใครของมัน

>> เพื่อนๆคงทราบว่าเราเขียนโปรแกรมล้อเลียนความจริง ดังนั้นจะพบเจอโค้ดโปรแกรมลักษณะไทป์ประเภท reference type อยู่บ่อยๆ ซึ่งพื้นฐานของมัน (ที่สุดของที่สุด) ก็คือการห่อหุ้มไทป์ประเภท primitive type นี่แหละครับ

>> หากต้องการเข้าใจให้ละเอียดกว่านี้ อยากรู้ๆ ผมแนะนำลิงค์นี้
http://www.youtube.com/watch?v=mh-hPzDfb_Q

>> สำหรับ part หน้า เราจะคุยกันเรื่อง Expressions จับตัวแปรและค่ามาบวกลบคูณหารกัน ทำโปรแกรมคำนวณค่าเล็กๆสนุกๆกัน ไว้เจอกันนะ

ภาษา JavaScript ฉบับผู้เริ่มต้น part 6-1

: ชนิดของไทป์ (type)

>> ชนิดของตัวแปร หรือ ชนิดของไทป์ หรือไทป์ หรือ type ได้ยินคำไหนใน part นี้ก็ความหมายเดียวกันหมดนะ เอาล่ะ จาวาสคริปต์แบ่งชนิดของไทป์ออกเป็นสองกลุ่ม ได้แก่
- Primitive Type
- Reference Type

>> Primitive Type คืออะไร?
ตอบ กลุ่มไทป์ที่เก็บค่าไว้ในพื้นที่ที่จองไว้ในหน่วยความจำโดยตรง (ในรูปของเลขฐานสอง) ประกอบด้วย Number, String และ Boolean

>> Reference Type คืออะไร?
ตอบ กลุ่มไทป์ที่เก็บค่าอ้างอิงไปยังพื้นที่อื่นซึ่งจะเรียกว่ากลุ่มของออบเจ็กต์ก็ได้ ประกอบด้วย Object, Array และ Function ครับ

>> เราทราบว่าจาวาสคริปต์เป็นภาษาประเภท Dynamic Typing กล่าวคือตัวแปรสามารถเปลี่ยนไทป์ไปมาได้ตามค่าที่ถูกกำหนดให้ใหม่ เราสามารถตรวจสอบว่าตัวแปรที่ประกาศขึ้นมานั้นมีไทป์เป็นชนิดอะไรด้วยคำสั่ง typeof ซึ่งดูได้จากตัวอย่างต่อไปนี้
1) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof
2) http://www.w3resource.com/javascript/operators/typeof.php

เมื่อศึกษาแล้วจึงพบว่า
- ตัวแปรที่กำหนดค่าให้เป็นดังเช่น 37 หรือ 3.14 มีไทป์เป็น number
- หากกำหนดเป็น "" หรือ "love you" จะมีไทป์เป็น string
- หากกำหนดเป็น true หรือ false จะมีไทป์เป็น boolean
- หากกำหนดเป็น new Date() หรือ JSON จะมีไทป์เป็น object
- หากกำหนดเป็น function(){} หรือ Math.sin จะมีไทป์เป็น function
- ส่วนไทป์ที่เป็น Array ขออธิบายอย่างละเอียดในโอกาสต่อๆไป

>> รู้จักชนิดของไทป์แล้วมีประโยชน์อย่างไร?
ตอบ การที่เราทราบชนิดของไทป์ เราย่อมทราบพฤติกรรมของมัน พฤติกรรมที่ว่านี้ก็คือการเข้าถึงค่า (ที่ถูกกำหนดให้) ของตัวแปร อีกทั้งยังเป็นการบริหารหน่วยความจำของบราวเซอร์ให้มีประสิทธิภาพอีกด้วย (พวกนี้เทพเกินไป) ตัวอย่างเช่น เขียนเกมหมากฮอส ถ้าหมากของเราสามารถเดินไปจนถึงตารางแถวสุดท้ายของอีกฝ่ายได้ หมากตัวนั้นจะเลเวลอัพเพิ่มความสามารถในการเดิน (แนวทแยงมุม) ได้สุดกู่ ลักษณะอย่างนี้เมื่อเรากำหนดชนิดของตัวแปรด้วยไทป์ที่เป็น Number ก็จะสิ้นเปลืองหน่วยความจำอย่างมากหากนำมาเทียบกับไทป์ที่มีชนิดเป็น Boolean ทว่าในขั้นเริ่มต้นเรียนรู้ร่วมกันนี้ก็ไม่จำเป็นต้องทราบละเอียดขนาดนั้น ปล่อยวางไปบ้างก็หาเป็นไรไม่

>> ขอให้ติดตามต่อใน part 6-2 ผมจะแสดงให้เห็นถึงความแตกต่างของ Primitive Type กับ Reference Type สำหรับ part นี้ไว้เท่านี้ก่อน ยาวไปเดี๋ยวหลับ สวัสดีจ้า

ภาษา JavaScript ฉบับผู้เริ่มต้น part 5

: variable declaration and type

>> ถามว่าอะไรคือตัวแปรเหรอจ๊ะ?
ตอบ ง่ายๆเลยที่ที่สำหรับเก็บของ เช่น กล่องใส่ดินสอ กล่องก็เป็นตัวแปร ส่วนดินสอก็เป็นของ หรือกระเป๋าใส่เงิน กระเป๋าก็เป็นตัวแปร ส่วนเงินก็เป็นสิ่งที่ถูกเก็บไว้ภายใน อาจฟังดูบ้าไปนิด อันที่จริงในทางคอมพิวเตอร์ ตัวแปรก็คือสิ่งที่ใช้อ้างอิงค่าหรือพื้นที่ที่ถูกกำหนดขึ้นในหน่วยความจำ และค่านั้นเรียกว่า value

>> เหมือนตัวแปร x = 10 ที่เคยเห็นใช่ไหม?
ตอบ ใช่เลยครับ เราเรียก x ว่าตัวแปรชื่อเอ็กซ์ แล้วระบุค่าสิบให้กับมัน ต่อไปนี้หากว่าเจอเอ็กซ์ก็เข้าใจว่าเจอค่าสิบนั่นเอง

>> ประกาศตัวแปรเพื่อใช้ทำอะไร?
ตอบ variable declaration หรือการประกาศตัวแปรนั้นมีไว้เพื่อระบุชื่อใดๆที่จะใช้แทนค่าใดๆที่ต้องการ เพื่อสำหรับอ้างอิงในการคำนวณก็ได้ ทั้งที่เป็นค่าคงที่หรือไม่คงที่ก็ได้ (เปลี่ยนแปลงตามอัลกอริทึม) ไม่เข้าใจก็ไม่ต้องคิดมาก เอาเป็นว่าถ้าเราจะหาพื้นที่ของรูปสี่เหลี่ยม เราจะใช้สมการที่ว่า กว้าง x ยาว ใช่ไหม ในภาษาจาวาสคริปต์ก็แค่เขียนๆไปว่า

var rectangleArea = width * height ;

โดยที่ width แทนค่าความกว้าง ส่วน height แทนค่าความยาว เมื่อคูณกันแล้ว (คอมพิวเตอร์ใช้เครื่องหมาย * แทน x) ก็จะได้พื้นที่ของรูปสี่เหลี่ยม (ผืนผ้า) ออกมา โดยค่าที่ได้ก็เก็บไว้อีกตัวแปรหนึ่งที่ให้ชื่อว่า rectangleArea

>> จากตัวอย่างข้างต้น width กับ height ก็คือตัวแปรใช่ไหม?
ตอบ เก่งมาก ใช่แล้วล่ะครับ โดยเราต้องระบุค่าให้ width กับ height ด้วยนะ เขียนประมาณนี้

var width = 10 ;
var height = 20 ;
var rectangleArea = width * height ;

ผลลัพธ์ที่ได้ก็คือ 200 นั่นเอง ซึ่งเวลาเอาไปแสดงผลก็เอาไปใส่ไว้ในฟังก์ชัน alert โค้ดทั้งหมดนั้นแสดงดังด้านล่าง

<html>
<head>
</head>
<body>
<script>
var width = 10 ;
var height = 20 ;
var rectangleArea = width * height ;
alert(rectangleArea) ;
</script>
</body>
</html>

ส่วนเจ้า var นี้วางไว้เพื่อบอกว่าจะประกาศตัวแปรชื่อนี้ชื่อนั้นนะ อันที่จริงละได้ ไม่เขียนมันก็ได้ แต่ผมแนะนำให้เขียนไว้ทุกครั้งนะครับ เพื่ออะไรนั้นจะขอหยิบยกเป็นประเด็นต่อๆไปแล้วกัน

>> แล้วอะไรคือไทป์?
ตอบ ไทป์ (type) ก็คือชนิดของตัวแปร เช่น กล่องใส่ดินสอ ก็มีชนิดเป็นกระดาษ เป็นพลาสติกหรือไม้ เป็นต้น ตัวแปรเองก็ต้องมีชนิดเหมือนกัน และเป็นที่โชคดีที่ตัวแปรใดๆในภาษาจาวาสคริปต์ ชนิดของตัวแปรนั้นสามารถเปลี่ยนแปลงไปตามค่าที่ถูกกำหนดให้กับตัวแปรนั้นๆครับ ในขั้นต้นนี้ขอให้รู้จักเพียงเท่านี้ก่อน มากไปเดี๋ยวจะไม่สนุก อิอิ

>> เจอกัน part หน้าจะนำเสนอชนิดของตัวแปร (type) อย่างละเอียด เสมือนแก้ผ้ามันออกให้หมด โจ๊ะๆกันเลย หึหึหึ

ภาษา JavaScript ฉบับผู้เริ่มต้น part 4

: รูปแบบของแท็ก script

>> มันเป็นเรื่องวิวัฒนาการของรูปแบบครับ ปัจจุบันโปรแกรมเล่นเว็บ (ต่อไปจะเรียกว่า บราวเซอร์) นั้นเก่งมากๆ สามารถรองรับรูปแบบของแท็ก script ได้ทั้งสามรูปแบบดังต่อไปนี้

แบบแรก
<script language="javascript"></script>

แบบที่สอง
<script type='text/javascript'></script>

และแบบที่สาม
<script></script>

โดยมีเหตุผลสั้นๆคือ
- แบบแรก นั้นโบราณมาก ประมาณภาษา HTML เวอร์ชัน 3.2 ขึ้นไป
- แบบที่สองมีอยู่ให้เห็นอย่างหลากหลาย ประมาณภาษา HTML เวอร์ชัน 4.X ขึ้นไป (ตัว X นี้แทนหมายเลขเวอร์ชันย่อยๆ เช่น 4.01) หรือภาษา XHTML เวอร์ชัน 1.X ขึ้นไป
- แบบสุดท้ายคือล่าสุดตอนนี้ ประมาณภาษา HTML เวอร์ชัน 5 โดยหากกำหนดตามนี้จะมีค่าเหมือนกับแบบที่สองครับ (เราเรียกว่าค่าโดย default)

>> สรุปฉันควรเลือกเขียนแบบไหน?
ขอตอบแบบกวนประสาทนิดๆก่อนนะครับ ทุกวันนี้เราตามโลกหรือโลกตามเรา? แน่นอนเราต้องตามสิ่งที่ใหญ่กว่า คือเราตามโลก ดังนั้นหากโลกมีเทคโนโลยีใหม่ๆมาให้ใช้ เราก็ควรใช้ครับ กล่าวคือใช้แบบที่สามไปเลย

ถามใหม่ ทุกวันนี้เราตามเงินหรือเงินตามเรา? แน่นอนเราต้องตามหาเงินครับ ศึกษามันก็เพื่องาน งานทำให้เกิดเงิน ดังนั้นหากกลุ่มลูกค้าที่จะใช้เว็บของเรามีบราวเซอร์ที่เก่าและแก่มากๆ (ไม่ยอม update เสียที) เราก็คงเลือกแบบที่สองให้อุ่นใจไว้ก่อน ส่วนแบบที่หนึ่งมันไม่เป็นมาตราฐาน ดังนั้นไม่เลือก

สรุป เป็นผม ผมเลือกแบบที่สาม

>> part หน้าจะเสนออะไร?
ตอบ เราจะลงลึกซุกดิ๊กไปในเรื่องการประกาศตัวแปรและไทป์ของมัน คอยติดตามนะฮาบ

หมายเหตุ นี่คือเว็บจาวาสคริปต์ที่ผมอยากลองให้เข้าไปเล่น อิอิ
http://www.codetukyang.com/java/

ภาษา JavaScript ฉบับผู้เริ่มต้น part 3

: จะวางโค้ด JavaScript ที่ไหนดี?

>> มาถึง part นี้เพื่อนๆหลายคนคงได้เริ่มต้นศึกษา HTML กันบ้างแล้ว และทราบว่าภาษา HTML ที่ใช้สร้างเอกสารหรือหน้าเว็บนั้น ประกอบไปด้วยแท็กสำคัญ 3 แท็ก ได้แก่
1) <html>
2) <head>
3) <body>

โดยแท็กทั้งสามจะประกอบกันเป็นโครงสร้างพื้นฐานดังนี้
<html>
<head></head>
<body></body>
</html>

กล่าวคือมีแท็ก html ไว้ครอบแท็ก head และ body ซึ่งหน้าที่ของแท็ก head คือการระบุทรัพยากรที่มองไม่เห็น ต่างจากแท็ก body ที่ใช้สื่อถึงสิ่งที่มองเห็นเป็นสำคัญ

>> จาก part ที่ผ่านมา เพื่อนๆทราบว่าภาษา JavaScript จะเขียนไว้ภายในแท็ก <script> และ </script> ตัวอย่างเช่นคำสั่ง alert คำถามมีอยู่ว่า เราจะเขียนเจ้าแท็ก script นี้ไว้ได้ที่ไหนบ้างที่เหมาะสมที่สุดภายในโครงสร้างของเอกสาร HTML?

>> ผมมีให้เลือกอยู่สองตำแหน่งสำคัญ ได้แก่ (1) ไว้ระหว่างแท็ก head หรือ (2) ไว้ก่อนปิดแท็ก body ดังด้านล่าง
<html>
<head>(1)</head>
<body>(2)</body>
</html>

ตอบ เพื่อนๆสามารถวางแท็ก script ไว้ได้ทั้งสองตำแหน่ง ไม่ว่าจะด้วยเหตุผลแต่โบราณมาแล้ว กระทั่งกลายเป็นที่ถกเถียงกันพอสมควร นั่นเพราะโปรแกรมเล่นเว็บ (Browser) ไม่มีระบบการจัดการเรื่องนี้ที่ดีเท่าปัจจุบันครับ คือจะบอกว่าปัจจุบันวางไว้ไหนก็ได้ ไม่ต้องคิดมากไง

>> ขอฟังเหตุผลโบราณที่กล่าวมาหน่อยสิ?
ได้เลยครับ พูดกันถึงข้อเสียแล้วกัน เริ่มจากข้อเสียหากวางไว้ ณ ตำแหน่งที่ (1) ก่อน

- หากใส่ JavaScript ไว้ที่แท็ก head จะต้องรอให้ JavaScript ตัวก่อนหน้าโหลดเสร็จก่อน จึงจะโหลด JavaScript ตัวต่อไปได้ ทำให้เกิดความล่าช้า
- Web Crawler บางตัว (ตอนนี้ไม่ต้องสนใจนะ) อาจไม่อ่านหน้าเว็บทุกตัวอักษร แต่จะกำหนดจำนวนตัวอักษรที่ต้องการอ่านเอาไว้ ดังนั้น การใส่ JavaScript ไว้ที่ head มากๆ อาจทำให้ Web Crawler นั้นๆไม่ให้ความสำคัญกับเนื้อหาอื่นๆ

ทีนี้มาฟังข้อเสียหากวางไว้ ณ ตำแหน่งที่ (2) บ้าง
- สิ่งที่ไม่แสดงผลออกมา ไม่ควรอยู่ในแท็ก body ดังนั้น JavaScript ควรอยู่ในแท็ก head
- หากใส่ JavaScript ไว้ก่อนปิดแท็ก body จะทำให้การพัฒนามีความยากลำบากในบางกรณี เช่น คำสั่ง document.ready ของ jQuery (ตอนนี้ไม่ต้องสนใจกรณีนี้)
- หาก JavaScript โหลดทีหลังสิ่งอื่นๆในหน้าเว็บ อาจทำให้พฤติกรรมของผู้ใช้เว็บเปลี่ยนไป

>> สรุปจะวางโค้ด JavaScript ไว้ ณ ตำแหน่งไหน ขออีกที?
ตอบ หากเพื่อนๆไม่มั่นใจว่าโปรแกรมเล่นเว็บที่ผู้ใช้ใช้อยู่นั้น เป็นเวอร์ชันใหม่หรือเก่า และคันใจเหลือเกินกับเหตุผลข้างต้น (หรือไม่รู้สึกอะไรเลย) ก็ให้คิดอย่างนี้ครับ ให้ส่วนที่เป็นการเรียกภาษา JavaScript จากที่อื่น (แหล่งอื่นๆที่ไม่ใช่เว็บของเรา) ไว้ ณ ส่วน head และให้ส่วนที่ไม่เกี่ยวข้องกับโครงสร้าง (layout) ของหน้าเว็บรวมถึงคำสั่งที่เกี่ยวกับการโหลดสิ่งต่างๆในแท็ก body ให้วางภาษา JavaScript ไว้ ณ ก่อนปิดแท็ก body ก็หมดเรื่องแล้ว ซึ่งจะขอกล่าวถึงรายละเอียดแบบตับตับในโอกาสต่อไป

ขอบคุณแหล่งข้อมูล
- http://www.w3schools.com/js/js_examples.asp สำหรับมาตราฐานที่ดี
- http://stackoverflow.com/questions/1213281/does-javascript-have-to-be-in-the-head-tags สำหรับการถกเถียงที่มีข้อสรุป
- http://www.siamhtml.com/ (javascript-head-body-ควรใส่ไว้ที่ไหน) สำหรับข้อมูลภาษาไทย

>> ใน part ต่อไปเราจะมาทำความเข้าใจกันว่า รูปแบบของแท็ก script มีกี่รูปแบบ ควรใช้แบบไหนอย่างไรครับ

เริ่มต้นเรียนรู้ Oracle Database part 4-2

: Oracle Listener (ตอนจบ)

>> ต่อจาก part 4-1 นะครับ ทิ้งท้ายไว้ที่ผมต้องการติดต่อฐานข้อมูล Oracle ด้วยโปรแกรม SQL Developer ผ่านช่องทาง TCP/IP

>> จากลิงค์นี้ http://www.toadworld.com/platforms/oracle/b/weblog/archive/2013/08/14/the-oracle-listener-process-how-does-it-work-connecting-to-oracle.aspx

>> คุณ Dan Hotka ได้กล่าวว่า (เท่าที่ผมเข้าใจนะครับ เพราะภาษาอังกฤษผมก็ไม่ค่อยดีนัก) Oracle ใช้วิธีการติดต่อฐานข้อมูลผ่านทาง port ประเภท TCP/IP ด้วยสิ่งที่เรียกว่า 'host string' หรือในทางเทคนิคเรียกว่า 'TNS Names Entry'

>> เขายังเล่าว่าโดยปกติแล้วฝั่ง server (หมายถึงเครื่องที่ติดตั้งฐานข้อมูลไว้) จะมี process ที่ชื่อ 'listener' ทำหน้าที่คอยฟังคอยรับรู้ความเคลื่อนไหวของฐานข้อมูล (ต้องเข้าใจว่าฐานข้อมูลของ Oracle นี้สำคัญมาก เราติดต่อโดยตรงไม่ได้ จะต้องผ่านผู้ช่วยหรือตัวแทนในลักษณะต่างๆตามที่ Oracle กำหนดหรือยอมรับเท่านั้นนะครับ) เพราะเจ้า listener นี้จะเริ่มต้นทำงานเมื่อฐานข้อมูลเริ่มต้นทำงาน ดังนั้นที่เครื่อง server เราสามารถควบคุมมันได้ จะสั่งให้มันเริ่มทำงาน หรือหยุดทำงาน หรือสอบถามสถานะการทำงานของมันอย่างไรก็ได้ ฆ่าได้ ทารุณกรรมมันได้ตามใจอยาก หึหึหึ

>> แน่นอนว่าผมลงฐานข้อมูลไว้ในเครื่องนี้ เครื่องของผมจึงกลายเป็น server โดยปริยาย คุณ Dan Hotka บอกว่ารายละเอียดของเจ้า listener ถูกเขียนเก็บไว้ในไฟล์ที่ชื่อ 'listener.ora' ด้วยเครื่องของผมเป็น server จึงสามารถตามไปดูได้ ณ
C:\app\ProS\product\11.2.0\dbhome_2\NETWORK\ADMIN
.
.
.
SID_LIST_LISTENER =
(SID_LIST =
(SID_DESC =
(SID_NAME = ORCL11G)
(ORACLE_HOME = C:\app\ProS\product\11.2.0\dbhome_2)
(PROGRAM = extproc)
(ENVS = "EXTPROC_DLLS=ONLY:C:\app\ProS\product\11.2.0\dbhome_2\bin\oraclr11.dll")
)
)
.
.
.
สองสิ่งสำคัญที่ต้องรู้จักคือ
- SID_NAME ในที่นี้ยังคงเป็น Global Database Name ง่ายๆว่าชื่อฐานข้อมูลซึ่งผมตั้งเป็น ORCL11G (ตอนที่ติดตั้งไง ที่เคยเล่าให้ฟังไง ถ้าไม่ตรงขออภัยด้วยนะครับ เพราะนี่ติดตั้งฐานข้อมูลลูกที่สองแล้ว) จำได้ว่าเขียนด้วยพิมพ์เล็กทั้งหมดนะ สงสัยมันไม่สนใจพิมพ์เล็กพิมพ์ใหญ่
- ORACLE_HOME ก็คือ path หรือเส้นทางที่วางเจ้าฐานข้อมูลไว้

>> รายละเอียดดังข้างต้นเป็นตัวบอกว่าฐานข้อมูลชื่ออะไรและอยู่ที่ไหนในเครื่อง server และส่วนต่อไปนี้คือรายละเอียดการติดต่อเข้ามายังฐานข้อมูลลูกนี้ครับ
.
.
.
LISTENER =
(DESCRIPTION_LIST =
(DESCRIPTION =
(ADDRESS = (PROTOCOL = IPC)(KEY = EXTPROC1522))
(ADDRESS = (PROTOCOL = TCP)(HOST = localhost)(PORT = 1522))
)
)

ADR_BASE_LISTENER = C:\app\ProS
.
.
.
สองสิ่งสำคัญที่ต้องรู้จักคือ
- HOST หมายถึงชื่อโดเมน หรือไอพีแอดเดรสที่ทำงานผ่าน TCP/IP นั่นเอง ในที่นี้คือ localhost (หลายคนคงเข้าใจดี เพราะถ้าฐานข้อมูลเราไปอยู่ที่ Google ก็ต้องใส่ว่า google.com หรือ google.th หรือก็แล้วแต่ว่าติดตั้งฐานข้อมูลไว้ที่ชื่อโดเมนไหน)
- PORT หมายถึงช่องทางหรือหมายเลขช่องทางที่จะใช้ติดต่อมายังฐานข้อมูลข้างต้น ในที่นี้ค่าคือ 1522 (เพราะผมติดตั้งครั้งที่สอง Oracle จึงรันเลข port ให้อัติโนมัติ ลูกแรกคือ 1521 ดังนั้นลูกนี้จึงเป็น 1522 ครับ)

>> เอาละครับทั้งหมดข้างต้นคือรายละเอียดของเจ้า listener ที่มันจะต้องทราบขณะที่ฐานข้อมูลเริ่มต้นทำงาน ตัวมันเองทำงานอยู่ฝั่ง server ผู้ที่ทำหน้าที่ปรับเปลี่ยนรายละเอียดการใช้ port ตลอดจนชื่อโดเมน แหล่งที่วางฐานข้อมูลและชื่อฐานข้อมูลก็คงจะเป็น administrator ทางฝั่ง server แหละ (ดีที่เครื่องเรากลายเป็น server อิอิ)

>> แล้วเราในฐานะผู้ต้องการใช้งานฐานข้อมูลล่ะ จะคุยกับเจ้า listener เพื่อเชื่อมต่อไปยังฐานข้อมูลได้อย่างไร?
ตอบ ประเด็นนี้คุณ Dan Hotka มีคำตอบให้แต่แรกแล้วไงครับ เขากล่าวว่าที่ฝั่ง client หรือก็คือเราผู้ที่ต้องการคุยกับ listener จะมีไฟล์ที่ชื่อว่า 'TNSNAMES.ora' ซึ่ง Oracle จัดเตรียมไว้ให้ไว้สำหรับผู้ใช้หรือ client อย่างเราๆติดต่อกับฐานข้อมูลได้ง่ายขึ้น (ผ่าน listener นะอย่าลืม) ในไฟล์จะบรรจุสิ่งที่จำเป็นในการเชื่อมต่อเอาไว้ (This file gives a simple name to the information needed to connect to the database) ประมาณนี้ครับ (ตัดมาเพียงชื่อเดียว)
.
.
.
ORCL11G =
(DESCRIPTION =
(ADDRESS = (PROTOCOL = TCP)(HOST = localhost)(PORT = 1522))
(CONNECT_DATA =
(SERVER = DEDICATED)
(SERVICE_NAME = orcl11g)
)
)
.
.
.
ดูจากรายการแล้วเพื่อนๆคงเดาได้ไม่ยากเลย ทั้ง HOST ทั้ง PORT ทั้งชื่อ SERVICE_NAME (ที่จริงหนึ่งฐานข้อมูลตั้งแต่เวอร์ชัน 8i เขาเปลี่ยนจากการใช้ชื่อฐานข้อมูลตรงๆเป็น service name แทน เพื่อที่ฐานข้อมูลเดียวจะได้แบ่งการทำงานออกเป็นหลายๆ service เช่น ฐานข้อมูลชื่อ A มีสอง service ได้แก่ HR_SERVICE กับ ACCOUNT_SERVICE เป็นต้น) หากใส่ค่าให้ตรงกับที่เจ้า listener ฝั่ง server คอยฟังอยู่ล่ะก็ ก็ติดต่อไปยังฐานข้อมูลลูกนั้นๆได้เลย

>> สุดท้ายคุณ Dan Hotka เขาบอกว่าสำหรับ client ที่ต้องการคุยกับ listener ผ่านสิ่งที่เรียกว่า host string หรือ TNS Names Entry หรือก็คือใช้ไฟล์ TNSNAMES.ora จะต้องไปกำหนด variable specified ที่ windows environment variable ก่อนนะจึงจะเรียกใช้ไฟล์ดังกล่าวได้ ภาษาเราๆก็คือ set path น่ะ คงรู้ๆกันชิมิ โดยตั้งชื่อตัวแปรว่า TNS_ADMIN และให้ค่ามันไปตามเส้นทางที่เครื่องของเราได้เก็บไฟล์ TNSNAMES.ora ไว้ (Oracle จัดเตรียมไว้ให้อยู่ที่เดียวกับ listener.ora จ้า) ก็เป็นอันจบข่าว

>> แบ่งปันกันนะครับ ใครรู้อะไรก็แชร์ๆกัน ผมไม่ได้อวดรู้ แต่ผมคิดว่าการแชร์สิ่งที่รู้ซึ่งอาจจะผิดหรือถูกเป็นสิ่งที่ดี ผมแก้ปัญหาที่บริษัทได้หลายต่อหลายครั้งก็เพราะ Google ต้องขอบคุณเพื่อนๆใจกว้างในโลกออนไลน์ที่กล้าแชร์สิ่งที่คิดสิ่งที่น่าเป็นไปได้แก่ผมและคนอื่นๆ ถ้าไม่มีพวกเขาผมก็คงไม่มีทางได้รู้ ถ้าไม่มีคุณ Dan Hotka โพสต์นี้ก็ยังไม่เกิดขึ้น เสียสละเวลาสักนิดทำสิ่งเหล่านี้เป็นความรู้สึกที่ผมไม่เคยเสียใจเลย คืนนี้ฝันดีครับผม zZ

เริ่มต้นเรียนรู้ Oracle Database part 4-1

: Oracle Listener

>> เว้นไปหนึ่งหรือสองสัปดาห์จำไม่ได้ จึงกลับมาเริ่มต้นเจ้า Oracle ใหม่ เวอร์ชันเดิมนี่แหละจ้า 11g ด้วยความไม่รู้จึงงมไปเยอะ เสียเวลาไปก็มาก อย่างวันนี้ก็ตั้งแต่สิบเอ็ดโมงเช้า (เช้าเพราะกำลังตื่น) เอาล่ะ ปัญหาเดิม

>> ติดตั้งฐานข้อมูลก้อนแรกไปแล้วประสบปัญหาไม่สามารถเริ่ม OracleDBConsole ได้ ซึ่งโดยปกติแล้วชื่อของเจ้าเนี่ยจะต่อท้ายด้วยชื่อของฐานข้อมูลที่เราตั้งชื่อไว้ชิมิ ตอนนั้นตั้งไว้ว่า orcl ดังนั้นมันจึงมีชื่อเต็มๆว่า OracleDBConsoleorcl

>> ไม่ว่าจะโหลดเกม Child of Light มาเล่นก็แล้ว หรือโหลด The Sims3 พ่วงอีกยี่สิบภาคเสริมเล่นยันเช้าของวันนี้ ก็ยังไม่สามารถจัดการเจ้า OracleDBConsoleorcl นี่ได้เสียที เซ็งมั๊กๆ (เกี่ยวกันยังไง?)

>> error มันฟ้องว่าไม่สามารถเริ่มการทำงานได้ เราก็เข้าใจผิดคิดว่ามันเกี่ยวข้องกับการ config เจ้า SQL Developer ให้ใช้ฐานข้อมูล อันที่จริงไม่ใช่เลยนะครับ

>> ร้อนต้องให้พี่ชายใหญ่ (พี่นรินทร) ช่วยเหลือ มานั่งชั่งเหตุชั่งผลกันว่ามันเป็นเพราะอะไรกันแน่ที่ไม่สามารถ config เจ้า SQL Developer หรือจะเป็นเพราะ OracleDBConsoleorcl มันมีปัญหาเข้ากันไม่ได้กับเครื่องของเราจริงๆ?

>> พี่ครับ ขั้นตอนการติดตั้งผ่านเกือบทั้งหมด พบแค่ปัญหาเดียวคือ service ที่ชื่อ OracleDBConsoleorcl มันไม่ยอมทำงาน เฆี่ยนมันก็แล้ว ปล้ำปลุกก็แล้ว มันทำให้ผมไม่สามารถเชื่อมต่อฐานข้อมูล 11g กับ SQL Developer ใช่ไหมก๊าบ?

>> พี่ชายที่รักตอบทันทีว่า มิได้! มันบ่อแม่นเด้อ เราต้องรู้จักโครงสร้าง (Architecture) ของเจ้า Oracle นี้ตอนติดตั้งเสียก่อน ว่าแล้วก็เปิด Youtube แกฟังเราฟัง ต่างคนต่างแปลแล้วคุยกัน ยิ่งคุยยิ่งมันส์ เกายังไม่ถูกที่คัน จวบจนกระทั่ง

>> แจ่มจันทร์! ผมคิดว่าใช่แน่ ต้องเป็นเพราะเจ้า Listener แน่แท้ ว่าแล้วก็เปิดไฟล์ที่ชื่อ listener.ora ซึ่งอยู่ ณ
C:\app\ProS\product\11.2.0\dbhome_2\NETWORK\ADMIN

>> อย่าได้ตกใจที่ oracle home ของผมมีชื่อ dbhome_2 แทนที่จะเป็น dbhome_1 นะครับ เพราะระหว่างนั้นผมลงฐานข้อมูลก้อนที่สองแล้ว เลขต่อท้ายมันเลยเพิ่ม พอเปิดไฟล์ดังกล่าวปุ๊บ พี่ชายผมก็ตาลุกเป็นประกายไฟ

>> โอ้เบบี๋ ชัดเลย! แล้วแกก็เปิดไปที่เว็บนี้ครับ ทดลองเปิดตามเลยนะจะได้รู้กันเสียที
http://www.toadworld.com/platforms/oracle/b/weblog/archive/2013/08/14/the-oracle-listener-process-how-does-it-work-connecting-to-oracle.aspx

>> เนื้อที่เยอะไปแล้ว ขอกล่าวสรุปให้เห็นภาพรวมดังนี้
- ปกติแล้ว Oracle จะวาง database ไว้ ณ oracle home ซึ่งเป็นไปตามความต้องการของเรา
- เมื่อมีฐานข้อมูลอยู่ในเครื่อง (ใน server หรืออื่นใด) ทางที่จะติดต่อฐานข้อมูลนี้ได้มีอยู่ สาม เส้นทาง (เท่าที่ทราบตอนนี้นะครับ)
1) ใช้ SQL Plus
2) ใช้ TCP/IP
3) และสามใช้ JDBC (Java Database Connectivity) หรืออื่นใดที่ไม่ใช่สองเส้นทางข้างต้น (กวนดี)
- SQL Plus สามารถอยู่แล้ว เพราะ Oracle จัดการมาให้พร้อมกับตัวฐานข้อมูล
- TCP/IP คือสิ่งที่ผมต้องการสำหรับติดต่อกับ SQL Developer
- JDBC หรืออื่นใด อันนี้ยังไม่ได้ศึกษา ไว้ก่อน

>> ยาวไป ขอต่อที่ part 4-2 แล้วกันครับ (ว่าแล้วระหว่างรอก็อ่านลิงค์ที่ให้ไปนะ คิดว่ากระจ่างกันทุกคน) ฝันดีจ้า

เริ่มต้นเรียนรู้ Oracle Database part 3

: ความคืบหน้าของเวอร์ชัน 11g

>> ดูเหมือนจะไปได้ดีกับ Oracle 11g ซึ่งผมทำตามวิธีการของคุณ Manish Sharma (พี่อินเดีย) จาก
http://www.youtube.com/watch?v=0NLsJQCvKXY&index=1&list=TL94bUdetKdfyrIoNpMzHF_xbxX4NCO_Cf

>> เกิดปัญหาในการเริ่มต้นฐานข้อมูลซึ่งเกี่ยวกับไฟล์ emctl.bat ซึ่งอยู่ ณ
C:\app\ProS\product\11.2.0\dbhome_1\BIN
รายงานแจ้งว่าให้ไปเปิดไฟล์นี้เองซึ่งก็ได้ทำไปแล้ว (-*-)

>> เนื่องจากเวอร์ชันนี้จะมีตัวอย่างที่เป็นที่สนใจ (หลายต่อหลายเว็บเอ่ยถึงมันเหลือเกินครับ) คือ schema (ตู้เก็บของ) ชื่อ HR กับ SCOTT และเมื่อขั้นตอนการติดตั้งล่วงไปถึงการจัดการ database configuration assistant ผมก็เลยขอรีรหัสผ่านพร้อมปลดล็อค HR กับ SCOTT ด้วยเลย ดังภาพประกอบ

>> จากนั้นเราสามารถเริ่ม user interface การจัดการฐานข้อมูล Oracle 11g นี้ผ่านหน้าเว็บ https://localhost:1158/em (เมื่อการติดตั้งเสร็จสมบูรณ์ รายงานนี้จะปรากฏออกมาครับ) แต่ผมในขณะนี้ยังไม่สามารถใช้ได้

>> เข้าไปเจอในเว็บ
https://community.oracle.com/thread/618267?start=0&tstart=0
เขาแนะนำว่าให้เซต oracle_sid ให้ยิงไปที่ Global database name ที่เราได้ตั้งชื่อไว้ ซึ่งของผมคือ orcl ผ่านทาง command line (cmd) โดยเรายังสามารถตรวจสอบได้ว่า Global database name ของเราชื่ออะไรผ่านคำสั่ง v$database โดยกระบวนการทั้งหมดดังกล่าวสามารถดูได้จากวีดีโอของคุณ Manish Sharma ครับ

>> ไว้จัดการ connect ฐานข้อมูลได้เมื่อไร ค่อยมาเล่าเรื่องสิทธิ์ให้ฟังทีหลังนะ (โทษจ้า) คืนนี้ฝันดีครับผม

สร้าง Tool-tip ขึ้นมาใช้เอง

: แชร์ประสบการณ์การเขียนโปรแกรมฉบับผู้เริ่มต้น เมื่อจำเป็นต้องสร้าง Tool-tip ขึ้นมาใช้เอง

>> ปัญหา : เพราะ Google table chart ที่ใช้อยู่ไม่ได้เตรียม Tool-tip text เอาไว้ให้ จึงต้องหาทางแก้ไขด้วยวิธีการอื่น
คำตอบที่ได้ : เมื่อค้นจากเว็บจึงทราบว่าสามารถสร้าง Tool-tip text ขึ้นมาใช้งานเองได้ อาจใช้ไลบรารีใดๆที่ชอบหรือตามแต่วิธีการที่เหมาะสมเท่าที่ความรู้ในขณะนั้นจะสามารถ

>> ภาพต่อไปนี้แสดงให้เห็นตัวอย่างการสร้าง Tool-tip text อย่างง่ายที่สุดขึ้นมาด้วยแท็ก div จำนวนสองแท็ก (แท็กอื่นก็ได้นะครับ) แท็ก div แรกจะห่อหุ่มแท็ก div ที่สองเอาไว้ภายใน โดยมีรายละเอียดสำคัญดังนี้
- แท็ก div แรก (ด้านนอกสุด) จะบรรจุ text ที่แสดงตามปกติ
- แท็ก div ที่สอง (ด้านใน) จะบรรจุ text ที่ต้องการให้แสดงในลักษณะของ Tool-tip (กล่องข้อความที่กำหนดสีพื้นหลังเป็นสีชมพู) เมื่อเกิดเหตุการณ์เม้าส์ hover (เอาเม้าส์ไปวางไว้เหนือข้อความ Hover Event)
- หัวใจอยู่ที่แท็ก div ที่สองต้องกำหนดค่า opacity เป็น 0 เพื่อให้โปรงแสงจนมองไม่เห็น รอคอยจนกว่าจะเกิดเหตุการณ์เม้าส์ hover จึงกำหนดค่า opacity ใหม่เป็น 1 (ค่านี้อยู่ระห่าง 0 ถึง 1) ซึ่งจะกลายเป็นทึบแสง เราจึงมองเห็นได้ครับ

*** หมายเหตุ หากรูปเล็กไปมองไม่เห็นโค้ด ให้คลิกขวาที่รูปแล้วเลือก 'เปิดรูปภาพในแท็บใหม่' แล้วขยายภาพเอานะครับ

เริ่มต้นเรียนรู้ Oracle Database part 2

: มาเริ่มกันใหม่กับเวอร์ชัน 11g Release 2 หลังจากผมคลำ 12c ด้วยตาอันมืดบอด

>> เอกสารภาษาบ้านเราน้อย ไหน You tube ก็เป็นประกิตของพี่อินเสียเยอะ ลำพังภาษาอังกฤษส่วนตัวก็งูๆไก่ๆ ฟังไม่ออกอ่านไม่รู้เรื่อง 555 (มันเขียนอะไรกันว่ะ แล้วนี่มันศัพท์อะไร ย่อกันเต็มไปหมด) ตามประสาเด็กใหม่ของวงการ ขอขยับลงไปที่ 11g ก่อนก็แล้วกันนะครับ

>> อย่างแรกเลย ตัวย่อ g หรือ c นี่คืออะไร?
ตอบ เท่าที่ศึกษาจากเว็บ c ย่อมาจาก Cloud ดังนั้นฐานข้อมูลของ 12c สามารถบริหารจัดการได้บนเครือข่ายอินเทอร์เน็ตแบบเป็นส่วนตั๊วส่วนตัว คือมีพื้นที่ให้เช่าเก็บข้อมูล เรียกกันว่าเทคโนโลยีคลาวด์คอมพิวติ้ง ส่วน g ย่อมาจาก Grid เป็นการนำทรัพยากรที่มีอยู่มาผนวกให้ทำงานร่วมกันได้ เช่น storage, database server, application server (ศัพท์ประหลาดมาอีกแล้ว 55 เบื่อจริงยังไม่ชิน) เอาเป็นว่าทั้ง g และ c คือวิวัฒนาการเทคโนโลยีของบริษัท Oracle ก็แล้วกันนะครับ

>> ภาษา SQL ใช้ติดต่อฐานข้อมูลเพื่อจัดการกับข้อมูลยังไม่ดีพอ?
เดิมการติดต่อฐานข้อมูลด้วยภาษา SQL นั้นก็เพียงพอกับระบบฐานข้อมูลทั่วไปที่ไม่เน้นการจัดการด้านทรัพยากรเวลาสักเท่าไร สมมติว่าเรามีคำสั่ง SQL อยู่สิบคำสั่งส่งไปที่เครื่อง server หลังจากประมวลผลคำสั่ง SQL เหล่านั้นสำเร็จ เครื่อง server ก็จะส่งข้อมูลกลับมาอีกสิบครั้ง ทำนองว่าไปสิบกลับสิบ ถามว่าแบบนี้มีผลต่อการตอบสนองของโปรแกรมที่รอรับข้อมูลดังกล่าวหรือไม่ ขอตอบว่าแน่นอน

>> แล้ว PL/SQL เหนือกว่าอย่างไร?
ตอบอย่างเกรียนๆก่อนเลย เพราะว่ามันมีราคามากับระบบฐานข้อมูลยี่ห้อ Oracle ซึ่งความเข้ากันได้กับสถาปัตยกรรมและหน่วยความจำย่อมถูกจัดการมาดีกว่า (ของมันแพงไง) เขาว่ากันว่าหากมีภาษา SQL อยู่แล้วก็เอามารวมกันซะ แล้วเขียนในรูปแบบ procedure หรือไม่ก็ function ด้วยโครงสร้างของ PL/SQL แล้วเก็บไว้ในระบบฐานข้อมูล Oracle เลย (เครื่อง server ที่ติดตั้งฐานข้อมูล Oracle) จากนั้นให้โปรแกรมที่ต้องการข้อมูลมาเรียก PL/SQL นี้อีกที เพราะมันมีระบบจัดการเวลาที่ให้ประสิทธิภาพดีกว่า SQL เยอะ ยังมีข้อเท็จจริงเกี่ยวกับความดีของ PL/SQL อีกมากมายนัก เอาเป็นว่าใช้เถอะว่างั้น

>> ไว้ติดตั้งเจ้า 11g นี่เรียบร้อยก่อนแล้วจะมาเล่าต่อ เรื่องต่อไปที่ต้องเจอคงหนีไม่พ้นการจัดการสิทธิ์และผู้ใช้งาน ไว้เจอกันนะค๊าบบบ

เริ่มต้นเรียนรู้ Oracle Database part 1

: ดาวน์โหลดและติดตั้ง Oracle Database 12c Release 1

>> คงถึงเวลาแล้วที่ตัวเองควรรู้อะไรเกี่ยวกับระบบฐานข้อมูลเสียบ้าง (ไม่เคยทำอะไรแบบนี้มาก่อนเลยนะขอบอก) ถามว่าทำไมต้องมาเรียนรู้เรื่องฐานข้อมูลของ Oracle ล่ะ? ก็เอาง่ายๆว่าพวกบริษัทต่างๆ (เงินทุนหมุนเวียนหลักล้านบาทขึ้นไป) มักใช้กัน จะไม่รู้เลยก็คงไม่ดีเท่าไร

>> เราจะใช้เครื่องมือที่เรียกว่า SQL Developer เขียนภาษา SQL ตลอดจน PL/SQL เพื่อควบคุมฐานข้อมูลนี้กัน เอาล่ะเปิดไปที่

http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html

อ๊ะๆเดี๋ยวก่อน แน่ใจนะว่าในเครื่องของเรามี JDK (Java Development Kit) ติดตั้งเอาไว้แล้ว (มันต้องการ JDK เวอร์ชัน 1.6.X แต่ผมใช้ 1.7.X) ถ้าไม่มีจงไปดาวน์โหลดมาติดตั้งให้เรียบร้อยก่อน เพราะว่าเจ้า SQL Developer จำเป็นต้องใช้ในการวาดหน้าตาและรันคำสั่งของตัวมันเอง (ทำได้นะ หาใน Google)

>> ลิงค์ข้างต้นเราจะพบกับข้อความขอให้ยืนยัน (You must accept the OTN License Agreement) พันธสัญญาของปีศาจ และแน่นอนให้ตอบตกลงทุกเงื่อนไข หึหึหึ

>> ผมเลือกดาวน์โหลดตามระบบปฏิบัติการที่ใช้ (แต่ละคนไม่เหมือนกันนะ) นั่นคือ Microsoft Windows x64 (64-bit) มีจำนวนทั้งสิ้นสองไฟล์ ดาวน์โหลดเรียบร้อย

>> จากนั้นแตก .zip ทั้งสอง กระทั่งเมื่อเสร็จขั้นตอนนี้เราก็จะได้ไฟล์ setup.exe มาหนึ่งไฟล์ ดับเบิลคลิกมันซะ หึหึหึ

>> มันจะรัน Command Line (จอดำ) ปล่อยมัน แล้วแต้นแต้นเราจะพบกับหน้าต่างที่ชื่อว่า Oracleฯ Installer - Installing database - Step 1 of 11 โอโฮ้! ตั้งสิบเอ็ดขั้นตอนเชิญมั่วกันไปนะครับผม 555 อ่านและแปลได้ก็ควรทำนะ หรือทำตามขั้นตอนของคุณ Sam Dhanasekaran (คนอินเดีย) ซึ่งไปเจอใน You Tube

http://www.youtube.com/watch?v=juLD9T5GAck

>> โปรดจำขั้นตอนต่อไปนี้ให้ดี และอย่าได้ลืมเป็นอันขาด
1) Global Database Name ผมตั้งชื่อ orcl12c
2) Administrative password ผมตั้งว่า Oracle12c (ระวังเรื่องพิมพ์เล็กพิมพ์ใหญ่ เข้าใจว่า case sensitive)

>> part ต่อไปเราจะมาสร้าง Database Connection กัน ติดปัญหาตรงไหนอย่างไร ผมจะแจ้งให้ทราบอีกทีนะฮาบ

ภาษา JavaScript ฉบับผู้เริ่มต้น part 2

: มาเขียน hello.html กันนะ

>> เมื่อได้รู้จักกับ JavaScript จาก part แรกที่ผ่านมา หากเพื่อนๆคันไม้คันมืออยากจะเขียนมันขึ้นมาเองแล้วล่ะก็ part ที่ 2 นี้จะตอบสนองความต้องการนั้นครับ

>> หน้าใดๆที่แสดงบนหน้าเว็บเราทราบแล้วว่าคือ เว็บเพจ หากเพื่อนๆสังเกตให้ดีจะทราบอีกว่าเจ้าเว็บเพจที่ว่านี้มีนามสกุลด้วยนะ สมมติว่าผมเปิดหน้าเว็บชื่อ A มันอาจมีสกุลเป็น .htm หรือ .html หรือ .HTM หรือ .HTML หรือ .asp หรือ .php หรืออีกมากมาย กลไกเหล่านี้เรายังไม่ต้องไปสนใจครับ เพราะทุกเว็บเพจจะแสดงผลให้เราเห็นได้นั้น มันต้องอยู่ในรูปแบบของเอกสาร HTML เท่านั้น ย้ำว่าต้องเป็น HTML เท่านั้น

>> ฉันจะเชื่อได้อย่างไรว่าที่คุณกล่าวมาเป็นความจริง?
ตอบ ทดลองง่ายๆด้วยการคลิกขวา ณ บริเวณใดๆของหน้า Facebook หรือเว็บเพจไหนก็ได้ครับ แล้วเลือก "view source" หรือ "ดูรหัสต้นฉบับ" เพื่อนๆจะเห็นหน้าใหม่เปิดขึ้นมาและมันเต็มไปด้วยแท็ก (Tag) ประหลาดเยอะแยะ เจ้าแท็กที่ว่าเหล่านั้นแหละครับคือภาษา HTML ที่ประกอบกันขึ้นเป็นเอกสาร HTML ต่อจากนั้นให้เพื่อนๆทดลองเซฟ (save) หน้านั้นด้วยการกด Ctrl + s เพื่อนๆก็จะเห็นอีกว่าสกุลที่มีให้เลือกไม่เป็น .htm ก็ .html เพราะมันคือนามสกุลมาตราฐานของเอกสาร HTML อย่างไรล่ะ

>> แล้วเอกสาร HTML เกี่ยวอะไรกับ JavaScript?
ตอบ ต้องบอกว่าเดิมทีเอกสาร HTML ถูกสร้างขึ้นมาเพื่อนแสดงผลเสมือนหน้ากระดาษแผ่นหนึ่ง ทว่าเมื่อมันว่อนไปในโลกธุรกิจและสังคมออนไลน์ หน้ากระดาษไร้ชีวิตแผ่นหนึ่งก็ไม่เป็นที่สนใจ จวบจนกระทั่งมีการสร้างภาษา JavaScript ขึ้น และมันได้สร้างชีวิตให้กับเอกสาร HTML ทำให้แผ่นกระดาษอิเล็กทรอนิกส์สามารถดิ้นดุ๊กดิ๊กราวกับต้องมนตร์วิเศษปานนั้น!

>> เอาล่ะๆฉันอยากจะเขียน JavaScript แล้ว
ง่ายๆอย่างค่อยเป็นค่อยไปนะครับ ให้คลิกขวาที่หน้าจอของเพื่อนๆ แล้วสร้าง Text Document ขึ้นมาชื่ออะไรก็ได้ จากนั้นเปลี่ยนสกุลจาก .txt ของมันให้กลายเป็น .html หากทำถูกต้องเจ้าไอคอนของไฟล์นี้จะกลายเป็นไอคอนของโปรแกรมเล่นเว็บของเพื่อนๆ (เป็น IE เป็น Chrome ฯลฯ) สำหรับผมให้มันชื่อว่า hello.html ครับ

เราจะลงมือเขียน JavaScript กันแล้วด้วยการคลิกขวาที่ hello.html แล้วเลือก Open with เลือก Notepad แล้วเขียนโค้ดลงไปดังนี้

<script> alert("Hello JavaScript!"); </script>
จากนั้นเซฟ แล้วดับเบิลคลิก (คลิกสองครั้ง) เปิดมันขึ้นมาชมผลลัพธ์ได้เลย

>> อธิบายหน่อยซิว่ามันเกิดอะไรขึ้น! ฉันเห็นหน้าต่างเล็กๆสีขาวโผล่ขึ้นมา มันช่างอะเมซิ่งไทยแลนด์อะไรอย่างนี้! ครับ องค์ประกอบเล็กๆของแท็กในเอกสาร HTML ก็คือเครื่องหมาย < และ > เรียกว่าแท็กเปิด ซึ่งจะคู่กับ </ และ > ที่เรียกว่าแท็กปิด ส่วนคำว่า script นั้นเขียนเพื่อบอกให้โปรแกรมเล่นเว็บของเราเข้าใจว่าสิ่งที่ถูกบรรจุระหว่างแท็ก <script> และ </script> ก็คือภาษา JavaScript นั่นเอง สุดท้ายก็คือคำสั่ง alert( ... ); ที่มีไว้แสดงผลข้อความสตริง (ตัวหนังสือ) ออกเป็นหน้าต่างเล็กๆอย่างที่เพื่อนๆเห็นไงล่ะ ง่ายใช่ไหมครับ ใช่เลย! และสนุกอีกต่างหาก

คราวหน้าเราจะมาคุยกันถึงหลักวิธีการประกาศพื้นที่เขียน JavaScript ภายในเอกสาร HTML กัน ว่าเขียน JavaScript ได้ตรงไหนบ้าง และแต่ละพื้นที่มีความหมายอย่างไร ให้ผลอย่างไรหากเทียบกับเวลา ณ ขณะนั้น ไว้ต่อกันที่ part 3 นะค๊าบบบ

ภาษา JavaScript ฉบับผู้เริ่มต้น part 1

       เล่นเว็บกันประจำใช่ไหม เคยเจอหน้าต่างเด้งขึ้นมาถามโน่นนี่นั่นใช่ไหม เคยอยากรู้ไหมว่ามันเด้งขึ้นมาได้อย่างไร บ้างก็เหมือนแกล้งให้กดไม่รู้จะกี่ครั้งกว่ามันจะยอมปิดลงไป ถ้าอยากรู้ ถ้าเคยพบเห็น มันนั้นอาจเขียนขึ้นโดยภาษาที่มีชื่อว่า จาวาสคริปต์ (JavaScript)

>> JavaScript คืออะไร?
ตอบ คือภาษาสคริปต์ที่ทำงานบน IE บน Chrome หรือบน Firefox (โปรแกรมเล่นเว็บที่เพื่อนๆรู้จักกันดีนั่นแหละครับ) ทำให้เว็บเพจ (หน้าเว็บต่างๆไง) สามารถตอบโต้กับผู้ใช้ได้มากขึ้น ซึ่งสามารถเขียนขึ้นเองเพื่อทดสอบการทำงานได้ดังนี้
ลองเปิดไปหน้านี้สิ http://www.w3schools.com/js/tryit.asp?filename=tryjs_alert
แล้วกดปุ่ม Try it เราจะเห็นว่ามีหน้าต่างบานเล็กๆโผล่ขึ้นมา ว้าว!

>> ภาษาสคริปต์ดังกล่าวมีประโยชน์อย่างไร?
ตอบ แต่เดิมใช้เพิ่มลูกเล่นให้กับเว็บเพจ แต่ปัจจุบันภาษา JavaScript กลายมาเป็นส่วนหนึ่งหรือทั้งหมดของเว็บเพจไปแล้ว ตัวอย่างเช่น Facebook นี่ก็ล้วนแต่ใช้ความสามารถของ JavaScript สร้างสรรค์ขึ้นมาทั้งสิ้น

>> JavaScript ทำอะไรได้บ้างล่ะ?
ตอบ มันสามารถตอบโต้กับเหตุการณ์ต่างๆของผู้ใช้ได้ เช่น การขยับเมาส์, ใช้เปลี่ยนแปลงส่วนต่างๆของหน้าเว็บได้, ใช้ตรวจสอบความถูกต้องของการกรอกข้อมูลในฟอร์มได้ และอื่นๆอีกมากมาย

>> ช่วยฉันให้รู้จักกับ JavaScript หน่อยสิ?
ตอบ อ่านมาถึงตรงนี้เพื่อนๆก็ได้ทำความรู้จักกับ JavaScript ไปบ้างแล้ว ใน part ต่อไปผมจะชวนเพื่อนๆไปเที่ยวกับ JavaScript ไปดูกันสิว่าลึกๆแล้วเขาหรือเธอคนนี้มีพื้นฐานการกินอยู่อย่างไร ลงลึกล้วงตับตีสนิทกับ JavaScript ร่วมกันนะครับ