ตัวแปรใน JavaScript
Download
Report
Transcript ตัวแปรใน JavaScript
รู้จัก JavaScript
รายวิชาเทคโนโลยีสารสนเทศ 5 (ง 33102) กลุม่ สาระการงานอาชีพและเทคโนโลยี
สิง่ ทีน่ กั เรียนต้องศึกษาจากเอกสารในวันนี้
ประวัตค
ิ วามเป็ นมา (หน้า 1)
ตารางเปรียบเทียบความแตกต่างระหว่าง JavaScript และ Java (หน้า 1)
ทบทวนโครงสร้าง HTML (หน้า2-3)
วิธกี ารเขียนคาสัง่ JavaScript (หน้า 3-4 )
ตัวแปร (หน้า 5)
และการส่งค่าเข้าสู่ฟังก์ชนั่ (หน้า 6)
หลังจากนัน้ ทาแบบฝึ กหัดหน่วยที่ 1 ข้อที่ 1 และข้อ ที่ 2
รู้จัก JAVASCRIPT
JavaScript คือ ?
สรุป JavaScript คือ ภาษาประมวลผล จัดเป็ นภาษาสคริปต์ทมี่ ผี ู น้ ยิ มใช้งาน
มากทีส่ ุ ดและสามารถใช้ร่ว มกับราวเซอร์ เช่ น Internet
Explorer
Firefox GoogleChorme Netscape และ Opera โดย
ภาษาประมวลผลสามารถท าการค านวณ ประกาศตัว แปร ซึ่ง แตกต่ า งจากภาษา
HTML ทีเ่ ป็ นภาษาแสดงผลทาให้ไม่มคี วามสามารถดังกล่าวจึงต้องมีการเพิม่
JavaScript ทีเ่ ป็ นภาษาประมวลผลเข้ามาช่วย
รู้จัก JAVASCRIPT
JavaScript กับ Java คือตัวเดียวกันหรือไม่ ?
ผู ใ้ ช้จะพบคาว่า Java ซึง่ ใกล้เคียงกับคาว่า JavaScript ซึง่ คนส่วนใหญ่มกั
เข้าใจผิดว่าเป็ นภาษาเดียวกันจึงแยกออกเป็ นตารางเพือ่ เปรียบเทียบให้เข้าใจดังนี้
JavaScript
ผลิตโดยบริษทั Sun Microsystems ในปี พ.ศ.
2534
Java
ผลิตโดยบริษทั Netscape Communication
ในปี พ.ศ.2538
แต่เดิมใช้ชอื่ ว่า mocha และ LiveScript ตามลาดับต่อมาจับมือกับบริษทั Sun ร่วมกันสร้างบราวเซอร์ Netscape
Navigator 2.0 ซึง่ บราวเซอร์นส้ ี ามารถใช้งานร่วมกับ java ได้ จึงทาให้บริษทั เปลีย่ นชือ่ เป็ น JavaScript
ใช้การแปลภาษาแบบ interpreter คือการแปลทีละบรรทัด
เช่น ภาษาเบสิก ภาษาเพิร์ล ภาษาพีเอชพี
ใช้หลักการแปลภาษาแบบ Compiler โดยจะแปลเพียงครัง้
เดียวโดยไม่ต้องแปลใหม่ทุกครัง้ เหมือน interpreter เช่น
ภาษาฟอร์แทรน ภาษาโคบอล
ความสามารถทาได้เพียงแค่เป็ นสคริปต์ฝังในหน้าเว็บเพจหนึง่ ๆ
เท่านัน้
สามารถใช้สร้างแอพพลิเคชัน่ ทีท่ างานบนวินโดวส์ได้เหมือนภาษา ซี
เริ่มต้นการเขียน JavaScript ลองดูตวั อย่างง่ายๆ ในการเขียนโปรแกรม
JavaScript มีวธิ กี ารเขียนทัว่ ๆ ไปดังนี้
1 <HTML>
2 <HEAD>
3 <SCRIPT LANGUAGE = “JAVASCRIPT”>
4 <!-5 FUNCTION HELLOWORLD()
6{
7 ALERT(“HelloWorld”);
8}
9 //-->
10 </SCRIPT></HEAD>
11 <BODY>
12 < A HREF =
“JAVASCRIPT:HELLOWORLD()”>HELLO</A>
13 </BODY>
14 </HTML>
1.การเขียนสามารถเขียนจากซ้ ายไปขวาบนลงล่าง
เรี ยงลาดับไปเรื่ อยๆหากต้ องการจบคาสัง่ ใดๆ จะต้ องตาม
ด้ วยเครื่ องหมาย เซมิโคล่อน ( ; ) เช่นบรรทัดที่ 7
2.กลุม่ คาสัง่ เมื่อเขียนคาสัง่ หลายๆ คาสัง่ ในโปรแกรม
เดียวกันเพื่อให้ มองดูเป็ นกลุม่ คาสัง่ เดียวกันสามารถใช้
เครื่ องหมายปี กกาเปิ ดและปิ ด ( { }) เช่นบรรทัดที่ 6-8
3.ตัวพิมพ์ใหญ่พิมพ์เล็กเป็ นเรื่ องสาคัญเช่น เมื่อเราตั ้งชื่อ
ฟั งก์ชนั่ (บรรทัดที่ 5)ว่า HELLOWORLD ซึง่ ต่างจาก
helloworld จะถือว่าเป็ นคนละตัวกันทาให้ โปรแกรม
ไม่สามารถทางานได้
รู้จัก JAVASCRIPT
1.
2.
3.
4.
ตาแหน่งการเขียน JavaScript ในโครงสร้างภาษา HTML เราสามารถฝั ง
JavaScript ไว้ทตี่ าแหน่งใดก็ได้ดงั นี้
ตาแหน่งส่วนหัวของเอกสาร HTML ส่วนใหญ่มกั จะนิยมแทรกลงไปในส่วนนี้
<HEAD>….</HEAD> เพราะสามารถเรียกใช้ฟังก์ชนั่ จากส่วนใดๆ ของเว็บเพจก็ได้
ตาแหน่งส่วนตัวของเอกสาร HTML สามารถทาได้เช่นกัน <BODY>…</BODY> แต่
การเรียกใช้ฟังก์ชนั่ จะเรียกใช้ได้เฉพาะส่วนของเว็บเพจทีอ่ ยู่ใต้โค๊ต JavaScript เท่านัน้
เป็ นค่าในอีเวนต์ (Event) ของแท็กคาสัง่ HTML คือการเขียนคาสัง่ เฉพาะจุดคือในแท็กคาสัง่
HTML ทีร่ ะบุเท่านัน้
เก็บไว้ในไฟล์แยกต่างหาก โดยเก็บไว้ในนามสกุล .Js เช่นหากเราสร้างคาสัง่ แล้วเก็บไว้ในไฟล์ชอื่
title1.js และเมือ่ เราแก้ไขในไฟล์ title1.js ก็จะมีผลทาให้ไฟล์ HTML แก้ไขไปด้วย
รู้จัก JAVASCRIPT
พื้นฐานการเขียน JavaScript
ตัวแปร
คือการจองพืน้ ทีไ่ ว้ใช้เก็บข้อมูล ใช้พกั ข้อมูลและใช้เรียกดูขอ้ มูล ผู ใ้ ช้
สามารถตัง้ ชือ่ ตัวแปรและกาหนดค่าของตัวแปรได้
function HelloWorld()
{
myname = “joe”
alert(“Hello”+myname
);
}
จากตัวอย่าง เราได้ ประกาศตัวแปรชื่อ myname และใน
ตัวแปรเก็บค่าคาว่าว่า “joe” ไว้ จากนันเรี
้ ยกคาสัง่
alert เพื่อแสดงข้ อความว่า “Hello” ต่อด้ วยค่าที่เก็บ
ไว้ ในตัวแปร myname เป็ นอันจบฟั งก์ชนั่ นี ้
รู้จัก JAVASCRIPT
พื้นฐานการเขียน JavaScript
การส่งค่าเข้าสู่ฟังก์ชั่น ในบางครัง้ ผู ใ้ ช้ต้องสร้างข้อมูลบางบางอย่าง
เพือ่ นนาไปใช้ในการประมวลผล เช่น การบวกเลข 2 จานวนซึง่ ก็ต้องมีการส่งค่า
เลข 2 จานวนเพือ่ ทีจ่ ะนาไปบวกเพือ่ แสดงผลลัพธ์
function HelloWorld()
{
myname = prompt (“what is
your name ”,”);
alert(“Hello”+myname);
}
จากตัวอย่างเป็ นคาสัง่ prompt ที่เป็ นคาสัง่ แสดงกล่อง
ข้ อความเพื่อรองรับข้ อมูลจากผู้ใช้ มาใส่ลงในตัวแปร จากนั ้น
เมื่อผู้ใช้ ได้ พิมพ์ชื่อลงในปุ่ มกดแล้ ว ตัวแปรจะนาชื่อไปเก็บไว้
แล้ วจะแสดงข้ อความว่า “Hello” ต่อด้ วยค่าที่เก็บไว้ ในตัว
แปร myname เป็ นอันจบฟั งก์ชนั่ นี ้
รายวิชาเทคโนโลยีสารสนเทศ 5 กลุม่ สาระการงานอาชีพและเทคโนโลยี
ตัวแปรใน JAVASCRIPT
ตัวแปรใน JAVASCRIPT
JavaScript บางครั้งเราจาเป็ นต้องมีการ
จดจาข้อมูล เช่น เมือ่ ต้องการบวกตัวเลข 2 จานวน (หลายๆหลัก)
เราจะทาการทดเลข 2 ตัวนั้นลงบนกระดาษก่อนแล้วจึงนามาบวก
กัน ซึ่งกระดาษทดทาหน้าที่เหมือนเป็ นหน่วยความจาชั่วคราว
ตัวแปรใน JavaScript ก็มีความหมายในทานองเดียวกัน
คือมีหน้าที่ไว้เก็บข้อมูลชั่วคราวในระหว่างการทางานของโปรแกรม
ในการเขียนคาสั่งใน
ตัวแปรใน JAVASCRIPT
การตั้งชื่อตัวแปร มีกฎการตั้งชื่อดังนี้
ตั้งชื่อโดยใช้ตัวอั กษรภาษาอั งกฤษตัวพิมพ์ใหญ่ หรือเล็ก (A-Z, a-z) ตัวเลข (09) และเครื่องหมายขีดล่าง( _)
ห้ามตั้งชื่อนาหน้าด้วยตัวเลข เช่น “007_spy”
ห้ามมีช่องว่างในชื่อ เช่น “number of fish” หากต้องการเว้นให้ใช้ เครื่องหมาย
ขีดล่าง( _) เช่น number_of _fish
ห้ามตั้งชื่อกับคาสงวน
การตั้งชื่อตัวพิมพ์ใหญ่และพิมพ์เล็กจัดเป็ นคนละชื่อกัน เช่น TOTAL คนละตัวกับ
total
ชื่อของตัวแปรยาวได้ไม่จากัดแต่ต้องอยู่ในบรรทัดเดียวกัน
ตัวแปรใน JAVASCRIPT
JavaScript คาสงวน (Reserved word)
หมายถึงคาทีภ่ าษาสงวนไว้เป็ นคาทีใ่ ช้ในโปรแกรมและมีหน้าทีเ่ ฉพาะอยู่แล้ว จึงห้าม
นามาตัง้ เป็ นชือ่ ของตัวแปร เพราะอาจจะทาให้โปรแกรมเกิดความผิดพลาดได้
โดยคาสงวนเหล่านีไ้ ด้แก่
คาสงวนใน
ตัวแปรใน JAVASCRIPT
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
implements return volatile do import short
while double in static with
ตัวแปรใน JAVASCRIPT
ชนิดข้อมูลของตัวแปร ตัวแปรสามารถเก็บข้อมูลประเภทต่างๆ ได้ดังนี้
ข้อมูลตัวเลข (Number) เก็บเลขจานวนเต็มและจานวนทศนิยม
ข้อมูลตรรกะ (Boolean) เก็บค่าความจริงและเท็จ (True /
False)
ข้อมูลสตริง (String) เก็บค่าข้อความ เช่น Hello\
ข้อมูลว่าง (Object) เก็บค่าว่างเปล่า ไม่มีข้อมูล
ตัวแปรใน JAVASCRIPT
โดยเราจะใช้เครื่องหมายเท่ากับ (=) ใน
การกาหนดค่าเข้าไปเก็บในตัวแปร เช่น
Total = 30
หมายถึง
ตัวแปรชื่อ Total เก็บ
ค่า 30
การกาหนดค่าให้ตัวแปร
การใช้งานอาร์เรย์ (Array)
อาร์เรย์คอื การนาตัวแปรหลายๆ ตัวทีม่ ชี นิดของข้อมูลเหมือนกันมาจัดรวมอยู่เป็ น
กลุม่ โดยตัวแปรแต่ละตัวเราจะเรียกว่า สมาชิก “Member” ในอาร์เรย์การ
ประกาศตัวแปรอาร์เรย์สามารถทาได้ดงั นี้
การอ้างอิงสมาชิกในอาร์เรย์เราจะใช้ เลขอินเด็กซ์ (Index) โดยสมาชิกตัวแรกจะเริม่
จากศูนย์ จนถึงสมาชิกทัง้ หมดตัวสุดท้าย ดังตัวอย่าง โดยมีวธิ กี ารอ้างอิง 2 แบบคือ
แบบทีละสมาชิก และแบบครัง้ เดียวทุกสมาชิก
แบบครัง้ เดียวทุกสมาชิก
จากคาสัง่ จะเห็นว่ามีอาร์เรย์ทมี่ สี มาชิกทัง้ หมด 4 ตัว เก็บค่า 10 40 120 55 ใน
สมาชิกแต่ละตัวตามลาดับ เราสามารถนาสมาชิกแค่ละตัวมาใช้งานได้เหมือนตัวแปรดังนี้
การใช้งานสตริง (string) การใช้งานสตริง สตริงคือ ข้อความเราสามารถอ้างอิง
อักขระแต่ละตัวได้ด้วย CharAt เช่น
test= “This is a test”
document.write(test. CharAt(0)); ผลลัพธ์แสดงอักขระ
T
document.write(test. CharAt(11)); ผลลัพธ์แสดงอักขระ
e
document.write(test. CharAt(8)); ผลลัพธ์แสดงอักขระ
a
การทางานสตริงย่อย (Substring) บางครัง้ เราต้องการเพียงบางส่วนออกมาใช้
งาน ซึง่ ก็สามารถทาได้ดงั นี้
ชือ่ ตัวแปรสตริง.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 ถึง
จากคาสัง่ กาหนดตัวแปรสตริงชือ่ Alpha เก็บอักขระค่า A-Z จากนัน้ เราใช้
substring ดึงส่วนย่อยออกมา โดยใช้วธิ กี ารอินเด็กซ์ในการอ้างอิงตาแหน่ง
การค้นหาสตริงย่อย เราสามารถค้นหาสตริงย่อยในสตริงทีเ่ ราต้องการได้ โดยใช้
indexOf
ชื่อตัวแปรสตริง. indexOf(“สตริงที่ใช้ค้นหา”);
ในการค้นหาตาแหน่ง หากพบจะแสดงค่าอินเด็กซ์ออกมา แต่หากหาไม่พบจะแสดงค่าลบ
หนึง่ ดังตัวอย่าง
test= “This is a test” ;
alert(test.indexOf(“This”));
alert(test.indexOf(“this”));
ผลลัพธ์จะแสดงตาแหน่งที่ 0
ผลลัพธ์จะแสดงตาแหน่งที่ -1