JavaScript. Why JavaScript? Dynamic Form Validation. Online calculator. IT Engineering I Instructor: Ali B. Hashemi. Interaction

Transcription

1 JavaScript Why JavaScript? HTML s role on the Web Purpose tell the browser how a document should appear Static fixed view (no interaction) IT Engineering I Instructor: Ali B. Hashemi JavaScript s role on the Web Purpose make web pages more dynamic and interactive Change contents of document, provide forms and controls, animation, control web browser window, etc. ١ ٢ Online calculator Dynamic Form Validation Interaction So Scripting ٣ ۴ ١

2 Registration form Overview What is needed? Originally called LiveScript when introduced in Netscape Navigator In Navigator 2.0, name changed to JavaScript Current version 1.5 JScript MS version of JavaScript Current version 5.5 Two formats: Client-side Program runs on client (browser) Server-side Program runs on server Proprietary to web server platform ۵ ۶ Overview (cont.) JavaScript's abilities A "scripting" language for HTML pages Embed code in HTML The browser interprets and executes the script Not compiled NO data types for variables For security cannot write to client s disk Generating HTML content dynamically Customize pages to suit users Monitoring and responding to user events Validate forms before submission Interact with the frames and windows of the browser manipulate "browser objects": HTML form elements, Images, Frames, etc. Manipulate HTTP cookies (to be discussed in PHP section) ٧ ٨ ٢

3 JavaScript is not Java Java : compilation required (not a script) can create "stand alone" application Why is it called Javascript then? purely a marketing trick JavaScript was originally called LiveScript changed to JavaScript at the last minute ٩ Java (platform independent) You Java Source Code Byte Code Placed on Web Server for Download Java Byte Code Your Computer Java Compiler (Mac) Java Compiler (PC) Java Compiler (Unix) Java Byte Code Web Server Java Interpreter (Mac) Java Interpreter (Unix) Java Interpreter (PC) Client Using Web Browser ١٠ Web Architecture for JavaScript "CLIENT" Desktop access Web browser HTML Page: <SCRIPT> code.. </SCRIPT> built-in JavaScript interpreter HTML/HTTP TCP/IP Internet HTML/HTTP TCP/IP "SERVER" Remote host Web (HTTP) Server HTML pages w/ embedded script ١١ JavaScript Versions JavaScript 1.0 The original version of the language. It was buggy and is now essentially obsolete. Implemented by Netscape 2. JavaScript 1.1 Introduced a true Array object; most serious bugs resolved. Implemented by Netscape 3. JavaScript 1.2 Introduced the switch statement, regular expressions, and a number of other features. Almost compliant with ECMA v1, but has some incompatibilities. Implemented by Netscape 4. JavaScript 1.3 Fixed incompatibilities of JavaScript 1.2. Compliant with ECMA v1. Implemented by Netscape 4.5. JavaScript 1.4 Implemented only in Netscape server products. JavaScript 1.5 Introduced exception handling. Compliant with ECMA v3. Implemented by Mozilla and Netscape 6. ١٢ ٣

4 Where Should I Write Javascript JavaScript programs are within an HTML document Use the <script> Tag <script> Javascript Code </script> Used to notify the browser that JavaScript statements are contained within A First JavaScript Program <script language="***"> language attribute Denotes the scripting language being used Default JavaScript Other languages (e.g., VBScript) Also can specify script language version No space between name and version Checked by browser, scripts ignored if browser doesn t support version ١٣ ١۴ A First JavaScript Program JavaScript: Hello world Object-based language Object Programming code and data that can be treated as an individual unit or component Statements Individual lines in a programming language Methods Groups of statements related to a particular object ١۵ ١٧ ۴

5 Write JavaScript code for this page Comments in JavaScript Two types Line comments // ignore all text to the end of the line Block comments /* ignore all text between these symbols */ ١٨ ١٩ Comments in JavaScript (example) Remember HTML comments ٢٠ ٢١ ۵

6 Hiding JavaScript from Incompatible Browsers What happens if JavaScript is turned off in a browser? Two methods 1. Place JavaScript in external source file 2. Enclose the code within HTML comments <script language="javascript"> <!- script statements go here //-- --> </script> The start of the HTML comment (<!--) is straightforward. But because the end-comment tag (-->) causes a syntax error in scriptable browsers: a JavaScript comment symbol (//) must precede the endcomment tag. When There Is No JavaScript How to specify content that should appear only if JavaScript wasn t available Use <noscript> & </noscript> to place alternate message to users of old browsers OR users with disabled javascript ٢٢ ٢٣ When There Is No JavaScript (example) JavaScript keywords //STOP HIDING FROM INCOMPATIBLE BROWSERS--> Only in browser with disabled Javascript ٢۴ ٢۵ ۶

7 JavaScript keywords (cont.) Variables Syntax rules Cannot use: Reserved words (keywords) & spaces Must begin with one of the following: Uppercase or lowercase ASCII letter (a-z, A-Z) Dollar sign ($) or underscore (_) Can use numbers, but not as first character Variables are case-sensitive sensitive ٢۶ ٢٧ Variables Conventions Illegal variable names Use underscore or capitalization to separate words of an identifier employee_first_name employeefirstname My_variable $my_variable _my_variable ٢٨ ٢٩ ٧

8 Working with Variables Variable Scope 3 ways To define a variable and assign a value to it: Use keyword var to declare the variable Use the assignment operator to assign the variable a value var employeename; 1 employeename = "Ali"; 2 var employeename = "Ali"; 3 employeename = "Hassan"; Once created: May be changed at any point in the program Values stored in memory Value can vary over time Defines where in the program a declared variable can be used 1. Global variable Any variable defined outside of a function is part of the global variable scope. var keyword optional 2. Local variable Declared inside a function and is only available within the function it is declared Global and local variables can use same identifiers ٣٠ ٣١ Operators (I) Arithmetic operators (all numbers are floating-point): + - * / % Comparison operators: < <= ==!= >= > Logical operators: &&! (&& and are short-circuit operators) Bitwise operators: & ^ ~ << >> >>> Assignment operators: += -= *= /= %= <<= >>= >>>= &= ^= = Operators (II) String operator: + var longstring = "One piece "+"plus" "plus one more piece."; The conditional operator: condition? value_if_true : value_if_false (a>10)? state="old": state="young" If (age>70){ state="old"; else { state="young"; ٣٢ ٣٣ ٨

9 Equality Operator == var stringa = "I am "; var stringb = new String("an intelligent person"); Different Type! The first is a string value, The second is an instance of a String object. If you place these two values on either side of an equality (==) operator, JavaScript tries various evaluations of the values to see if there is a coincidence somewhere. stringa == stringb returns true. == and!= If the types of the two expressions are different, attempt to convert them to string, number, or Boolean. ٣۴ Strict Equality Operator === The strict equality operator (===), performs no data type conversions. The types must be the same to be considered equal. The following expression evaluates to false because the two object types differ, even though their payloads are the same: var stringa = "I am "; var stringb = new String("an intelligent person"); stringa === stringb returns false. ٣۵ Objects An object is a collection of named values. properties of the object. fields of the object if an object named image has properties named width and height, we can refer to those properties like this: image.width image.height Object Methods document.write write("this is a test"); Object literals or object initializer Object Literals Allows you to create an object and specify its properties Consists of a comma-separated list of colon-separated property/value pairs, all enclosed within curly braces. : { name1 : value1,..., namen : valuen car={mycar:"samand",getcar:cartypes("honda"),special:sales The fields are mycar, getcar, and special "Samand" and "Mazda" are Strings CarTypes is a function call with parameter Honda Sales is a variable you defined earlier Example: document.write("i own a " + car.mycar); ٣۶ ٣٧ ٩

10 Three ways to create an object 1. You can use an object literal: var course = { number: "IT402", teacher: "Mr. Ali" 2. You can use new to create a "blank" object, and add fields to it later: var course = new Object(); course.number = "IT402"; course.teacher = "Mr. Ali"; 3. You can write and use a constructor: function Course(n, t) { // best placed in <head> this.number = n; // keyword "this" is required, not optional this.teacher = t; var course = new Course("IT402", "Mr. Ali"); Array literals color = ["red", "yellow", "green", "blue"]; Arrays are zero-based: color[0] is "red" two commas in a row: "empty" element in that location Example: color = ["red",,, "green", "blue"]; color has 5 elements However, a single comma at the end is ignored Example: color=["red",,, "green","blue",]; still has 5 elements ٣٨ ٣٩ Four ways to create an array The length of an array 1. You can use an array literal: var colors = ["red", "green", "blue"]; 2. You can use new Array() to create an empty array: var colors = new Array(); You can add elements to the array later: colors[0] = "red"; colors[2] = "blue"; colors[1]="green"; 3. You can use new Array(n) with a single numeric argument to create an array of that size var colors = new Array(3); 4. You can use new Array( ) with two or more arguments to create an array containing those values: var colors = new Array("red","green", "blue"); If myarray is an array, its length is given by myarray.length Array length can be changed by assignment beyond the current length var a = new Array( ); // a.length == 0 (no elements defined) a = new Array(10); // a.length == 10 (empty elements 0-9 defined) a = new Array(1,2,3); // a.length == 3 (elements 0-2 defined) a = [4, 5]; // a.length == 2 (elements 0 and 1 defined) a[5] = -1; // a.length == 6 (elements 0, 1, and 5 defined) a[49] = 0; // a.length == 50 (elements 0, 1, 5, and 49 defined) Arrays are sparse: space is only allocated for elements that have been assigned a value Example: myarray[50000] = 3; is perfectly OK But indices must be between 0 and Multidimensional Arrays Just array of arrays: var a = [ ["red", 255], ["green", 128] ]; var b = a[1][0]; // b is now "green" ۴٠ ۴١ ١٠

11 Arrays and objects Array functions Arrays are objects car = { mycar: "Samand", 7: "Mazda" car[7] is the same as car.7 car.mycar is the same as car["mycar"] If you know the name of a property, you can use dot notation: car.mycar If you don t know the name of a property, but you have it in a variable (or can compute it), you must use array notation: car["my" + "Car"] If myarray is an array, myarray.sort() sorts the array alphabetically myarray.sort(function(a, b) { return a - b; ) sorts numerically // Returns < 0, 0, or > 0, depending on order myarray.reverse() reverses the array elements ۴٢ ۴٣ Array functions (cont.) The for in statement myarray.push( ) adds any number of new elements to the end of the array, and increases the array s length myarray.pop() removes and returns the last element of the array, and decrements the array s length myarray.unshift() and myarray.shift() myarray.tostring() returns a string containing the values of the array elements, separated by commas Array.join( ) method converts all the elements of an array to strings and concatenates them. loop through all the properties of an object with for (variable in object) statement; for (var prop in course) { document.write(prop + ": " + course[prop]); course["teacher"] is equivalent to course.teacher You must use brackets if the property name is in a variable Possible output: teacher: Mr. Ali number: IT402 The properties are accessed in an undefined order If you add or delete properties of the object within the loop, it is undefined whether the loop will visit those properties Arrays are objects; applied to an array, for in will visit the "properties" 0, 1, 2, ۴۴ ۴۵ ١١

12 The with statement document.myform.result.value = compute(document.myform.myinput.value); a lot of typing! With (object)( statement; ; uses the object as the default prefix for variables in the statement with (document.myform) { result.value = compute(myinput.value); Decision Making if statements if else statements Nested if statements switch statements ۴۶ ۴٧ if Statements if Statements if (conditional_expression) { statement(s); ۴٨ ۴٩ ١٢

13 if else Statements if (conditional_expression) { statement(s); else { statement(s); ۵٠ ۵١ switch Statements switch (expression) { case label1: statement(s); break; case label2: statement(s); break; default: statement(s); ۵٢ ۵٣ ١٣

14 Decision Making switch Statements Case labels Identify specific code segments Can use a variety of data types as case labels Break statement Used to exit switch statements Default label Contains statements that execute when the condition expression doesn t match any of the case labels ۵۴ ۵۵ Repetition while statements do while statements for statements for in statements with statements continue statements ۵۶ ۵٧ ١۴

15 while Statements while (conditional_expression) { statement(s); var count = 1; while (count <= 5) { document.writeln(count); ++count; document.writeln("you have printed 5 numbers."); while Statements var count = 10; while (count > 0) { document.writeln(count); --count; document.writeln("we have liftoff."); ۵٨ ۵٩ do while Statements do { statement(s); while (conditional_expression); for Statements for (initialization_expression; condition; update_statement) { statement(s); ۶٠ ۶١ ١۵

16 for in Statements A looping statement that executes the same statement or command block for all the properties within an object Enables enumeration through an object s properties Syntax for (variable in object) { statement(s); ۶٢ ۶٣ with Statements Eliminates the need to retype the name of an object when properties of the same object are being referenced in a series Syntax with (object) { statement(s); ۶۴ ۶۵ ١۶

17 break,continue Statements Breaks the loop Halts a looping statement and restarts the loop with a new iteration ۶۶ ۶٧ Some string methods is addr charat(n) Returns the nth character of a string concat(string1,..., stringn) Concatenates the string arguments to the recipient string indexof(substring) Returns the position of the first character of substring in the recipient string, or -1 if not found indexof(substring, start) Returns the position of the first character of substring in the given string that begins at or after position start, or -1 if not found lastindexof(substring), lastindexof(substring, start) Like indexof, but searching starts from the end of the recipient string // validates that the entry is formatted as an address function is addr(elem) { var str = elem.value; str = str.tolowercase( ); if (str.indexof("@") > 1) { var addr = str.substring(0, str.indexof("@")); var domain = str.substring(str.indexof("@") + 1, str.length); // at least one top level domain required if (domain.indexof(".") == -1) { alert("verify the domain portion of the address."); return false; ۶٨ ۶٩ ١٧

18 is addr(cont.) is addr(cont.) // parse address portion first, character by character for (var i = 0; i < addr.length; i++) { onechar = addr.charat(i).charcodeat(0); // dot or hyphen not allowed in first position; dot in last if ((i == 0 && (onechar == 45 onechar == 46)) (i == addr.length - 1 && onechar == 46)) { alert("verify the user name portion of the address."); return false; // acceptable characters (-. _ 0-9 a-z) if (onechar == 45 onechar == 46 onechar == 95 (onechar > 47 && onechar < 58) (onechar > 96 && onechar < 123)) { continue; else { alert("verify the user name portion of the address."); return false; for (i = 0; i < domain.length; i++) { onechar = domain.charat(i).charcodeat(0); if ((i == 0 && (onechar == 45 onechar == 46)) ((i == domain.length - 1 i == domain.length - 2) && onechar == 46)) { alert("verify the domain portion of the address."); return false; if (onechar == 45 onechar == 46 onechar == 95 (onechar > 47 && onechar < 58) (onechar > 96 && onechar < 123)) { continue; else { alert("verify the domain portion of the address."); return false; return true; // end of if (str.indexof("@") > 1) alert("the address may not be formatted correctly. Please verify."); return false; ٧٠ ٧١ is addrregexp (validating syntax with regular expressions) How does it work? (validating syntax with regular expressions) // validates that the entry is formatted as an address function is addrregexp( ) { var str = .value; var re = /^[\w-]+( ]+(\.[\w-]+)*@([\w-]+\.)+[a-za-z]{2,7$/ Z]{2,7$/; if (!str.match(re)) { alert("verify the address format."); return false; else { return true; ٧٢ looks for a match that begins ^ with one or more letters, numerals, underscores, or hyphens [\w-] followed by zero or more combinations of a period, letter, numeral, underscore, or hyphen ((\.[.[\w-]+)*) followed by sign followed by one or more computer or domains (([\w-]+ ]+\.)+) followed by two to seven upper- or lowercase letters for the top-level domain name ([a-za za-z]{2,7) on the tail end ($). ٧٣ ١٨

19 Regular expressions More string methods Two way: 1. Within slashes: re = /ab+c/ 2. With a constructor: re = new RegExp("ab+c") Regular expressions are almost the same as in Perl or Java (only a few unusual features are missing) var shortstr = "ali"; Var longstr= "alien from mars"; var myfirstregexp = new RegExp(shortStr, "g"); var result = longstr.match(myfirstregexp); if (result) { alert("found " + result.length + " instances of the text: " + result[0]); else { alert("sorry, no matches."); ٧۴ match(regexp regexp) Returns an array containing the results, or null if no match is found On a successful match: If g (global) is set, the array contains the matched substrings If g is not set: Array location 0 contains the matched text Locations 1... contain text matched by parenthesized groups The array index property gives the first matched position replace(regexp,, replacement) Returns a new string that has the matched substring replaced with the replacement search(regexp) Returns the position of the first matched substring in the given string, or -1 if not found. ٧۵ Defining Custom Functions Custom Function example Function: Individual statements grouped together to form a specific procedure Allows you to treat the group of statements as a single unit Must be contained between <script> and </script> tags A function definition consists of three parts: Reserved word function followed by the function name (identifier) Parameters required by the function, contained within parentheses following the name Parameters variables used within the function Zero or more may be used Function statements, delimited by curly braces { function myfunctionname(param1, param2, ) { // statements go here ٧۶ ٧٧ ١٩

20 Returning a value from a Function Function call A function can return nothing Just performing some task A function can return a value Perform a calculation and return the result Var returnvalue = functioncall(param1, param2); A return statement must be added to function definition function daypart( ) { var onedate = new Date( ); var thehour = onedate.gethours( ); if (thehour < 12) { return "morning"; else if (thehour < 18) { return "afternoon"; else { return "evening"; <script language="javascript" type="text/javascript"> <!-- document.write("good " + daypart( ) + " and welcome") //--> </script> Function invocation or call Statement including function name followed by a list of arguments in parentheses Parameter of function definition takes on value of argument passed to function in function call Code placement Functions must be created (defined) before called <head> rendered by browser before <body> Function definition Place in <head> section Function call Place in <body> section ٧٨ ٧٩ Placing JavaScript in <head> or <body> sections? Script statements interpreted in order of document rendering <head> section rendered before <body> section Good practice to place as much code as possible in <head> section Built-in JavaScript Functions Functions defined as part of the JavaScript language Function call identical to the custom functions ٨٠ ٨١ ٢٠

21 Built-in JavaScript Functions (cont.) Built-in JavaScript utility methods alert() method Displays a pop-up dialog box with an OK button javascript:alert("this is the result of an alert"); ٨٢ ٨٣ prompt() method Displays a pop-up dialog box with a message, a text box, an OK button, and a Cancel button javascript:prompt("this is the result of an Prompt","default value in text box``` Reusing Javascript code Write a javascript function, use it in many html file! HOW? 1. Create a new file with the extension.js. 2. Put your JavaScript code in this file; NO opening and closing SCRIPT tags in the file! 3. To embed into your Web page, use these tags in your HTML file: <SCRIPT LANGUAGE="JavaScript" SRC="myscript.js"> </SCRIPT> Makes HTML document neater (less confusing) JavaScript can be shared among multiple HTML files ٨۴ ٨۵ ٢١

22 JavaScript Source File (cont.) JavaScript source files Use src attribute of <script src = "*.js"> Browser will ignore any JavaScript statements inside <script> and </script> if src attribute is used Cannot include HTML tags in source file JavaScript: Source File & embedded Can use a combination of embedded and non embedded code Finer granularity in coding functionality <script language="javascript" src="../ ="../source.js"> </script> ٨۶ ٨٧ Example of JavaScript: Source File & embedded ٨٨ ٢٢