มาเข้าสู่ตอนที่สองของบทเรียน Javascript กันดีกว่านะครับ ตอนแรกผมได้พาไปดูถึงวิธีการเขียน Javascript ใน HTML แล้วนะครับ หากว่าใครไม่เก็ท หรือมีคำถาม อย่าได้รีรอที่จะถามนะครับ ผมยินดีตอบคำุุถามเสมอครับ ^^ สำหรับตอนที่สองนี้ ผมจะพาเพื่อนๆไปดูเรื่องราวที่เป็นเบสิกของ Javascript แต่เป็นเบสิกที่สำคัญโคตรๆเลยหล่ะครับ ดังนั้นบทนี้ ตั้งใจอ่านนะครับ
[thetext]ตัวแปร Variables [/thetext]
ในการเขียนโปรแกรมนั้น สิ่งที่เราจะขาดแทบจะไม่ได้เลยนั่นก็คือตัวแปรครับ ตัวแปรมีไว้ทำอะไร? ตัวแปรก็มีไว้เก็บค่าต่างๆ สำหรับนำมาใช้ในการแสดงผล หรือการคำนวณ หรือการ xxx อะไรก็แล้วแต่ แล้วแต่จะเอามาทำครับ ฮ่าๆ วิธีการประกาศตัวแปรนั้น ทำได้โดยการเขียนแบบนี้ครับ
[codesyntax lang=”javascript”]
var name ="Buksohn", age = 24, hometown = "Sisaket"; alert(name); // Buksohn
[/codesyntax]
จากตัวอย่างโค้ดด้านบน มีหลายจุดที่ผมอยากจะให้สังเกตครับ
- อย่างแรก เห็นไหมครับว่า เวลาเราจะสร้างตัวแปรขึ้นมานั้น เราต้องมีคีย์เวิร์ดบอกให้โปรแกรมรู้ว่า เห้ย!! ตัวนี้มันคือตัวแปรนะเฟ้ย! ซึ่งเจ้าึคีย์เวิร์ดที่ว่า ก็คือคำว่า var นั่นเองครับ ลองเดาซิครับว่า var ย่อมาจากอะไร? เก่งมากครับ มันก็ย่อมาจาก variable ที่แปลว่าตัวแปรนั่นแหล่ะครับ
- อย่างต่อมา ก็คือ “ชื่อตัวแปร” ครับ เราจะตั้งชื่อตัวแปรว่าอะไรก็ได้ครับ จะใช้ชื่อพ่อชื่อแม่ ชื่อแฟนมาตั้งก็ได้ แต่ว่าผมแนะนำว่าควรตั้งชื่อที่มันดูสื่อกับสิ่งที่ต้องการจะใช้งาน เช่น หากต้องการจะสร้างตัวแปรไว้เก็บค่าสำหรับ รหัสนักศึกษา ก็อาจจะตั้งชื่อว่า studentID ก็น่าจะเก็ทกว่า ตั้งชื่อเป็นน้องหมาน้องแมวนะครับ ชื่อตัวแปรเราจะใช้พยัญชนะผสมตัวเลขก็ได้ แต่ “ห้ามขึ้นต้นด้วยตัวเลข” นะครับ จำไว้ให้ขึ้นใจเลยทีเดียว
- ชื่อตัวแปรในโค้ดด้านบนก็คือ name, age และ hometown ครับ โดยมีค่าต่างๆก็คือ name มีค่าเก็บไว้ว่า Buksohn ส่วน age ก็เก็บค่า 24 ไว้ และเจ้า hometown ก็เก็บค่า Sisaket ไว้ครับ
- ถัดมาอีก สังเกตไหมครับว่า เราสามารถประกาศตัวแปรหลายๆตัวได้ โดยใช้เครื่องหมาย คอมม่า (,) คั่นแต่ละตัวแปร นี่เป็นเทคนิคที่ผมอยากจะแนะนำให้นำไปใช้กันนะครับ นั่นก็คือ ส่วนบนสุดของโค้ดของเรา และส่วนบนสุดของทุกๆฟังก์ชั่น ให้เราประกาศตัวแปรทุกตัวที่เราต้องการจะนำมาใช้งานในไฟล์นั้น หรือในฟังก์ชั่นนั้นครับ (ตอนนี้อย่าเพิ่งสงสัยว่าฟังก์ชั่นคืออะไร อ่านผ่านๆไปก่อนครับ เพราะเดี๋ยวผมจะพาไปรู้จักภายหลัง)
[codesyntax lang=”javascript” lines_start=”1″ highlight_lines=”1″]
var name; name="Buksohn";
[/codesyntax]
บรรทัดแรก จะเห็นว่า ผมประกาศตัวแปรโดยไม่ได้ระบุค่าให้ตัวแปร ซึ่งในภาษา Javascript การที่เราประกาศตัวแปรแต่ไม่ระบุค่าให้ตัวแปร เราจะเรียกว่า “undefined” ครับ ซึ่งการประกาศแบบนี้ เราจะสามารถมาใส่ค่าของตัวแปรได้ภายหลัง (ก็คือบรรทัดที่สองนั่นเอง)
ถึงตอนนี้มีใครสับสน งงงวยกับชีวิตบ้างไหมครับ? ถ้ามีคำถาม ให้ถามนะครับ อย่าเก็บไว้ครับ
[thetext]Types[/thetext]
ก้าวแรกๆของการเรียนภาษา Javascript หลังจากที่เราได้เรียนรู้ว่าตัวแปรคืออะไร ก็คือการเข้าใจในสองเรื่องดังต่อไปนี้ครับ
- เข้าใจว่า ชนิดของข้อมูลมีอะไรบ้าง และมันทำอะไรได้บ้าง
- วิธีการเขียน มีวิธีการเขียนอย่างไร (เรียกว่า syntax หรือ แกรมม่าร์ทางคอมพิวเตอร์อ่ะครับ)
[skill2]ในช่วงต่อไปนี้ ผมจะเริ่มต้นจูงมือเพื่อนๆไปดู ชนิดของข้อมูลที่เราสามารถใช้งานได้ในภาษา Javascript ครับ โดยบทเรียนนี้ผมจะมีโค้ดให้ดูว่า syntax หรือวิธีการเขียน เป็นอย่างไร จากนั้นจะอธิบายแต่ละจุดๆนะครับ โอ้เค้? มาเริ่มกันเลย….[/skill2]
[thetext]String สตริง[/thetext]
[codesyntax lang=”javascript”]
"This is some text jaaaa" 'This is some text which surrounded by single quotes'
[/codesyntax]
[codesyntax lang=”javascript”]
alert ("I said \"What are you doing here!\" "); // I said "What are you doing here!"
alert(' "OMG!! It\'s really scary." '); // "OMG!! It's really scary."
[/codesyntax]
[skill]สังเกตเห็นอะไรบ้างไหมครับ? ในบรรทัดสุดท้าย ผมไม่ได้ใช้ \ สำหรับเครื่องหมาย double quotes เพราะอะไร? นั่นก็เพราะว่า ประโยคนี้มันถูกครอบด้วย single quote (‘) ไงละคับ ดังนั้นตัว ” ที่อยู่้ข้างใน javascript มันก็เลยรู้ว่าเป็นอักขระตัวหนึ่งครับ[/skill]
[thetext]ตัวเลข Numbers [/thetext]
ถ้าใครที่เคยเรียนภาษาอื่นๆมา (หมายถึงภาษาโปรแกรมมิ่งหนะครับ) ก็คงจะคุ้นเคยกับตัวเลขชนิดต่างๆในทางคอมพิวเตอร์นะครับ ไม่ว่าจะเป็นแบบจำนวนเต็ม หรือจำนวนที่มีทศนิยม แต่สำหรับ javascript ตัวเลขนั้นมีแค่รูปแบบเดียวครับ เราจะใช้แบบไหนก็เลือกใช้ได้ตามใจปรารถนาครับ
[codesyntax lang=”php”]
10 3.14159372
[/codesyntax]
ในภาษา javascript นั้นไม่มีข้อแตกต่างระหว่างตัวเลขเต็มสิบ (เช่น 1 2 200 1444) กับตัวเลขทศนิยม (เช่น 1.532) แต่ถ้าหากว่าเราต้องการตัวเลขที่มีค่าเยอะมาก หรือว่ามีค่าน้อยมากๆ ก็ใช้รูปแบบที่เรียกว่า scientific notation ได้ครับ (เอ่อ เรียกเป็นภาษาไทยได้ว่าอย่างไร ผมก็เรียกไม่เป็น ฮ่าๆ)
[codesyntax lang=”javascript”]
alert(3.141e5); // 314100 alert(123e-3); // 0.123
[/codesyntax]
มาดูคำอธิบายกันครับ อ้อ ผมลืมบอกไปว่า หลัง // ในโค้ด นั่นหมายถึง ถ้ารันออกมาแล้วจะได้ค่าอะไรนะครับ ฮ่าๆ สำหรับบรรทัดแรก 3.141e5 ก็คือ 3.141×105 นั่นเองครับ หรือก็คือ 314,100 นั่นเอง ส่วนบรรทัดที่สอง 123×10-3 หรือก็คือ 0.123 นั่นแหล่ะครับ แต่อย่างไรก็ดี ระวังไว้นะครับว่า javascript รองรับตัวเลขที่ไม่เกิน 17 ตัวเท่านั้น ถ้ายาวกว่านี้ ตัวถัดไปจะถูกตัดออกโดยทันทีครับผม
[skill]
ได้เวลาเล่าเรื่องสนุกๆให้ฟังแล้วหล่ะครับ ในภาษา javascript เนี่ยถ้าทำงานกับตัวเลข บางทีมันไม่ได้ให้ผลลัพธ์เป๊ะๆอย่างที่เราคาดนะครับ ยกตัวอย่างเช่น ถ้าผมต้องการ 0.1+0.2 คำตอบที่ได้มันจะได้ 0.30000000000000004 เห้ย!! อะไรกันเนี่ย! เกิดอะไรขึ้น ไม่ต้องตกใจไปครับ มันมีเหตุผลทางเทคนิคบางอย่าง ครับ ตัวเลขในทางคอมพิวเตอร์ที่มีทศนิยมละเอียดๆ แล้วบางทีก็จะมีค่า error เกิดขึ้นคับ แต่ผมก็คิดว่าพวกเราคงไม่ได้จะใช้ตัวเลขที่มีทศนิยมละเอียดยาวเป็นหางว่าวแบบนี้กันใช่ไหมครับ ฮ่าๆ แต่ช้าก่อน แม้ว่าเราจะไม่ได้ใช้ตัวเลขที่ละเอียดแบบนี้ เราก็ควรป้องกันไม่ให้มันเกิดขึ้นครับ เริ่มต้นแล้วก็ต้องเริ่มต้นให้ดี วิธีง่ายๆที่หลายๆคนมองข้ามนั่นก็คือ เราป้องกันได้โดยการทำให้ จำนวนทศนิยมเป็นจำนวนเต็มเสียก่อนครับโดยการคูณ จากนั้นค่อยมาหารออก ซึ่งก็จะเป็น ((0.1*10)+(0.2*10))/10 แค่นี้คำตอบที่ได้ก็จะถูกต้องตามหลักคณิตศาสตร์ที่เราเคยเรียนมาสมัยประถมแล้วหล่ะครับ นั่นก็คือตำตอบก็คือ 0.3 นั่นเอง ผมรู้ครับว่ามันดูยุ่งยากเสียเหลือเกิน แต่ก็นะ ก็มันคือ javascript นี่นา ฮ่าๆ แม้ว่ามันจะดูน่ากลัวสำหรับบางคน แต่จริงๆแล้วมันน่ารัก น่าค้นหา และสนุกมากนะครับ เชื่อผม
[/skill]
เอาละครับ บทเรียนตอนนี้ พอแค่นี้ก่อนละกัน ยาวมากกว่านี้ คงเล็คเชอร์กันทั้งวันแน่ๆ ผมไม่ต้องการให้อ่านทีเดียวเขียนโปรแกรมได้ทันที เพราะผมเองก็มิสามารถจะเขียนได้ยาวขนาดนั้น ผมจะแบ่งเป็นตอนๆ ให้เพื่อนๆ เรียนรู้ทีละอย่างๆไปครับ ช้าๆได้พร้าเล่มงามครับผม สำหรับตอนต่อไปเราจะมาดูรุปแบบอื่นๆที่ผมยังไม่ได้พูดถึงอีกครับ แล้วเจอกันตอนหน้านะครับ
[bigtitle]บอกต่อเพื่อนก็กด Like บอกบักสนนั้นไซร้ให้ Comment[/bigtitle]
