LAB#12 JavaScript
322432 Web Design Technology
1
JavaScript
คือ ภาษาสคริป ที่อยูในเว็บไซต ใชรวมกับ HTML เพื่อใหเว็บไซตสามารถตอบสนอง 
ผูใชงานไดมากขึ้น  
 
ขอดี > ...
Start JavaScript
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<script language="jav...
Method
Method  Description  
document.write  เขียนขอความในเพจ 
history.back  เรียกไปยังเพจที่อยูกอนหนาใน history 
hist...
Property
Property  Description  
document.bgcolor  สีพื้นหลัง (background) ของเพจ
document.lastModified  วัน เวลาที่เพจถูกป...
Property (cont.)
Property  Description  
navigator.appName  ชื่อโปรแกรมบราวเซอรที่ผูใชใชอยูขณะนั้น 
navigator.appVers...
Example
… 
<script language="javascript" > 
//เรียกใชเมธอด write ของอ็อบเจ็ก document โดยใหแสดงคาที่เปน title ออกมา 
/...
Example2 Validate Form
<script language="javascript">
function fncSubmit() {
if(document.order.name.value == "”) {
alert('...
HTML5 News Input type
Input Color
Example3
<html>
<body>
<form action="demo_form.asp">
Select your favorite color:
<input ...
HTML5 News Input type
Input Type: date
<html>
<body>
<form action="demo_form.asp">
Birthday: <input type="date"
name="bday...
HTML5 News Input type
Input Type Email
Email: <input type=“email” name=“uemail”>
Input Type Number
Quantity (between 1 and...
HTML5 News Input type
Input Type Search
<html>
<body>
<form action="demo_form.asp">
Search Google: <input type="search" na...
Example
13
คําสั่ง
ใหนักศึกษานำเอา งานจาก LAB#11 มาปรับปรุง  
โดยใช Validate Form โดยใช  
JavaScript ตกแตง และใช HTML5 ในการใชง...
Upcoming SlideShare
Loading in …5
×

Lab#12 java script

386 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
386
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lab#12 java script

  1. 1. LAB#12 JavaScript 322432 Web Design Technology 1
  2. 2. JavaScript คือ ภาษาสคริป ที่อยูในเว็บไซต ใชรวมกับ HTML เพื่อใหเว็บไซตสามารถตอบสนอง  ผูใชงานไดมากขึ้น     ขอดี > - ใชทรัพยากรนอย ประมวลผลจะเร็วกวาเฟช   - ชวยในการตอบสนองผูใช เชน การตรวจเช็คขอมูลที่เรากรอกขอมูล   การตรวจสอบขอมูลผูใช   - JavaScript สราง Cookies (เก็บขอมูลของผูใชในคอมพิวเตอรของผูใชเอง) ได    2
  3. 3. 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
  4. 4. Method Method  Description   document.write  เขียนขอความในเพจ  history.back  เรียกไปยังเพจที่อยูกอนหนาใน history  history.forward  เรียกไปยังเพจที่อยูถัดไปใน history  window.open  เปดวินโดวของบราวเซอรขึ้นมาใหม  4
  5. 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. 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. 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. 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. 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. 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. 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. 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
  13. 13. Example 13
  14. 14. คําสั่ง ใหนักศึกษานำเอา งานจาก LAB#11 มาปรับปรุง   โดยใช Validate Form โดยใช   JavaScript ตกแตง และใช HTML5 ในการใชงานดวย  14

×