Javascript

Javascript Web and Database Management System

Javascript • Javascript is a scripting language • There is no need to compile the code before executing • JS is a client-side program, which can be run on any JS-supported browser, ie. Firefox, IE, Safari, Opera, etc. • JS can be embedded in the HTML file or imported from a separate JS file

hello.js //Javascript inline comment window.alert("Hello World!"); JSHelloWorld.html <html> <head> <title>JSHelloWorld.html</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="hello.js"> </script> </head> <body> </body> </html> Imported JS

JSHelloWorld.html <html> <head> <title>JSHelloWorld.html</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> window.alert(“Hello World!”); </script> </head> <body> </body> </html> Embedded JS

JSInput.html <html> <head> <title>JSHelloWorld.html</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> varinString = window.prompt(“Please enter your number”, “100”); </script> </head> <body> </body> </html> JS Input

JS Print <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>document.write()</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <H1><center>Javascript</center></H1> <script language="JavaScript"> document.write("<p>Hello World!!!</p>"); document.write("<span id=\"spid\">Good Planet!!!</span>"); </script> </body> </html>

var rndNumber; //Number the computer randoms var guess = -1; //User's latest guess var count = 1; // Count number of guess rndNumber = Math.ceil(Math.random()*1000); while(guess!=rndNumber && count <= 10) { guess = window.prompt(count + ": Pick number between 1 and 1000.",""); if(guess<rndNumber) window.alert("Your guess of " + guess + " was too low"); else if(guess>rndNumber) window.alert("Your guess of " + guess + " was too high"); else { window.alert("Your got it! [" + rndNumber +"]"); break; } count = count + 1; //count += 1; or count++; } if(count>10) window.alert("You lost!!!");

Variables and Data Types • Variables in JS do not have data types • However, every variable has a value, and every variable belongs to one of the six JS data types: • Number • String • Boolean • Null • Object • Undefined (variable that has been declared but has not been assigned a value.

Values Returned by typeof var i; var j; j = "Not a number"; alert("i is " + (typeof i) + "\n" + "j is " + (typeof j)); i is undefined j is string

JS Statements • Expression statement • A statement that consists entirely of an expression • Block statement • A set of statements enclosed in braces { and } • Keyword statement • Statements that begin with keywords such as var , if, etc. i = 5; j++; m==true; { x = 5; y = 10 area = x * y; } var i; if score < 50 window.alert(“You failed.”);

Some JS Keyword Statements

Operators • Binary Operators • Has two operands, such as: • Unary Operators • Has a single operand. • A unary operator may be either prefix or postfix – • i.e. • Ternary Operators • Has three operands • The conditional operator is a good example • i.e. a*b; x+y; ++i; i--; ~x; • window.alert(“You “ + (score<50)?”fail”:”pass”);

Literals • Literals are strings of characters that represent values in the language: • null = Null data type • true and false = Boolean values • Numbers can be written as integer (whole number) or decimals • Scientific notation: -12.4e12 means -12.4 x 1012 • Hexadecimal notation: 0xfa00 • Magnitude of numbers: 10308 and 10-323 • String: a quoted string of characters (“xxx”) • Unicode: \u005c

Array • Array can be created as: • Use the Array constructor with no argument • Initialize values with Array constructor • Create two-dimensional array var ary1 = newArray(); var ary2 = newArray( 4, true, “OK”); var ary3 = [ 4, true, “OK” ]; var ary2d = [ [ “X”, “0”, “0” ] , [ “0”, “X”, “0” ] , [ “0”, “X”, “X” ]];

Functions • A function in JS is composed of: • The keyword function • Identifier representing function name • List of identifiers representing formal parameter list • The statements representing function body var message = "Left"; function change(message) { message = "Right"; window.alert(message); return; } change(message); window.alert(message);

html head body meta title h1 p ul li li li Javascript DOM <html> <head> <title>JS Dom</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <h1 id=“header”>The Javascript DOM</h1> <p>DOM is "Document Object Model”.</p> <ul id=“list”> <li>Document = the web page</li> <li>Object = virtual objects</li> <li>Model = map</li> </ul> </body> </html>

Language Array Boolean Date Math Number String Javascript Language Hierarchy Navigator Window Mimetype Frame Location Document History Anchor Area Form Image Link Password Radio Reset Submit Text Text Area Button Checkbox Select Hidden Option

Example of HTML Code <html> <head> <title>JS Dom</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1“/> </head> <body> <h1 id=“header”>The Javascript DOM</h1> <p>DOM is “Document Object Model”.</p> <ul id=“list”> <li><a href=“www.sun.com”>Go to Sun</a></li> <li><a href=“www.cnn.com”>Go to CNN</a></li> <li><a href=“www.nbc.com”>Go to NBC</a></li> </ul> </body> </html>

Retrieving Elements • document.getElementById(“ID name”) • Returns the element with reffered ID • document.getElementsByTagName(“Tag name”) • Returns an array of all elements with the reffered tag.

Retrieving Element by ID x = document.getElementById(‘list’); <h1 id=“header”>The Javascript DOM</h1> <p>DOM is "Document Object Model”.</p> <ul id=“list”> <li><a href=“www.sun.com”>Go to Sun</a></li> <li><a href=“www.cnn.com”>Go to CNN</a></li> <li><a href=“www.nbc.com”>Go to NBC</a></li> </ul>

Retrieving Element by Tag Name x = document.getElementByTagName(‘li’); <h1 id=“header”>The Javascript DOM</h1> <p>DOM is "Document Object Model”.</p> <ul id=“list”> <li><a href=“www.sun.com”>Go to Sun</a></li> <li><a href=“www.cnn.com”>Go to CNN</a></li> <li><a href=“www.nbc.com”>Go to NBC</a></li> </ul>

Retrieving Element by Tag Name x = document.getElementByTagName(‘li’); node = x[2]; <h1 id=“header”>The Javascript DOM</h1> <p>DOM is "Document Object Model”.</p> <ul id=“list”> <li><a href=“www.sun.com”>Go to Sun</a></li> <li><a href=“www.cnn.com”>Go to CNN</a></li> <li><a href=“www.nbc.com”>Go to NBC</a></li> </ul>

Retrieving Element by ID x = document.getElementById(‘list’); node = x.childNodes; <h1 id=“header”>The Javascript DOM</h1> <p>DOM is "Document Object Model”.</p> <ul id=“list”> <li><a href=“www.sun.com”>Go to Sun</a></li> <li><a href=“www.cnn.com”>Go to CNN</a></li> <li><a href=“www.nbc.com”>Go to NBC</a></li> </ul>

Accessing the Children x_first = document.getElementById(‘list’).firstchild; x_last = document.getElementById(‘list’).lastchild; <h1 id=“header”>The Javascript DOM</h1> <ul id=“list”> <li><a href=“www.sun.com”>Go to Sun</a></li> <li><a href=“www.cnn.com”>Go to CNN</a></li> <li><a href=“www.nbc.com”>Go to NBC</a></li> </ul>

Chaining the Methods • We can reach the node faster by chaining the methods document.getElementById(‘list’).getElementsByTagname(‘li’)[1].firstchild; <h1 id=“header”>The Javascript DOM</h1> <ul id=“list”> <li><a href=“www.sun.com”>Go to Sun</a></li> <li><a href=“www.cnn.com”>Go to CNN</a></li> <li><a href=“www.nbc.com”>Go to NBC</a></li> </ul>

Creating Form <form name="frmLogin" method="post" onsubmit="return check()"> <table width="400"> <tr><td>Username:</td> <td><input type="text" name="txtUser" id="txtUser" /> <span id="usrSpan" style="color: red">*required</span></td> </tr> <tr><td>Password:</td> <td><input type="password" name="passwd" id="passwd" /> <span id="passwdSpan" style="color: red">*required</span></td> </tr> <tr align="center"> <td colspan="2"><input type="reset" value="Cancel" /> <input type="submit" /></td> </tr> </table> </form>

<script language="JavaScript"> var regExCheck = new RegExp("^\\d{3}$"); function check() { var usr = document.frmLogin.txtUser; var pas = document.frmLogin.passwd.value; if(usr.value == "") { alert("You must enter username."); usr.focus(); document.getElementById('usrSpan').innerHTML = "xxxx"; return false; } if(pas == "") { alert("You must enter password."); document.frmLogin.passwd.focus(); //alert(document.getElementById('passwdSpan').firstChild.nodeValue); document.getElementById('passwdSpan').firstChild.nodeValue = “xxxx”; return false; } if(regExCheck.test(pas)) alert("str: OK"); else { alert("str: Not OK"); document.frmLogin.passwd.value = ""; document.frmLogin.passwd.focus(); return false;} return true; } </script>

Regular Expression

Regular Expression • Regular expression is a way of representing a set of strings • It is often used to test that a string entered in an HTML form • has a certain format or; • Belongs to the set of strings that have correct format • An example of the set of strings that consist of three digits • \d\d\d var acTest = newRegExp("^\\d\\d\\d$"); if(!acTest.test(areaCode) { window.alert(areaCode + " is not valid."); } var acTest = /^\d\d\d$/;

JS Multicharacter Escape Codes

More Complex Regular Expression • The simplest form of RegExp is a character that is not on of these RegExp special characters: • Simple regular expression can be composed into more complex RegEX using one of three types of operators • Concatenation • Union • Kleene star ^ $ \ . * + ? ( ) [ ] { } |

Concatenation • Two or more RegExps can be concatenated as: • This represents the set of strings beginning with a single digit followed by a period, a space, and terminating a “word” character (letter, digit, or underscore). ^\d\. \w$ 3.A 7. J 2. 1 2. x 0. _ These are not OK because: - The first doesn’t have space. - The second has two spaces. These are OK.

Concatenation (cont) • When we want to concatenate itself many times, we can use the quantifier notation: • The set of all strings of exactly three digits • Strings that begin with a – followed by three digits • This is any string from three through six digits, or using Union as: (see next slide) \d{3} -\d{3} \d{3,6} \d\d\d|\d\d\d\d|\d\d\d\d\d|\d\d\d\d\d\d

Union • Union operator is represented by the pipe symbol, “|” • The set consisting of all digit and white space characters. • String consisting of + and two-character strings beginning with – followed by a digit, and the white space characters. • Note: This is because concatenation has higher priority than union. So, use parentheses. \d|\s \+|-\d|\s (\+|-)\d|\s

Class • We can use “character class” to represent a set of all lowercase/uppercase characters or all digit • This represents the set of lowercase letters • This is equivalent to the escape code: \w [a-z] [a-zA-Z0-9]|_

Kleen Star • Kleen star allows us to represent infinitely large sets • This represents the set of strings of any number of digits, including empty string. • An example of valid password that must contain at least one digit and at least one letter and may only contain digits, letters, and underscores \d* \w*(\d\w*[a-zA-Z]|[a-zA-Z]\w*\d)\w*

Regular Expression Derived from:http://www.zytrax.com/tech/web/regex.htm

Definitions

Our Example Target Strings • Throughout this guide we will use the following as our target strings: STR1 Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt) STR2 Mozilla/4.75 [en](X11;U;Linux2.2.16-22 i586)

Simple Matching Search For

Brackets, Ranges and Negation

Brackets, Ranges and Negation Search For

Positioning (or Anchors)

Positioning (or Anchors) Search For

Iteration 'metacharacters'

Iteration 'metacharacters' Search For

More 'metacharacters'

Example: More 'metacharacters'

Javascript

Javascript

Presentation Transcript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JAVASCRIPT

JavaScript

JavaScript

JavaScript

Javascript

JavaScript

JAVASCRIPT

JavaScript