Lab#12 java script

LAB#12 JavaScript

322432 Web Design Technology

1

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


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


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


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

Example

13

คําสั่ง

ใหนักศึกษานำเอา งานจาก LAB#11 มาปรับปรุง โดยใช Validate Form โดยใช JavaScript ตกแตง และใช HTML5 ในการใชงานดวย

14

Lab#12 java script

Documents

Transcript of Lab#12 java script