ภาษา java sript

ภาษา JavaScript Webpage Design and Programming Workshop (7152306)

อาจารยสธารตน ชาวนาฟาง

สาขาวศวกรรมซอฟตแวร มหาวทยาลยราชภฏนครปฐม

ภาษา JavaScript

• เปนภาษาส าหรบการเขยนโปรแกรมบนระบบอนเทอรเนต เพอใช

ประโยชนส าหรบงานดานตางๆ ทงการค านวณ การแสดงผล การ

รบ-สงขอมล

• สามารถโตตอบกบผใชไดอยางทนททน

จดเดนของภาษาสครปตฝงไคลเอนท

• สครปตฝงไคลเอนทจะถกประมวลผลโดยเครองคอมพวเตอรของผใช ดงนนจง

ท างานไดรวดเรว

• สครปตประเภทนยงน ามาใชซ าไดงายมาก เพราะแคคดลอกโคดมาวางในภาษา

HTML กสามารถใชงานไดทนท แตบางสครปตอาจตองแกน ามาแกไขบาง เชน

สครปตทใชแสดงขอมลซงจะตองแกไขขอมลทตองการแสดงใหเปนขอมลของ

เรา

ลกษณะการท างานของ JavaScript

• เปน Client-Side JavaScript : ถกแปลทางฝงไคลเอนต จงมความเหมาะสม

ตอการใชงานของผใชทวไปเปนสวนใหญ

• เปน Server-Side JavaScript : ถกแปลทางฝงเซรฟเวอร (หมายถงฝงเครอง

คอมพวเตอรของผใหบรการเวบ

วธการแทรกภาษา JavaScript

• วธการแทรกค าสง JavaScript ในเวบเพจ สามารถท าได 3 วธ ไดแก

1. การเขยนค าสงในสวน body

2. การเขยนค าสงในสวน head

3. การเขยนค าสงแยกไวเปนไฟลภายนอกเวบเพจ


1. การเขยนค าสงในสวน body

<html>

<head></head>

<body>

<script type="text/javascript">document.write

("This message is written by JavaScript");

</script>

</body>

</html


2. การเขยนค าสงในสวน head

<html><head>

<script type="text/javascript">

function message(){

alert("This alert box was called with the onloadevent");

}

</script>

</head>

<body onload="message()">

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

</body></html>


3. การเขยนค าสงแยกไวเปนไฟลภายนอกเวบเพจ

<html><head>

<script type="text/javascript" src="xxx.js">

</script>

</head>

<body>

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

</body>

</html>

การประกาศตวแปร

ตวแปร ความหมาย

Var ชอตวแปร; เปนรปแบบการประกาศตวแปร

ปกต หรอ Var ชอตวแปร = ขอมล; เปนรปแบบการก าหนดคาเรมตน

การก าหนดคาใหตวแปร

• รปแบบ

• ค าอธบาย

1. ขอมลทเปนตวเลข โดยก าหนดตวเลขไปไดเลย เชน num = 500

2. ขอมลในทางตรรกะ ไดแก จรง (True) หรอ เทจ (False) เชน test = True;

3. ขอมลสตรง ใหก าหนดอยในเครองหมายค าพด ("...") เชน name = "Adisak";

ชอตวแปร = คาของขอมล

var x;

var carname; Var x=5;

var carname="Volvo";

ตวด าเนนการ (Operators)

ตวด าเนนทางคณตศาสตร เชน เครองหมาย +, -, x, /

ตวด าเนนการทใชก าหนดคา เชน เครองหมาย +=, -=, *=, /=, %=

ตวด าเนนการเปรยบเทยบ ไดแก เครองหมาย ==, !=, >, <,_>=, <=

ตวด าเนนการทางตรรกะ ในทางตรรกะเปนจรงหรอเทจ ประกอบดวยเครองหมาย

&&, ||, และ ! ซงแทนการ AND, OR และ NOT ตามล าดบ

ค าสงเลอกท า

1. รปแบบ if statement

if(condition)

{

code to be executed if condition is

true

}


var d=new Date();

var time=d.getHours();

if (time>12) {

document.write("<b>Good

morning</b>");

}

</script>


2. รปแบบ if..else statement

if (condition) {

code to be executed if condition is true }

else

{

code to be executed if condition is not

true

}


var d=new Date();


if (time>12) {


morning</b>");

} else {

document.write("<b>Good day</b>");

}

</script>


3. รปแบบ if..else if..else statement

if (condition1)

{

code to be executed if condition1 is

true

} else if (condition2) {

code to be executed if condition2 is

true

} else {

code to be executed if condition1 and

condition2 are not true

}


var d=new Date();


if (time>12) {


morning</b>");

} else if (time<12 && time <18) {

document.write("<b>Good afternoon</b>");

} else {

document.write("<b>Good evenning</b>");

}

</script>


4. รปแบบ switch statement

switch(n) {

case 1:

execute code block 1

break;

case 2:

execute code block 2

break;

default:

code to be executed if n is different from case 1 and 2

}

ฟงกชนและเมธอด

• ชวยเหลอการท างานตอโปรแกรมหลก เมอมการเรยกใชงาน

• ท าใหโครงสรางของโปรแกรมมขนาดเลกลง เมอมการเรยกใชงานเดมซ า ๆ

หลายๆ ครง แทนทจะเขยนค าสงเดมเพมข นใหมซ าๆ หลายครงท าใหด

สนเปลองเนอท ซ าซอนและเสยเวลาการท างาน

• ฟงกชนยงท าใหโปรแกรมอานไดงายขน สะดวกในการหาจดทผดและงายตอ

การปรบปรงแกไขพฒนาโปรแกรมใหดยงขน


1. ชนดของฟงกชน มอยดวยกน 2 แบบ คอ

Standard Function เปนแบบชอของฟงกชนทมอยแลวสามารถ

น าเอาไปใชงานไดทนท

User-defined Function เปนแบบชอของฟงกชนทผใชสรางขนมา

ใชเอง เพอก าหนดใหท างานใดงานหนงจนส าเรจ


2. การเรยกใชฟงกชน

เปนการก าหนดสวนของโปรแกรมใหท างานใดงานหนงจนส าเรจ โดยอางองชอ

ฟงกชนของการท างานทตองการผลของการเรยกใชฟงกชนจะมการสงคาคนกลบไปยง

โปรแกรมสวนทเรยก โดยใชชอฟงกชนเปนตวเกบคาเปรยบเสมอนหนงกบเปนตวแปร

ตวแปร = ชอฟงกชน();


3. การสรางฟงกชนขนใชเอง

• function name ชอของฟงกชนทสรางข น ทไปซ ากบชอของฟงกชนอน

• parameter คาของขอมลหรอตวแปรทอางอง (arguement)

• statements ค าสงตาง ๆ ทประกอบข นเพอใหด าเนนงานภายในฟงกชน

ชอฟงกชน (พารามเตอร1, พารามเตอร2, ...)

{ ขอค าสง

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

.......................................... }


4. การวางต าแหนงฟงกชน

• จะวางไวในสวนของ <HEAD> หรอ

วางไวในสวนของ <BODY>

อยางไรกข นอยกบวาตองการให

ฟงกชนนนถกโหลดใชงานกอน

หรอหลงตามล าดบการเรยกใช

งานอยางไร

ตวอยางเหตการณท JavaScript สามารถตรวจสอบ

• Event คอ เหตการณท JavaScript สามารถตรวจสอบได มกจะท างาน

รวมกบ function โดย function จะไมท างานถาไมเกด event ขนกอน

ตวอยาง event เชน เมอคลกเมาส, เมอโหลดหนาเวบเพจหรอ

รปภาพ, คลกปมsubmit ในฟอรม เปนตน


1. onFocus, onBlur และ onChange

• ใชในการท างานตรวจสอบการปอนขอมลในฟอรม

• เปนตรวจสอบการแกไขขอมล email ถามการแกไขขอมล ใหเรยกใช

ฟงกชน checkMail()

<input type="text" size="30" id="email"

onchange="checkEmail()">


2. onSubmit

• เหตการณ onSubmit ใชในการ validate ทกฟลดในฟอรมกอนการสง

คา

<form method="post" action="xxx.htm" onsubmit="return checkForm()">


3. onMouseOverและ onMouseOut

• เหตการณ onMouseOver และ onMouseOut มกจะใชรวมกบรปภาพ

ภาษา java sript

Education