ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
ภาษา JavaScript Webpage Design and Programming Workshop (7152306)
อาจารย์สุธารัตน์ ชาวนาฟาง สาขาวิศวกรรมซอฟต์แวร์ มหาวิทยาลัยราชภัฏนครปฐม
2
ภาษา JavaScript เป็นภาษาสำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต เพื่อใช้ประโยชน์สำหรับงานด้านต่างๆ ทั้งการคำนวณ การแสดงผล การรับ-ส่งข้อมูล สามารถโต้ตอบกับผู้ใช้ได้อย่างทันทีทัน
3
จุดเด่นของภาษาสคริปต์ฝั่งไคลเอนท์
สคริปต์ฝั่งไคลเอนท์จะถูกประมวลผลโดยเครื่องคอมพิวเตอร์ของผู้ใช้ ดังนั้นจึงทำงานได้รวดเร็ว สคริปต์ประเภทนี้ยังนำมาใช้ซ้ำได้ง่ายมาก เพราะแค่คัดลอกโค๊ดมาวางในภาษา HTML ก็สามารถใช้งานได้ทันที แต่บางสคริปต์อาจต้องแก้นำมาแก้ไขบ้าง เช่น สคริปต์ที่ใช้แสดงข้อมูลซึ่งจะต้องแก้ไขข้อมูลที่ต้องการแสดงให้เป็นข้อมูลของเรา
4
ลักษณะการทำงานของ JavaScript
เป็น Client-Side JavaScript : ถูกแปลทางฝั่งไคลเอนต์ จึงมีความเหมาะสมต่อการใช้งานของผู้ใช้ทั่วไปเป็นส่วนใหญ่ เป็น Server-Side JavaScript : ถูกแปลทางฝั่งเซิร์ฟเวอร์ (หมายถึงฝั่งเครื่องคอมพิวเตอร์ของผู้ให้บริการเว็บ
5
วิธีการแทรกภาษา JavaScript
การเขียนคำสั่งในส่วน body การเขียนคำสั่งในส่วน head การเขียนคำสั่งแยกไว้เป็นไฟล์ภายนอกเว็บเพจ
6
วิธีการแทรกภาษา JavaScript
1. การเขียนคำสั่งในส่วน body <html> <head></head> <body> <script type="text/javascript">document.write ("This message is written by JavaScript"); </script> </body> </html
7
วิธีการแทรกภาษา 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>
8
วิธีการแทรกภาษา JavaScript
3. การเขียนคำสั่งแยกไว้เป็นไฟล์ภายนอกเว็บเพจ <html><head> <script type="text/javascript" src="xxx.js"> </script> </head> <body> ………………………………………………….. </body> </html>
9
การประกาศตัวแปร ตัวแปร ความหมาย Var ชื่อตัวแปร;
เป็นรูปแบบการประกาศตัวแปรปกติ หรือ Var ชื่อตัวแปร = ข้อมูล; เป็นรูปแบบการกำหนดค่าเริ่มต้น
10
การกำหนดค่าให้ตัวแปร
รูปแบบ คำอธิบาย 1. ข้อมูลที่เป็นตัวเลข โดยกำหนดตัวเลขไปได้เลย เช่น num = 500 2. ข้อมูลในทางตรรกะ ได้แก่ จริง (True) หรือ เท็จ (False) เช่น test = True; 3. ข้อมูลสตริง ให้กำหนดอยู่ในเครื่องหมายคำพูด ("...") เช่น name = "Adisak"; ชื่อตัวแปร = ค่าของข้อมูล var x; var carname; Var x=5; var carname="Volvo";
11
ตัวดำเนินการ (Operators)
ตัวดำเนินทางคณิตศาสตร์ เช่น เครื่องหมาย +, -, x, / ตัวดำเนินการที่ใช้กำหนดค่า เช่น เครื่องหมาย +=, -=, *=, /=, %= ตัวดำเนินการเปรียบเทียบ ได้แก่ เครื่องหมาย ==, !=, >, <,_>=, <= ตัวดำเนินการทางตรรกะ ในทางตรรกะเป็นจริงหรือเท็จ ประกอบด้วยเครื่องหมาย &&, ||, และ ! ซึ่งแทนการ AND, OR และ NOT ตามลำดับ
12
คำสั่งเลือกทำ 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>
13
คำสั่งเลือกทำ 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>
14
คำสั่งเลือกทำ 3. รูปแบบ if..else if..else statement
<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> 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 }
15
คำสั่งเลือกทำ 4. รูปแบบ switch statement switch(n) { case 1:
execute code block 1 break; case 2: execute code block 2 default: code to be executed if n is different from case 1 and 2 }
16
ฟังก์ชันและเมธอด ช่วยเหลือการทำงานต่อโปรแกรมหลัก เมื่อมีการเรียกใช้งาน
ทำให้โครงสร้างของโปรแกรมมีขนาดเล็กลง เมื่อมีการเรียกใช้งานเดิมซ้ำ ๆ หลายๆ ครั้ง แทนที่จะเขียนคำสั่งเดิมเพิ่มขึ้นใหม่ซ้ำๆ หลายครั้งทำให้ดูสิ้นเปลืองเนื้อที่ ซ้ำซ้อนและเสียเวลาการทำงาน ฟังก์ชันยังทำให้โปรแกรมอ่านได้ง่ายขึ้น สะดวกในการหาจุดที่ผิดและง่ายต่อการปรับปรุงแก้ไขพัฒนาโปรแกรมให้ดียิ่งขึ้น
17
ฟังก์ชันและเมธอด 1. ชนิดของฟังก์ชัน มีอยู่ด้วยกัน 2 แบบ คือ
Standard Function เป็นแบบชื่อของฟังก์ชันที่มีอยู่แล้วสามารถนำเอาไปใช้งานได้ทันที User-defined Function เป็นแบบชื่อของฟังก์ชันที่ผู้ใช้สร้างขึ้นมาใช้เอง เพื่อกำหนดให้ทำงานใดงานหนึ่งจนสำเร็จ
18
ตัวแปร = ชื่อฟังก์ชัน();
ฟังก์ชันและเมธอด 2. การเรียกใช้ฟังก์ชัน เป็นการกำหนดส่วนของโปรแกรมให้ทำงานใดงานหนึ่งจนสำเร็จ โดยอ้างอิงชื่อฟังก์ชันของการทำงานที่ต้องการผลของการเรียกใช้ฟังก์ชันจะมีการส่งค่าคืนกลับไปยังโปรแกรมส่วนที่เรียก โดยใช้ชื่อฟังก์ชันเป็นตัวเก็บค่าเปรียบเสมือนหนึ่งกับเป็นตัวแปร ตัวแปร = ชื่อฟังก์ชัน();
19
ฟังก์ชันและเมธอด 3. การสร้างฟังก์ชันขึ้นใช้เอง
function name ชื่อของฟังก์ชันที่สร้างขึ้น ที่ไปซ้ำกับชื่อของฟังก์ชันอื่น parameter ค่าของข้อมูลหรือตัวแปรที่อ้างอิง (arguement) statements คำสั่งต่าง ๆ ที่ประกอบขึ้นเพื่อให้ดำเนินงานภายในฟังก์ชัน ชื่อฟังก์ชัน (พารามิเตอร์1, พารามิเตอร์2, ...) { ข้อคำสั่ง }
20
ฟังก์ชันและเมธอด 4. การวางตำแหน่งฟังก์ชัน
จะวางไว้ในส่วนของ <HEAD> หรือวางไว้ในส่วนของ <BODY> อย่างไรก็ขึ้นอยู่กับว่าต้องการให้ฟังก์ชันนั้นถูกโหลดใช้งานก่อนหรือหลังตามลำดับการเรียกใช้งานอย่างไร
21
ตัวอย่างเหตุการณ์ที่ JavaScript สามารถตรวจสอบ
Event คือ เหตุการณ์ที่ JavaScript สามารถตรวจสอบได้ มักจะทำงานร่วมกับ function โดย function จะไม่ทำงานถ้าไม่เกิด event ขึ้นก่อน ตัวอย่าง event เช่น เมื่อคลิกเมาส์, เมื่อโหลดหน้าเว็บเพจหรือรูปภาพ, คลิกปุ่มsubmit ในฟอร์ม เป็นต้น
22
ตัวอย่างเหตุการณ์ที่ JavaScript สามารถตรวจสอบ
1. onFocus, onBlur และ onChange ใช้ในการทำงานตรวจสอบการป้อนข้อมูลในฟอร์ม เป็นตรวจสอบการแก้ไขข้อมูล ถ้ามีการแก้ไขข้อมูล ให้เรียกใช้ฟังก์ชัน checkMail() <input type="text" size="30" id=" " onchange="check ()">
23
ตัวอย่างเหตุการณ์ที่ JavaScript สามารถตรวจสอบ
2. onSubmit เหตุการณ์ onSubmit ใช้ในการ validate ทุกฟิลด์ในฟอร์มก่อนการส่งค่า <form method="post" action="xxx.htm" onsubmit="return checkForm()">
24
ตัวอย่างเหตุการณ์ที่ JavaScript สามารถตรวจสอบ
3. onMouseOverและ onMouseOut เหตุการณ์ onMouseOver และ onMouseOut มักจะใช้ร่วมกับรูปภาพ
25
Question and Answer
งานนำเสนอที่คล้ายกัน
![ASP [#12] ตัวอย่าง VBScript เพื่อใช้ตรวจสอบค่าบนฟอร์ม](/8/2095154/big_thumb.jpg "ASP [#12] ตัวอย่าง VBScript เพื่อใช้ตรวจสอบค่าบนฟอร์ม>")
