View
226
Download
0
Category
Preview:
DESCRIPTION
อธิบายการใช้ JavaScript
Citation preview
หนวยที่ หนวยที่ หนวยที่ หนวยที่ 13131313การใช การใช การใช การใช JavaScriptJavaScriptJavaScriptJavaScriptการใช การใช การใช การใช JavaScriptJavaScriptJavaScriptJavaScript
JavaScriptJavaScriptJavaScriptJavaScript
JavaScriptJavaScriptJavaScriptJavaScript เปนภาษาโปรแกรม (programming language) ประเภทหนึ่ง ที่เรียกกันวา "สคริปต" (script) ซึ่งมีวิธีการทํางานในลักษณะ "แปลความและดําเนินงานไปทีซึ่งมีวิธีการทํางานในลักษณะ "แปลความและดําเนินงานไปทีละคําสั่ง" (interpret)
การทํางานของ JavaScript เกิดขึ้นบนบราวเซอร (เรียกวาเปน client-side script) ดังนั้นไมวาคุณจะใชเซิรฟเวอรอะไร หรือที่ไหน ก็ยังคงสามารถใช JavaScript ในเว็บเพจได ตางกับภาษาสคริปตอื่น เชน Perl, PHP หรือ ASP ซึ่งตองแปลความและทํางานสคริปตอื่น เชน Perl, PHP หรือ ASP ซึ่งตองแปลความและทํางานที่ตัวเครื่องเซิรฟเวอร (เรียกวา server-side script)
ตาํแหนงของการเขยีนตาํแหนงของการเขยีนตาํแหนงของการเขยีนตาํแหนงของการเขยีน JavaScriptJavaScriptJavaScriptJavaScript
1. ตําแหนงสวนหัวของเอกสาร HTML
ในการเขียน JavaScript สวนใหญมักจะนิยมเขียนแทรกลงไปที่สวนนี้ เพราะสามารถเรียกใชฟงกชันจากสวนใด ๆ ของเวบ็เพจได
<head><head>
<script language= “JavaScript”>
…………… คําสั่ง JavaScript…………….
</script>
</head>
2. ตําแหนงสวนตัวของเอกสาร HTML
<body>
…………….. แท็กคําสั่งของ HTML………………….
<script language= “JavaScript”><script language= “JavaScript”>
……………………. คําสั่ง JavaScript ……………..
</script>
…………………… คําสั่ง HTML………………………
</body>
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
4. เก็บไวในไฟลแยกตางหาก โดยเก็บไวในนามสกุล .js
<script language= “JavaScript” type= “text/javascript” src= “unit1.js”></script>
จากตัวอยาง สคริปตจะเก็บอยูที่ไฟล unit.js ถาเราแกไขสคริปตในไฟล จากตัวอยาง สคริปตจะเก็บอยูที่ไฟล unit.js ถาเราแกไขสคริปตในไฟล unit1.js ก็จะมีผลตอไฟล HTML ทั้งหมดที่เรียกใชไฟล unit1.js นี้การเก็บสคริปตไวในไฟลแยกตางหาก ทําใหเราบริหารสคริปตไดสะดวกขึ้น คือ สามารถแกไขโคดเพียงจุดเดียวแตมีผลตอหลายๆ ไฟล HTML ได
5. เขียนไวอยางอิสระนอกโครงสรางมาตรฐาน HTML
เชน วางไวกอนหนา <html> และหลัง </html> หรือจะวางไวระหวาง</head>…<body> ก็ไดเหมือนกัน แตก็ไมเปนที่นิยมทํากันมากนัก เพราะบราวเซอรบางรุนอาจไมอนุญาตใหทําเชนนี้เพราะบราวเซอรบางรุนอาจไมอนุญาตใหทําเชนนี้
คาํสงวนในคาํสงวนในคาํสงวนในคาํสงวนใน JavaScriptJavaScriptJavaScriptJavaScript
พืน้ฐานการเขียนโปรแกรมดวยพืน้ฐานการเขียนโปรแกรมดวยพืน้ฐานการเขียนโปรแกรมดวยพืน้ฐานการเขียนโปรแกรมดวย JavaScriptJavaScriptJavaScriptJavaScript
คือ พื้นที่ที่เราจองไวเพื่อใชเก็บขอมูล ใชพักขอมูล และเรียกดูขอมูล เราสามารถตั้งชื่อตัวแปรและกําหนดคาที่จะเก็บในตัวแปรได โดยใชเครื่องหมายเทากับ (=)
ตัวอยางตัวอยาง
Function HelloWorld()
{
Myname= “Joe”
Alert (“Hello” +myname);
}
อีออีีอีเวน็ทเวน็ทเวน็ทเวน็ท ((((event)event)event)event)
คือ เหตุการณที่เราสนใจ และเราจะสรางฟงกชันเพื่อรองรับเหตุการณนั้น
<body onload = “HelloWorld()”>
Hello
</body></body>
ตัวอยางนี้เราใชอีเว็นท onload ในแท็ก body อีเว็นท นี้จะทํางานตอนที่เริ่มตนแสดงหนาเว็บเพจ เมื่อเกิดอีเว็นทนี้ขึ้นมาทําในฟงกชัน HelloWorld ที่เปนฟงกชันรองรับทํางาน
HTML Document Object ModelHTML Document Object ModelHTML Document Object ModelHTML Document Object Model
ทําไม ทําไม ทําไม ทําไม javaScriptjavaScriptjavaScriptjavaScript ตองอางองิออบเจก็ต ตองอางองิออบเจก็ต ตองอางองิออบเจก็ต ตองอางองิออบเจก็ต HTMLHTMLHTMLHTML
javascript สามารถประมวลผลได และผลที่ประมวลได javascript จะแสดงออกมาจากทางไหน นี่คือเหตุผลที่วาทําไม javascript จึงตองอางอิงออบเจ็กต HTML เพื่อที่จะไดนําคาที่คํานวณไดแสดงออกมาผานออบเจ็กต HTML ใหผูใชไดเห็นออบเจ็กต HTML ใหผูใชไดเห็น
พรอ็พเพอรตี้พรอ็พเพอรตี้พรอ็พเพอรตี้พรอ็พเพอรตี้ของออบเจก็ตของออบเจก็ตของออบเจก็ตของออบเจก็ต
คือ คุณสมบัติของออบเจ็กต เชน ความกวาง ความสูง สี ขนาดตัวอักษร เปนตน เมื่อเราสามารถอางอิงออบเจกไดแลว เราก็จะสามารถแกไขคาคุณสมบัติของออบเจ็กตนั้นไดแกไขคาคุณสมบัติของออบเจ็กตนั้นได
Document.bgcolor= “#ffaa88”;
Document.form[0].text[4].value= “Hello World”;
เมธอดของออบเจก็ตเมธอดของออบเจก็ตเมธอดของออบเจก็ตเมธอดของออบเจก็ต
โดยปกติออบเจ็กตจะมีเมธอด หรืองานยอยที่ออบเจ็กตสามารถทําได เปนงานหรือการกระทําที่กําหนดไวในตัวออบเจ็กตอยูแลว เชน การเขยีนขอความ การตงโพกัส ซึ่งเราสามารถเรียกใชเมธอดตางๆ เหลานี้ เพื่อใหทํางานตามที่ตองการได อดตางๆ เหลานี้ เพื่อใหทํางานตามที่ตองการได
Document.write(“This is my text.”); Document.form[0].text[4].focus();
การใชการใชการใชการใช JavaScript JavaScript JavaScript JavaScript อางองิออบเจก็ต อางองิออบเจก็ต อางองิออบเจก็ต อางองิออบเจก็ต HTMLHTMLHTMLHTML
การอางองิแบบเตม็การอางองิแบบเตม็การอางองิแบบเตม็การอางองิแบบเตม็
เปนการอางอิงที่มีความชัดเจน แนนอน เพราะอางอิงตั้งแตออบเจ็กต document ซึ่งเปนออบเจ็กตที่ใชแทนหนาเว็บเพจนั้น ไลออบเจ็กตยอยใตออบเจ็กต document ไปเรื่อยๆ จึงถึงออบเจ็กตที่เราตองการทํางานดวย ออบเจ็กต document ไปเรื่อยๆ จึงถึงออบเจ็กตที่เราตองการทํางานดวย
X=document.images[3].width; อางอิงความกวางของออบเจ็กต imagees[3]
Y=document.images[3].height; อางอิงความสูงของออบเจ็กต images[3]
การอางอิงโดยใช การอางอิงโดยใช การอางอิงโดยใช การอางอิงโดยใช 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”;
การอางองิโดยใชการอางองิโดยใชการอางองิโดยใชการอางองิโดยใช thisthisthisthis
This เปนคําสงวนหรือคียเวิรด ที่ใชในการอางอิงถึงตัวออบเจ็กตที่ javascript ฝงตัวอยู ใหชกรณีที่สคริปตเก็บอยูในตัวออบเจ็กต ดังนั้นเวลาอางอิงถึงตัวเองกจ็ะใชคําวา this
การใชการใชการใชการใช JavaScript JavaScript JavaScript JavaScript อางองิออบเจก็ต อางองิออบเจก็ต อางองิออบเจก็ต อางองิออบเจก็ต HTMLHTMLHTMLHTML
อางอิงถึงตัวเองกจ็ะใชคําวา this
ในแตละ this จะอางอิงถึงออบเจ็กตคนละตัวกัน ขึ้นกับวา this ไปอยูในออบเจ็กตตัวใด ก็จะอางอิงถึงออบเจ็กตตัวนั้น
การใช การใช การใช การใช JavaScriptJavaScriptJavaScriptJavaScript อางองิคุณสมบตั ิอางองิคุณสมบตั ิอางองิคุณสมบตั ิอางองิคุณสมบตั ิCSSCSSCSSCSS
• JavaScript สามารถอางอิงคุณสมบัติ CSS ได โดยผานออบเจ็กต HTML ชื่อ style ดังตัวอยางตอไปนี้
• Document.getElementByle(“ชื่อออบเจ็กต”).style. ชื่อคุณสมบัติ . “คาที่กําหนด”;กําหนด”;
• Document.getElementByle(“ชื่อออบเจ็กต”).style. backgroundColor .“red”;
• Document.getElementByle(“ชื่อออบเจ็กต”).style. left . “50px”;
• Document.getElementByle(“ชื่อออบเจ็กต”).style.top. “200px”;
•
Recommended