JavaScript
คือ ภาษาสคริป ที่อยูในเว็บไซต ใชรวมกับ HTML เพื่อใหเว็บไซตสามารถตอบสนอง ผูใชงานไดมากขึ้น
ขอดี > - ใชทรัพยากรนอย ประมวลผลจะเร็วกวาเฟช
- ชวยในการตอบสนองผูใช เชน การตรวจเช็คขอมูลที่เรากรอกขอมูล
การตรวจสอบขอมูลผูใช - JavaScript สราง Cookies (เก็บขอมูลของผูใชในคอมพิวเตอรของผูใชเอง) ได
2
Start JavaScript
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript"> document.write("Hello World"); </script></head> <body> <h3><span class="style1">สวัสดีค่ะ</span> ^^</h3> </body></html>
3
Method
Method Description
document.write เขียนขอความในเพจ
history.back เรียกไปยังเพจที่อยูกอนหนาใน history
history.forward เรียกไปยังเพจที่อยูถัดไปใน history
window.open เปดวินโดวของบราวเซอรขึ้นมาใหม
4
Property
Property Description
document.bgcolor สีพื้นหลัง (background) ของเพจ
document.lastModified วัน เวลาที่เพจถูกปรับปรุงแก้ไขล่าสุด
document.title หัวเรื่องของเพจปกติจะแสดงออกมาบนไตเติลบาร์
document.location url ของเพจซึ่งการกําหนด url ให้กับ property จะเป็นการเปลี่ยนทิศทางบราวเซอร์ไปยังเพจอื่น
window.outerWidth , window.outerHeight
ความกวางและความสูงของพื้นที่แสดงผลในบราวเซอร
window.status ขอความบนแถบสถานะ ใชไดกับ IE เทานั้น
5
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
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
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
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
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
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
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
Recommended