20
หนวยทีหนวยทีหนวยทีหนวยที่ 13 13 13 13 การใช การใช การใช การใช JavaScript JavaScript JavaScript JavaScript การใช การใช การใช การใช JavaScript JavaScript JavaScript JavaScript

การใช้ JavaScript

Embed Size (px)

DESCRIPTION

อธิบายการใช้ JavaScript

Citation preview

Page 1: การใช้ JavaScript

หนวยที่ หนวยที่ หนวยที่ หนวยที่ 13131313การใช การใช การใช การใช JavaScriptJavaScriptJavaScriptJavaScriptการใช การใช การใช การใช JavaScriptJavaScriptJavaScriptJavaScript

Page 2: การใช้ JavaScript

JavaScriptJavaScriptJavaScriptJavaScript

JavaScriptJavaScriptJavaScriptJavaScript เปนภาษาโปรแกรม (programming language) ประเภทหนึ่ง ที่เรียกกันวา "สคริปต" (script) ซึ่งมีวิธีการทํางานในลักษณะ "แปลความและดําเนินงานไปทีซึ่งมีวิธีการทํางานในลักษณะ "แปลความและดําเนินงานไปทีละคําสั่ง" (interpret)

Page 3: การใช้ JavaScript

การทํางานของ JavaScript เกิดขึ้นบนบราวเซอร (เรียกวาเปน client-side script) ดังนั้นไมวาคุณจะใชเซิรฟเวอรอะไร หรือที่ไหน ก็ยังคงสามารถใช JavaScript ในเว็บเพจได ตางกับภาษาสคริปตอื่น เชน Perl, PHP หรือ ASP ซึ่งตองแปลความและทํางานสคริปตอื่น เชน Perl, PHP หรือ ASP ซึ่งตองแปลความและทํางานที่ตัวเครื่องเซิรฟเวอร (เรียกวา server-side script)

Page 4: การใช้ JavaScript

ตาํแหนงของการเขยีนตาํแหนงของการเขยีนตาํแหนงของการเขยีนตาํแหนงของการเขยีน JavaScriptJavaScriptJavaScriptJavaScript

1. ตําแหนงสวนหัวของเอกสาร HTML

ในการเขียน JavaScript สวนใหญมักจะนิยมเขียนแทรกลงไปที่สวนนี้ เพราะสามารถเรียกใชฟงกชันจากสวนใด ๆ ของเวบ็เพจได

<head><head>

<script language= “JavaScript”>

…………… คําสั่ง JavaScript…………….

</script>

</head>

Page 5: การใช้ JavaScript

2. ตําแหนงสวนตัวของเอกสาร HTML

<body>

…………….. แท็กคําสั่งของ HTML………………….

<script language= “JavaScript”><script language= “JavaScript”>

……………………. คําสั่ง JavaScript ……………..

</script>

…………………… คําสั่ง HTML………………………

</body>

Page 6: การใช้ JavaScript

3. เปนคาในอีเว็นท (event) ของแท็กคําสั่ง HTML

<body onload= “alert(‘Hello! Boy.’)” onunload = “alert(‘Goodbye!’)”>

<img src= “xxx.git” onMouseOver= “this.src= ‘yyy.gif’”

onMouseOut= “this.src= ‘xxx.gif’”>

สวนที่ขีดเสนคือคําสั่ง JavaScript

Page 7: การใช้ JavaScript

4. เก็บไวในไฟลแยกตางหาก โดยเก็บไวในนามสกุล .js

<script language= “JavaScript” type= “text/javascript” src= “unit1.js”></script>

จากตัวอยาง สคริปตจะเก็บอยูที่ไฟล unit.js ถาเราแกไขสคริปตในไฟล จากตัวอยาง สคริปตจะเก็บอยูที่ไฟล unit.js ถาเราแกไขสคริปตในไฟล unit1.js ก็จะมีผลตอไฟล HTML ทั้งหมดที่เรียกใชไฟล unit1.js นี้การเก็บสคริปตไวในไฟลแยกตางหาก ทําใหเราบริหารสคริปตไดสะดวกขึ้น คือ สามารถแกไขโคดเพียงจุดเดียวแตมีผลตอหลายๆ ไฟล HTML ได

Page 8: การใช้ JavaScript

5. เขียนไวอยางอิสระนอกโครงสรางมาตรฐาน HTML

เชน วางไวกอนหนา <html> และหลัง </html> หรือจะวางไวระหวาง</head>…<body> ก็ไดเหมือนกัน แตก็ไมเปนที่นิยมทํากันมากนัก เพราะบราวเซอรบางรุนอาจไมอนุญาตใหทําเชนนี้เพราะบราวเซอรบางรุนอาจไมอนุญาตใหทําเชนนี้

Page 9: การใช้ JavaScript

คาํสงวนในคาํสงวนในคาํสงวนในคาํสงวนใน JavaScriptJavaScriptJavaScriptJavaScript

Page 10: การใช้ JavaScript

พืน้ฐานการเขียนโปรแกรมดวยพืน้ฐานการเขียนโปรแกรมดวยพืน้ฐานการเขียนโปรแกรมดวยพืน้ฐานการเขียนโปรแกรมดวย JavaScriptJavaScriptJavaScriptJavaScript

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

ตัวอยางตัวอยาง

Function HelloWorld()

{

Myname= “Joe”

Alert (“Hello” +myname);

}

Page 11: การใช้ JavaScript

อีออีีอีเวน็ทเวน็ทเวน็ทเวน็ท ((((event)event)event)event)

คือ เหตุการณที่เราสนใจ และเราจะสรางฟงกชันเพื่อรองรับเหตุการณนั้น

<body onload = “HelloWorld()”>

Hello

</body></body>

ตัวอยางนี้เราใชอีเว็นท onload ในแท็ก body อีเว็นท นี้จะทํางานตอนที่เริ่มตนแสดงหนาเว็บเพจ เมื่อเกิดอีเว็นทนี้ขึ้นมาทําในฟงกชัน HelloWorld ที่เปนฟงกชันรองรับทํางาน

Page 12: การใช้ JavaScript

HTML Document Object ModelHTML Document Object ModelHTML Document Object ModelHTML Document Object Model

Page 13: การใช้ JavaScript

ทําไม ทําไม ทําไม ทําไม javaScriptjavaScriptjavaScriptjavaScript ตองอางองิออบเจก็ต ตองอางองิออบเจก็ต ตองอางองิออบเจก็ต ตองอางองิออบเจก็ต HTMLHTMLHTMLHTML

javascript สามารถประมวลผลได และผลที่ประมวลได javascript จะแสดงออกมาจากทางไหน นี่คือเหตุผลที่วาทําไม javascript จึงตองอางอิงออบเจ็กต HTML เพื่อที่จะไดนําคาที่คํานวณไดแสดงออกมาผานออบเจ็กต HTML ใหผูใชไดเห็นออบเจ็กต HTML ใหผูใชไดเห็น

Page 14: การใช้ JavaScript

พรอ็พเพอรตี้พรอ็พเพอรตี้พรอ็พเพอรตี้พรอ็พเพอรตี้ของออบเจก็ตของออบเจก็ตของออบเจก็ตของออบเจก็ต

คือ คุณสมบัติของออบเจ็กต เชน ความกวาง ความสูง สี ขนาดตัวอักษร เปนตน เมื่อเราสามารถอางอิงออบเจกไดแลว เราก็จะสามารถแกไขคาคุณสมบัติของออบเจ็กตนั้นไดแกไขคาคุณสมบัติของออบเจ็กตนั้นได

Document.bgcolor= “#ffaa88”;

Document.form[0].text[4].value= “Hello World”;

Page 15: การใช้ JavaScript

เมธอดของออบเจก็ตเมธอดของออบเจก็ตเมธอดของออบเจก็ตเมธอดของออบเจก็ต

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

Document.write(“This is my text.”); Document.form[0].text[4].focus();

Page 16: การใช้ JavaScript

การใชการใชการใชการใช JavaScript JavaScript JavaScript JavaScript อางองิออบเจก็ต อางองิออบเจก็ต อางองิออบเจก็ต อางองิออบเจก็ต HTMLHTMLHTMLHTML

การอางองิแบบเตม็การอางองิแบบเตม็การอางองิแบบเตม็การอางองิแบบเตม็

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

X=document.images[3].width; อางอิงความกวางของออบเจ็กต imagees[3]

Y=document.images[3].height; อางอิงความสูงของออบเจ็กต images[3]

Page 17: การใช้ JavaScript

การอางอิงโดยใช การอางอิงโดยใช การอางอิงโดยใช การอางอิงโดยใช idididid

Id (หรือยอมาจาก index) เปนการกําหนดชื่อใหออบเจ็กต และเวลาเราอางอิงถึงก็อางโดยใชชื่อออบเจ็กต แทนไดเลย เชน

<font id=text1 color=blue> ขอความที่ 1 </font>

<p id=text2 color=red> ขอความที่ 2 </p>

<a id=text3 style=color:red> ขอความที่ 3 </a>

การใชการใชการใชการใช JavaScript JavaScript JavaScript JavaScript อางองิออบเจก็ต อางองิออบเจก็ต อางองิออบเจก็ต อางองิออบเจก็ต HTMLHTMLHTMLHTML

<a id=text3 style=color:red> ขอความที่ 3 </a>

<font id=text4 style=color:blue> ขอความที่ 4 </font>

เมื่อเราตองการเปลี่ยนสีของ text1 และtext4 เปนสีเหลือง จะเขียนโคด javascript ไดเปน

Document.getElmentByld(‘text’).color= “yellow”;

Document.getElementByld(‘text4’).style.color= “yellow”;

Page 18: การใช้ JavaScript

การอางองิโดยใชการอางองิโดยใชการอางองิโดยใชการอางองิโดยใช thisthisthisthis

This เปนคําสงวนหรือคียเวิรด ที่ใชในการอางอิงถึงตัวออบเจ็กตที่ javascript ฝงตัวอยู ใหชกรณีที่สคริปตเก็บอยูในตัวออบเจ็กต ดังนั้นเวลาอางอิงถึงตัวเองกจ็ะใชคําวา this

การใชการใชการใชการใช JavaScript JavaScript JavaScript JavaScript อางองิออบเจก็ต อางองิออบเจก็ต อางองิออบเจก็ต อางองิออบเจก็ต HTMLHTMLHTMLHTML

อางอิงถึงตัวเองกจ็ะใชคําวา this

ในแตละ this จะอางอิงถึงออบเจ็กตคนละตัวกัน ขึ้นกับวา this ไปอยูในออบเจ็กตตัวใด ก็จะอางอิงถึงออบเจ็กตตัวนั้น

Page 19: การใช้ JavaScript

การใช การใช การใช การใช JavaScriptJavaScriptJavaScriptJavaScript อางองิคุณสมบตั ิอางองิคุณสมบตั ิอางองิคุณสมบตั ิอางองิคุณสมบตั ิCSSCSSCSSCSS

• JavaScript สามารถอางอิงคุณสมบัติ CSS ได โดยผานออบเจ็กต HTML ชื่อ style ดังตัวอยางตอไปนี้

• Document.getElementByle(“ชื่อออบเจ็กต”).style. ชื่อคุณสมบัติ . “คาที่กําหนด”;กําหนด”;

• Document.getElementByle(“ชื่อออบเจ็กต”).style. backgroundColor .“red”;

• Document.getElementByle(“ชื่อออบเจ็กต”).style. left . “50px”;

• Document.getElementByle(“ชื่อออบเจ็กต”).style.top. “200px”;

Page 20: การใช้ JavaScript