Weitere ähnliche Inhalte
Ähnlich wie Lab#12 java script
Ähnlich wie Lab#12 java script (20)
Lab#12 java script
- 2. JavaScript
คือ ภาษาสคริป ที่อยูในเว็บไซต ใชรวมกับ HTML เพื่อใหเว็บไซตสามารถตอบสนอง
ผูใชงานไดมากขึ้น
ขอดี > - ใชทรัพยากรนอย ประมวลผลจะเร็วกวาเฟช
- ชวยในการตอบสนองผูใช เชน การตรวจเช็คขอมูลที่เรากรอกขอมูล
การตรวจสอบขอมูลผูใช
- JavaScript สราง Cookies (เก็บขอมูลของผูใชในคอมพิวเตอรของผูใชเอง) ได
2
- 4. Method
Method Description
document.write เขียนขอความในเพจ
history.back เรียกไปยังเพจที่อยูกอนหนาใน history
history.forward เรียกไปยังเพจที่อยูถัดไปใน history
window.open เปดวินโดวของบราวเซอรขึ้นมาใหม
4
- 5. Property
Property Description
document.bgcolor สีพื้นหลัง (background) ของเพจ
document.lastModified วัน เวลาที่เพจถูกปรับปรุงแก้ไขล่าสุด
document.title หัวเรื่องของเพจปกติจะแสดงออกมาบนไตเติลบาร์
document.location url ของเพจซึ่งการกําหนด url ให้กับ property จะเป็นการ
เปลี่ยนทิศทางบราวเซอร์ไปยังเพจอื่น
window.outerWidth ,
window.outerHeight
ความกวางและความสูงของพื้นที่แสดงผลในบราวเซอร
window.status ขอความบนแถบสถานะ ใชไดกับ IE เทานั้น
5
- 6. Property (cont.)
Property Description
navigator.appName ชื่อโปรแกรมบราวเซอรที่ผูใชใชอยูขณะนั้น
navigator.appVersion เวอรชั่นของบราวเซอรที่ผูใชใชอยูขนณะนั้น
navigator.useAgent รายละเอียดเพิ่มเติมเกี่ยวกับบราวเซอรที่ผูใชใชอยูขณะนั้น
ที่มา : http://xvlnw.com/?p=1840&preview=true
<script language="javascript" src="script.js"></script>
แทรกสคริปในสวนของ head
6
- 7. Example
…
<script language="javascript" >
//เรียกใชเมธอด write ของอ็อบเจ็ก document โดยใหแสดงคาที่เปน title ออกมา
//การเชื่อมสตริงใน JavaScript จะใชเครื่องหมาย "+”
document.write("หัวเรื่อง คือ <b>" + document.title + "</b>");
//เปนการแสดงขอมูลตางๆเกี่ยวกับเบราเซอร
document.write("<hr><b>ขอมูลเกี่ยวกับบราวเซอรที่คุณใชอยู</b><br><br>");
document.write("ชื่อโปรแกรมบราวเซอร: " + navigator.appName + "<br>");
document.write("เวอรชั่น: " + navigator.appVersion + "<br>");
document.write("รายละเอียดเพิ่มเติม: " + navigator.userAgent);
</script></head><body>
<h3>ทดสอบ JavaScript</h3>
…
7
- 8. Example2 Validate Form
<script language="javascript">
function fncSubmit() {
if(document.order.name.value == "”) {
alert('กรุณากรอกชื่อด้วยค่ะ');
document.order.name.focus();
return false;
}
if(document.order.tel.value == "”) {
alert('กรุณากรอกเบอร์โทรติดต่อด้วยค่ะ');
document.order.tel.focus();
return false; } }
</script>
<form name="order" onSubmit="JavaScript:return fncSubmit();" >
name: <input type="text" name="name"/> <br />
phone: <input type="text" name="tel"/> <br />
<input type="submit" name="submit" />
</form>
8
- 9. HTML5 News Input type
Input Color
Example3
<html>
<body>
<form action="demo_form.asp">
Select your favorite color:
<input type="color" name="favcolor">
<br>
<input type="submit">
</form>
</body>
</html>
9
- 10. HTML5 News Input type
Input Type: date
<html>
<body>
<form action="demo_form.asp">
Birthday: <input type="date"
name="bday">
<input type="submit">
</form>
</body>
</html>
TEST
Birthday (date and time): <input type="datetime" name="bdaytime">
10
- 11. HTML5 News Input type
Input Type Email
Email: <input type=“email” name=“uemail”>
Input Type Number
Quantity (between 1 and 5): <input type="number"
name="quantity" min="1" max="5">
11
- 12. HTML5 News Input type
Input Type Search
<html>
<body>
<form action="demo_form.asp">
Search Google: <input type="search" name="googlesearch"><br>
<input type="submit">
</form>
</body>
</html>
Link
12
