ภาษา JavaScript Webpage Design and Programming Workshop ( )

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
INTRODUCTION TO C LANGUAGE
Advertisements

Lecture 5: ทางเลือกแบบหลายทาง
Control Statement if..else switch..case for while do-while.
คำสั่งในการควบคุมโปรแกรม
โปรแกรมควบคุมเลือกทำตามเงื่อนไข
Lecture no. 5 Control Statements
เทคนิคการสร้างแบบทดสอบ
Java Script 2 Structure Flow Control Function and Method Event Handler
Location object Form object
JavaScript.
คำสั่งเพื่อการกำหนดเงื่อนไข
Lab 4: คำสั่ง if - else อ.ณัฐพงศ์ พยัฆคิน.
Client-Side Scripts เอกสารประกอบการบรรยาย รายวิชา Browser-Based Application Development.
โครงสร้างคำสั่งแบบเลือก (Selection)
ASP [#12] ตัวอย่าง VBScript เพื่อใช้ตรวจสอบค่าบนฟอร์ม
SQL Server using Transact-SQL
Functions & Sub Program ฟังก์ชันและโปรแกรมย่อย
Relational Operators by Accords (IT SMART CLUB 2006) by Accords 1.
คำสั่งควบคุม (Control Statement)
Javascripts.
หน่วยที่ 4: คำสั่งควบคุมโปรแกรม (Control Flow Command)
โครงสร้างควบคุมการทำงาน
การจัดการกับเหตุการณ์ Event Handling
พื้นฐานการโปรแกรม ต้องทราบการใช้คำสั่ง การควบคุม
คำสั่งควบคุมการทำงานของ ActionScripts
บทที่ 6 การควบคุมโปรแกรม.
การสร้าง WebPage ด้วย Java Script Wachirawut Thamviset.
คำสั่งควบคุมขั้นตอน Flow control statements
วิทยา กรระสี (วท.บ. วิทยาการคอมพิวเตอร์)
หลักสูตรอบรมครู คอมพิวเตอร์ หลักสูตรอบรมครู คอมพิวเตอร์ หลักสูตรที่ ๑ ทักษะการโปรแกรม เบื้องต้น วันที่สาม.
คำสั่งแบบมีเงื่อนไข Conditional Statements
การเปรียบเทียบเงื่อนไข
Computer Programming การเขียนโปรแกรม คอมพิวเตอร์ สัปดาห์ที่ 6 คำสั่งควบคุมการทำงานแบบ เงื่อนไขและคำสั่งควบคุมการ ทำงานแบบวนซ้ำ.
PHP. What You Should Already Know HTML CSS JavaScript.
Chapter 9 WWW (2).
การเปรียบเทียบเงื่อนไข
JavaSCript.
ภาษา HTML5 Webpage Design and Programming Workshop ( )
Computer Programming I โดย อ.วิมลศรี เกตุโสภณ สาขาวิชาระบบสารสนเทศ
การประมวลผลแบบวน ( LOOP )
C Programming By Mr. Sanae Sukprung.
การควบคุมทิศทางการทำงาน
คำสั่งเงื่อนไขและการใช้คำสั่งจัดการฐานข้อมูล
บทที่ 6 การเขียนโปรแกรมแบบมีเงื่อนไข
INC 161 , CPE 100 Computer Programming
WEEK5-2: 14 SEP 2017 Input / Output Selection Statement
Control Statements.
ใช้สำหรับ Turbo C++ Version 3.0
ภาษา C เบื้องต้น.
Computer Programming การเขียนโปรแกรมคอมพิวเตอร์
คำอธิบายรายวิชา การเขียนผังงาน รหัสเทียม ตรรกศาสตร์เบื้องต้น การเขียนโปรแกรมคอมพิวเตอร์แบบโครงสร้าง ชนิดตัวแปร ตัวดำเนินการทางตรรกะ ตัวดำเนินการเปรียบเทียบ.
PHP (2) - condition - loop
โครงสร้างการทำงานแบบทางเลือก
การออกแบบระบบ System Design.
อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ
JAVASCRIPT Jquery – Web Programming and Web Database
อาจารย์สุธารัตน์ ชาวนาฟาง
DOM Document Object Model.
Dr.Surasak Mungsing CSE 221/ICT221 การวิเคราะห์และออกแบบขั้นตอนวิธี Lecture 04: การวิเคราะห์หาความซับซ้อนด้านเวลา ในรูป.
การประชุม โครงการบูรณาการข้อมูลกลาง มหาวิทยาลัยขอนแก่น ครั้งที่ 19
JavaScript&CSS&DOM.
บทที่ 7 การเขียนโปรแกรม แบบวนรอบทำซ้ำ (Loop) Part2
Basic PHP หมายเหตุ แต่ละคำสั่งในภาษา PHP จะจบท้ายคำสั่งด้วย semicolon (;) คำสั่งหรือฟังก์ชันในภาษา PHP นั้นจะเขียนด้วยตัวพิมพ์เล็กหรือใหญ่ก็ได้ การกำหนดและใช้ตัวแปร.
ข้อความสั่งควบคุม.
DOM Document Object Model
Algorithms Analysis Sanchai Yeewiyom
การวิเคราะห์และออกแบบขั้นตอนวิธี
การเขียนโปรแกรมภาษา Java (ต่อ)
Decision: Multi Selection (if-else-if, switch)
โครงสร้างของโปรแกรมเกมคอมพิวเตอร์
ใบสำเนางานนำเสนอ:

ภาษา JavaScript Webpage Design and Programming Workshop (7152306) อาจารย์สุธารัตน์ ชาวนาฟาง สาขาวิศวกรรมซอฟต์แวร์ มหาวิทยาลัยราชภัฏนครปฐม

ภาษา JavaScript เป็นภาษาสำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต เพื่อใช้ประโยชน์สำหรับงานด้านต่างๆ ทั้งการคำนวณ การแสดงผล การรับ-ส่งข้อมูล สามารถโต้ตอบกับผู้ใช้ได้อย่างทันทีทัน

จุดเด่นของภาษาสคริปต์ฝั่งไคลเอนท์ สคริปต์ฝั่งไคลเอนท์จะถูกประมวลผลโดยเครื่องคอมพิวเตอร์ของผู้ใช้ ดังนั้นจึงทำงานได้รวดเร็ว สคริปต์ประเภทนี้ยังนำมาใช้ซ้ำได้ง่ายมาก เพราะแค่คัดลอกโค๊ดมาวางในภาษา HTML ก็สามารถใช้งานได้ทันที แต่บางสคริปต์อาจต้องแก้นำมาแก้ไขบ้าง เช่น สคริปต์ที่ใช้แสดงข้อมูลซึ่งจะต้องแก้ไขข้อมูลที่ต้องการแสดงให้เป็นข้อมูลของเรา

ลักษณะการทำงานของ JavaScript เป็น Client-Side JavaScript : ถูกแปลทางฝั่งไคลเอนต์ จึงมีความเหมาะสมต่อการใช้งานของผู้ใช้ทั่วไปเป็นส่วนใหญ่ เป็น Server-Side JavaScript : ถูกแปลทางฝั่งเซิร์ฟเวอร์ (หมายถึงฝั่งเครื่องคอมพิวเตอร์ของผู้ให้บริการเว็บ

วิธีการแทรกภาษา JavaScript การเขียนคำสั่งในส่วน body การเขียนคำสั่งในส่วน head การเขียนคำสั่งแยกไว้เป็นไฟล์ภายนอกเว็บเพจ

วิธีการแทรกภาษา JavaScript 1. การเขียนคำสั่งในส่วน body <html> <head></head> <body> <script type="text/javascript">document.write ("This message is written by JavaScript"); </script> </body> </html

วิธีการแทรกภาษา JavaScript 2. การเขียนคำสั่งในส่วน head <html><head> <script type="text/javascript"> function message(){ alert("This alert box was called with the onloadevent"); } </script> </head> <body onload="message()"> ………………………………………………….. </body></html>

วิธีการแทรกภาษา JavaScript 3. การเขียนคำสั่งแยกไว้เป็นไฟล์ภายนอกเว็บเพจ <html><head> <script type="text/javascript" src="xxx.js"> </script> </head> <body> ………………………………………………….. </body> </html>

การประกาศตัวแปร ตัวแปร ความหมาย Var ชื่อตัวแปร; เป็นรูปแบบการประกาศตัวแปรปกติ หรือ Var ชื่อตัวแปร = ข้อมูล; เป็นรูปแบบการกำหนดค่าเริ่มต้น

การกำหนดค่าให้ตัวแปร รูปแบบ คำอธิบาย 1. ข้อมูลที่เป็นตัวเลข โดยกำหนดตัวเลขไปได้เลย เช่น num = 500 2. ข้อมูลในทางตรรกะ ได้แก่ จริง (True) หรือ เท็จ (False) เช่น test = True; 3. ข้อมูลสตริง ให้กำหนดอยู่ในเครื่องหมายคำพูด ("...") เช่น name = "Adisak"; ชื่อตัวแปร = ค่าของข้อมูล var x; var carname; Var x=5; var carname="Volvo";

ตัวดำเนินการ (Operators) ตัวดำเนินทางคณิตศาสตร์ เช่น เครื่องหมาย +, -, x, / ตัวดำเนินการที่ใช้กำหนดค่า เช่น เครื่องหมาย +=, -=, *=, /=, %= ตัวดำเนินการเปรียบเทียบ ได้แก่ เครื่องหมาย ==, !=, >, <,_>=, <= ตัวดำเนินการทางตรรกะ ในทางตรรกะเป็นจริงหรือเท็จ ประกอบด้วยเครื่องหมาย &&, ||, และ ! ซึ่งแทนการ AND, OR และ NOT ตามลำดับ

คำสั่งเลือกทำ 1. รูปแบบ if statement if(condition) { code to be executed if condition is true } <script type="text/javascript"> var d=new Date(); var time=d.getHours(); if (time>12) { document.write("<b>Good morning</b>"); } </script>

คำสั่งเลือกทำ 2. รูปแบบ if..else statement if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true } <script type="text/javascript"> var d=new Date(); var time=d.getHours(); if (time>12) { document.write("<b>Good morning</b>"); } else { document.write("<b>Good day</b>"); } </script>

คำสั่งเลือกทำ 3. รูปแบบ if..else if..else statement <script type="text/javascript"> var d=new Date(); var time=d.getHours(); if (time>12) { document.write("<b>Good morning</b>"); } else if (time<12 && time <18) { document.write("<b>Good afternoon</b>"); } else { document.write("<b>Good evenning</b>"); } </script> if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if condition1 and condition2 are not true }

คำสั่งเลือกทำ 4. รูปแบบ switch statement switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 default: code to be executed if n is different from case 1 and 2 }

ฟังก์ชันและเมธอด ช่วยเหลือการทำงานต่อโปรแกรมหลัก เมื่อมีการเรียกใช้งาน ทำให้โครงสร้างของโปรแกรมมีขนาดเล็กลง เมื่อมีการเรียกใช้งานเดิมซ้ำ ๆ หลายๆ ครั้ง แทนที่จะเขียนคำสั่งเดิมเพิ่มขึ้นใหม่ซ้ำๆ หลายครั้งทำให้ดูสิ้นเปลืองเนื้อที่ ซ้ำซ้อนและเสียเวลาการทำงาน ฟังก์ชันยังทำให้โปรแกรมอ่านได้ง่ายขึ้น สะดวกในการหาจุดที่ผิดและง่ายต่อการปรับปรุงแก้ไขพัฒนาโปรแกรมให้ดียิ่งขึ้น

ฟังก์ชันและเมธอด 1. ชนิดของฟังก์ชัน มีอยู่ด้วยกัน 2 แบบ คือ Standard Function เป็นแบบชื่อของฟังก์ชันที่มีอยู่แล้วสามารถนำเอาไปใช้งานได้ทันที User-defined Function เป็นแบบชื่อของฟังก์ชันที่ผู้ใช้สร้างขึ้นมาใช้เอง เพื่อกำหนดให้ทำงานใดงานหนึ่งจนสำเร็จ

ตัวแปร = ชื่อฟังก์ชัน(); ฟังก์ชันและเมธอด 2. การเรียกใช้ฟังก์ชัน เป็นการกำหนดส่วนของโปรแกรมให้ทำงานใดงานหนึ่งจนสำเร็จ โดยอ้างอิงชื่อฟังก์ชันของการทำงานที่ต้องการผลของการเรียกใช้ฟังก์ชันจะมีการส่งค่าคืนกลับไปยังโปรแกรมส่วนที่เรียก โดยใช้ชื่อฟังก์ชันเป็นตัวเก็บค่าเปรียบเสมือนหนึ่งกับเป็นตัวแปร ตัวแปร = ชื่อฟังก์ชัน();

ฟังก์ชันและเมธอด 3. การสร้างฟังก์ชันขึ้นใช้เอง function name ชื่อของฟังก์ชันที่สร้างขึ้น ที่ไปซ้ำกับชื่อของฟังก์ชันอื่น parameter ค่าของข้อมูลหรือตัวแปรที่อ้างอิง (arguement) statements คำสั่งต่าง ๆ ที่ประกอบขึ้นเพื่อให้ดำเนินงานภายในฟังก์ชัน ชื่อฟังก์ชัน (พารามิเตอร์1, พารามิเตอร์2, ...) { ข้อคำสั่ง ........................................... .......................................... }

ฟังก์ชันและเมธอด 4. การวางตำแหน่งฟังก์ชัน จะวางไว้ในส่วนของ <HEAD> หรือวางไว้ในส่วนของ <BODY> อย่างไรก็ขึ้นอยู่กับว่าต้องการให้ฟังก์ชันนั้นถูกโหลดใช้งานก่อนหรือหลังตามลำดับการเรียกใช้งานอย่างไร

ตัวอย่างเหตุการณ์ที่ JavaScript สามารถตรวจสอบ Event คือ เหตุการณ์ที่ JavaScript สามารถตรวจสอบได้ มักจะทำงานร่วมกับ function โดย function จะไม่ทำงานถ้าไม่เกิด event ขึ้นก่อน ตัวอย่าง event เช่น เมื่อคลิกเมาส์, เมื่อโหลดหน้าเว็บเพจหรือรูปภาพ, คลิกปุ่มsubmit ในฟอร์ม เป็นต้น

ตัวอย่างเหตุการณ์ที่ JavaScript สามารถตรวจสอบ 1. onFocus, onBlur และ onChange ใช้ในการทำงานตรวจสอบการป้อนข้อมูลในฟอร์ม เป็นตรวจสอบการแก้ไขข้อมูล email ถ้ามีการแก้ไขข้อมูล ให้เรียกใช้ฟังก์ชัน checkMail() <input type="text" size="30" id="email" onchange="checkEmail()">

ตัวอย่างเหตุการณ์ที่ JavaScript สามารถตรวจสอบ 2. onSubmit เหตุการณ์ onSubmit ใช้ในการ validate ทุกฟิลด์ในฟอร์มก่อนการส่งค่า <form method="post" action="xxx.htm" onsubmit="return checkForm()">

ตัวอย่างเหตุการณ์ที่ JavaScript สามารถตรวจสอบ 3. onMouseOverและ onMouseOut  เหตุการณ์ onMouseOver และ onMouseOut มักจะใช้ร่วมกับรูปภาพ

Question and Answer