java script 9786169103004_ch02

17
JavaScript Programming Guide สมบูรณ์ พัฒน์ธีรพงศ์ www.kontentbluepub.com

Upload: palm2816

Post on 18-Dec-2014

446 views

Category:

Documents


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Java script 9786169103004_ch02

JavaScriptProgramming Guide

สมบรณ พฒนธรพงศ

www.kontentbluepub.com

Page 2: Java script 9786169103004_ch02

JavaScript Programming Guide

โดย สมบรณ พฒนธรพงศราคา : 250 บาท

พมพครงท 1 : ธนวาคม 2554

ขอมลทางบรรณานกรมของสำานกหอสมดแหงชาต

สมบรณ พฒนธรพงศ JavaScript Programming Guide.--กรงเทพฯ : คอนเทนตบล, 2554. 280 หนา. 1. จาวาสครปต (ภาษาคอมพวเตอร). I. ชอเรอง.005.133ISBN 978-616-91030-0-4

จดทำาโดย : คอนเทนตบล พบลชชงเลขท 608/53-55 ถนนสาธประดษฐ แขวงบางโพงพางเขตยานนาวา กรงเทพฯ 10120โทรศพท 0-2294-1663http://www.kontentbluepub.com

พมพท : บรษท เอน. วาย. ฟลม จำากดเลขท 3 ซอยราชพฤกษ 4 ถนนราชพฤกษ แขวงบางจาก เขตภาษเจรญ กรงเทพฯ 10160โทรศพท 0-2457-2596-7 โทรสาร 0-2868-6062http://www.nydigitalprint.net

จดจำาหนายโดย : บรษท ซเอดยเคชน จำากด (มหาชน)อาคารเนชนทาวเวอร ชนท 19 เลขท 1858/87-90 ถนนบางนา-ตราด แขวงบางนา เขตบางนา กรงเทพฯ 10260โทรศพท 0-2739-8222, 0-2739-8000 โทรสาร 0-2739-8356-9http://www.se-ed.com

Page 3: Java script 9786169103004_ch02

บทท 2

Variables และ Datatypes

หลงจากทไดทำาความรจกกบ JavaScript มาในบททแลว บทนเราจะเรมเจาะลกลงในรายละเอยดของตวภาษา JavaScript โดยจะเรมตนทเรองของตวแปร ทงนเพราะตวแปรและชนดของมนมความสำาคญตอการเรยนรสวนอนๆของภาษา JavaScript ในบทตอๆไป ดงนนในบทนเราจะมาเรยนรหวขอตางๆทเกยวของกบตวแปรดงตอไปน

• การประกาศตวแปร• ขอบเขตการใชงาน• ชนดของตวแปร• ความแตกตางระหวางตวแปรชนด Primitive และ Object

ตวแปร (Variable) ใชสำำหรบเกบขอมลตวแปรมไวสำาหรบเกบขอมลหรอเกบคา (Value) แตกอนเราจะใชตวแปรได เราตอง

ประกาศมนขนมาเสยกอน การประกาศตวแปรและการกำาหนดคาตงตนม Syntax ดงน var var_name = value;

ตวอยางเชน var price = 500; var message = “Welcome”; // string value is enclosed in quotes

คยเวรด var ใชสำาหรบการประกาศตวแปร และการประกาศตวแปรจะทำาเพยงครงเดยว (สำาหรบชอเดม) แตจะเรยกใชกครงกได เชน var price = 500; price = price * 1.05; // price is up 5%

และเราสามารถประกาศตวแปรมากกวาหนงตวดวยคยเวรด var ตวเดยวกนกได ตวอยางเชน var x,y;

http://www.kontentbluepub.com Variables และ Datatypes | 15

Page 4: Java script 9786169103004_ch02

var num1=10, num2=15;

นอกจากนคยเวรด var ยงละไดใน JavaScript อยางไรกตามผมแนะนำาวาใหเขยนไวเสมอ (เหตผลจะกลาวในลำาดบถดไป) สวนการตงชอมกฏดงตอไปน

• ใหเรมดวยตวอกษร หรอเครองหมาย Underscore “_” หรอเครองหมาย Dollar Sign “$”

• ตวถดไปสามารถเปนตวเลขได (สรปคอตวเลขหามใชขนตนชอนนเอง)• หามมชองวางในชอเดดขาด• เปน Case-sensitive นนคอตวอกษรพมพเลกหรอพมพใหญถอวาแตกตางกน เชน

Price กบ price ถอวาคนละตวกน• หามใช Reserved Words หรอคำาสงวนมาตงชอ โดยมทงหมด 28 ตวดงตอไปน

break case, catch, continue default, delete, do else false, finally, for, function if, in, instanceof new, null return switch this, throw, true, try, typeof var, void while, with

กฏการตงชอนนอกจากจะใชกบตวแปรแลว ยงใชกบการตงชออนๆใน JavaScript ดวย เชน ชอฟงกชน เปนตน

เพมเตมเกยวกบกำรประกำศตวแปรตวแปรใน JavaScript เปนประเภท Untyped กลาวคอตวแปรใน JavaScript สามารถ

เกบขอมลชนดใดกได เพราะไมมการระบชนด อกทงยงสามารถเปลยนแปลงชนดของขอมลทจดเกบไดอกดวย ตวอยางเชน var price = 500; price = “five hundred”;

จะเหนไดวาตวแปร price ถกประกาศขนมาและเกบคาชนดตวเลข (number) แตในบรรทดถดไปเราไดกำาหนดคาชนดใหมชนดตวอกษร (string) ใหกบตวแปร price ซงก

16 | Variables และ Datatypes ตวอยางหนงสอ

Page 5: Java script 9786169103004_ch02

ทำาไดใน JavaScript และนคอเหตผลทวาทำาไม JavaScript ถงจดไดวาเปนภาษาประเภท Dynamic Typing ในภาษาประเภท Static Typing อาทเชน Java ทำาไมได

ใน JavaScript การประกาศตวแปรชอซำากนดวยคยเวรด var ถอวาไ มผด และถอวาเปนตวเดยวกน ดงนนหากมการกำาหนดคา คาทกำาหนดใหมจงทบคาเกาทนท ตวอยางเชน var num = 15; var num = 25; document.write( num ); // 25

ดงนนตองระวงใหดนะครบ เราอาจไมรหรอลมไปวาไดประกาศตวแปรชอนไปแลว (โดยเฉพาะคนทถนดภาษาประเภท Static มากอน เพราะในภาษาประเภท Static มนจะฟองเราตอนคอมไฟล)

ทนมาดเรองของการใชตวแปรทประกาศแลวแตยงไมกำาหนดคา กบการใชตวแปรทยงไมไดประกาศบาง ถามการเรยกใชตวแปรทประกาศแลวแตยงไมไดมการกำาหนดคาให คาทไดจะเปน undefined ตวอยางเชน var myName; document.write( myName ); // undefined

แตหากเราพยายามจะใชงานตวแปรทยงไมมตวตนหรอยงไมไดประกาศ จะกอใหเกด Error ขนและโปรแกรมจะหยดทำางานทนท ตวอยางเชน document.write( nonExist ); document.write(“Can you see this message?”);

ในตวอยางขางตน เราจะไมเหนขอความ “Can you see . . .” เพราะโปรแกรมหยดทำางานเสยกอน ดงนน Undefined กบ Undeclare ไมเหมอนกนนะครบ

ขอบเขตกำรใชงำนของตวแปร (Variable Scopes)Variable Scopes คอขอบเขตการใชงานของตวแปร ซงมอยดวยกบสอง Scopes ดงน

• Global ตวแปร Global คอตวแปรทถกประกาศนอกฟงกชน ซงเราจะเรยกใชมนทใดกได แมแตเรยกใชในฟงกชน

• Local ตวแปร Local คอตวแปรทถกประกาศภายในฟงกชน ซงเราจะเรยกใชมนไดเพยงแคภายในฟงกชนทมนถกประกาศขนเทานน และหากมการประกาศตวแปร Global และ Local ชอเดยวกน และเรยกใชชอนนในฟงกชน จะถอวาเรยกใชตวแปร Local ตวอยางเชน

http://www.kontentbluepub.com Variables และ Datatypes | 17

Page 6: Java script 9786169103004_ch02

var globalScope = “Global”; var x = 10; function testScope(){ var localScope = “Local”; document.write( globalScope ); // Global document.write( “<br/>”); document.write( localScope ); // Local var x = 15; document.write( x ); // 15 } testScope(); document.write( x ); // 10

ในการประกาศตวแปร Local หากเราละคยเวรด var แลวละก มนอาจกลายเปนการกำาหนดคาใหกบตวแปร Global กได ตวอยางเชน var num = 100; function set(){ num = 0; } set(); document.write( num ); // 0 (Not 100)

ในตวอยางขางตนเราตงใจจะประกาศตวแปร Local ชอ num ในฟงกชน set() และไดละคยเวรด var ไวซงกไมผดกฏอะไร แตเนองจากมการประกาศตวแปร Global ชอ num อยกอนแลว จงกลายเปนการกำาหนดคาใหกบตวแปร Global แทน ดงนนผมแนะนำาวาใหใสคยเวรด var ทกครงทตองการประกาศตวแปรใหม เพอใหเกดความเคยชน

นอกจากนการประกาศตวแปรใน JavaScript ไมม Scope แบบ Block-level (เชน บลอกของการทำาเงอนไข, บลอกของการวนลป เปนตน) ตวอยางเชน function test(x){ if(x >= 0){ var y = “Positive integer” }else{ var y = “Negative integer”; } document.write( y ); } test( 100 ); // Positive integer

ในตวอยางขางตนเราสามารถเรยกใชตวแปร y ภายนอกบลอกของ if-else ได !!! สดทายเรามาดเรองของลำาดบการเขยนทเกยวของกบตวแปร Local กน เรองนอาจ

จะยากสกหนอย ถาไมสามารถเขาใจได กสามารถขามมนไปกอนได ตวแปร Local เปน

18 | Variables และ Datatypes ตวอยางหนงสอ

Page 7: Java script 9786169103004_ch02

ตวแปรทจะถกเตรยมไวกอนเสมอ กอนการรนแตละ Statement ในฟงกชน ตวอยางเชน var x = 0; function test(){ document.write( x ); // undefined (not 0) var x = 10; document.write(“<br/>”); document.write( x ); // 10 } test();

ในตวอยางขางตนตวแปร x ในบรรทดแรกของฟงกชน test() คอตวแปร Local ไมใช Global ทงนเพราะ JavaScript จะสรางตวแปร Local รอไวกอน โดยการตรวจวาฟงกชนนนมตวแปร Local อะไรบาง แตจะมการกำาหนดคาใหกตอเมอรนจนถงบรรทดนนๆ ทำาใหในตวอยางขางตนนเกดการใชงานตวแปร x กอนทมนจะไดรบคา (แต x มตวตนแลว) อยางไรกตามในทางปฏบตคงไมคอยไดพบปญหาน เพราะเราจะประกาศกอนเรยกใชงานอยแลว (กในเมอตงใจจะเรยกใชตวแปร Local ในตวอยางน กควรเขยนการประกาศตวแปรกอน)

[Note] อนทจรงแลวเราสามารถใชตวแปร Local ภายนอกฟงกชนได ดวยเทคนคการทำา Closure แตมนเกนความจำาเปนตอการใชงานทวไป จงขอละไว

[Note] ตวแปร Global ทประกาศในแทก <script> ชดหนง สามารถถกเรยกใชในแทก <script> ชดอนๆได

ชนดของตวแปร (Datatypes)ตวแปรมไวสำาหรบเกบขอมลหรอเกบคา แตวาคาชนดไหนบางหละทสามารถเกบลง

ไปในตวแปรได? อนนกตองดท Datatypes ท JavaScript รองรบ Datatypes ใน JavaScript แบงไดเปนสองกลมดวยกนคอ

• Primitive types ซงประกอบไปดวย Numbers, Strings, และ Booleans• Reference types ซงประกอบไปดวย Objects, Arrays, และ Functions

http://www.kontentbluepub.com Variables และ Datatypes | 19

Page 8: Java script 9786169103004_ch02

ตวแปรชนด Primitiveตวแปรชนด Primitive คอตวแปรทเกบคาดงตอไปน คาตวเลข (Numbers), คาตว

อกษร (Strings), และคาจรงเทจ (Booleans)ตวแปรทเกบคาตวเลขคอตวแปรชนด number โดยตวเลขสามารถเปนไดทง

เลขจำานวนเตม (Integer) และเลขทมจดทศนยม (floating-point) และจะเปนคาบวกหรอคาลบกได ตวอยางเชน var num = 10; var price = 589.50; var xPosition = -5; var yPosition = -8;

ตวแปรขางตนทงหมดจะมชนดเปน number เพราะไดรบการกำาหนดคาเปนชนดตวเลข ตองไมลมวา JavaScript เปนภาษาประเภท Dynamic Typing จงไมมการกำาหนดชนดเจาะจงใหกบตวแปร แตจะดจากคาทใสใหกบตวแปร นอกจากนหากเราตองการกำาหนดคาตวเลขในรปของเลขฐานแปดใหกบตวแปร เราสามารถทำาไดโดยใส “0” นำาหนาคา และถาเปนเลขฐานสบหกกใหใส “0x” หรอ “0X” นำาหนาคา ตวอยางเชน var num1 = 031; // 25 var num2 = 0x19; // 25

ตวแปรทเกบคาจรงหรอเทจคอตวแปรชนด boolean ในการกำาหนดคาใหกบตวแปรชนด boolean นน ใหใช true หรอ false โดยไมตองมเครองหมายคำาพด (“”) หรอ ('') ใดๆทงสน ตวอยางเชน var result = true;

ตวแปรทเกบคาตวอกษรคอตวแปรชนด string ในการกำาหนดคาใหกบตวแปรชนด string จะตองกำาหนดอยในเครองหมายคำาพด (“”) หรอ ('') เสมอ ตวอยางเชน var message = “Welcome”; var message = 'Welcome';

หากการกำาหนดคาประกอบไปดวยเครองหมายพเศษทไมสามารถกำาหนดได เชน เครองหมายคำาพด “ หรอ ' เพราะอาจไปขดแยงกบตวเปดปด string, หรอทไมมในคยบอรด เปนตน เราจำาเปนตองใชสญลกษณ Escape Sequence “\” เพอชวยกำาหนดดงแสดงตอไปน \“ แทนเครองหมายคำาพด “ \' แทนเครองหมายคำาพด '

20 | Variables และ Datatypes ตวอยางหนงสอ

Page 9: Java script 9786169103004_ch02

\\ แทนตว Backslash \ เอง \uXXX XXX คอรหส Unicode ใชแสดงตวอกษรทไมมในคยบอรด เชน

\u00a9 แทน ©นอกจากนตวแปร string เมอนำามาใชกบเครองหมายบวก “+” เครองหมายนจะกลายเปนเครองหมาย Concatenation ทนท นนหมายความวาเปนการนำาตวอกษรมาแปะตอทายกน ตวอยางเชน var message = “Hello ” + “World”; // Hello World var message = “Hello” + 1; // Hello1 var message = “Hello” + 1 + 1; // Hello11 var message = 1 + 1 + “Hello”; // 2Hello

ถามขางใดขางหนงของเครองหมายบวก “+” เปนคา string เครองหมายบวก “+” นจะกลายเปนเครองหมาย Concatenation ทนท

สดทายเราลองมาดภาพจำาลองการจดเกบคา Primitives ในเมมโมรกน หากมการประกาศตวแปรดงตอไปน var num = 10;

เราสามารถจำาลองรปไดดงน

อกตวอยางเชน var result = true;

เราสามารถจำาลองรปไดดงน

สรปกคอตวแปรชนด Primitive เกบคา Primitive ทตวมนเองเลย (ซงเดยวจะเหนวามนตางจากพวกตวแปรชนด Reference นะครบ)

[Note] อนทจรงแลวคา Primitives จะถกเกบอยในรปของตวเลข 01 หรอในรปของเลขฐานสอง รปขางตนใชเพยงเพอแสดงใหงายตอความเขาใจ

http://www.kontentbluepub.com Variables และ Datatypes | 21

Page 10: Java script 9786169103004_ch02

ตวแปรชนด Referenceตวแปรชนด Reference คอตวแปรทเกบคำอำงองของ Objects, Arrays, และ

Functions เราอาจเรยกตวแปรชนด Reference วาตวแปรชนดออบเจกตกได และดวยเหตน Arrays และ Functions ใน JavaScript จงจดวาเปนออบเจกตชนดหนง

แลวออบเจกตคออะไร? ออบเจกตคอการรวมกลมของพรอพเพอรต (Property) ทเกยวของกน เพอใหงายตอการเรยกใชงาน เชน ออบเจกต Employee ประกอบไปดวยพรอพเพอรต name, birthdate, และ salary ดงแสดงในรปขางใต

การใชงานในรปของออบเจกต ทำาใหการเกบคาขอมลทำาไดงายกวาการใชในรปของตวแปร Primitives ทแยกขาดจากกน ลองจนตนาการดวา ถาตองเกบขอมลพนกงานมากกวา 50 คนโดยไมเกบในรปของออบเจกต เราจำาเปนตองใชตวแปรจำานวนมาก เพราะเราตองมตวแปรสำาหรบแตละพรอพเพอรต เชน name1, name2, . . ., birthdate1, birthdate2, . . ., salary1, salary2, . . . เปนตน นอกจากนออบเจกตยงประกอบไปดวยเมธอดไดอกดวย ซงเมธอดกคอฟงกชนทเกยวของกบออบเจกตนนๆ เชน ออบเจกต Document มเมธอด write() อย, หรอสำาหรบออบเจกต Employee กนาจะมเมธอด calculateAge() อย เปนตน

ตวแปรชนดออบเจกตใชสำาหรบเกบตวอางองออบเจกตอกทหนง กลาวอกอยางคอตวแปรชนดออบเจกตใชสำาหรบเกบทอยในเมมโมรของออบเจกต ยกตวอยางเชน หากเราเขยนโคดดงตอไปน var emp1 = new Employee(“James”,“4/3/1977”,25000);

หรอ var emp1 = {name:“James”,birthdate:“4/3/1977”, salary:25000);

เราสามารถจำาลองรปในเมมโมรไดดงน

22 | Variables และ Datatypes ตวอยางหนงสอ

Page 11: Java script 9786169103004_ch02

จะเหนไดวาตวแปร emp1 ไมไดเกบออบเจกต Employee เองเลย หากแตเกบทอยของ ออบเจกต Employee ทถกโหลดดวยคำาสง new อกท (เราจงพอจะจนตนาการไดวา emp1 ชไปยงออบเจกต Employee แตอนทจรงแลว Reference ไมเหมอนกบ Pointer ซะทเดยวนะครบ) ลองดอกซกตวอยางหนงแลวกน หากเราเขยนโคดดงตอไปน var d1 = new Date(2011,3,29);

เรากจะไดรปจำาลองประมาณน

(ฟอรแมตของวนทจะเปนป, เดอน, วน และเดอนจะเรมท 0 ถง 11) นอกจากนออบเจกตยงแบงออกเปนอกสองกลมหลกๆคอ

• Built-in Objects คอออบเจกตสำาเรจรปทมากบภาษา JavaScript และ Client-side JavaScript เชน ออบเจกต Date, Math, RegExp, Document, Window เปนตน

• Custom Objects คอออบเจกตทเราสรางขนมาเอง เชน ออบเจกต Employee, Customer, Product เปนตน

สวนรายละเอยดของออบเจกตจะกลาวอยางละเอยดอกครงในบทท 6 “Objects และ Classes” ในทนใหเขาใจเรองความแตกตางระหวางตวแปรชนด Reference กบตวแปรชนด Primitive กอน

Primitives VS Objectsเพอใหเขาใจความแตกตางระหวางตวแปรชนด Primitive กบตวแปรชนด Reference

http://www.kontentbluepub.com Variables และ Datatypes | 23

Page 12: Java script 9786169103004_ch02

เราลองดตวอยางตอไปน var x = 10; var y = x; x = 15; document.write( y ); // 10

สาเหตทผลลพธเทากบ 10 เพราะ ทง x และ y ตางกเกบคา 10 ของใครของมนดงแสดงในรปขางใต (y = x หมายความวาให y เกบคากอปปเดยวกนกบท x เกบอย) ดงนนการเปลยนคาในตวแปร x จงไมกระทบกระเทอนตวแปร y

เอาหละทนมาดตวอยางตวแปรชนด Reference กนบาง จากตวอยางตอไปน var d1 = new Date(2011,3,29); var d2 = d1; d1.setDate( 30 ); document.write( d2 ); // 30

จะเหนไดวาวนททตวแปร d1 และ d2 อางองอย เปลยนแปลงเหมอนกน ทงนเพราะเรามออบเจกตเพยงแคออบเจกตเดยว คอ new Date() เพยงแคครงเดยว แตมตวแปรอางองถงถงสองตวคอ d1 และ d2 ดงแสดงในรปขางใต

สรปคอตวแปรชนด Primitive จะเกบคาทตวมนเอง ในขณะทตวแปรชนด Reference จะเกบทอยของออบเจกตอกท

24 | Variables และ Datatypes ตวอยางหนงสอ

Page 13: Java script 9786169103004_ch02

Wrapper ObjectsWrapper Objects คอออบเจกตสำาเรจรป (Built-in) ทเปนตวแทนของคา Primitives

หรอเปนออบเจกตทเกบคา Primitives อกทหนง ซงกไดแกออบเจกต Number, String, และ Boolean (จะขนตนชอดวยตวอกษรพมพใหญ) แลวทำาไมเราจะตองใช Wrapper Objects ดวย ในเมอมตวแปรชนด Primitive อยแลว ทงนเพราะ Wrapper Objects ประกอบไปดวยพรอพเพอรตและเมธอดทจำาเปน ยกตวอยางเชน หากเราใชตวแปร string ทเปน Primitive เรากไดแคเกบคาตวอกษรเทานน ดงน var message = “Welcome”;

แตหากเราใชตวแปรทเปนออบเจกตชนด String แลว เราสามารถตรวจสอบจำานวนตวอกษรทงหมดไดดวยพรอพเพอรต length ดงน var message = new String(“Welcome”); document.write( message.length ); // 7

รปขางใตแสดงการภาพจำาลอง หากใชตวแปรในรปของออบเจกต String

แมวา Wrapper Objects จะประกอบไปดวย Nubmer, String, และ Boolean ทวาทเราใชกนจรงๆกคอ String ดงนนเรามาดพรอพเพอรตและเมธอดของออบเจกต String ทนาสนใจกน ซงมดงตอไปน

พรอพเพอรต lengthใชสำาหรบเกบคาจำานวนตวอกษรทงหมดรวมชองวางดวย ดงทแสดงในตวอยางขาง

ตน

เมธอด substring(from:int,to:int): stringรเทรน string ใหมทเกดจากชวงทกำาหนด คอเรมจาก from ไปจนถง to (ไม

http://www.kontentbluepub.com Variables และ Datatypes | 25

Page 14: Java script 9786169103004_ch02

รวมตว to เอง) และ Index จะเรมท 0 เสมอ โดยตวอกษรเกายงคงเดม ยกตวอยางเชน var message = new String(“Welcome”); var newMsg = message.substring(0,3); document.write( newMsg ); // “Wel” 012

เมธอด indexOf(str:string): intรเทรนคาตำาแหนงแรกของการคนหาคำา หากไมพบจะรเทรนคา -1 ตวอยางเชน

var message = “Welcome”; document.write( message.indexOf(“W”) ); // 0

เมธอด lastIndexOf(str:string): intรเทรนคาตำาแหนงแรกของการคนหาคำา โดยเปนการคนหาจากขางทาย หากไมพบ

จะรเทรนคา -1 ตวอยางเชน var message = “Welcome”; document.write( message.lastIndexOf(“e”) ); // 6

เมธอด toLowerCase(): stringรเทรน string ใหมทถกเปลยนใหเปนตวอกษรพมพเลกทงหมด ตวอยางเชน

var message = “Welcome”; document.write( message.toLowerCase() ); // welcome

เมธอด toUpperCase(): stringรเทรน string ใหมทถกเปลยนใหเปนตวอกษรพมพใหญทงหมด ตวอยางเชน

var message = “Welcome”; document.write( message.toUpperCase() ); // WELCOME

[Note] ใน JavaScript ไมม Datatype ชนด int มนถกใชสำาหรบสอใหเหนวาเปนเลขจำานวนเตมเทานน

26 | Variables และ Datatypes ตวอยางหนงสอ

Page 15: Java script 9786169103004_ch02

[Note] การคนหาในเมธอด indexOf() และ lastIndexOf() เปนแบบ Case-sensitive

JavaScript นนเปนภาษาทยดหยนมาก ถาเราใชคา Primitives ในสถานการณทควรจะเปนออบเจกต JavaScript จะทำาการเปลยนเปน Wrapper Objects ใหทนท :) ลองดจากตวอยางดงตอไปนนะครบ var message = “Welcome”; document.write( message.length ); // 7 document.write(“Welcome”.length); // 7

จากตวอยางขางตนจะเหนไดวา เราสรางตวแปรในลกษณะของ Primitive แตสามารถใชงานมนไดเสมอนเปนออบเจกต และดวยเหตนหลายคนจงไมสราง Wrapper Objects ขนโดยตรง เพราะเมอใดอยากใช JavaScript กแปลงใหโดยอตโนมต

สดทายหากคณยงสงสยหรอไมแนใจวาตวแปรตวไหนเปนชนด Primitive ตวไหนเปนชนด Reference/Object กลองตรวจสอบดไดดวยคำาสง typeof ตวอยางเชน var str1 = new String(“hello”); var str2 = “hello”; document.write( typeof str1 ); // object document.write( typeof str2 ); // string

จบทกอยำงมำรวมกนทงหมดทผานมาคอเรองของตวแปรและชนด ในหวขอสดทายนเรามาปดบทดวย

ตวอยางรวมจากสงทเราไดเรยนมากน ตวอยางท 2-1 (Primitives_Example.html) แสดงการใชงานตวแปรชนด Primitive ซงผลลพธการรนจะแสดงอยในรปท 2-1

http://www.kontentbluepub.com Variables และ Datatypes | 27

Page 16: Java script 9786169103004_ch02

รปท 2-1: ผลลพธการรน Primitives_Example.html บนเวบเบราวเซอร

ตวอยำงท 2-1: Primitives_Example.html<html> <head> <title>Primitives_Example.html</title> </head> <body> <script> var num1 = 10; var num2 = 15; var num3 = num1 + num2; document.write("num3: " + num3 + "<br/>");

var bool = true; document.write("bool: " + bool+ "<br/>");

var str = "hello"; document.write("str is a type of: " + typeof str); </script> </body></html>

ในตวอยางขางตนเราใช “<br/>” เพอใหขนบรรทดใหม เพราะนคอ Syntax ของ HTML และคำาสง typeof ใชเพอตรวจสอบชนดของตวแปร ตวอยางถดไปตวอยางท 2-2

28 | Variables และ Datatypes ตวอยางหนงสอ

Page 17: Java script 9786169103004_ch02

(Objects_Example.html) แสดงการใชงานตวแปรชนด Reference ซงผลลพธการรนจะแสดงอยในรปท 2-2

รปท 2-2: ผลลพธการรน Objects_Example.html บนเวบเบราวเซอร

ตวอยำงท 2-2: Objects_Example.html<html> <head> <title>Objects_Example.html</title> </head> <body> <script> var now = new Date(); document.write("Today is " + now); </script> </body></html>

http://www.kontentbluepub.com Variables และ Datatypes | 29