ภาษา java sript
Post on 11-Apr-2017
16 Views
Preview:
TRANSCRIPT
ภาษา JavaScript Webpage Design and Programming Workshop (7152306)
อาจารยสธารตน ชาวนาฟาง
สาขาวศวกรรมซอฟตแวร มหาวทยาลยราชภฏนครปฐม
ภาษา JavaScript
• เปนภาษาส าหรบการเขยนโปรแกรมบนระบบอนเทอรเนต เพอใช
ประโยชนส าหรบงานดานตางๆ ทงการค านวณ การแสดงผล การ
รบ-สงขอมล
• สามารถโตตอบกบผใชไดอยางทนททน
จดเดนของภาษาสครปตฝงไคลเอนท
• สครปตฝงไคลเอนทจะถกประมวลผลโดยเครองคอมพวเตอรของผใช ดงนนจง
ท างานไดรวดเรว
• สครปตประเภทนยงน ามาใชซ าไดงายมาก เพราะแคคดลอกโคดมาวางในภาษา
HTML กสามารถใชงานไดทนท แตบางสครปตอาจตองแกน ามาแกไขบาง เชน
สครปตทใชแสดงขอมลซงจะตองแกไขขอมลทตองการแสดงใหเปนขอมลของ
เรา
ลกษณะการท างานของ JavaScript
• เปน Client-Side JavaScript : ถกแปลทางฝงไคลเอนต จงมความเหมาะสม
ตอการใชงานของผใชทวไปเปนสวนใหญ
• เปน Server-Side JavaScript : ถกแปลทางฝงเซรฟเวอร (หมายถงฝงเครอง
คอมพวเตอรของผใหบรการเวบ
วธการแทรกภาษา JavaScript
• วธการแทรกค าสง JavaScript ในเวบเพจ สามารถท าได 3 วธ ไดแก
1. การเขยนค าสงในสวน body
2. การเขยนค าสงในสวน head
3. การเขยนค าสงแยกไวเปนไฟลภายนอกเวบเพจ
วธการแทรกภาษา JavaScript
1. การเขยนค าสงในสวน body
<html>
<head></head>
<body>
<script type="text/javascript">document.write
("This message is written by JavaScript");
</script>
</body>
</html
วธการแทรกภาษา JavaScript
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>
วธการแทรกภาษา JavaScript
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
}
<script type="text/javascript">
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
}
<script type="text/javascript">
var d=new Date();
var time=d.getHours();
if (time>12) {
document.write("<b>Good
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
}
<script type="text/javascript">
var d=new Date();
var time=d.getHours();
if (time>12) {
document.write("<b>Good
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 ในฟอรม เปนตน
ตวอยางเหตการณท JavaScript สามารถตรวจสอบ
1. onFocus, onBlur และ onChange
• ใชในการท างานตรวจสอบการปอนขอมลในฟอรม
• เปนตรวจสอบการแกไขขอมล email ถามการแกไขขอมล ใหเรยกใช
ฟงกชน checkMail()
<input type="text" size="30" id="email"
onchange="checkEmail()">
ตวอยางเหตการณท JavaScript สามารถตรวจสอบ
2. onSubmit
• เหตการณ onSubmit ใชในการ validate ทกฟลดในฟอรมกอนการสง
คา
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
ตวอยางเหตการณท JavaScript สามารถตรวจสอบ
3. onMouseOverและ onMouseOut
• เหตการณ onMouseOver และ onMouseOut มกจะใชรวมกบรปภาพ
top related