การใช้ JavaScript

การใช JavaScript

JavaScriptJavaScript

JavaScript เปนภาษาโปรแกรม (programming JavaScript เปนภาษาโปรแกรม (programming

language) ประเภทหนง ทเรยกกนวา "สครปต" (script)

ซงมวธการทางานในลกษณะ "แปลความและดาเนนงานไปท

ละคาสง" (interpret) p

การทางานของ JavaScript เกดขนบนบราวเซอร (เรยกวาเปน การทางานของ JavaScript เกดขนบนบราวเซอร (เรยกวาเปน

client-side script) ดงนนไมวาคณจะใชเซรฟเวอรอะไร หรอท

ไ ส ใ i t ใ ไ ไหน กยงคงสามารถใช JavaScript ในเวบเพจได ตางกบภาษา

สครปตอน เชน Perl, PHP หรอ ASP ซงตองแปลความและทางาน

ทตวเครองเซรฟเวอร (เรยกวา server-side script)

ตาแหนงของการเขยน JavaScriptp

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

ในการเขยน JavaScript สวนใหญมกจะนยมเขยนแทรกลงไปทสวนน

ส ใ ฟ ส ใ ไ เพราะสามารถเรยกใชฟงกชนจากสวนใด ๆ ของเวบเพจได

<head>

<script language= “JavaScript”>

i…………… คาสง JavaScript…………….

</script>

</head>

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

<body><body>

…………….. แทกคาสงของ HTML………………….

<script language= “JavaScript”>

คาสง JavaScript ……………………. คาสง JavaScript ……………..

</script>

…………………… คาสง HTML………………………

</b d ></body>

3. เปนคาในอเวนท (event) ของแทกคาสง HTML3. เปนคาในอเวนท (event) ของแทกคาสง HTML

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

“alert(‘Goodbye!’)”>

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

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

สวนทขดเสนคอคาสง JavaScript

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

<script language= “JavaScript” type= “text/javascript”

src= “unit1 js”></script>src= “unit1.js”></script>

จากตวอยาง สครปตจะเกบอยทไฟล unit.js ถาเราแกไขสครปตในไฟล

unit1.js กจะมผลตอไฟล HTML ทงหมดทเรยกใชไฟล unit1.js น

การเกบสครปตไวในไฟลแยกตางหาก ทาใหเราบรหารสครปตได

สะดวกขน คอ สามารถแกไขโคดเพยงจดเดยวแตมผลตอหลายๆ

ไฟล HTML ไดไฟล HTML ได

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

เชน วางไวกอนหนา <html> และหลง </html> หรอจะวางไวระหวาง

</head>…<body> กไดเหมอนกน แตกไมเปนทนยมทากนมากนก

เพราะบราวเซอรบางรนอาจไมอนญาตใหทาเชนน

คาสงวนใน JavaScriptว p

พนฐานการเขยนโปรแกรมดวย JavaScriptฐ p

คอ พนททเราจองไวเพอใชเกบขอมล ใชพกขอมล และเรยกดขอมล เราคอ พนททเราจองไวเพอใชเกบขอมล ใชพกขอมล และเรยกดขอมล เรา

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

เครองหมายเทากบ (=)ครองหมาย ทากบ ( )

ตวอยาง

Function HelloWorld()

{

Myname= “Joe”

Alert (“Hello” +myname);A r ( y a );

}

อเวนท (event))

คอ เหตการณทเราสนใจ และเราจะสรางฟงกชนเพอรองรบเหตการณนนคอ เหตการณทเราสนใจ และเราจะสรางฟงกชนเพอรองรบเหตการณนน

<body onload = “HelloWorld()”>

Hello

</body>

ตวอยางนเราใชอเวนท onload ในแทก body อเวนท นจะทางานตอน

ทเรมตนแสดงหนาเวบเพจ เมอเกดอเวนทนขนมาทาในฟงกชน

HelloWorld ทเปนฟงกชนรองรบทางาน

HTML Document Object Modelj

ทาไม javaScript ตองอางองออบเจกต HTMLทาไม javaScript ตองอางองออบเจกต HTML

ไ ไ javascript สามารถประมวลผลได และผลทประมวลได javascript

จะแสดงออกมาจากทางไหน นคอเหตผลทวาทาไม javascript จงตอง

ไ ไ อางองออบเจกต HTML เพอทจะไดนาคาทคานวณไดแสดงออกมาผาน

ออบเจกต HTML ใหผใชไดเหน

พรอพเพอรตของออบเจกตพรอพเพอรตของออบเจกต

คอ คณสมบตของออบเจกต เชน ความกวาง ความสง ส ขนาด

ตวอกษร เปนตน เมอเราสามารถอางองออบเจกไดแลว เรากจะสามารถ

แกไขคาคณสมบตของออบเจกตนนได

Document.bgcolor= “#ffaa88”; Document.bgcolor #ffaa88 ;

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

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

โดยปกตออบเจกตจะมเมธอด หรองานยอยทออบเจกตสามารถ โดยปกตออบเจกตจะมเมธอด หรองานยอยทออบเจกตสามารถ

ทาได เปนงานหรอการกระทาทกาหนดไวในตวออบเจกตอยแลว

โ ส ส ใ เชน การเขยนขอความ การตงโพกส ซงเราสามารถเรยกใชเมธ

อดตางๆ เหลาน เพอใหทางานตามทตองการได

Document.write(“This is my text.”);

Document.form[0].text[4].focus();

การใช JavaScript อางองออบเจกต HTMLp

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

เปนการอางองทมความชดเจน แนนอน เพราะอางองตงแตออบเจกต

document ซงเปนออบเจกตทใชแทนหนาเวบเพจนน ไลออบเจกตยอยใตdocument ซงเปนออบเจกตทใชแทนหนาเวบเพจนน ไลออบเจกตยอยใต

ออบเจกต document ไปเรอยๆ จงถงออบเจกตทเราตองการทางานดวย

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

imagees[3]

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

images[3]

การใช JavaScript อางองออบเจกต HTML

การอางองโดยใช id

Id (หรอยอมาจาก index) เปนการกาหนดชอใหออบเจกต และเวลาเราอางองถงก

โ ใ ไ อางโดยใชชอออบเจกต แทนไดเลย เชน

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

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

<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”;


การอางองโดยใช this


การอางองโดยใช this

This เปนคาสงวนหรอคยเวรด ทใชในการอางองถงตวออบเจกตท

javascript ฝงตวอย ใหชกรณทสครปตเกบอยในตวออบเจกต ดงนนเวลาjavascript ฝงตวอย ใหชกรณทสครปตเกบอยในตวออบเจกต ดงนนเวลา

อางองถงตวเองกจะใชคาวา this

ใ ไในแตละ this จะอางองถงออบเจกตคนละตวกน ขนกบวา this ไป

อยในออบเจกตตวใด กจะอางองถงออบเจกตตวนน

การใช JavaScript อางองคณสมบต CSSp

• JavaScript สามารถอางองคณสมบต CSS ได โดยผานออบเจกต JavaScript สามารถอางองคณสมบต CSS ได โดยผานออบเจกต

HTML ชอ style ดงตวอยางตอไปน

• Document getElementByle(“ชอออบเจกต”) style ชอคณสมบต “คาท• Document.getElementByle(“ชอออบเจกต”).style. ชอคณสมบต . “คาท

กาหนด”;

• Document.getElementByle(“ชอออบเจกต”).style. backgroundColor .

“red”;

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

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

•

Documents

การใช้ JavaScript