Embed Size (px)
Citation preview
www . i t s c i .m ju . ac . t h / sayan
INTRODUCTION TO JAVASCRIPT
SAYAN UNANKARD2/2559
1
WHAT IS JAVASCRIPT?
JavaScript เปนภาษาการเขยนโปรแกรมคอมพวเตอรแบบไดนามก มนมน าหนกเบา (lightweight) และ ใชกนมากทสดเปนสวนหนงของหนาเวบ ทมการใชงานทชวยใหสครปตฝงไคลเอนตในการโตตอบกบผใชและทาใหหนาเวบแบบไดนามก อกท งยงสามารถเขยนโปรแกรมทสนบสนนความสามารถในการเขยนโปรแกรมเชงวตถ (object-oriented)
2
ADVANTAGES OF JAVASCRIPT
• Less server interaction: ลดการตดตอเพอใหฝงเซรฟเวอรทางานนอยลง โดยสามารถ validate user input กอนทจะสงไปใหเซรฟเวอรประมวลผลตอไปได
• Immediate feedback to the visitors: ไมจาเปนตองรอใหหนาจอโหลดขอมลใหม ในกรณทผใชลมกรอกขอมลบางสวน
• Increased interactivity: เพมการโตตอบกบผใชมากข น โดยการสราง interfaces ทโตตอบกบผใชเมอผใชมการใชเมาส หรอ คยบอรดทาการใด ๆ เชน นาเมาสไปช ตรงตาแหนงทตองการจะแสดงขอความแนะนา เปนตน
• Richer interfaces: เพมความสามารถของหนาจอ เชน การเพมเครองมอทสามารถลากวาง (drag and drop) หรอ เครองมอเลอนหนาจอ (sliders)
3
LIMITATIONS OF JAVASCRIPT
ขอจากดของการใช JavaScript คอเราไมสามารถเขยนโปรแกรมไดครอบคลมท งหมดเหมอนโปรแกรมภาษาอน ๆ เนองจาก
• Client-side JavaScript ไมอนญาตใหอานและเขยนไฟลได ดวยเหตผลดานความปลอดภย(security reason)
• JavaScript ไมสนบสนนการทางานสาหรบ networking applications
• JavaScript ไมมความสามารถในการทางาน แบบ multithreading หรอ multiprocessor
• JavaScript เปนเครองมอทใชในการประมวลผลภาษาคอมพวเตอรทใหใชงานรวมกบ static HTML pages เทาน น
4
SYNTAX
JavaScript สามารถเขยนคาสงอยภายใต HTML tag โดยระบ tag <script>... </script>ซงสามารถแทรกคาสง <script> tags ไดทกทในหนาเวบ แตโดยทวไปจะนยมวางไวภายใน <head> tags
Script tag ประกอบไปดวย 2 attributes ดงน
• Language: เปนสวนของการระบ scripting language ทตองการใชงาน โดยปกตระบเปน javascript
• Type: เปนชนดของภาษา script ในการใชงาน โดยปกตระบเปน "text/javascript"
5
<script language="javascript" type="text/javascript">JavaScript code
</script>
SYNTAX
Semicolons are Optional
หรอ
6
<script language="javascript" type="text/javascript">var1 = 10var2 = 20
</script>
<script language="javascript" type="text/javascript">var1 = 10; var2 = 20;
</script>
SYNTAX
Case Sensitivity• JavaScript เปน case-sensitive language ดงน นการประกาศตวแปร ชอฟงกชน และ
อน ๆ ทเกยวของจาเปนตองต งชอใหตรงกน
Comments in JavaScript
7
<script language="javascript" type="text/javascript"><!--
// This is a comment. It is similar to comments in C++
/** This is a multiline comment in JavaScript* It is very similar to comments in C Programming*/
//--></script>
ENABLING
โดยปกต browsers ในปจจบนถกพฒนา built-in ใหสนบสนนการทางานของ JavaScript อยแลว โดยผใชสามารถกาหนดใหเปดการใชงาน (enable) หรอ ไมเปดการใชงาน (disable) ดวยตนเองดงน
JavaScript in Internet Explorer• เลอกเมน Tools -> Internet Options
• เลอก Security tab จาก dialog box
• คลกเลอก Custom Level button
• หาสวนของ Scripting option
• เลอก Enable radio button ภายใตหวขอ
Active scripting
• สดทายกดปม OK เปนอนส นสด
8
ENABLING
JavaScript in Firefox• เปด new tab -> พมพ about: config ใน address bar
• จะปรากฏ warning dialog ใหเลอก I’ll be careful, I promise!
• หา list ของ configure options ใน browser
• ใน search bar, พมพ javascript.enabled
• จะปรากฎ option ในการ enable หรอ disable javascript โดยการ double click
9
ENABLING
JavaScript in Chrome• คลก Chrome menu เลอก Settings
• คลก Show advanced settings
• ภายใต Privacy section คลก Content settings button
• ในสวนของ "Javascript" section ใหเลอก "Do not allow any site to run JavaScript" หรอ "Allow all sites to run JavaScript (recommended)"
10
FIRST JAVASCRIPT EXAMPLE
11
<html><head>
<script type="text/javascript"><!--
function sayHello() {alert("Hello World")
}//-->
</script>
</head><body>
Click here for the result<input type="button" onclick="sayHello()" value="Say Hello" />
</body></html>
JAVASCRIPT IN EXTERNAL FILE
สามารถแยกไฟลเขยน JavaScript ไดโดยไมจาเปนตองเขยนในหนา web page
12
<html><head><script type="text/javascript" src="filename.js"></script></head><body>.......</body></html>
VARIABLES
JavaScript อนญาตใหประกาศตวแปร 3 primitive data types ไดแก• Numbers เชน 123, 120.50
• Strings of text เชน "This text string"
• Boolean เชน true or false
การประกาศตวแปรจะใชคยเวรด var ตามดวยชอตวแปร โดยไมตองระบ type ของตวแปร
13
<script type="text/javascript"><!--
var money;var name = "Sayan";var salary, bonus;
//--></script>
VARIABLES
JavaScript จดอยในประเภท untyped language หมายถงตวแปรสามารถจดเกบขอมลไดทกชนด โดยทคาของตวแปรแตละชนดสามารถเปลยนแปลงไดตลอดเวลาในขณะประมวลผล โดยไมจาเปนตองแปลงคา JavaScript จะทาหนาทแปลงคาใหโดยอตโนมต
14
VARIABLES
JavaScript Variable Scope• Global Variables: เปนตวแปรแบบ global scope สามารถใชงานไดทกทใน JavaScript
code
• Local Variables: เปนตวแปรทสามารถมองเหนได เฉพาะใน function เทาน น รวมไปถง parameters ของฟงกชนดวยเชนกน
15
<script type="text/javascript"><!--
var myVar = "global"; // Declare a global variable
function checkscope( ) {var myVar = "local"; // Declare a local variabledocument.write(myVar);}
//--></script>
VARIABLE
• การต งชอตวแปร หามใช JavaScript reserved keywords เชน break หรอ Boolean
• ชอตวแปรจะตองไมข นตนดวยตวเลข สามารถกาหนดข นตนเปนตวอกษร หรอ underscore ได
• ชอตวแปรเปนแบบ case-sensitive เชน Name และ name ถอวาเปนคนละตวแปร
16
การสรางฟงกชน
การสรางฟงกชนในจาวาสครปตในหนาจอเจเอสพน น ประกอบดวยคาสงตาง ๆ ภายใตเครองหมายปกกา { } และชอของฟงกชนจะตองไมซ ากนในแตละหนาจอ รปแบบการสรางฟงกชนดงน
function functionName( ) {statement;statement;statement
}
function sayGoodbye() { alert("Goodbye!") //คาสงแสดงกลองขอความ (Messagebox)
}
17
การสงพารามเตอร
การสงพารามเตอรเขาไปในฟงกชนโดยทไมจาเปนตองระบประเภทของตวแปร มรปแบบการสงดงน function name(parameter_1, parameter_2) {
statement(s);
}
function addVAT(price) { price *= 1.07;alert(price)
}
การเรยกใชฟงกชน
addVAT(5); หรอ var nettPrice = 5;
addVAT(nettPrice);
18
การคนคาจากฟงกชน
การคนคาจากฟงกชนทาไดโดยการใชคาสง return ซงคลายกบภาษาจาวา แตสวนของการประกาศชอฟงกชนไมจาเปนตองระบประเภทของการคนคา ดงตวอยางตอไปน
ตวอยางการคนคาจากฟงกชน
function addVAT(price) { price *= 1.21; return price
}
การเรยกใชฟงกชนทมการคนคา
var newPrice = addVAT(netPrice);
19
ค าสงในการเปรยบเทยบ
สญลกษณทใชในการเปรยบเทยบมท งหมด 6 รปแบบคอ เทากบ (==) ไมเทากบ (!=) มากกวา (>) นอยกวา (<) มากกวาหรอเทากบ (>=) และ นอยกวาหรอเทากบ (<=) โดยมรปแบบการเปรยบเทยบดงน if (condition) {
statement; statement
};
if (score > 5) {
alert("Congratulations!")
} else { alert("Shame - better luck next time")
};20
ค าสงวนซ า
การทางานแบบวนซ าในจาวาสครปตม 2 รปแบบคอคาสง for และ while ซงมลกษณะการทางานเหมอนกน ตางกนเพยงรปแบบการเขยนโปรแกรมเทาน น ซงรปแบบการทางานของคาสง for จะประกอบดวยขอกาหนด 3 สวนคอ คาเรมตน (initial_value) คาสดทาย (final_value) และ การเพมจานวนรอบ (increment) โดยมรปแบบดงน for (initial_value; final_value; increment) {
statement(s);
}
var sum = 0;
for (x = 0; x <= 5; x++) {
sum = sum + x;
}
21
WHILE LOOP
คาสง while จะตองกาหนดเงอนไขการออกจากการวนซ า ซงการวนซ าจะหยดการทางานเมอเงอนไขเปนเทจเทาน น โดยมรปแบบการทางานดงน
while (condition) { statement(s);
}
ตวอยางการใชงานค าสง whilevar x = 50;while (x > 0) {
x--;};
22
การเปรยบเทยบเมอมเงอนไข
การเปรยบเทยบเมอมเงอนไขมากกวา 2 เงอนไขข นไปสามารถใชเครองหมายและ (&&) และ หรอ (||) ในการเปรยบเทยบได เชน
if (x > 0 && x < 100) {
}
if (x == 0 || x == 1) {
}
23
WINDOW DOCUMENT และ FORM OBJECTS
จาวาสครปตเปนการเขยนโปรแกรมเชงวตถ ซงประกอบดวยคณสมบต (properties) เมธอด (method) และ เหตการณ (event) ซงออปเจคของหนาจอเจเอสพ หรอ เฮชทเอมแอล ประกอบดวยสวนตาง ๆ
24
วนโดวสออปเจค
window.status = "Hi, there!";
alert(window.location);
alert(window.length);
var parentWindow = window.parent;
alert(parentWindow.length);
var topWindow = window.top;
alert(topWindow.length);
25
วนโดวสออปเจค
var response = confirm("Delete File?");
var fileName = prompt("Select File", "file.txt");
26
วนโดวสออปเจค
คาสง submit() เปนคาสงทใหฟอรมตกลงจากไคลเอนต เพอสงขอมลไปยงเซรฟเวอร ซงจะถกเรยกใชพรอม ๆ กบเหตการณ onSubmit เชน <form onSubmit="displayFarewell()">
ตวอยางการใชจาวาสครปตโดยใชฟงกชน confirm()
<script language="JavaScript">function delSubmit() {
if ( confirm("ตองการลบขอมล user แนใจหรอไม ?") ) {document.frm1.submit();
}}
</script><form name="frm1" method="post" action="page2.jsp">
<input type="submit" value="delete" onClick="delSubmit()"> </form>
27
วนโดวสออปเจค
<a href=" page2.jsp?empid=1" onclick="return confirm('ตองการลบขอมลพนกงาน แนใจหรอไม?')"> ลบ</a>
28
FORM OBJECT
<script language="JavaScript">function validate(formCheck) {
if (formCheck.fname.value == "") {alert("กรณาระบชอ");formCheck.fname.focus();return false;
}}</script> <body>
<form name="form1" method="post" action="/hello.jsp">Your Name : <input type="text" name="fname"><br> <input type="submit" value="submit" onClick="return validate(form1)"> </form>
</body>
29
FORM OBJECT
<script language="JavaScript">function validate(formCheck) {
if((formCheck.item[0].checked==0)&&(formCheck.item[1].checked==0)) { alert("กรณาเลอกยนยน");formCheck.item[0].focus();return false;
}if ((formCheck.citems[0].checked == 0) && (formCheck.citems[1].checked == 0) &&
(formCheck.citems[2].checked == 0) && (formCheck.citems[3].checked == 0)) {alert("กรณาเลอก ความถนดอยางนอย 1 ชนด");formCheck.citems[0].focus();return false;
}}</script>
30
การตรวจสอบรปแบบขอมล (REGULAR EXPRESSION)
ในบางกรณทตองการตรวจสอบความถกตองของรปแบบในการปอนขอมลของผใช วามความถกตองตามรปแบบทเราตองการหรอไม เชน รหสไปรษณย จะตองเปนตวเลขจานวน 5 ตวเทาน น เปนตน
var myRegExp = new RegExp("\d{4}-\d{4}-\d{4}-\d{4}");var result = myRegExp.test(inputString);
หากตองการกาหนดรปแบบมากกวา 1 รปแบบในการตรวจสอบใหใชเครองหมาย | ขนระหวางรปแบบทกาหนด เชน
var myRegExp = new RegExp("\d{16} | \d{4}-\d{4}-\d{4}-\d{4}");
31
รปแบบ และ สญลกษณพเศษตาง ๆ
\w แทนท งตวอกษรและตวเลข (alphanumerical character)\W แทนทไมใชตวอกษรและตวเลข (non-alphanumerical character)\d แทนตวเลข (numerical character)\D แทนทไมใชตวเลข (non-numerical character)\s แทนทชองวาง เชนตดบรรทด หรอ แทป (whitespace character)\S แทนททไมใชชองวาง (non-whitespace character)[..] ตรงกบตวอกษรในเครองหมาย [ ] เชน [abc][^..] ไมตรงกบตวอกษรในเครองหมาย [ ] เชน [^abc] เปนตวอกษรทไมใช a b c [x-y] ตรงกบตวอกษรทอยในชวงทกาหนด เชน [a-c] เปนตวอกษร a b c เทาน น[^x-y] ไมตรงกบตวอกษรทอยในชวงทกาหนด เชน [^a-c] เปนตวอกษรใด ๆ ทไมใช a b c {x} ตรงกบตวอกษรกอนหนาจานวน x ตว เชน [acb]{2} เปนตวอกษร a b c
จานวน 2 ตวอกษร คอ aa หรอ ab หรอ ac หรอ bb เปนตน32
รปแบบ และ สญลกษณพเศษตาง ๆ
{x,} ตรงกบตวอกษรกอนหนาอยางนอยจานวน x ตว เชน [acb]{2,} เปน ตวอกษร a b c จานวน 2 ตวอกษรข นไป คอ aa หรอ aab หรอ acbc หรอ bbccaab เปนตน
<script language="javascript">function validate(inputstr) {
var regex=/^[A-Z]\d{4}$/;if (regex.test(inputstr)) {
alert("Matches");return true;
}else{alert("Does not match");return false;
}}
</script>
33
รปแบบ และ สญลกษณพเศษตาง ๆ
function checkPhone ( field, errorMsg) {phoneRegex = /^\(\d{3]\) \d{3}-\d{4}$/;
if(!field.match( phoneRegex)) {
alert(errorMsg );
field.focus();field.select();return false;
}return true;
}
34
รปแบบ และ สญลกษณพเศษตาง ๆ
function validateEmail ( emailField, errorMsg ) { emailpat = /^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*
@([a-zA-Z0-9])+(\.[a-zA-Z0-9_-]+)+$/;if( !emailpat.test( emailField.value ) ) {
alert( errorMsg);emailField.focus();emailField.select();return false;
}return true;
}
35
EVENTS
การโตตอบระหวาง JavaScript กบ HTML ถกจดการผาน events ซงเกดข นเมอผใชหรอ browser มการจดการกบ page เชน• onclick
• onsubmit
• onmouseover และ onmouseout
• onkeydown, onkeyup และ onkeypress
36
ONCLICK
การใช event onclick สามารถใชไดกบทกเครองมอบนหนา HTML เชน
<input type="button" onclick="sayHello()" value="Say Hello" />
37
ONSUBMIT
การใช onsubmit จะใชงานรวมกบ form และ input type="submit"
<form method="POST" action="test.htm" onsubmit="return validate()">.......<input type="submit" value="Submit" /></form>
38
ONMOUSEOVER & ONMOUSEOUT
<script type="text/javascript">
function over() {
var cb = document.getElementById('label1');
cb.innerHTML = "Mouse Over";
}
function out() {
var cb = document.getElementById('label1');
cb.innerHTML = "Mouse Out";
}
</script>
39
<body><p>Bring your mouse inside the division to see the result:</p><div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2></div><label id="label1"> </label>
</body>
ONKEYPRESS
คาสง onKeyPress เปน Event เมอมการกดแปนคยบอรด เปนการรวม Event 2 เหตการณเขาดวยกนคอ KeyDown และ KeyUp ตวอยางเชน
ใหเชควากรอกขอมลเปนตวเลขหรอไม โดยการเทยบกบรหส Ascii code ซง 48 คอ 0 และ 57 คอหมายเลข 9
รหสไปรษณย : <input type="text" name="zipcode" maxlength="5"onKeyPress="return (event.keyCode >= 48 && event.keyCode <= 57);" >
40
EXERCISE
จงเขยน JavaScript ตรวจสอบการกรอกขอมลตอไปน โดยในแตละชองจะตองกรอกขอมลไดต งแต 0 – จานวน % ของแตละสวน เชน Midterm จะกรอกไดเฉพาะ 0 – 30 เทาน น จากน นเมอกรอกขอมลในแตละชองแลวจะตองแสดงจานวนคะแนนรวมใน label total ดวย
41
