Javascript
2012. 10
Youn-Hee HanLINK@KOREATECH
http://link.koreatech.ac.kr
Javascript Example 1
<html><head><script type="text/javascript">function displayDate() { document.getElementById("demo").innerHTML=Date();}</script></head><body><h1>My First Web Page</h1><p id="demo">This is a paragraph.</p><button type="button" onclick="displayDate()">Display Date</button></body></html>
[Practice-1] My First Javascript
LINK@KOREATECH 2
Client-side scripting Scripts can be embedded in the HTML.
– Most popular scripting language is JavaScript.
Scripts can access and change the contents of a Web page.– Assist in completion and checking of forms.– Provides user control of client-side of page appearance and
content.
Scripts are interpreted and executed, line by line, whenever they are needed– This means that “syntax errors” as well as “logic errors” appear
when the html is being produced
LINK@KOREATECH 3
JavaScript Role of Javascript
– Adds functionality to web pages– designed to add interactivity to HTML pages
Features– Scripting language
• Easy and Fast Implement
– Runs on the client side• interpreter is embedded in the browser
– Makes it possible to change HTML elements and their properties
• Dynamic HTML (DHTML)
– Makes it possible to change HTML elements’ body contents– JavaScript = ECMA-Script– Syntax like C
LINK@KOREATECH 4
JavaScript vs. Java
JavaScript is quite different from Java– Similar syntax
• because they both descend from C
– Java is strongly typed– Java is compiled (into byte code)
• actually hybrid because byte code is mostly interpreted
– Java has strong Object Oriented foundation• JavaScript has a similar level of OO foundation
The name was primarily a “marketing decision”– Sun and Netscape against Microsoft
LINK@KOREATECH 5
JavaScript’s Role
What Can JavaScript do?– JavaScript gives HTML designers “a programming tool”
• Almost anyone can put small "snippets" of code into their HTML pages
– JavaScript can react to events• A JavaScript can be set to execute when something happens, like
when a page has finished loading or when a user clicks on an HTML element
– JavaScript can read and write HTML elements• A JavaScript can read and change the content of an HTML element
LINK@KOREATECH 6
JavaScript’s Role
What Can JavaScript do?– JavaScript can be used to validate data
• A JavaScript can be used to validate form data before it is submitted to a server.
• This saves the server from extra processing
– JavaScript can be used to detect the visitor's browser• A JavaScript can be used to detect the visitor's browser, and -
depending on the browser - load another page specifically designed for that browser
– JavaScript can be used to create cookies• A JavaScript can be used to store and retrieve information on the
clinet's computer
LINK@KOREATECH 7
Form validation The data that the user enters MUST be checked when it
arrives at the server-side– If there is an error, the user must get a warning about this and
asking for correct data
It is resource-consuming (time and network) to send incorrect data over the web– Partial solution – check this first with javascript on the client
side and secondly check the remains on the server side.
LINK@KOREATECH 8
[Practice-2] Experience the validation function
Visit– http://www.xs4all.nl/~sbpoley/webmatters/formval.html
LINK@KOREATECH 9
<script> Element
<script> element – either contains scripts
• an entire program can be placed there
– or contains reference to external scripts file
• this is the preferred way! src attribute
– URL of a file with an external script– standard file extension .js for JavaScript source files
language (or type) attribute – specifies the scripting language used – text/javascript for JavaScript
<script src="login.js" language="text/javascript"> </script>
LINK@KOREATECH 10
JavaScript in a Web Page Typically, <script> is placed within the <head> element of
the XHTML document– the contents inside <head> is interpreted first– this is the preferred way
But <script> elements can be placed in the <body> element, too– they are executed in the order in which they appear in the
HTML document
LINK@KOREATECH 11
Writing a Web Page The DOM document object
– represents the HTML document of the web page currently displayed in the browser
document.write() or document.writeln() – insert XHTML code into the XHTML document– once the page is rendered, document.write() is executed– this allows us to specify (portions of) a web page via scripting!
alert()– displays a dialog with message passed a the argument string
prompt()– displays a dialog with message passed a the argument string– and an input field where the user can type a text
LINK@KOREATECH 12
JavaScript Where To JavaScripts can be put in the <body> and in the <head>
sections of an HTML page.– It is a common practice to put “all functions” in the <head>
section– JavaScript is usually executed when an event occurs, such as
when a user clicks a button.
JavaScript in <body>– JavaScript is placed at the bottom of the page
• to make sure it is not executed before the accessed elements are created.
• Javascript at the bottom of the page does not interfere with page content.
LINK@KOREATECH 13
Javascript for Dynamic HTML Dynamic effects
– Pop-up menus, rollover images• Particularly when mouse moves over image
Opening additional browser windows– Possibly for ‘help’ or adverts– More difficult to manage multiple related windows, so best
used sparingly
Opening dialogue boxes for communication with user– ‘alert’ : invalid data– ‘confirm’ : e.g. submit this data? Message, OK and Cancel
buttons– ‘prompt’ : message and text field for data entry
Modifying web page content– For instance adding date or highlighting errors in form
LINK@KOREATECH 14
Javascript Syntax - basic Unlike HTML, JavaScript is case sensitive Comments
– // - single line comment– /* … */ - multi line comment
Return statement in a function<html> <head><script type="text/javascript">function product(a,b) { return a*b; // return statement}</script></head><body><script type="text/javascript">document.write(product(4,3));</script></body></html>
LINK@KOREATECH 15
Javascript Syntax - variable Declaring (Creating) JavaScript Variables
Variables are Case Sensitive
var x;var a;var thisIsAVariable;var _and_this_too;var mix12three;var carname;var 2three4five; // (X) you can't start with a number
var x=5;var carname="Volvo", carprice=3000;var v1, v2, v3 = 'hello', v4 = 4, v5;
LINK@KOREATECH 16
var case_matters = 'lower';var CASE_MATTERS = 'upper';
Javascript Syntax - variable Local variable vs. Global variable
– A variable declared within a JavaScript function becomes LOCAL and can only be accessed within that function.
– Variables declared outside a function become GLOBAL, and all scripts and functions on the web page can access it.
– If you assign values to variables without “var”, the variables will automatically be declared as GLOBAL
x=5;carname="Volvo";
LINK@KOREATECH 17
Javascript Syntax – operators (1/5) JavaScript Arithmetic Operators
LINK@KOREATECH 18
Javascript Syntax – operators (2/5) Adding Strings and Numbers
– The + operator can be used to add string variables or text values together
– If you add a number and a string, the result will be a string!
<html><body><script type="text/javascript">var txt1="What a very“, var txt2="nice day";var txt3=txt1+" "+txt2; document.write(txt3 + "<br />");
var x; x=5+5; document.write(x + "<br />");x="5"+"5"; document.write(x + "<br />");x=5+"5"; document.write(x + "<br />");x="5"+5; document.write(x + "<br />");</script></body></html>
LINK@KOREATECH 19
Javascript Syntax – operators (3/5) ++, --
<html><head><script type="text/javascript">var a = 123; var b = a++;document.write("a: " + a +", b: " + b + "<br />");var a = 123; var b = ++a;document.write("a: " + a +", b: " + b + "<br /><br />");var a = 123; var b = a--;document.write("a: " + a +", b: " + b + "<br />");var a = 123; var b = --a;document.write("a: " + a +", b: " + b + "<br />");</script></head><body></body></html>
LINK@KOREATECH 20
Javascript Syntax – operators (4/5) Comparison Operators
– [NOTE] x == “5” is true and 5 == “5” is true– [NOTE] NaN == NaN is false
Logical Operators
LINK@KOREATECH 21
Javascript Syntax – operators (4/5) Lazy Evaluation
LINK@KOREATECH 22
<html><body><script type="text/javascript">var b = 5;if (true || (b = 6)) document.write(b + "<br />");if (true && (b = 6)) document.write(b + "<br />");</script></body></html>
Javascript Syntax – Primitive Data Type (1/10)
In javascript, any value that you use is of a certain type Five Primitive Data Types
– number• It includes floating point numbers as well as integers• for example 1, 100, 3.14, Infinity, -Infinity
– string• any number of characters, for example "a", "one", "one 2 three“
– boolean• can be either “true” or “false”
– undefined• You get the special value “undefined” for a variable that doesn't exist • You get “undefined” for a value when you have declared, but not given it a
value yet.
– null• It is another special data type that can have only one value, the “null” value. • It means no value or nothing • The difference with “undefined”
if a variable has a value “null”, it is still defined
LINK@KOREATECH 23
Javascript Syntax – Primitive Data Type (2/10)
Any value that doesn't belong to one of the five primitive types listed above is an object.– Even “null” is considered an object, which is a little awkward
• “null” is an object (something) that is actually nothing
– “string” is also considered an object, which is also a little awkward
Remember that in JavaScript the data types are either:– Primitive (the five types listed above), or– Non-primitive (objects)
LINK@KOREATECH 24
Javascript Syntax – Primitive Data Type (3/10)
typeof operator– returns a string that represents the data type– return values
• "number", "string", "boolean", "undefined", "object", or "function“
LINK@KOREATECH 25
[Infinity]
-It represents a number too big-“typeof Infinity” returns “number”-the biggest number JavaScript can handle is 1.7976931348623157e+308 while the smallest is 5e-324
[NaN]
-It represents ‘not a number’-“typeof NaN” returns “number”-the biggest number JavaScript can handle is 1.7976931348623157e+308 while the smallest is 5e-324
Javascript Syntax – Primitive Data Type (4/10)
Examples
LINK@KOREATECH 26
<html><head><script type="text/javascript">var a = 123; var b = 2e+3;var c = 123.456E-3;document.write(typeof a + "<br/>");document.write(typeof b + "<br/>");document.write(typeof c + "<br/>");document.write(b + "<br/>");document.write(c + "<br/><br/>");
var d = Infinity;var e = 6 / 0;var f = -Infinity;
document.write(typeof d + "<br/>");document.write(typeof e + "<br/>");document.write(typeof f + "<br/>");document.write(d * 2 + "<br/>");document.write(e + "<br/>");document.write(f + "<br/><br/>");
var g = NaN;var h = 10 * "f";var i = 1 + 2 + NaN;document.write(typeof g + "<br/>");document.write(typeof h + "<br/>");document.write(typeof i + "<br/>");document.write(g + "<br/>");document.write(h + "<br/>");document.write(i + "<br/>");</script></head><body></body></html>
Javascript Syntax – Primitive Data Type (5/10)
Examples
LINK@KOREATECH 27
<html><head><script type="text/javascript">var s1 = "some characters";var s2 = 'some characters and numbers 123 5.87';var s3 = '1';var s4 = "";var s5 = s1 + s2;document.write(typeof s1 + "<br/>");document.write(typeof s2 + "<br/>");document.write(typeof s3 + "<br/>");document.write(typeof s4 + "<br/>");document.write(typeof s5 + "<br/>");document.write(s5 + "<br/>");</script></head><body></body></html>
Javascript Syntax – Primitive Data Type (6/10)
String Conversions– When you use a number-like string as an operand in an
arithmetic operation, the string is converted to a number behind the scenes.
– This works for all operations except addition
LINK@KOREATECH 28
<html><head><script type="text/javascript">var s = '2'; s = 3 * s;document.write(typeof s + "<br/>");document.write(s + "<br/><br/>");
var s2 = '1'; s2++;document.write(s2 + "<br/><br/>");
var s3 = "100";document.write(typeof s3 + "<br/>");s3 = s3 * 1;document.write(typeof s3 + "<br/>");document.write(s3 + "<br/><br/>");
var s4 = '101 dalmatians';s4 = s4 * 10;document.write(typeof s4 + "<br/>");document.write(s4 + "<br/><br/>");
var n = 1;n = "" + n;document.write(typeof n + "<br/>");document.write(n + "<br/><br/>");
document.write("" + null + "<br/>");document.write("" + undefined + "<br/>");</script></head><body></body></html>
Javascript Syntax – Primitive Data Type (7/10)
Special String
LINK@KOREATECH 29
Javascript Syntax – Primitive Data Type (8/10)
Create an Boolean variable– The boolean variable represents two values: "true" or "false".– If the boolean variable has no initial value, or if the assigned value
is one of the followings, it is set to false• 0• -0• null• ""• false• undefined• NaN
– For any other value, it is set to true (even with the string "false")!
LINK@KOREATECH 30
Javascript Syntax – Primitive Data Type (9/10)
Boolean variable example<html><body><script type="text/javascript">var b1=0;var b2=1;var b3="";var b4=null;var b5=NaN;var b6="false";var b7;document.write(typeof b1 + "<br />");document.write("0 is boolean <b>"+ !!b1 +"</b><br />");document.write("1 is boolean <b>"+ !!b2 +"</b><br />");document.write("An empty string is boolean <b>"+ !!b3 + "</b><br />");document.write("null is boolean <b>"+ !!b4+ "</b><br />");document.write("NaN is boolean <b>"+ !!b5 +"</b><br />");document.write("The string 'false' is boolean <b>"+ !!b6 +"</b><br />");document.write("The type of b7 is <b>"+ (typeof b7) +"</b><br />");document.write("Undefined is boolean <b>"+ !!b7 +"</b><br />");</script></body></html> LINK@KOREATECH 31
Javascript Syntax – Primitive Data Type (10/10)
"undefined“, “NaN”, and “null” example<html><body><script type="text/javascript">document.write(typeof foo + "<br/><br/>");
var somevar;document.write(somevar + "<br/>");document.write(typeof somevar + "<br/><br/>");
var somevar2 = null;document.write(somevar2 + "<br/>");document.write(typeof somevar2 + "<br/><br/>");
var i = 1 + undefined; document.write(i + "<br/>");document.write(typeof i + "<br/><br/>");
var k = 1 + null; document.write(k + "<br/>");document.write(typeof k + "<br/><br/>");
LINK@KOREATECH 32
var a = 1 * undefined; document.write(a + "<br/>");document.write(typeof a + "<br/><br/>");
var c = 1 * null; document.write(c + "<br/>");document.write(typeof c + "<br/><br/>");</script></body></html>
Javascript Syntax – conditional statements
Conditional Statements– if statement
<html><body><script type="text/javascript">var r=Math.random();if (r>0.5) {document.write("<a href='http://www.kut.ac.kr'>Visit KUT</a>");} else {document.write("<a href='http://cse.kut.ac.kr'>Visit CSE-KUT!</a>");}</script></body></html>
LINK@KOREATECH 33
Javascript Syntax – conditional statements
Conditional Statements– Checking if a Variable Exists
<html><body><script type="text/javascript">var somevardocument.write(typeof somevar + "<br/>");var result = 'no';if (somevar) {result = 'yes';}if (typeof somevar !== "undefined") {result = 'yes';}document.write(result + "<br/>");
//if (somevar2) {result = 'yes';}if (typeof somevar2 !== "undefined") {result = 'yes';}document.write(result + "<br/>");</script></body></html>
LINK@KOREATECH 34
Javascript Syntax – conditional statements
Conditional Statements– Alternative if Syntax
var result = (a === 1) ? "a is one" : "a is not one";
LINK@KOREATECH 35
Javascript Syntax – conditional statements
Conditional Statements– switch .. case
• switch (expression) { case value1:
statement; break; case value2:
statement; break; … default: statement;}
• Expression can be almost ANY!!! integer, character string
» See http://www.javascriptkit.com/javatutors/switch.shtml constant
» See http://drj11.wordpress.com/2007/09/03/javascript-switch/
LINK@KOREATECH 36
Javascript Syntax – conditional statements
Conditional Statements– switch .. case
LINK@KOREATECH 37
var a = '1';var result = '';switch (a) {
case 1:result = 'Number 1';break;
case '1':result = 'String 1';break;
default:result = 'I don\'t know';break;
}document.write(result + "<br/>");
Javascript Syntax – loop (1/4) For loop
while loop
<html><body><script type="text/javascript">for (i = 1; i <= 6; i++) {document.write("<h" + i + ">This is heading " + i);document.write("</h" + i + ">");}</script></body></html>
<html><body><script type="text/javascript">var i=0;while (i<=5) { document.write(“Num: " + i + "<br />"); i++;}</script></body></html>
<html><body><script type="text/javascript">var i=0;do { document.write(“Num: " + i + "<br />"); i++;} while (i<=5);</script></body></html>
LINK@KOREATECH 38
Javascript Syntax – loop (2/4) For loop
var punishment = '';for (var i = 0; i < 100; i++) { punishment += 'I will never do this again, ';}
LINK@KOREATECH 39
for (var i = 0, punishment = ''; i < 100; i++) { punishment += 'I will never do this again, ';}
for (var i = 0, punishment = ''; i < 100; i++, punishment += 'I will never do this again, ') { // nothing here}
var i = 0, punishment = '';for (;;) { punishment += 'I will never do this again, '; if (++i == 100) { break; }}
Javascript Syntax – loop (3/4) break
continue
<html><body><script type="text/javascript">var i=0;for (i=0;i<=10;i++) { if (i==3) break; document.write("The number is " + i + "<br />");}</script></body></html
<html><body><script type="text/javascript">var i=0;for (i=0;i<=10;i++) { if (i==3) continue; document.write("The number is " + i + "<br />");}</script></body></html LINK@KOREATECH 40
Javascript Syntax – loop (4/4) JavaScript For...In Statement
<html><body><script type="text/javascript">var person=["John","Doe", 25]; for (x in person) { document.write(x + " ");}document.write("<br />");for (x in person) { document.write(person[x] + " ");}</script></body></html>
LINK@KOREATECH 41
<html><body><script type="text/javascript">var a = ['a', 'b', 'c', 'x', 'y', 'z'];var result = '';for (var i in a) {result += 'index: ' + i + ', value: ' + a[i] + '<br/>';}document.write(result);</script></body></html>
Javascript Syntax – Cache an error
The try...catch Statement<html><head><script type="text/javascript">var txt="";function message() { try { alertt("Welcome guest!"); // mis-spell!!! } catch(err) { txt="There was an error on this page.\n\n"; txt+="Click OK to continue viewing this page,\n"; txt+="or Cancel to return to the LINK@KUT laboratory page.\n\n"; if(!confirm(txt)) { // confirm function will return true or false document.location.href="http://link.kut.ac.kr"; } }}</script></head><body><input type="button" value="View message" onclick="message()" /></body></html>
LINK@KOREATECH 42
Javascript – HTML Events
Window Events– Only valid in body and frameset elements.
Form Element Events– Only valid in form elements
Attribute Value Description
onload script Script to be run when a document loads
onunload script Script to be run when a document unloads
Attribute Value Description
onchange script Script to be run when the element changes
onsubmit script Script to be run when the form is submitted
onreset script Script to be run when the form is reset
onselect script Script to be run when the element is selected
onblur script Script to be run when the element loses focus
onfocus script Script to be run when the element gets focusLINK@KOREATECH 43
Javascript – HTML Events
Window Events Example
<html><head><script type="text/javascript"> function load() { window.status="Page is loaded"; }</script></head><body onload="load()"></body></html>
<html><head><script type="text/javascript"> function mymessage() { alert("This message was triggered from me"); }</script></head><body onload="mymessage()"></body></html>
LINK@KOREATECH 44
Javascript – HTML Events
Form Element Events Example - onchange
<html><head><script type="text/javascript"> function upperCase(x) { var y=document.getElementById(x).value; document.getElementById(x).value=y.toUpperCase(); }</script></head><body>Enter your name:<input type="text" id="fname" onchange="upperCase(this.id)"></body></html>
LINK@KOREATECH 45
Javascript – HTML Events
Form Element Events Example – onblur– The onblur event occurs when an object loses focus.
<html><head><script type="text/javascript"> function upperCase() { var x=document.getElementById("fname").value; document.getElementById("fname").value=x.toUpperCase(); }</script></head><body>Enter your name:<input type="text" id="fname" onblur="upperCase()"></body></html>
LINK@KOREATECH 46
Javascript – HTML Events
Form Element Events Example – onselect– It occurs when text is selected in a text or textarea field.
<html><body><form>Select text: <input type="text" value="Hello world!"onselect="alert('You have selected some of the text.')"><br /><br />Select text: <textarea cols="20" rows="5"onselect="alert('You have selected some of the text.')">Hello world!</form></body></html>
LINK@KOREATECH 47
Javascript – HTML Events
Keyboard Events– Not valid in br, frame, frameset, head, html, iframe, meta,
param, script, style, and title elements.
Attribute Value Description
onkeydown
script What to do when key is pressed
onkeypress
script What to do when key is pressed and released
onkeyup script What to do when key is released
LINK@KOREATECH 48
Javascript – HTML Events
Keyboard Events Example - onkeydown<html><body><script>cnt=1;function showkey(){ if (cnt%20==0){ cnt=1; showchar.innerHTML+='<br>'; showcode.innerHTML+='<br>'; } cnt++; showchar.innerHTML+='('+String.fromCharCode(event.keyCode)+') '; showcode.innerHTML+='('+event.keyCode+')';}</script>입력 : <input id="textobj" type="text" onkeydown="showkey()" onfocus="this.style.backgroundColor='cfc'" onblur="this.style.backgroundColor='fff'"><hr/><div id="showchar" class="showclass"></div><hr/><div id="showcode" class="showclass"></div></body></html> LINK@KOREATECH 49
Javascript – HTML Events
Mouse Events– Not valid in br, frame, frameset, head, html, iframe, meta,
param, script, style, and title elements.
Attribute Value Description
onclick script What to do on a mouse click
ondblclick script What to do on a mouse double-click
onmousedown
script What to do when mouse button is pressed
onmousemove
script What to do when mouse pointer moves
onmouseout script What to do when mouse pointer moves out of an element
onmouseover script What to do when mouse pointer moves over an element
onmouseup script What to do when mouse button is released
LINK@KOREATECH 50
Javascript – HTML Events
Keyboard Events Example - onkeydown<html><body><script>function mouseTest(){ str='event.srcElement.tagName='+event.srcElement.tagName+'<BR>'; str+='event.srcElement.id='+event.srcElement.id+'<BR>'; str+='event.srcElement.type='+event.srcElement.type+'<BR>'; str+='event.type='+event.type+'<BR>'; show.innerHTML=str;}</script><body onmousedown="mouseTest()"><table border=1 width=300><th id="thObj"> 마우스로 클릭 !</th><tr><td><button id="butObj"> 클릭 !</button></td></tr><tr><td><input type="text" id="tdObj" value=" 클릭 !"></td></tr><tr><td><span id="spanObj"> 클릭 !</span></td></tr></table><div id="show" style="height:5em;border:solid 1 blue;width:300"></div><body><html> LINK@KOREATECH 51
Javascript – Objects Introduction
JavaScript is an Object Oriented Programming (OOP) language– you can define your own objects and make your own variable
types. Properties
– the values associated with an object
Methods– the actions that can be performed on objects
<script type="text/javascript">var txt="Hello World!";document.write(txt.length); // output 12< /script>
<script type="text/javascript">var txt="Hello world!";document.write(txt.toUpperCase()); // output HELLO WORLD!< /script>
LINK@KOREATECH 52
Javascript – Object Introduction
Javascript primitive objects– String– Date– Array– Boolean– Math– RegExp
Javascript objects examples– See http://www.w3schools.com/js/js_ex_objects.asp
Javascript objects references– See http://www.w3schools.com/jsref/default.asp
LINK@KOREATECH 53
Javascript – Array (1/3)
Create an Array
Modify and print out values in an Array
var myCars=new Array(); // regular arraymyCars[0]="Saab"; myCars[1]="Volvo";myCars[2]="BMW";
var myCars=new Array("Saab","Volvo","BMW"); // condensed array
var myCars=["Saab","Volvo","BMW"]; // literal array
myCars[0]="Opel";document.write(myCars[0]);
LINK@KOREATECH 54
var a = [1,2,3];a[2] = 'three';document.write(a); // [1, 2, "three"]
Javascript – Array (2/3)
Modify an Array
– An array can contain any type of data, including other arrays
LINK@KOREATECH 55
var a = [1,2,3];a[2] = 'three';document.write(a); // [1, 2, "three"]
a[3] = 'four';document.write(a); // [1, 2, "three", "four"]
a[6] = 'new';document.write(a); // [1, 2, 3, undefined, undefined, undefined, "new"]
delete a[1];document.write(a); // [1, undefined, 3, undefined, undefined, undefined, "new"]
Javascript – Array (3/3) Array of array
More examples– See http://www.w3schools.com/js/js_obj_array.asp– See http://www.w3schools.com/jsref/jsref_obj_array.asp
LINK@KOREATECH 56
var a = [1, "two", false, null, undefined];a[5] = [1,2,3];document.write(a); // [1, "two", false, null, undefined, [1, 2, 3]]
var a = [[1,2,3], [4,5,6]];document.write(a[0]); // [1, 2, 3]document.write(a[0][0]); // 1document.write(a[1][2]); // 6
var s = 'one';document.write(s[0]); // “o”document.write(s[1]); // “n”document.write(s[2]); // “e”
Javascript – RegExp Object (1/4)
Create a RegExp object– Syntax
– Modifiers• The i modifier is used to perform case-insensitive matching.• The g modifier is used to perform a global match (find all matches
rather than stopping after the first match).
var patt=new RegExp(pattern, modifiers);
or more simply:
var patt=/pattern/modifiers;
var patt=/pattern/ no modifier
LINK@KOREATECH 57
Javascript – RegExp Object (2/4)
RegExp object Examples– Example 1
– Example 2
<html><body><script type="text/javascript">var str = "Visit LINKLab. at KoreaTech";var patt1 = /linklab/i;document.write(str.match(patt1) + "<br/>");patt1 = /linklab/;document.write(str.match(patt1));</script></body></html>
<html><body><script type="text/javascript">var str="Is this all there is?";var patt1=/is/g;document.write(str.match(patt1) + "<br/>");var patt1=/is/gi;document.write(str.match(patt1));</script></body></html>
LINK@KOREATECH 58
Javascript – RegExp Object (3/4)
RegExp object Examples– test() – example
• Return true or false
– exec() – example• Return the matched
string
<html><body><script type="text/javascript">var patt1=new RegExp("est");document.write(patt1.test("The best things"));</script></body></html>
<html><body><script type="text/javascript">var patt1=new RegExp("est");document.write(patt1.exec("The best things"));</script></body></html>
LINK@KOREATECH 59
Javascript – Browser Objects
Browser Objects– Window– Navigator– Screen– History– Location
Browser Objects Reference– See http://www.w3schools.com/jsref/default.asp
LINK@KOREATECH 60
Javascript – Browser Detection
Navigator object– The Navigator object contains information about the visitor's
browser
<html><body><div id="example"></div><script type="text/javascript">txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";txt+= "<p>Browser Name: " + navigator.appName + "</p>";txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";txt+= "<p>Platform: " + navigator.platform + "</p>";txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";document.getElementById("example").innerHTML=txt;</script></body></html>
LINK@KOREATECH 61
Javascript – popup (1/2) Popup Boxes
– Alert Box, Confirm Box, Prompt Box
<html><head><script type="text/javascript">function show_alert() { alert("I am an alert box!");}
function show_confirm() { var r=confirm("Press a button"); if (r==true) alert("You pressed OK!"); else alert("You pressed Cancel!");}
LINK@KOREATECH 62
Javascript – popup (2/2) Popup Boxes
– Alert Box, Confirm Box, Prompt Box
function show_prompt() { var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") document.write("Hello " + name + "! How are you today?");}</script></head>
<body><input type="button" onclick="show_alert()" value="Show alert box" /><input type="button" onclick="show_confirm()" value="Show confirm box" /><input type="button" onclick="show_prompt()" value="Show prompt box" /></body></html>
LINK@KOREATECH 63
Javascript – Cookie
Create and Get Cookie – 1/2
<html><head><script type="text/javascript">function getCookie(c_name) { var i, x, y; var cookies = document.cookie.split(";"); for (i = 0; i < cookies.length; i++) { x=cookies[i].substr(0, cookies[i].indexOf("=")); y=cookies[i].substr(cookies[i].indexOf("=") + 1); if (x == c_name) return y; }}
function setCookie(c_name, value, exdays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value = value + "; expires=" + exdate.toUTCString()); document.cookie = c_name + "=" + c_value; alert("The following cookie is set: \r\n" + c_value);}
LINK@KOREATECH 64
Javascript – Cookie
Create and Get Cookie – 2/2
function checkCookie() { var username=getCookie("username"); if (username != null && username != "") { alert("Welcome again " + username); } else { username=prompt("Please enter your name:",""); setCookie("username", username, 365); }}</script></head><body onload="checkCookie()"></body></html>
LINK@KOREATECH 65
Javascript – Form Validation
Form Validation<html><head><script type="text/javascript">function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("First name must be filled out"); return false; }}</script></head><body><form name="myForm" action="demo_form.jsp" onsubmit="return validateForm()" method="post">First name: <input type="text" name="fname"><input type="submit" value="Submit"></form></body></html>
LINK@KOREATECH 66
Javascript – Timing
Set Timeout
<html><head><script type="text/javascript">function timedText() {var t1=setTimeout("document.getElementById('txt').value='2 seconds!'", 2000);var t2=setTimeout("document.getElementById('txt').value='4 seconds!'", 4000);var t3=setTimeout("document.getElementById('txt').value='6 seconds!'", 6000);}</script></head><body><form><input type="button" value="Display timed text!" onclick="timedText()" /><input type="text" id="txt" /></form></body></html>
LINK@KOREATECH 67
Javascript – Timing
Infinite Timeout
<html><head><script type="text/javascript">var c=0, t, timer_is_on=0;function timedCount() { document.getElementById('txt').value=c; c=c+1; t=setTimeout("timedCount()", 1000);}function doTimer() { if (!timer_is_on) { timer_is_on=1; timedCount(); }}</script></head><body><form><input type="button" value="Start count!" onClick="doTimer()"><input type="text" id="txt"></form></body></html>
LINK@KOREATECH 68
Javascript – Timing
Cancel Timeout – 1/2
<html><head><script type="text/javascript">var c=0;var t;var timer_is_on=0;function timedCount() { document.getElementById('txt').value=c; c=c+1; t=setTimeout("timedCount()", 1000);}function doTimer() { if (!timer_is_on) { timer_is_on=1; timedCount(); }}
LINK@KOREATECH 69
Javascript – Timing
Cancel Timeout – 2/2
function stopCount() { clearTimeout(t); c=0; timer_is_on=0;}</script> </head><body><form><input type="button" value="Start count!" onClick="doTimer()"><input type="text" id="txt"><input type="button" value="Stop count!" onclick="stopCount()"></form></body></html>
LINK@KOREATECH 70
Javascript – Create Objects
Create your own simple object
Create an object constructor
personObj=new Object();personObj.firstname="John";personObj.lastname="Doe";personObj.age=50;personObj.eyecolor="blue";
or
personObj={firstname:"John", lastname:"Doe", age:50, eyecolor:"blue"}; //json object
function person(firstname, lastname, age, eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor;}var myFather=new person("John","Doe",50,"blue");var myMother=new person("Sally","Rally",48,"green");
LINK@KOREATECH 71
Javascript – Create Objects
Create your own object – 1/2
<html><head><script type="text/javascript">function mycircle(x, y, r) { this.xcoord = x; this.ycoord = y; this.radius = r; this.retArea = getTheArea; this.retCirc = function () { return ( Math.PI * this.radius * 2 ); }; this.moveBy = moveCclBy;}function getTheArea() { return ( Math.PI * this.radius * this.radius );}function moveCclBy(xDis, yDis) { this.xcoord += xDis; this.ycoord += yDis;}
LINK@KOREATECH 72
Javascript – Create Objects
Create your own object – 2/2
function createObj() { var testcircle = new mycircle(3,4,5); testcircle.moveBy(2,3); window.alert( 'The area of the circle is ' + testcircle.retArea() ); window.alert( 'The circumference is ' + testcircle.retCirc() );}</script></head><body><input type="button" value="Creare Object" onclick="createObj()" /></body></html>
LINK@KOREATECH 73
[Appendix] URL Encoding
What is URL Encoding?– the process of converting "a string" into "a valid URL format"
by converting "prohibited characters" into "valid characters"– URL encoding is normally performed to convert data passed
via html forms, because such data may contain special character, such as "/", ".", "#", and so on
What characters need to be encoded– ASCII Control characters
• e.g.] carriage return (CR) %0d
– Non-ASCII characters• e.g.] 한국 %26%2354620%3B%26%2344397%3B
– Reserved characters• e.g.] ampersand ("&") %26
– Unsafe characters• e.g.] 'Less Than' symbol ("<") %3c
LINK@KOREATECH 74
[Appendix] URL Encoding
Encoding of reserved and unsafe characters
LINK@KOREATECH 75
[Appendix] URL Encoding
Example– One of the most common encounters with URL Encoding is
when dealing with <form>. – Form methods (GET and POST) perform URL Encoding implicitly
<html><body><form method="GET" action="example.html"><input type="text" name="var" size="50" value="This is a simple & short test."><input type="submit"> </form></body></html>
http://link.koreatech.ac.kr/example.html?var=This+is+a+simple+%26+short+test
http://link.koreatech.ac.kr/example.html?var=%24+%26+%3C+%3E+%3F+%3B+%23+%3A+%3D+%2C+%22+%27+%7E+%2B+%25
LINK@KOREATECH 76