การสร้างตัวแปรใน javascript

หนวยท่ี

การสรางตัวแปร 2

1

ในการคํานวณน้ันบางคร้ังจําเปนตองมีการทดเลขเพื่อใชในการจําตัวเลขจํานวนและนํามาใช

สําหรับทําการคํานวณในขั้นตอนตอไป โดยที่ JavaScript เปนภาษาประมวลผล ซึ่งสามารถทําการคํานวณ

หาคา บวก ลบ คูณ หาร และมีตัวแปรเปนตัวที่ทําหนาที่เหมือนกระดาษที่ใชทดเลขจํานวนเพื่อนําเลขจํานวน

หรือขอมูลข้ึนมาใชอีกคร้ังหน่ึง

ยกตัวอยาง เชน มนุษยเราไดตั้งชื่อคน สัตว สิ่งของ สถานที่ไวเพื่อใหตนเองไดเรียกใชหรือใชใน

กิจกรรมบางอยาง การตั้งชื่อก็เปรียบเสมือนการเก็บคาหรือคํานิยามของสิ่งนั้นๆ ไวภายใน เชน คําวา “พอ”

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

สามารถใชไดในกรณีตางๆ และใชแทนตัวเราในการทํากิจกรรมตางๆดวย

จากหนวยการเรียนที่ 1 ไดทําการยกตัวอยางของการเขียนโปรแกรมและผานการใชตัวแปร

JavaScript มาบางแลว ยกตัวอยางเชน ตัวอยางที่ 3.3

ตัวแปรช่ือ myname กําหนดคา

ใหตัวแปรเก็บคําวา JOE ไว

จากน้ันคําส่ัง alert จะทําการ

เรียกขอความท่ีเก็บอยูตัวแปร

โดยตามหลังคําวา Hello

Created with Print2PDF. To remove this line, buy a license at: http://www.software602.com/

อธิบายจากโปรแกรมเราไดประกาศชื่อตัวแปรชื่อ myname และกําหนดคาใหตัวแปรเก็บคําวา JOE ไว (

mymane= "JOE") จากนั้นเรียกคําสั่ง alert ใหแสดงขอความวา Hello ตอทายคาที่เก็บในตัวแปร myname

alert=("Hello"+myname);

2.1 การสรางตัวแปร

ตัวแปร (Variable) มีหนาที่จัดเก็บขอมูลเพื่อใชในงานโปรแกรมโดยที่คาขอมูลที่บันทึกไวในตัว

แปรนั้นจะถูกเก็บไวในหนวยความจําหลักที่สามารถเรียกใชในการประมวลผลและอางอิงภายในโปรแกรม

ไดทุกเมื่อ ตัวอยางเชน

ตัวแปรช่ือ Char1 ใชเก็บตัวอักขระหรือขอความ

ตัวแปรช่ือ number ใชเก็บขอมูลชนิดตัวเลข

ตัวแปรช่ือ total ใชเก็บขอมูลชนิดตัวเลขแบบทศนิยม

ดังที่ยกตัวอยางมานั้นเปนเพียงการตั้งชื่อของตัวแปรนั้นๆ ซึ่งไมจําเปนวาจะตองตั้งชื่อเหมือนกับที่

ยกตัวอยางมา การตั้งชื่อเราสามารถตั้งชื่อตัวแปรตามแตที่ผูใชจะตั้งขึ้นมาโดยมี กฎการตั้งดังนี้

ใชตัวอักษรภาษาอังกฤษเทาน้ัน A-Z,a-z ตัวพิมพใหญหรือตัวพิมพเล็ก ตัวเลข 0-9 และ

เครื่องหมายขีดลาง Underscore ( _ )

ใชตัวเลขตั้งชื่อตัวแปรไดแตไมสามารถนําตัวเลขมานําหนาชื่อไดเชน 007total ถือวาผิด

หากตองการใชชื่อตัวแปร 007total ใหถูกตองตองเปลี่ยนเปน total007 จึงจะถูกตอง

สามารถใชเครื่องหมายขีดลาง Underscore ( _ ) ตั้งชื่อนําหนาได เชน _007total

การตั้งชื่อตัวพิมพใหญและตัวพิมพเล็ก (Case-sensitive) ในโปรแกรมถือวาเปนคนละตัว

กัน เชน total007 กับ TOTOL007 และ Total007 จัดเปนคนละตัวแปรกัน

ชื่อตัวแปรสามารถตั้งชื่อไดยาวไมจํากัดแตตองอยูในบรรทัดเดียวกัน

หามตั้งชื่อซ้ํากับคําสงวน (Reserve word)

คําสงวน(Reserve word) หมายถึงคําที่ภาษาสงวนไวใชในโปรแกรมโดยคําเหลานี้มีหนาที่

เฉพาะอยูแลว จึงหามนํามาตั้งเปนชื่อของตัวแปร เพราะอาจจะทําใหโปรแกรมเกิดความ

ผิดพลาดได โดยคําสงวนเหลานี้ไดแก




3

abstract else instanceof super boolean enum int

switch break export interface synchronized byte extends

let this case false long throw catch

final native throws char finally new transient

class float null true const for package

try continue function private typeof debugger goto

protected var default if public void delete

return volatile do import short while double

implements in static with

* หากมีความจําเปนจริงๆ ที่ตองการจะใชชื่อซ้ํากับคําสงวนก็สามารถทําได ใหสังเกตวาคํา

สงวนที่กําหนดนั้นเปนตัวพิมพเล็กทั้งหมด จึงใชวิธี(Case-sensitive) ลองเปลี่ยนคําสงวน

เปนตัวพิมพใหญเชน คําวา abstract เปลี่ยนเปน Abstract จึงจะถือวาไมซ้ําและไมตรงกับ

คําสงวน

ตัวอยางของการตั้งชื่อตัวแปร ที่ถูกและผิด

1.การตั้งชื่อตัวแปร ไมสามารถใชตัวเลขนําหนาได เชน

123tell 999char 1star

2. การตั้งชื่อตัวแปร ไมสามารถนําเครื่องหมายอื่นมาใชตั้งชื่อได เชน

+star -kilo *varchar .star “varchar” int-put

Op,007 str.1

3. การตั้งชื่อตัวแปร ไมสามารถนําคําสงวนมาใชตั้งชื่อได เชน

Float if null for


4. การตั้งชื่อตัวแปร ไมสามารถเวนชองวางระหวางชื่อได เชน

A variable str 007

5. การตั้งชื่อตัวแปรสามารถใชตัวเลขตามหลังตัวอักษร

tell123 char999 star1

6. การตั้งชื่อตัวแปร สามารถใชเครื่องหมาย_ (Underscore) ไดเชน

A_variable str_007

2.2 ชนิดของขอมูลของตัวแปร

ชนิดของขอมูลใน JavaScript น้ันแตกตางจากภาษาชนิดอ่ืนเล็กนอย คือเมื่อต้ังชื่อตัวแปรตัว

โปรแกรมจะรับรูไดทันทีวาตองการนําตัวแปรไปใชกับขอมูลชนิดใด แตมีขอเสียคือเราตองทําการจําใหได

วาตัวแปรที่เราตั้งขึ้นนั้นนํามาใชกับชนิดขอมูลประเภทใด โดย JavaScript สนับสนุนการเก็บขอมูลประเภท

ตางๆ ดังนี้

1.ขอมูลตัวเลข (number) ใชเก็บคาตัวเลขจํานวนเต็มและจํานวนทศนิยม โดยตัวเลขจํานวนเต็มนั้นจะอยูใน

รูปของเลขฐาน 10 ฐาน 8 และ ฐาน สวนจํานวนทศนิยม มีวิธีการกําหนด เชน

-4.2132 55. 12e2 (อานวา 12 คูณ 10 ยกกําลัง 2) 1e-1 (อานวา 1 คูณ 10 ยกกําลัง -1) .5 -4e-4

2. ขอมูลชนิดตรรกะ (Boolean) เก็บคาความจริงหรือเท็จ (True/ False)

3. ขอมูลชนิดสตริง(String) เก็บคาขอความ เชน Hello ใหใชเคร่ืองหมาย “ _” ขอความน้ันเชน "Hello"

4. ขอมูลวาง (Object) เก็บคาวางเปลาไมมีขอมูล โดยเมื่อเราประกาศตัวแปรโดยไมกําหนดคาใหตัวแปรนั้น

ตัวแปรจะมีคา null หรือวาง ทันที

2.3 การประกาศตัวแปรและกําหนดคา

การกําหนดตัวแปรไวใชงาน สามารถทําไดโดยการตั้งชื่อและใหระบุชื่อตัวแปรไวหลังคําวา var ดัง

รูปแบบ

ตัวอยางเชน var tell123; var num1,num2; var num=30;

var ชื่อตัวแปร [ =คาที่กําหนด] ;




5

และการกําหนดคาใหตัวแปร เราสามารถกําหนดคาโดยใชเครื่องหมายเทากับ (=) ในการกําหนดคาเขาไป

เก็บไวในโปรแกรม เชน

เมื่อเราไดคุนเคยกับการประกาศตัวแปรและการกําหนดคาใหตัวแปรโดยใชเครื่องหมายเชน บวก

(+) และเทากับ (=) มาบางแลวนั้นตอมายังมีตัวที่ทําการกําหนดคาใหตัวแปรหรือที่เรียกวาตัวดําเนินการ

Operators อีกหลายตัว เชน เครื่องหมายทางคณิตศาสตร (Arithmetic Operators) เครื่องหมายกําหนดคา

(Assignment Operators) และเครื่องหมายสําหรับการเปรียบเทียบ (String Operators)

เครื่องหมายทางคณิตศาสตร (Arithmetic Operators)

* เพื่อใหเกิดความสะดวกในการยกตัวอยางในชองตารางตัวอยางและผลลัพธ จึงขอกําหนด คา y= 10

ตัวดําเนินการ ความหมาย ตัวอยาง ผลลัพธ

+ บวก (Addition) x=y+2 x=7

- ลบ (Subtraction) x=y-2 x=3

* คูณ(Multiplication) x=y*2 x=10

/ หาร(Division) x=y/2 x=2.5

% หารเอาเศษ (Modulus) x=y%2 x=1

++ บวกหนึ่ง(Increment) x=++y x=6

-- ลบหนึ่ง(Decrement) x=--y x=4

Total = 30; หมายถึงตัวแปร ชื่อ Total เก็บคา 30 ไว


ในกรณีที่มีการใชหลายตัวดําเนินการ ซึ่งแตละตัวดําเนินการจะมีลําดับความสําคัญกอนหลังที่

แตกตางกัน โดยการประมวลผลจะกระทํากับตัวดําเนินการที่มีความสําคัญสูงกอนแตถากรณีที่มีลําดับ

ความสําคัญเทากัน จะพิจารณาตัวดําเนินการจากซายไปขวากอน ดังตอไปนี้

ลําดับความสําคัญ ตัวดําเนินการ ความหมาย

1 ( ) ในวงเล็บ

2 ++,-- บวกหนึ่ง(Increment) ลบหนึ่ง(Decrement)

3 -,! ลบ (Subtraction) นิเสธ (NOT)

4 *,/,% คูณ หาร หารเอาเศษ

5 +,- บวก ลบ

ตัวอยางการคํานวณ เชน

จากตัวอยางมีลําดับการคํานวณดังนี้

X = 2*3/4+4/4+8-2+5/8

6/4+4/4+8-2+5/8

1+4/4+8-2+5/8

1+1+8-2+5/8

1+1+8-2+0

2+8-2+0

10-2+0

8+0

8

X = 2*3/4+4/4+8-2+5/8




7

เครื่องหมายสําหรับกําหนดคา(Assignment Operators)

* เพื่อใหเกิดความสะดวกในการยกตัวอยางในชองตารางตัวอยางและผลลัพธ จึงขอกําหนด คา x=5, y= 10


= เทากับตัวแปรดานขวา x=y x=10

+= เทากับตัวแปรซายบวกตัวแปรขวา x+=y x=15

-= เทากับตัวแปรซายลบตัวแปรขวา x-=y x=-5

*= เทากับตัวแปรซายคูณตัวแปรขวา x*=y x=50

/= เทากับตัวแปรซายหารตัวแปรขวา x/=y x=0.5

%= เทากับตัวแปรซายหารเอาเศษตัวแปรขวา x%=y x=5

เครื่องหมายเปรียบเทียบ (Comparison Operators)

* เพื่อใหเกิดความสะดวกในการยกตัวอยางในชองตารางตัวอยางและผลลัพธ จึงขอกําหนด คา x=5


= = เทากับ x== 5 true

x== 8 false

= = = เทากับ x=== 5 true

x=== 5 false

!= ไมเทากับ x!= 8 true

> มากกวา x> 8 false

ตาราง เครื่องหมายเปรียบเทียบ (Comparison Operators)(ตอ)


< นอยกวา x < 8 True

>= มากกวาหรือเทากับ false

<= นอยกวาหรือเทากับ x <= 8 True


เครื่องหมายทางตรรกะ (Logical Operators)


&& และ (and) (x<10 && y >1) True

| | หรือ (Or) (x = = 5 | | y = =5) false

! นิเสธ (not) !(x = = y) True

2.3 อารเรย

การใชงานอารเรย อารเรยคือการนําตัวแปรหลายๆ ตัวที่มีชนิดขอมูลเหมือนกันมาจัดรวมกลุมกัน โดยตัว

แปรแตละตัวเราจะเรียกวาสมาชิก (Member) การประกาศตัวแปรอารเรยสามารถทําไดดังนี้

เชน

การอางอิงสมาชิกในอารเรยเราจะใชเลขอินเด็กซ (Index) โดยเลขอินเด็กซจะเริ่มจากศูนย (สมาชิก

ตัวแรก) จนถึงสมาชิกตัวสุดทาย ลองมาดูตัวอยางการกําหนดคาใหกับสมาชิกแตละตัว

จากคําสั่งทางซายมือจะเห็น

ไดวาการกําหนดคาใหกับ

สมาชิกอารเรยมี 2 แบบคือ

แบบทีละสมาชิกและแบบครั้ง

เดียวทุกสมาชิก

เมื่อเรากําหนดคาใหกับสมาชิกในอารเรยแลวเราสามารถนําสมาชิกแตละตัวออกมาใชงานได เชน ตัวอยาง

การนําคาของอารเรยแตละตัวมาบวกกัน

การใชงานสตริง สตริงคือ ขอความเราสามารถอางอิงอักขระแตละตัวไดดวย CharAt เชน

Scores[0] = 10;

Scores[1] = 40; กําหนดสมาชิกทีละตัว

Scores[2] = 120;

Scores[3] = 55;

หรือ

Scores=[10,40,120,55]; กําหนดคร้ังเดียวทุกสมาชิก

totalscores = Scores[0] + Scores[1]+ Scores[2] + Scores[3] ;

document.write(totalscores);

test= “This is a test”

document.write(test. CharAt(0)); ผลลัพธแสดงอักขระ T

document.write(test. CharAt(11)); ผลลัพธแสดงอักขระ e

document.write(test. CharAt(8)); ผลลัพธแสดงอักขระ a

ช่ืออารเรย = new Array(จํานวนสมาชิก); scores = new Array(4);




9

จากคําสั่งเราสรางตัว แปรสตริงขึ้นมาและเขียนออกมาให CharAt ระบุเลข เลขอินเด็กซออกมา (โดยอักขระ

ตัวแรกมีเลขเปนศูนย) ผลลัพธจะแสดงคําวา “Tea” ออกมา

การทํางานสตริงยอย (Substring) บางครั้งเราตองการเพียงบางสวนออกมาใชงาน ซึ่งก็สามารถทําไดดังนี้

ตัวอยาง

จากคําส่ังกําหนดตัวแปรสตริงช่ือ Alpha เก็บอักขระคา A-Z จากน้ันเราใช substring ดึงสวนยอยออกมา โดยใชวิธีการอิน

เด็กซในการอางอิงตําแหนง

การคนหาสตริงยอย เราสามารถคนหาสตริงยอยในสตริงที่เราตองการได โดยใช indexOf

ในการคนหาตําแหนง หากพบจะแสดงคาอินเด็กซออกมา แตหากหาไมพบจะแสดงคาลบหนึ่ง ดังตัวอยาง

A B C D E F G H Y Z

ช่ือตัวแปรสตริง.substring(อินเด็กซเริ่ม,อินเด็กซจบ);

Alpha = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;

alert(Alpha.charAt(0)); แสดงอักขระ A

alert(Alpha.charAt(25)); แสดงอักขระ Z

alert(Alpha.charAt(0,4)); แสดงอักขระ ABCD

alert(Alpha.charAt(10,12)); แสดงอักขระ KL

alert(Alpha.charAt(12,10)); แสดงอักขระ KL ไมใช LK

alert(Alpha.charAt(6,7)); แสดงอักขระ G

alert(Alpha.charAt(24,26)); แสดงอักขระ YZ

alert(Alpha.charAt(0,26)); แสดงอักขระ A ถึง Z

alert(Alpha.charAt(7,7)); แสดงขอความวาง

.....Alpha

index

.0 1 2 3 4 5 6 7 8 24 25 26

ช่ือตัวแปรสตริง. indexOf(“สตริงท่ีใชคนหา”);

test= “This is a test” ;

alert(test.indexOf(“This”)); ผลลัพธจะแสดงตําแหนงท่ี 0

alert(test.indexOf(“this”)); ผลลัพธจะแสดงตําแหนงท่ี -1


แบบฝกหัดหนวยที่ 2 เรื่อง การสรางตัวแปร

ขอ 1 คําชี้แจง จงใสเครื่องหมายถูก () หนาขอที่ถูกตามกฎของการตั้งชื่อตัวแปรและใสเครื่องหมายผิด

() หนาขอที่ผิดตามกฎของการตั้งชื่อตัวแปร

ขอ 2 คําชี้แจง จงใสเครื่องหมายถูก () หนาขอท่ีตั้งชื่อไมซ้ํากับคําสงวนและเครื่องหมายผิด() หนาขอท่ี

ซ้ํากับคําสงวน

ขอ 3 คําชี้แจง จงเขียนคําสั่งประกาศตัวแปรและกําหนดคาเริ่มตนใหถูกตองใหกับตัวแปรดังนี้

ขอ 4 คําชี้แจง กําหนดคาอารเรย 1 ตัว แลวใหนักเรียนตอบคําถามขอ 4.1 -4.2

ขอ 5 คําชี้แจง กําหนดคาใหตัวแปรดังนี้ แลวใหนําไปตอบคําถาม

5.1 (a +b % c *d) ผลลัพธคือ..................

5.2 (a*a –b*(d/a) ผลลัพธคือ...................

____1.1 Amazon ____1.2 005 Amazon ____1.3 sniper007 ____1.4 maxwall ____1.5 class-room

____2.1 flootx ____2.2 for ____2.3 break ____2.4 with ____2.5 null

ตัวอยาง ตัวแปร a มีคาเปน 1

ตอบ a = 1

3.1 ตัวแปร total เทากับ 30

.............................................

3.2 ตัวแปร count ไมเทากับ 4000

................................................

3.3 ตัวแปร count มากกวา 365.5

................................................

กําหนด อารเรย Score = [10,40,120,55] 4.1จงอธิบายวาสมาชิกตัวที่ [0] คือ...........

4.2 จงแยกอารเรยจากตัวอยางใหอยูในรูป

ของสมาชิกแตละตัว

………………………………………………………….

………………………………………………………….

………………………………………………………….

………………………………………………………….

a = 5 , b = 8, c = 13 , d = 15;




11

ขอ 2 คําชี้แจง จากตัวอยางโปรแกรมที่กําหนดใหใหนักเรียนเลือกขอใดขอหนึ่ง แลวนําไปฝกเขียนลงใน

เครื่องคอมพิวเตอรแลวดูผลลัพธที่ได

2.1

ผลลัพธที่แสดงคือ....................................................................................


2.2





13

2.3



2.4



การสร้างตัวแปรใน javascript

Education

reserve word

comparison operators

arithmetic operators

assignment operators

case

software602

buy

http