1 Javascript Web Technology

2 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

3 Imported JS //Javascript inline comment window.alert("Hello World!"); hello.js JSHelloWorld.html JSHelloWorld.html

4 Embedded JS JSHelloWorld.html window.alert(“Hello World!”); JSHelloWorld.html

5 JS Input JSHelloWorld.html var inString = window.prompt(“Please enter your number”, “100”); JSInput.html

6 JS Print document.write() Javascript document.write(" Hello World!!! "); document.write(" Good Planet!!! ");

7 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!!!");

8 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: 1.Number 2.String 3.Boolean 4.Null 5.Object 6.Undefined (variable that has been declared but has not been assigned a value.

9 Values Returned by typeof Operand ValueString typeof Returns nullobject Booleanboolean Numbernumber Stringstring Native Object representing functionfunction Native Object not representing functionobject Declared variable with no valueundefined Undeclared variableundefined Nonexistent property of an Objectundefined var i; var j; j = "Not a number"; alert("i is " + (typeof i) + "\n" + "j is " + (typeof j)); i is undefined j is string

10 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.”);

11 Some JS Keyword Statements Statement NameSyntax If-thenif (expr) stmt If-then-elseif (expr) stmt else stmt Dodo stmt while (expr) Whilewhile (expr) stmt Forfor (part1; part2; part3) stmt Continuecontinue Breakbreak Return-voidreturn Return-valuereturn expr Switchswitch (expr) { cases } Trytry try-block catch-part Throwthrow expr

12 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. window.alert(“You “ + (score<50)?”fail”:”pass”); a*b; x+y; ++i; i--; ~x;

13 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 x Hexadecimal notation: 0xfa00 Magnitude of numbers: and –String: a quoted string of characters (“xxx”) –Unicode: \u005c

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

15 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);

16 JS Dom The Javascript DOM DOM is "Document Object Model”. Document = the web page Object = virtual objects Model = map Javascript DOM html head metatitle body h1pul li

17 Javascript Language Hierarchy Navigator Mimetype Anchor Location Window Frame History Document AreaFormImage Language ArrayBooleanDateNumberMathString Link ButtonCheckbox HiddenOption PasswordRadioReset Select SubmitTextText Area

18 Example of HTML Code JS Dom The Javascript DOM DOM is “Document Object Model”. Go to Sun Go to CNN Go to NBC

19 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.

20 The Javascript DOM DOM is "Document Object Model”. Go to Sun Go to CNN Go to NBC Retrieving Element by ID x = document.getElementById(‘list’);

21 The Javascript DOM DOM is "Document Object Model”. Go to Sun Go to CNN Go to NBC Retrieving Element by Tag Name x = document.getElementByTagName(‘li’);

22 The Javascript DOM DOM is "Document Object Model”. Go to Sun Go to CNN Go to NBC Retrieving Element by Tag Name x = document.getElementByTagName(‘li’); node = x[2];

23 The Javascript DOM DOM is "Document Object Model”. Go to Sun Go to CNN Go to NBC Retrieving Element by ID x = document.getElementById(‘list’); node = x.childNodes;

24 The Javascript DOM Go to Sun Go to CNN Go to NBC Accessing the Children x_first = document.getElementById(‘list’).firstchild; x_last = document.getElementById(‘list’).lastchild;

25 Chaining the Methods We can reach the node faster by chaining the methods The Javascript DOM Go to Sun Go to CNN Go to NBC document.getElementById(‘list’).getElementsByTagname(‘li’)[1].firstchild;

26 Creating Form Username: *required Password: *required

27 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; }