Document

Transcript Document

1
่ ระมวลผลฝั่ ง
• เพื่อศึกษาหลักการทางานของภาษา Script ทีป
Client
• เพื่อให้ หลักการเขียนโปรแกรมภาษา Javascript
2
• บรรยายโดยผู้สอนและใช้ เอกสารประกอบการสอนของ
ผู้สอน
• สอนโดยใช้ ส่ือคอมพิวเตอร์ ผ่านเครื่ องฉาย
• อภิปรายในชั้นเรี ยนร่ วมกัน
่ เติมจากตาราและเอกสารทีเ่ กี่ยวข้ อง
• ให้ นิสิตค้ นคว้ าเพิม
• ทาแบบฝึ กหัดท้ ายบท
3
• ประเมินผลจากการตอบคาถามและอภิปรายในชั้นเรี ยน
• ทาแบบฝึ กหัดท้ ายบท
• ทารายงานส่ ง
4
ภาษาจาวาสคริปต์ ถูกพัฒนาโดย เน็ตสเคปคอมมิวนิเค
ชันส์ (Netscape Communications Corporation) โดยใช้ ช่ ือว่ า
Live Script ออกมาพร้ อมกับ Netscape Navigator2.0 เพื่อใช้
สร้ างเว็บเพจโดยติดต่ อกับเซิร์ฟเวอร์ แบบ Live Wire ต่ อมา
เน็ตสเคปจึงได้ ร่วมมือกับ บริษัทซันไมโครซิสเต็มส์ ปรับปรุ ง
ระบบของบราวเซอร์ เพื่อให้ สามารถติดต่ อใช้ งานกับภาษาจา
วาได้ และได้ ปรับปรุ ง LiveScript ใหม่ เมื่อ ปี 2538 แล้ วตัง้ ชื่อ
ใหม่ ว่า JavaScript
5
JavaScript เป็ นภาษาสคริปต์ เชิงวัตถุ หรือเรียกว่ า
อ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming)
เป้าหมายในการออกแบบและพัฒนาโปรแกรมใน
ระบบอินเทอร์ เน็ต สาหรับผู้เขียนเอกสารด้ วยภาษา HTML
และภาษาจาวาได้ ทงั ้ ทางฝั่ งไคลเอนต์ (Client) และ ทางฝั่ ง
เซิร์ฟเวอร์ (Server)
6
1. Navigator JavaScript เป็ น Client-Side JavaScript ซึ่งหมายถึง
JavaScript ที่ถกู แปลทางฝั่ งไคลเอนต์ (หมายถึงฝั่ งเครื่ อง คอมพิวเตอร์
ของผู้ใช้ ไม่ ว่าจะเป็ นเครื่ องพีซี เครื่ องแมคอินทอช หรื อ อื่น ๆ) จึงมี
ความเหมาะสมต่ อการใช้ งานของผู้ใช้ ท่ วั ไปเป็ นส่ วนใหญ่
2. LiveWire JavaScript เป็ น Server-Side JavaScript ซึ่งหมายถึง
JavaScript ที่ถกู แปลทางฝั่ งเซิร์ฟเวอร์ (หมายถึงฝั่ งเครื่ อง คอมพิวเตอร์
ของผู้ให้ บริการเว็บ โดยอาจจะเป็ นเครื่ องของซันซิลิคอมกราฟิ กส์ หรื อ
อื่น ๆ) สามารถใช้ ได้ เฉพาะกับ LiveWire ของเน็ตสเคป โดยตรง
7
2. Web Server locate .html File
Web Server
3. HTML stream (from .htm page)
Returned to browser
4. Browser Process Client-side script
5. Browser Processes HTML
And displays Pages
1. Client Request Webpage
Client
ภาษา JavaScript สามารถเขียนรวมอยู่ในไฟล์ เดียวกันกับ HTML ได้
โดยมีการเขียน 2 วิธี ดังนี ้
• เขียนด้ วยชุดคาสั่งและฟั งก์ ชันของ JavaScript เอง
• เขียนตามเหตการณ์ ท่ ีเกิดขึน้ ตามการใช้ งานจากชุดคาสั่งของ HTML
9
เมื่อเริ่มใช้ งาน โปรแกรมบราวเซอร์ จะอ่ านข้ อมูลจากส่ วนบน
ของเพจ HTML และทางานไปตามลาดับจาก บนลงล่ าง (top-down)
โดยเริ่มที่ส่วน <HEAD>...</HEAD> ก่ อนจากนัน้ จึงทางานในส่ วน
<BODY>...</BODY> เป็ นลาดับ
<HTML>
<head>
<script Language ="JavaScript">
......................................
</script>
</head>
<body>
<script Language ="JavaScript">
..................................................
</script>
</BODY>
</HTML>
10
ตัวแปร (Variable) หมายถึง ชื่อหรือสัญลักษณ์ ท่ ตี งั ้ ขึน้
สาหรับการเก็บค่ าใด ๆ ที่ไม่ คงที่ โดยการจองเนือ้ ที่ใน
หน่ วยความจาของระบบเครื่องที่เก็บข้ อมูลซึ่งสามารถอ้ างอิง
ได้ มีขนาดขึน้ อยู่กับชนิดของข้ อมูลและค่ าของข้ อมูล ซึ่งค่ า
ในตัวแปรนีส้ ามารถเปลี่ยนแปละได้ ตามคาสั่งในการ
ประมวลผล
11
การตัง้ ชื่อ (Identifier or Name) เป็ นชื่อที่ตงั ้ ขึน้ มาเพื่อกาหนดให้ เป็ นชื่อของ
โปรแกรมหลัก, ฟั งก์ ชัน, ตัวแปร, ค่ าคงที่, คาสั่ง และคาสงวน โดยมีหลักการตัง้ ชื่อว่ า
• ขึน้ ต้ นด้ วยตัวอักษรในภาษาอังกฤษ ตามด้ วยตัวอักษรหรื อตัวเลขใด ๆ ก็ได้
• ห้ ามเว้ นช่ องว่ าง
• ห้ ามใช้ สัญลักษณ์ พเิ ศษ ยกเว้ นขีดล่ าง (_) และดอลล่ าร์ ($)
• สาหรั บความยาวของชื่อใน JavaScript จะมีความยาวเท่ าใดก็ได้ แต่ ท่ น
ี ิยมใช้ ไม่ เกิน
20 ตัวอักษร
• การตัง้ ชื่อมีข้อพึงระวังว่ า จะต้ องไม่ ซา้ กับคาสงวน (Reserve word) และตัวอักษรของ
ชื่อจะจาแนกแตกต่ างกันระหว่ างอักษรตัวพิมพ์ เล็กกับอักษรตัวพิมพ์ ใหญ่
• ควรจะตัง้ ชื่อโดยให้ ช่ ือนัน
้ มีส่ ือความหมายให้ เข้ ากับข้ อมูล สามารถอ่านและเข้ าใจได้
12
คาสงวน (Reserve word) เป็ นคาที่มีความหมายเฉพาะตัวใน
ภาษา JavaScript สงวนไม่ ให้ มีการตัง้ ชื่อซา้ กับชื่อโปรแกรม,
ฟั งก์ ชัน, ตัวแปร, ค่ าคงที่ และคาสั่ง คาสงวน สามารถ
เรียกใช้ ได้ ทนั ทีโดยไม่ ต้องมากาหนดความหมายใหม่ แต่
อย่ างใด
13
ชนิดของข้ อมูลของตัวแปร (Data Type) เป็ นการกาหนดประเภทค่ าของข้ อมูลให้ กับ
ตัวแปร เพื่อให้ เหมาะสมกับการอ้ างอิงข้ อมูลจากตัวแปรในการใช้ งาน มี4 ชนิด
ได้ แก่
• number  ข้ อมูลชนิดตัวเลข ประกอบด้ วย เลขจานวนเต็ม (Integer) และเลข
จานวนจริง (Floating)
• logical  ข้ อมูลทางตรรกะ มี 2 สถานะ คือ จริ ง (True) และเท็จ (False)
• string  ข้ อมูลที่เป็ นข้ อความ ซึ่งจะต้ องกาหนดไว้ ในเครื่ องหมายคาพูด ("...")
• null  ไม่ มีค่าข้ อมูลใดๆ ซึ่งค่ า null ใช้ สาหรั บการยกเลิกพืน้ ที่เก็บค่ าของตัวแปร
ออกจากหน่ วยความจา
14
การประกาศตัวแปร (Declarations) เป็ นการกาหนดชื่อและชนิดข้ อมูล
ให้ กับตัวแปรเพื่อนาไปใช้ ในโปรแกรม โดยการตัง้ ชื่อจะต้ องคานึงถึงค่ าของ
ข้ อมูลและ ชนิดของข้ อมูลที่อ้างอิง นอกจากนีก้ ารตัง้ ชื่อควรให้ ส่ ือความหมาย
ของข้ อมูล และอักษรของชื่อจะจาแนกแตกต่ างกันระหว่ างอักษรตัวพิมพ์ เล็ก
กับอักษรตัวพิมพ์
Var ชื่อตัวแปร;
เป็ นรูปแบบการประกาศตัวแปรปกติ
หรื อ
Var ชื่อตัวแปร = ข้ อมูล;
เป็ นรูปแบบการกาหนดค่าเริ่ มต้ น
15
รู ปแบบ  ชื่อตัวแปร = ค่ าของข้ อมูล
โดยที่...ค่ าของข้ อมูล ได้ แก่
1. ข้ อมูลที่เป็ นตัวเลข โดยกาหนดตัวเลขไปได้ เลย เช่ น num = 500
2. ข้ อมูลในทางตรรกะ ได้ แก่ จริง (True) หรื อ เท็จ (False) เช่ น
test = True;
3. ข้ อมูลสตริง ให้ กาหนดอยู่ในเครื่ องหมายคาพูด ("...") เช่ น
name = “Sanya";
16
ตัวแปรมี 2 จาพวก
1. ตัวแปรแบบโกลบัล (Global) ตัวแปรจาพวกนีจ้ ะมีค่าคง
อยู่ในหน่ วยความจาตลอดการทางานของโปรแกรม ทาให้ สามารถ
เรี ยกใช้ ได้ จากทุก ๆ ส่ วนของโปรแกรม รวมถึงภายในฟั งก์ ชันต่ าง
ๆ ด้ วย ซึ่งเป็ นการกาหนดชื่อตัวแปรไว้ ท่ โี ปรแกรมหลักโดยไม่ ได้
อยู่ภายในขอบเขตฟั งก์ ชันใด ๆ
2.ตัวแปรแบบโลคัล (Local) เป็ นการกาหนดตัวแปรไว้
ภายในขอบเขตฟั งก์ ชันใด ๆ เป็ นตัวแปรที่มีค่าคงอยู่ และสามารถ
เรี ยกใช้ ได้ เฉพาะ ภายในขอบเขตของฟั งก์ ชันนัน้ ๆ เท่ านัน้
17
ค่ าคงที่ (Literal หรือ Constant) หมายถึง ค่ าของข้ อมูลที่เมื่อกาหนด
แล้ วจะทาการเปลี่ยนแปลงค่ าเป็ นอย่ างอื่นไม่ ได้ ชนิดข้ อมูลของ
ค่ าคงที่ได้ แก่
• เลขจานวนเต็ม (Integer) เป็ นตัวเลขที่ไม่ มีเศษทศนิยม สามารถเขียนให้
อยู่ในแบบ เลขฐานสิบ (0-9), เลขฐานสิบหก (0-9, A-F) หรื อ เลขฐานแปด
(0-7) โดยการเขียนเลขฐานแปดให้ นาหน้ าด้ วย O (Octenary)ส่ วนการ
เขียนเลขฐานสิบหกให้ นาหน้ าด้ วย Ox หรื อ OX (Hexadenary)
18
• เลขจานวนจริ ง (Floating) ใช้ รูปแบบการเขียนโดยประกอบไปด้ วยตัวเลข จุด
ทศนิยมและตัวเลขยกกาลัง E (Exponential) เช่ น
 5.00E2 จะหมายถึงค่ า 5.00 คูณด้ วย 10 ยกกาลัง 2 จะมีค่าเป็ น 500
 3.141E5 จะหมายถึงค่ า 3.141 คูณด้ วย 10 ยกกาลัง 5 จะมีค่าเป็ น
314,1000
• ค่ าบูลีน (Boolean) เป็ นค่ าคงที่เชิงตรรกะ คือมีค่าเป็ น จริ ง(True) และ เท็จ
(False) เท่ านัน้
• ข้ อความสตริ ง (String) เป็ นค่ าคงที่แบบข้ อความที่อยู่ภายในเครื่ องหมาย
คาพูด ("..." หรื อ '...') เช่ น "บริษัท เอ็กซ์ ทรี ม จากัด", 'นางนฤมล เวชตระกูล'
19
รหัสคาสั่งพิเศษ (Character escape code) เป็ นการกาหนดรหัสเพื่อควบคุมงาน
พิมพ์ สตริงโดยใช้ เครื่ องหมาย \ (Backslash) นาหน้ าตัวอักษรที่ต้องการกาหนดเป็ น
รหัส เพื่อให้ กลายเป็ นรหัสคาสั่งพิเศษ
\b หมายถึง ลบไปทางซ้ าย (Back Space)
\f หมายถึง เลื่อนกระดาษไปอีก 1 หน้ า (Form Feed)
\n หมายถึง ขึน้ บรรทัดใหม่ (New Line)
\r หมายถึง ตรวจสอบการกด Enter (Return) และการเลื่อนขึน้ บรรทัด
ใหม่ ของหน้ าระดาษ
\t หมายถึง เลื่อนตาแหน่ งไปทางขวา 1 ช่ วงแท็บ (Tab)
\\ หมายถึง เติมเครื่ องหมาย \ (Backslash)
\" หมายถึง เติมเครื่ องหมายคาพูด
20
ข้ อคาสั่ง (Statement) คือ ถ้ อยแถลงหรื อข้ อความคาสั่งที่ส่ ังให้
จาวาสคริปต์ ดาเนินงานตามลาดับที่ได้ ส่ ังไว้ การเขียนข้ อคาสั่งจะ
สิน้ สุดหรื อจบข้ อคาสั่งด้ วยเครื่ องหมาย เซมิโคล่ อน (;)
ตัวอย่ างการกาหนดข้ อคาสั่ง 2 คาสั่ง
กาหนดให้ ตัวแปร name เก็บชื่อ Sanya
ให้ พมิ พ์ ประโยคข้ อความว่ า My name is Sanya จะกาหนดได้ ดังนี ้
name = “Sanya";
document.write("My name is "+name);
21
นิพจน์ (Expression) เป็ นข้ อคาสั่งที่ใช้ กาหนดค่ าของข้ อมูล เช่ น การบวกตัวเลข การ
เปรี ยบเทียบข้ อมูล โดยการกาหนดชื่อของตัวแปร ตามด้ วยเครื่ องหมายที่ต้องการ
กระทา (Operations) ต่ อข้ อมูลเป็ นผลให้ เกิดค่ าข้ อมูลใหม่ ค่าหนึ่งให้ กับตัวแปรเพื่อ
นาไปใช้ งาน
นิพจน์ JavaScript มีด้วยกัน 3 ชนิดดังนี ้
1. นิพจน์ คณิตศาสตร์ (Arithmetic) เช่ น ให้ ตัวแปร num เก็บตัวเลข 5000
จะเขียนได้ ดังนี ้ num = 5000;
2. นิพจน์ ตรรกะ (Logical) เป็ นนิพจน์ ในการเปรี ยบเทียบข้ อมูล
เช่ น กาหนดให้ a = 50;
3. นิพจน์ ข้อความ (String) เช่ น ให้ ตวั แปร name เก็บชื่อ Sanya จะเขียนได้ ดงั นี ้
name = “Sanya";
22
ตัวดาเนินการ (Operator) หมายถึง เครื่องหมายกาหนดกรรมวิธีทาง
คณิตศาสตร์ , พีชคณิต, บูลีน, การเปรียบเทียบ ระหว่ างข้ อมูล 2 ตัว
ซึ่งเรียกว่ า โอประแรนด์ (Operand) โดยอาจมีค่าเป็ นตัวเลข ข้ อความ
ค่ าคงที่ หรือตัวแปรต่ าง ๆ
23
ตัวดาเนินการคณิตศาสตร์
ใช้ สาหรั บคานวณโอประแรนด์ ท่ เี ป็ นค่ าคงที่หรื อตัวแปรก็ได้ โดยให้ ค่าผลลัพธ์ เป็ นตัวเลข
ค่ าเดียว โอประเรเตอร์ เชิงคณิตศาสตร์ ท่ คี นส่ วนใหญ่ ร้ ู จักคุ้นเคยกันมากที่สุดได้ แก่
+ หมายถึง เครื่ องหมายการบวก
- หมายถึง เครื่ องหมายการลบ
* หมายถึง เครื่ องหมายการคูณ
/ หมายถึง เครื่ องหมายการหาร
% หมายถึง เครื่ องหมายหาเศษที่ได้ จากการหารที่เรี ยกว่ า โมดูลัส(Modulus)
++ หมายถึง เครื่ องหมายการเพิ่มค่ าที่เรี ยกว่ า อินครี เมนต์ (increment) โดยจะเพิ่มค่ า
ครั ง้ ละ 1
-- หมายถึง เครื่ องหมายการลดค่ าที่เรี ยกว่ า ดีครี เมนต์ (decrement) โดยจะลดค่ าครั ง้ ละ
1
(-) หมายถึง เครื่ องหมายแปลงค่ าให้ กลายเป็ นค่ าตรงกันข้ ามกับค่ าเดิมที่เรี ยกว่ า ยู
นารี นีเกชัน (unary negation)
24
ตัวดาเนินการเชิงเปรี ยบเทียบ (Comparison operator)
หมายถึง เครื่ องหมายในการเปรี ยบเทียบข้ อมูล ผลลัพธ์ ท่ ไี ด้ จะมี
ค่ าตรรกบูลลีนเป็ น จริง (True) และ เท็จ (False) ได้ แก่
== หมายถึง เครื่ องหมายเท่ ากับ
!= หมายถึง เครื่ องหมายไม่ เท่ ากับ
> หมายถึง เครื่ องหมายมากกว่ า
>= หมายถึง เครื่ องหมายมากกว่ าหรื อเท่ ากับ
< หมายถึง เครื่ องหมายน้ อยกว่ า
<= หมายถึง เครื่ องหมายน้ อยกว่ าหรื อเท่ ากับ
25
ตัวดาเนินการกาหนดค่ า (Assignment operator)
หมายถึง เครื่ องหมายในการกาหนดให้ ตัวแปรที่อยู่ทางฝั่ งซ้ าย มีค่าเท่ ากับค่ า
เดิมในตัวแปรนัน้ "กระทา" (บวก, ลบ, คูณ, หาร) กับอีกตัวแปรหนึ่งที่อยู่ทาง
ฝั่ งขวา ได้ แก่
x = y หมายถึง กาหนดค่ า y ให้ กับตัวแปร x
x += y หมายถึง เพิ่มค่ า y ให้ กับตัวแปร x (x = x + y)
x -= y หมายถึง ลบค่ า y ออกจากตัวแปร x (x = x - y)
x *= y หมายถึง กาหนดค่ า x คูณกับค่ า y ให้ กับตัวแปร x (x = x * y)
x /= y หมายถึง กาหนดค่ า x หารกับค่ า y ให้ กับตัวแปร x (x = x / y)
x %= y หมายถึง กาหนดเศษที่ได้ จากการหารค่ า x ด้ วยค่ า y ให้ กับตัวแปร x
(x = x % y)
26
ตัวดาเนินการกาหนดค่ า (ต่ อ)
x <<= y หมายถึง เลื่อนบิตในตัวแปร x ไปทางซ้ าย y บิต
(x = x << y)
x >>= y หมายถึง เลื่อนบิตในตัวแปร x ไปทางขวา y บิต
(x = x >> y)
x >>>= y หมายถึง เลื่อนบิตแบบซีโรฟิ ลล์ ในตัวแปร x ไปทางขวา
y บิต (x = x >>> y)
x &= y หมายถึง เก็บค่ า x AND y ในตัวแปร x (x = x & y)
x ^= y หมายถึง เก็บค่ า x XOR y ในตัวแปร x (x = x ^ y)
x |= y หมายถึง เก็บค่ า x OR y ในตัวแปร x (x = x | y)
27
ตัวดาเนินการเชิงตรรกะ (Logical operator)
เป็ นเครื่ องหมายที่ให้ ค่าจริง (True) และ เท็จ (False) ในการ
เปรี ยบเทียบ ประกอบด้ วยเครื่ องหมาย
&& หมายถึง และ(AND) จะเป็ นจริงเมื่อค่ าที่ใช้
เปรี ยบเทียบทัง้ 2 ค่ าเป็ นจริงทัง้ คู่
|| หมายถึง หรื อ(OR) จะเป็ นจริงเมื่อค่ าที่ใช้ เปรี ยบเทียบ
ทัง้ 2 ค่ าเป็ นจริงทัง้ คู่หรื อจริงเพียงค่ าใด ค่ าหนึ่ง
! หมายถึง ปฎิเสธ(NOT) เป็ นการแปลงค่ าตรงกันข้ าม
จากจริงจะเป็ นเท็จ และ จากเท็จจะเป็ นจริ
28
ตัวดาเนินการเชิงข้ อความ (String operator)
เป็ นการเชื่อมประโยคข้ อความเข้ าด้ วยกัน (concatenation)
โดยใช้ เครื่องหมายบวก (+) เป็ นตัวกระทา
เช่ น Name = “Alex";
Say = "Hey "+Name;
ผลลัพธ์ ท่ ไี ด้ Say จะมีข้อความเป็ น Hey Alex
29
ตัวดาเนินการระดับบิต (Bitwise operator)
เป็ นการดาเนินการเชิงตรรกะในระดับบิต โดยจะใช้ มุมมองในแบบเลขฐาน 2 มา
จัดการกับข้ อมูล
มีรายละเอียดดังนี ้
x & y หมายถึง ให้ ผลลัพธ์ การเทียบบิตแบบ AND ระหว่ าง x กับ y
x | y หมายถึง ให้ ผลลัพธ์ การเทียบบิตแบบ OR ระหว่ าง x กับ y
x ^ y หมายถึง ให้ ผลลัพธ์ การเทียบบิตแบบ XOR ระหว่ าง x กับ y
~x หมายถึง เพิ่มค่ าบิตให้ 1 จากนัน้ จะให้ ผลลัพธ์ ของบิตมีค่าตรงข้ าม
x << y หมายถึง เลื่อนบิตในตัวแปร x ไปทางซ้ าย y บิต
x >> y หมายถึง เลื่อนบิตในตัวแปร x ไปทางขวา y บิต
x >>> y หมายถึง เลื่อนบิตแบบซีโรฟิ ลล์ ในตัวแปร x ไปทางขวา y บิต
30
ลาดับที่ 1 ( )
ลาดับที่ 2 ++ -- ! ~
ลาดับที่ 3 * / %
ลาดับที่ 4 + ลาดับที่ 5 << >> >>
ลาดับที่ 6 < <= > >=
ลาดับที่ 7 == !=
ลาดับที่ 8 &
ลาดับที่ 9 ^
ลาดับที่ 10 |
ลาดับที่ 11 &&
ลาดับที่ 12 ||
ลาดับที่ 13 = += -= *= /= %= <<= >>= >>>= &= ^= !=
31
• ตัวอย่ าง
<HTML>
<head>
<script Language ="JavaScript">
document.write("hello1");
</script>
</head>
<body>
<script Language ="JavaScript">
document.write("hello2");
</script>
</BODY>
</HTML>
32
• การกาหนดเงื่อนไข ได้ แก่ IF, IF ELSE, IF ELSE IF,
SWITCH CASE, WITH, EXPRESSION เป็ นต้ น
• คาสั่งควบคุมการทางานวนซา้ ได้ แก่ FOR, While, Do
While, คาสั่ง break และ continue ของประโยควนซา้
33
• คาสั่ง if คือ ใช้ ตรวจสอบเงื่อนไข ถ้ าหากว่ าเงื่อนไขเป็ นจริ ง
ก็จะทาตามคาสั่งที่กาหนด
• syntax :
<script Language ="JavaScript">
var num = 100;
if (num>=100) {
If(condition){
alert("The winner");
document.write("more than 100 Baht");
structure;
}
</script>
}
34
• คาสั่ง if คือ ใช้ ตรวจสอบเงื่อนไข ถ้ าหากว่ าเงื่อนไขเป็ นจริง ก็จะ
ทาตามคาสั่งที่กาหนด ส่ วน else จะหมายถึง ถ้ าไม่ ตรงตาม
เงื่อนไขใดๆ ให้ ทาตามคาสั่งที่กาหนดใน else
• syntax:
if ( condition ) {
structure;
}else{
structure;
}
<script Language ="JavaScript">
var num = 50;
if (num>=100) {
document.write("more than 100 Baht");
}else{
document.write("less than 100 Baht");
}
</script>
35
• คาสั่ง if คือ ใช้ ตรวจสอบเงื่อนไข ถ้ าหากว่ าเงื่อนไขเป็ นจริ ง ก็จะทาตามคาสั่งที่
กาหนด ส่ วน else จะหมายถึง ถ้ าไม่ ตรงตามเงื่อนไขใดๆ ให้ ทาตามคาสั่งที่กาหนดใน
else
syntax:
<script Language ="JavaScript">
var num = 60;
if(condition){
structure;
}else if(condition){
structure;
}else{
structure;
}
if(num>=100) {
document.write("get 100 Baht");
}else if(num>=50) {
document.write("get 50 Baht");
}else{
document.write("get 0 Baht");
}
</script>
36
• คาสั่ง switch case คือ จะตรวจสอบค่ าของตัวแปร ถ้ าตรงตาม
เงื่อนไขใดก็จะทาตามคาสั่งนัน้ ๆ จนกว่ าจะเจอ คาสั่ง break
• syntax:
switch(variable) {
case value_1
: structure;
break;
case value_2
: structure;
break;
default
: structure;
break; }
<script Language ="JavaScript">
var num = 70;
switch(num){
case 100
: document.write("get 100 Baht");
break;
case 50
: document.write("get 50 Baht");
break;
default
: document.write("get 0 Baht");
break; }
</script>
37
• คาสั่ง for คือ จะทางานเมื่อเงื่อนไขเป็ นจริง และจะจบการทางาน
เมื่อเงื่อนไขเป็ นเท็จ โดยแต่ ละรอบของการวนลูป จะมีการเพิ่มค่ า
ตามที่กาหนด
syntax:
For( ค่าเริ่มต้ น; เงื่อนไข; การเพิม่ ค่า )
{
structure;
}
<script Language ="JavaScript">
for(var i=1; i<20; i++ ) {
document.write( i + " get 100 Baht<br>");
}
</script>
38
• คาสั่ง while คือ จะทางานเมื่อเงื่อนไขเป็ นจริ ง และจะจบ
การทางานเมื่อเงื่อนไขเป็ นเท็จ
• syntax:
<script Language ="JavaScript">
while(เงื่อนไข) {
structure;
}
var num = 10;
while ( num > 0 ) {
document.write( num + " get 100 Baht<br>");
num--;
}
</script>
39
• คาสั่ง do while คือ จะทางานก่ อน 1 ครั ง้ แล้ วหลังจากนัน
้
จะทางานก็ต่อเมื่อเงื่อนไขยังเป็ นจริงอยู่ และจะจบการ
ทางานเมื่อเงื่อนไขเป็ นเท็จ
syntax:
do{
structure;
}while( เงื่อนไข );
<script Language ="JavaScript">
var num = 10;
do{
document.write( num + " get 100 Baht<br>");
num--;
}while(num>0);
</script>
40
• Break; เพื่อหยุดและออกจากการทางานวนลูป
• Continue; เพื่อหยุดการทางานวนลูปรอบปั จจุบน
ั และไป
ทางานในรอบต่ อไป
41
• คาสั่ง expression คือ ใช้ กาหนดคาสั่งแบบมีเงื่อนไข
• syntax:
variable = condition ? value_when_true : value_when_false ;
<script Language ="JavaScript">
var num=100;
var str = (num==100) ? alert("many") : alert( "little") ;
</script>
42
• คาสั่ง with ใช้ เพื่อที่จะระบุ object เพียงครั ง้ เดียว แล้ ว
เรียกใช้ property หรือ method ต่ างของ object นัน้ ๆ ได้ เลย
( สามารถช่ วยลดเวลาการทางานของโปรแกรมได้ )
• syntax:
<script Language ="JavaScript">
with(object) {
property; method;
}
with(Math){
alert(E);
alert(PI);
}
</script>
43
• toString()
• ใช้ แปลงชนิดข้ อมูล ของชื่อตัวแปรที่กาหนด ให้ เป็ น string
var num = 25;
alert ( num.toString() );
• toString(base)
• ใช้ แปลงเลขฐาน จากฐาน 10 ไปเป็ นฐาน 2, 8, 16
var num = 25;
alert(num.toString(2));
alert(num.toString(8));
alert(num.toString(16));
<script Language ="JavaScript">
var num = 25;
alert(num.toString(2));
alert(num.toString(8));
alert(num.toString(16));
</script>
44
• toString(10)
• ใช้ แปลงเลขฐาน จากฐาน 2, 8, 16 ไปเป็ นฐาน 10
var octnum = 0702;
var hexnum = 0xAF;
alert ( octnum.toString(10) );
alert ( hexnum.toString(10) );
หมายเหตุ การกาหนดค่ าของเลขฐาน 8 ต้ องมี 0 นาหน้ า การ
กาหนดค่ าของเลขฐาน 16 ต้ องมี 0x นาหน้ า
45
• constructor;
• ใช้ คืนค่ า constructor ที่สร้ าง object นีข้ ึน้ มา ( ชื่อคลาสนั่นเอง )
var str = new String(“iamsanya");
alert(str.constructor);
• prototype;
ใช้ สร้ าง Property หรือ Method ใหม่ ให้ กับ object
var str = new String ( "iamsanya1" );
str.propotype.getName = function ()
{
return "iamsanya2";
}
alert(str.getName() );
46
• valueOf()
ใช้ คืนค่ า ค่ าข้ อมูล ของ object
var str = new String (“iamsanya" );
alert (str.valueOf () );
• hasOwnProperty( property );
ใช้ กาหนด Property ให้ กับ object
var str = new String ( "BambooLabCode" );
str.hasOwnProperty ( "name" ) alert ( str.name );
• isPrototypeOf ( parent_object );
ใช้ กาหนดให้ object สิบทอดมาจาก parent_object
var str = new STring ( "BambooLabcode" );
var name; name.isPrototypeOf ( str );
47
• Event คือเหตุการณ์ ต่างๆที่เกิดขึน้ เช่ น ผู้ใช้ คลิกเมาส์ ผู้ใช้ กดปุ่ มบนคีย์บอร์ ด
การพิมพ์ ข้อมูลลงในฟอร์ ม เป็ นต้ น
• Action คือการกระทาใดๆเมื่อมีเหตุการณืเกิดขึน้ เช่ น เมื่อเกิดเหตุการณ์ ท่ ผ
ี ้ ูใช้
คลิกเมาส์ การกระทา ( action ) คือจะกาหนดให้ ปรากฏ Message Box เป็ นต้ น
• Event Bubble เป็ นการตรวจจับ Event จากโค้ ดภายในสุด ( tag ในสุด ) แล้ ว
ทางานตามลาดับออกมาข้ างนอกสุด ( tag นอกสุด ) เช่ น browser IE
• Event Propagation เป็ นการตรวจจับ Event จากโค้ ดภายนอกสุด ( tag นอกสุด
) แล้ วทางานตามลาดับเข้ าไปข้ างในสุด ( tag ในสุด ) เช่ น browser Netscape
48
•
•
•
•
•
•
•
•
•
•
•
•
•
content:onLoad จะทางานเมื่อ มีการโหลด window หรื อ frame ขึน้ มา
onUnLoad จะทางานเมื่อ มีการกดปิ ด web page
onError จะทางานเมื่อ มีความผิดพลาดเกิดขึน้ บน web page
onAbort จะทางานเมื่อ มีการยกเลิกการทางาน เช่ น การหยุด download
onMove จะทางานเมื่อ มีการย้ าย window หรื อ frame
onResize จะทางานเมื่อ มีการปรั บขนาดของ window หรื อ frame
onScroll จะทางานเมื่อ มีการเลื่อน scrollbar
onFocus จะทางานเมื่อ object นัน้ ๆได้ รับ focus
onBlur จะทางานเมื่อ object นัน้ ๆสูญเสีย focus
onDblClick จะทางานเมื่อ มีการ double click ที่ Object นัน้ ๆ
onClick จะทางานเมื่อ มีการ click ที่ object นัน้ ๆ
onSubmit จะทางานเมื่อ มีการกด submit ใน form
onReset จะทางานเมื่อ มีการกด reset ใน form
49
•
•
•
•
•
•
•
•
•
•
onMouseMove จะทางานเมื่อ มีการเลื่อนเมาส์ อยู่บน object
onMouseOver จะทางานเมื่อ มีการเลื่อนเมาส์ อยู่บน object นัน้ ๆครั ง้ แรก
onMouseOut จะทางานเมื่อ มีการเลื่อนเมาส์ ออกจาก object นัน้ ๆครั ง้ แรก
onMouseDown จะทางานเมื่อ มีการคลิกเมาส์ ลงบน object นัน้ ๆ
onMouseUp จะทางานเมื่อ มีการปล่ อยเมาส์ ท่ คี ลิกลงบน object นัน้
onKeyPress จะทางานเมื่อ มีการกดปุ่ มใดๆบน keyboard บน object นัน้ ๆ
onKeyDown จะทางานเมื่อ มีการกดปุ่ มใดๆบน Keyboard บน object นัน้ ๆ
onKeyUp จะทางานเมื่อ มีการปล่ อยปุ่ มที่กดบน Keyboard บน object นัน้
onSelect จะทางานเมื่อ มีการลาแถบสีคลุมข้ อความในช่ องรั บข้ อมูล
onChange จะทางานเมื่อ ข้ อมูลในช่ องรั บข้ อมูลมีการเปลี่ยนแปลง
50
• Window ได้ แก่ onLoad, onUnLoad, onError, onResize, onFocus,
onBlur, onMove
• Document ได้ แก่ onLoad, onUnLoad, onResize, onFocus, onBlur,
onDblClick, onClick, onMouseMove, onMouseOver, onMouseOut,
onMouseDown, onMouseUp, onKeyPress, onKeyDown, onKeyUp
• HyperTextLink ได้ แก่ onLoad, onFocus, onClick, onMouseOver
51
• Form ได้ แก่ onSubmit, onReset
• TextElement ได้ แก่ onFocus, onBlur, onClick, onKeyPress,
onKeyDown, onKeyUp, onSelect, onChange, onSelectStart
• Submit Button ได้ แก่ onFocus, onBlur, onClick, onSelect,
onSelectStart
• Reset Button ได้ แก่ onFocus, onBlur, onClick, onSelect,
onSelectStart
52
• Button Element ได้ แก่ onFocus, onBlur, onClick,
onMouseDown, onMouseUp
• CheckBox ได้ แก่ onFocus, onBlur, onClick,
onMouseDown, onMouseUp
• RadioButton ได้ แก่ onFocus, onBlur, onClick, onSelect,
onSelectStart
• SelectionList ได้ แก่ onFocus, onBlur, onClick, onChange
53
ตัวแปรแบบอาร์ เรย์ (Array) หมายถึงตัวแปรซึ่งมีค่าได้
หลายค่ าโดยใช้ ช่ ืออ้ างอิงเพียงชื่อเดียว ด้ วยการใช้ หมายเลข
ลาดับเป็ นตัวจาแนกความแตกต่ างของค่ าตังแปรแต่ ละตัว ถ้ า
เราจะเรียกตัวแปรชนิดนีว้ ่ า "ตัวแปรชุด" ก็ไม่ ผิดนัก
54
ในตัวแปรแบบอาร์ เรย์ มีดัชนีเป็ น 0 ส่ วนตัวแปรต่ อ ๆ ไปก็จะมี
ดัชนีเป็ น 1,2,3,... ไปตามลาดับ เมื่อต้ องการระบุช่ ือตัวแปรแบบ
อาร์ เรย์ แต่ ละตัว ก็จะใช้ รูปแบบ name[0], name[1],... เรี ยงต่ อกัน
ไปเรื่ อยๆ สามารถสร้ างตัวแปรอาร์ เรย์ ใหม่ ด้วย
Array ( int ); มีตัวอย่ างดังนี ้
var myArray = new Array ( 3 );
myArray[0] = 20;
myArray[1] = “Alex";
myArray[2] = "Stop";
55
การประกาศตัวแปรเป็ นการกาหนดขนาดของพืน้ ที่ใน
หน่ วยความจาสาหรั บเก็บค่ าของข้ อมูล รายละเอียดของการ
ประกาศสร้ างตัวแปรอาร์ เรย์ มีดังต่ อไปนี ้
56
การประกาศตัวแปรอาร์ เรย์
ชื่อตัวแปรอาร์ เรย์ = new Array (จานวนสมาชิก);
การกาหนดค่ าให้ กับตัวแปรอาร์ เรย์
ตัวแปร [Index] = ข้ อมูล;
57
การรับข้ อมูลให้ กับตัวแปรอาร์ เรย์ เป็ นวิธีการในการกาหนดค่ า
ให้ กับตัวแปรอาร์ เรย์ โดยป้อนข้ อมูลที่ต้องการผ่ านแป้นพิมพ์ โดยใช้
คาสั่ง PROMPT( ... ) ในการรับข้ อมูลมีรายละเอียดดังนี ้
ตัวแปร [Index] = prompt("ข้ อความนา", "ค่ าเริ่มต้ น");
58
การกาหนดค่ าเริ่มต้ นให้ กับอาร์ เรย์ (Initial value) เป็ นการกาหนดค่ า
โดยตรงให้ กับตัวแปรอาร์ เรย์ ในขณะที่มีการประกาศเริ่มใช้ ตัวแปรอาร์ เรย์
ค่ าที่กาหนดนีถ้ ือว่ าเป็ นค่ าเริ่มต้ นในการกาหนดค่ าใด ๆ ให้ กับตัวแปรอาร์ เรย์
มีรูปแบบการกาหนดดังนี ้
รูปแบบ  ชื่อตัวแปรอาร์ เรย์ = new Array (ข้ อมูล1, ข้ อมูล2, ... );
var arr = new Array(“a1”, “a3”, “a5”, “a7”);
หรือ var arr = [ “a1", “a3", “a5", “a7" ];
59
ชนิดของฟั งก์ ชัน
ฟั งก์ ชันใน ภาษาJavaScript มีอยู่ด้วยกัน 2 แบบ คือ
• ฟั งก์ ชันมาตรฐาน (Standard Function) เป็ นแบบชื่อของฟั งก์ ชันที่
มีอยู่แล้ วในภาษา JavaScript สามารถนาเอาไปใช้ งานได้ ทนั ที
• ฟั งก์ ชันสร้ างขึน้ เอง (User-defined Function) เป็ นแบบชื่อของ
ฟั งก์ ชันที่ผ้ ูใช้ สร้ างขึน้ มาใช้ เอง เพื่อกาหนดให้ทางานใดงานหนึ่ง
จนสาเร็จ
60
เป็ นการกาหนดทิศทางการทางานของคาสั่ง หรือ กาหนดส่ วน
ของโปรแกรมให้ ทางานใดงานหนึ่งจนสาเร็จ เมื่อต้ องการใช้ งานก็ให้
พิมพ์ ช่ ือฟั งก์ ชันนีล้ งไปตรง ๆ แต่ จะต้ องจาให้ แม่ นว่ าต้ องพิมพ์ ให้
เหมือนทัง้ ชื่อและตัวอักษรตัวพิมพ์ ใหญ่ -เล็ก มีรูปแบบการเรียกใช้
ดังนี ้
รูปแบบ  ตัวแปร = ชื่อฟั งก์ ชัน();
61
การสร้ างฟั งก์ ชันขึน้ ใช้ เอง (User-defined Function) เป็ นแบบชื่อของฟั งก์ ชันที่
ผู้ใช้ สร้ างขึน้ มาเพื่อกาหนดให้ ทางานใดงานหนึ่งจนสาเร็จ การสร้ างฟั งก์ ชันนัน้
จะขึน้ ต้ นด้ วยคาว่ า function ตามด้ วยชื่อของฟั งก์ ชันที่ต้องการ มีรายละเอียด
ดังนี ้
function ชื่อฟั งก์ชนั (พารามิเตอร์ 1, พารามิเตอร์ 2, ...)
{ ข้ อคาสัง่
............
............
}
62
การวางตาแหน่ งฟั งก์ ชันมีลักษณะเช่ นเดียวกับการวางตาแหน่ งสคริ ปต์ นั่นคือ
จะวางไว้ ในส่ วนของ <HEAD> หรื อวางไว้ ในส่ วนของ <BODY>อย่ างไรก็ขึน้ อยู่
กับว่ าต้ องการให้ ฟังก์ ชันนนัน้ ถูกโหลดใช้ งานก่ อนหรื อหลัง ตามลาดับการ
เรี ยกใช้ งาน
63
<html>
<head><tiltle> ข้ อความแถบเรื่ อง </title>
<script Language = "JavaScript">

</SCRIPT>
</HEAD>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
71
• แก้ ปฏิทน
ิ ให้ เป็ นภาษาไทย
• <script language="JavaScript">
monthnames = new Array(
"มกราคม",
"กุมภาพันธ์ ",
"มีนาคม",
"เมษายน",
"พฤษภาคม",
"มิถุนายน",
"กรกฎาคม",
"สิงหาคม",
"กันยายน",
"ตุลาคม",
"พฤศจิกายน",
"ธันวาคม");
document.write("<tr>");
document.write("<td align=center>อา</td>");
document.write("<td align=center>จ</td>");
document.write("<td align=center>อ</td>");
document.write("<td align=center>พ</td>");
document.write("<td align=center>พฤ</td>");
document.write("<td align=center>ศ</td>");
document.write("<td align=center>ส</td>");
72
• การสุ่มตัวเลข ก็เป็ นฟั งก์ ชันมาตรฐานที่มักมีการนาไปประยุกต์ ใช้ กันหลาย
รู ปแบบ
• ขัน
้ ตอนที่ 1 สร้ างรหัส JavaScript ไว้ ใน Head Section
• ขัน
้ ตอนที่ 2 สร้ างรหัส JavaScript สาหรั บการแสดงผลไว้ ใน Body Section
<SCRIPT language="JavaScript">
<!-var maxNumber = 1000;
var randomNumber = Math.round(maxNumber * Math.random());
//--></SCRIPT>
<SCRIPT language="JavaScript">
document.write(randomNumber);
//--></SCRIPT>
73
• สร้ างรหัส JavaScript ไว้ ใน Head Section
<SCRIPT LANGUAGE="JavaScript">
<!-hexa = new Array(16);
for(var i = 0; i < 10; i++) hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
function hex(i) {
if (i < 0) return "00";
else if (i > 255) return "ff";
else return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}
function setbgColor(r, g, b) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
if (document.body)
document.body.style.backgroundColor="#"+hr+hg+hb;
else document.bgColor = "#"+hr+hg+hb;
}
รายการสีแดง คือค่าสีและความหน่วงที่ต้องกาหนดเอง เช่น
fade(0,0,0,255,255,255,100);
var sr,sg,sb,er,eg,eb,step,at;
function setBg() {
setbgColor(
Math.floor(sr * ((step-at)/step) + er * (at/step)),
Math.floor(sg * ((step-at)/step) + eg * (at/step)),
Math.floor(sb * ((step-at)/step) + eb * (at/step)));
at++;
if (at<=step) setTimeout("setBg()",5);
}
function fade(a,b,c,d,e,f,g) {
sr=a;sg=b;sb=c;er=d;eg=e;eb=f;step=g;at=1;
setBg();
}
function swtStart() {fade(ค่าสี R1,ค่าสี G1, ค่าสี B1, ค่าสี R2, ค่าสี
G2, ค่าสี B2, ตัวเลขความหน่วง);}
window.onload=swtStart;
// -->
</SCRIPT>
74
out+=msg;
count--;
window.status=out;
cmd="scrollmessage("+count+")";
timerTwo=window.setTimeout(cmd,100);
}
else if (count <= 0) {
if (-count < msg.length) {
out+=msg.substring(-count,msg.length);
count--;
window.status=out;
cmd="scrollmessage("+count+")";
timerTwo=window.setTimeout(cmd,100);
}
else {
window.status=" ";
timerTwo=window.setTimeout("scrollmessage(100)",75)
;
}
}
}
// done hiding -->
75
</SCRIPT>
จากนันเพิ
้ ่ม Attribute ให้ กบั Body Tag ดังนี ้
• สร้ างรหัส JavaScript ไว้ ใน Head Section
<SCRIPT language="JavaScript">

• Sample
<html>
<head>
<title>iamsanya.com Tutorial</title>
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.iamsanya.com">
</head>
<body>
Please visit at www.iamsanya.com
</body>
</html>
• JavaScript alert & confirm ตัวอย่ างนีจ้ ะเป็ นการใช้
JavaScript ในส่ วนของ alert และ confirm
• Sample1 การใช้ alert ใช้ กรณีท่ ต
ี ้ องการแสดงข้ อความเตือนหรื อแจ้ งให้ ผ้ ูใช้ ทราบ
<html>
<head>
<title>iamsanya.com Tutorial</title>
</head>
<body>
<script language="javascript">
function fncAlert()
{
alert('Hello iamsanya.com');
}
</script>
<script language="javascript">
alert('Hello Weerachai Nukitram');
</script>
<input name="btnButton1" type="button" value="Hello 1" OnClick="JavaScript:alert('Hello iamsanya.com');">
<input name="btnButton2" type="button" value="Hello 2" OnClick="JavaScript:fncAlert();">
</body>
</html>
• Sample2 การใช้ confirm เพื่อยืนยันจากผู้ใช้
<html>
<head>
<title>iamsanya.com Tutorial</title>
</head>
<body>
<script language="javascript">
function fncConfirm1()
{
if(confirm('Goto 1')==true)
{
window.location = 'page1.cgi';
}
}
function fncConfirm2()
{
if(confirm('Goto 2')==true)
{
window.location = 'page2.cgi';
}
}
function fncClose()
{
if(confirm('Close Browser')==true)
{
window.close();
}
}
function fncSubmit()
{
if(confirm('Submit Form')==true)
{
document.form1.submit();
}
}
</script>
<form action="page.cgi" method="post" name="form1">
Please input <input name="txtName" type="txt" id="txtName"><br>
<input name="btnButton1" type="button" value="Goto 1" OnClick="JavaScript:fncConfirm1();">
<input name="btnButton2" type="button" value="Goto 2" OnClick="JavaScript:fncConfirm2();">
<input name="btnButton3" type="button" value="Submit Form" OnClick="JavaScript:fncSubmit();">
<input name="btnButton4" type="button" value="Close" OnClick="JavaScript:fncClose();">
</body>
</html>
• JavaScript HTML Multi-Change Action Form ตัวอย่ างนีจ้ ะ
เป็ นการใช้ JavaScript ควบคุม Action การ Submit Form
• Sample1 การใช้ JavaScript ในการการควบคุมทิศทางของ Action
<html>
<head>
<title>iamsanya.com Tutorial</title>
</head>
<body>
<script language="javascript">
function fncSubmit(strPage)
{
if(strPage == "page1")
{
document.form1.action="page1.cgi";
}
if(strPage == "page2")
{
document.form1.action="page2.cgi";
}
document.form1.submit();
}
</script>
<form action="page.cgi" method="post" name="form1">
<input name="txtName" type="text" id="txtName">
<input name="btnButton1" type="button" value="Button" onClick="JavaScript:fncSubmit('page1')">
<input name="btnButton2" type="button" value="Button" onClick="JavaScript:fncSubmit('page2')">
</form>
</body>
</html>
• JavaScript HTML Check Checkbox ตัวอย่ างนีจ้ ะเป็ นการใช้
JavaScript ควบคุม การตรวจสอบค่ าว่ างของ Checkbox
• Sample1 การใช้ JavaScript ในการตรวจสอบค่ าว่ างของ Checkbox
<html>
<head>
<title>iamsanya.com Tutorial</title>
</head>
<body>
<script language="javascript">
function fncSubmit()
{
if(document.form1.chk1.checked == false)
{
alert('Please Click Checkbox 1 ');
return false;
}
if(document.form1.chk2.checked == false)
{
alert('Please Click Checkbox 2 ');
return false;
}
document.form1.submit();
}
</script>
<form action="page.cgi" method="post" name="form1" onSubmit="JavaScript:return fncSubmit();">
Checkbox 1
<input name="chk1" type="checkbox" id="chk1" value="Y">
<br>
Checkbox 2
<input name="chk2" type="checkbox" id="chk2" value="Y">
<br>
<input name="btnSubmit" type="submit" value="Submit" >
</form>
</body>
</html>
• JavaScript HTML Back/Next/Close/Print ตัวอย่ างนีจ้ ะเป็ น
การใช้ JavaScript ควบคุม Event ต่ าง ๆ
Sample การใช้ JavaScript ควบคุม Event ต่ าง ๆ
ปุ่ ม Back
<input name="btnButton" type="button" value="Back" onClick="JavaScript:history.back();">
<input name="btnButton" type="button" value="Back" onClick="JavaScript:history.go(-1);">
ปุ่ ม Next
<input name="btnButton" type="button" value="Next" onClick="JavaScript:history.go(1);">
ปุ่ ม Close ปิ ด Window Browser
<input name="btnButton" type="button" value="Close" onClick="JavaScript:window.close();">
• ปุ่ ม Print
<input name="btnButton" type="button" value="Print"
onClick="JavaScript:window.print();">
//*** Print Method ***//
window.print();
parent.framename.print();
document.frames('iFrameName').print();
window.self.print();
print();
• JavaScript HTML Show/Hide Html Element ตัวอย่ างนีจ้ ะ
เป็ นการใช้ JavaScript ควบคุมการ ซ่ อน/แสดง ในส่ วนของ
Html Element
• Sample
<html>
<head>
<title>iamsanya.com Tutorial</title>
</head>
<body>
<form action="page.cgi" method="post" name="form1" onSubmit="JavaScript:return fncSubmit();">
<input name="txt1" type="text" id="txt1" value="Value">
<input name="rdo1" type="radio" value="Y" checked onClick="javaScript:if(this.checked){document.all.txt1.style.display='';}">
Show
<input name="rdo1" type="radio" value="N" onClick="javaScript:if(this.checked){document.all.txt1.style.display='none';}">
Hide
<br>
<br>
<input name="chk1" type="checkbox" id="chk1" value="Y" checked>
Checkbox
<input name="rdo2" type="radio" value="Y" checked onClick="javaScript:if(this.checked){document.all.chk1.style.display='';}">
Show
<input name="rdo2" type="radio" value="N" onClick="javaScript:if(this.checked){document.all.chk1.style.display='none';}">
Hide<br>
<br>
<table width="196" border="1" id="tbName">
<tr>
<td> </td>
</tr>
</table>
<input name="rdo3" type="radio" value="Y" checked onClick="javaScript:if(this.checked){document.all.tbName.style.display='';}">
Show
<input name="rdo3" type="radio" value="N" onClick="javaScript:if(this.checked){document.all.tbName.style.display='none';}">
Hide<br>
<br>
<span id="spName">Text www.iamsanya.com</span>
<input name="rdo4" type="radio" value="Y" checked
onClick="javaScript:if(this.checked){document.all.spName.style.display='';}">
Show
<input name="rdo4" type="radio" value="N"
onClick="javaScript:if(this.checked){document.all.spName.style.display='none';}">
Hide<br>
<br>
<input name="btnSubmit" type="submit" value="Submit" onClick="JavaScript:this.disabled=true;">
</form>
</body>
</html>
• JavaScript Reload/Refresh Webpage เป็ นตัวอย่ างการใช้
JavaScript ในการ สั่ง Reload หรือ Refresh Webpage
Syntax
window.location.reload()
• Sample
<html>
<head>
<title>iamsanya.com Tutorial</title>
</head>
<body>
<script langauge="JavaScript">
window.location.reload();
</script>
</body>
</html>
• JavaScript Timers Delay setTimeOut เป็ นฟั งก์ ช่ ันของ JavaScript ที่เข้ ามาจัดการ
เกี่ยวกับในส่ วนของ Timer หรือ Time Delay เพื่อนับถอยหลังการทางาน หรือ รอ
ระยะเวลาที่กาหนด
Syntax
setTimeOut("alert('iamsanya.com');",5000);
setTimeOut("call function();",5000);
// หน่ วย 1000 = 1 วินาที
• Sample
<html>
<head>
<title>iamsanya.com Tutorial</title>
</head>
<body Onload="JavaScript:bodyOnload()";>
<script language="JavaScript">
function bodyOnload()
{
setTimeOut("alert('Welcome to www.iamsanya.com');",5000);
setTimeOut("alertWelcome();",5000);
}
function alertWelcome()
{
alert('Welcome to www.iamsanya.com');
}
</script>
</body>
</html>
• JavaScript Click Check All and Un Check All การทาปุ่ ม
Checkbox แบบ Check All และ Un Check All เพื่อ เลือก/
ไม่ เลือก ข้ อมูลทัง้ หมด
• Sample
<html>
<head>
<title>iamsanya.com Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script language="JavaScript">
function ClickCheckAll(vol)
{
var i=1;
for(i=1;i<=document.frmMain.hdnCount.value;i++)
{
if(vol.checked == true)
{
eval("document.frmMain.Chk"+i+".checked=true");
}
else
{
eval("document.frmMain.Chk"+i+".checked=false");
}
}
}
</script>
<form action="" method="post" name="frmMain" id="frmMain">
<table width="531" border="1">
<tr>
<td width="34"><div align="center">
<input name="CheckAll" type="checkbox" id="CheckAll" value="Y" onClick="ClickCheckAll(this);">
</div></td>
<td width="117"><div align="center">Customer ID </div></td>
<td width="134"><div align="center">Name</div></td>
<td width="218"><div align="center">Surname</div></td>
</tr>
<tr>
<td><div align="center">
<input name="Chk1" type="checkbox" id="Chk1" value="C001">
</div></td>
<td> <div align="center">C001 </div></td>
<td> Alex Sanya </td>
<td> [email protected] </td> </tr>
<tr>
<td><div align="center">
<input name="Chk2" type="checkbox" id="Chk2" value="C002">
</div></td>
<td> <div align="center">C002</div></td>
<td> John Smith </td>
<td> [email protected] </td>
</tr>
<tr>
<td><div align="center">
<input name="Chk3" type="checkbox" id="Chk3" value="C003">
</div></td>
<td> <div align="center">C003</div></td>
<td> Jame Born </td>
<td> [email protected] </td>
</tr>
<tr>
<td><div align="center">
<input name="Chk4" type="checkbox" id="Chk4" value="C004">
</div></td>
<td> <div align="center">C004</div></td>
<td> Chalee Angel </td>
<td> [email protected] </td>
</tr>
</table>
<input type="hidden" name="hdnCount" value="4">
</form>
</body>
</html>
Screenshot
206

Document

Transcript Document

Directory