JavaScript. Why JavaScript? Registration form. Online calculator. IT Engineering I Instructor: Ali B. Hashemi. Interaction

Size: px

Start display at page:

Download "JavaScript. Why JavaScript? Registration form. Online calculator. IT Engineering I Instructor: Ali B. Hashemi. Interaction"

Duane Copeland
6 years ago
Views:

1 JavaScript Why JavaScript? HTML role on the Web Purpose tell the browser how a document should appear Static can view or print (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. Developed by Netscape for use in Navigator Web Browsers 1 2 Online calculator Registration form Interaction So Scripting What is needed? 3 4 1

2 Overview Relationship of client-side and server-side Javascript 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 5 6 Overview (cont.) A "scripting" language for HTML pages Embed code in HTML pages so they are downloaded directly to browser The browser interprets and executes the script (it is not compiled) Do not declare data types for variables (loose typing) Dynamic binding object references checked at runtime Overview (cont.) Scripts can manipulate browser objects : HTML form elements Images Frames etc. For security cannot write to disk (when run on a client) 7 8 2

3 JavaScript's abilities Generating HTML content dynamically Monitoring and responding to user events Validate forms before submission Manipulate HTTP cookies Interact with the frames and windows of the browser Customize pages to suit users JavaScript is not Java Java : compilation required (not a script) can create stand alone application object-oriented Why is it called Javascript then? purely a marketing trick JavaScript was originally called LiveScript Its name was changed to JavaScript at the last minute 9 10 Java (platform independent) You Your Computer Java Source Code Java Compiler (Mac) Java Compiler (PC) Java Compiler (Unix) Java Byte Code Byte Code Placed on Web Server for Download Java Byte Code Web Server Web Architecture for JavaScript "CLIENT" Desktop access Web browser HTML Page: <SCRIPT> code.. </SCRIPT> HTML/HTTP TCP/IP Internet HTML/HTTP TCP/IP "SERVER" Remote host Web (HTTP) Server Java Interpreter (Mac) Java Interpreter (PC) Java Interpreter (Unix) Client Using Web Browser 11 built-in JavaScript interpreter HTML pages w/ embedded script 12 3

4 JavaScript Versions A First JavaScript Program 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. How to create a JavaScript source file How to add comments to a JavaScript Program How to hide JavaScript from incompatible browsers About placing JavaScript in <head> or <body> sections of HTML documents A First JavaScript Program The <script> Tag JavaScript programs are run from within an HTML document <script> and </script> Used to notify the browser that JavaScript statements are contained within A First JavaScript Program The <script> Tag language attribute Denotes the scripting language being used Default JavaScript Other languages (e.g., VBScript) may be used Can also specify script language version No space between name and version Checked by browser, scripts ignored if browser doesn t support version For ECMAScript compatible browsers, omit version

5 A First JavaScript Program 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 A First JavaScript Program Document object Represents the content of a browser s window write() & writeln() methods of Document object Creates new text on a web page Called by appending method to object with a period Methods accept arguments Information passed to a method A First JavaScript Program Preformatted text <pre> and </pre> tags To indicate text that shouldn't be formatted by the browser. The text enclosed within a <pre> tag retains all spacing and returns, and doesn't reflow when the browser is resized. Scrollbars and horizontal scrolling are required if the lines are longer than the width of the window. Translates literal text to presentation area Required to get carriage return in writeln() method to be sent to presentation area JavaScript: Hello world

of object Unlike HTML, JavaScript is case sensitive 21 22 JavaScript Source File JavaScript programs can

6 JavaScript: Hello world (output!) Document object Document object Considered a top-level object Naming convention Capitalize first letter of object Unlike HTML, JavaScript is case sensitive JavaScript Source File JavaScript programs can be used in two ways: Incorporated directly into an HTML file Using <script> tag Placed in an external (source) file Has file extension.js Contains only JavaScript statements

7 JavaScript Source File (cont.) Creating a JavaScript Source File JavaScript source files Use src attribute of <script> tag to denote source of JavaScript statements Browser will ignore any JavaScript statements inside <script> and </script> if src attribute is used Cannot include HTML tags in source file Advantages of JavaScript source files Makes HTML document neater (less confusing) JavaScript can be shared among multiple HTML files Hides JavaScript code from incompatible browsers <script language= JavaScript JavaScript src= c: c:\source.js > </script> JavaScript: Source File & embedded Can use a combination of embedded and non embedded code Allows finer granularity in coding functionality JavaScript sections executed in order of location within HTML document Example of JavaScript: Source File & embedded

8 Comments in JavaScript Comments in JavaScript (example) Makes it easier to understand the code operation Two types Line comments // ignore all text to the end of the line Block comments /* ignore all text between these symbols */ Hiding JavaScript from Incompatible Browsers Hiding JavaScript from Incompatible Browsers (example) Two methods Place JavaScript in external source file Enclose the code within HTML comments

Hiding JavaScript from Incompatible Browsers (example) Hiding JavaScript from Incompatible Browsers (example) 33 34 Hiding JavaScript from Incompatible Browsers Hiding JavaScript from

9 Hiding JavaScript from Incompatible Browsers (example) Hiding JavaScript from Incompatible Browsers (example) Hiding JavaScript from Incompatible Browsers Hiding JavaScript from Incompatible Browsers (example) Alternate message display If browser doesn t support JavaScript Use <noscript> & </noscript> to place alternate message to users of back-level browsers

10 Placing JavaScript in <head> or <body> sections JavaScript keywords 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 JavaScript keywords (cont.) Working with Variables, Functions, and Objects Variables (or identifiers) Values stored in computer memory locations Value can vary over time Cannot use reserved words as variables Reserved Words or Keywords are part of the JavaScript language syntax Variable Example: employeename

11 Working with Variables, Functions, and Objects Variables To create: Use keyword var to declare the variable Use the assignment operator to assign the variable a value Declare, then assign value (initialize) var employeename; employeename = Ric ; Declare and assign variable in a single statement var employeename = Ric ; Variables Once created: May be changed at any point in the program Use variable name and assignment operator employeename = Althea ; Variables Syntax rules Cannot use: Reserved words & spaces Must begin with one of the following: Uppercase or lowercase ASCII letter Dollar sign ($) or underscore (_) Can use numbers, but not as first character Variables are case-sensitive Variables Conventions Use underscore or capitalization to separate words of an identifier employee_first_name employeefirstname My_variable $my_variable _my_variable

12 Illegal variable names Operators (I) Arithmetic operators (all numbers are floating-point): + - * / % Comparison operators: < <= ==!= >= > Logical operators: &&! (&& and are short-circuit operators) Bitwise operators: & ^ ~ << >> >>> Assignment operators: += -= *= /= %= <<= >>= >>>= &= ^= = Operators (II) Object literals String operator: + The conditional operator: condition? value_if_true : value_if_false Special equality tests: == and!= try to convert their operands to the same type before performing the test === and!== consider their operands unequal if they are of different types Additional operators (to be discussed): new You don t declare the types of variables in JavaScript JavaScript has object literals, written with this syntax: { name1 : value1,..., namen : valuen } Example (from Netscape s documentation): car = {mycar: "Saturn", getcar: CarTypes("Honda"), special: Sales} The fields are mycar, getcar, and special "Saturn" and "Mazda" are Strings CarTypes is a function call Sales is a variable you defined earlier Example use: document.write("i own a " + car.mycar);

13 Three ways to create an object You can use an object literal: var course = { number: "CIT597", teacher: "Dr. Dave" } You can use new to create a blank object, and add fields to it later: var course = new Object(); course.number = "CIT597"; course.teacher = "Dr. Dave"; 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("CIT597", "Dr. Dave"); Array literals JavaScript has array literals, written with brackets and commas Example: color = ["red", "yellow", "green", "blue"]; Arrays are zero-based: color[0] is "red If you put two commas in a row, the array has an 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 You can use an array literal: var colors = ["red", "green", "blue"]; 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"; You can use new Array(n) with a single numeric argument to create an array of that size var colors = new Array(3); 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 Example: var myarray = new Array(5); myarray[10] = 3; Arrays are sparse, that is, 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 Just array of arrays: var a = [ ["red", 255], ["green", 128] ]; var b = a[1][0]; // b is now "green"

14 Arrays and objects Array functions Arrays are objects car = { mycar: "Saturn", 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 myarray.reverse() reverses the array elements 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.tostring() returns a string containing the values of the array elements, separated by commas The for in statement The with statement You can loop through all the properties of an object with for (variable in object) statement; for (var prop in course) { document.write(prop + ": " + course[prop]); } Possible output: teacher: Dr. Dave number: CIT597 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, course["teacher"] is equivalent to course.teacher You must use brackets if the property name is in a variable 55 with (object) statement ; uses the object as the default prefix for variables in the statement For example, the following are equivalent: with (document.myform) { result.value = compute(myinput.value) ; } document.myform.result.value = compute(document.myform.myinput.value); 56 14

15 Regular expressions Defining Custom Functions A regular expression can be written in either of two ways: Within slashes, such as re = /ab+c/ With a constructor, such as re = new RegExp("ab+c") Regular expressions are almost the same as in Perl or Java (only a few unusual features are missing) string.match(regexp) searches string for an occurrence of regexp It returns null if nothing is found If regexp has the g (global search) flag set, match returns an array of matched substrings If g is not set, match returns an array whose 0 th element is the matched text, extra elements are the parenthesized subexpressions, and the index property is the start position of the matched substring 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 Must be formally composed (function definition) Defining Custom Functions (cont.) Custom Function example 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 { }

Returning a value from a Function A function can return nothing Just performing some task A function can return a value Perform a calculation and return the result Var returnvalue =

16 Returning a value from a Function 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(opone, optwo); A return statement must be added to function definition 61 Function call 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 62 Built-in JavaScript Functions Built-in JavaScript Functions (cont.) Functions defined as part of the JavaScript language Function call identical to the custom functions

17 Understanding JavaScript Objects In OO languages (Java, C++) Class structures contain associated variables, methods (functions) and statements Objects are instances of classes (i.e., objects are instantiated from classes) Classes can be inherited from other classes JavaScript is not truly object-oriented oriented Cannot create classes Custom JavaScript objects Based on constructor functions Instantiate a new object or extending an old object Objects inherit all variables and statements of constructor function Any JavaScript function can serve as a constructor Constructor function Has two types of elements Property (field) Variable within a constructor function Data of the object Method Function called from within an object Can be custom or built-in function Constructor function Identifier naming convention First word uppercase to differentiate from non-constructor functions BankEmployee The this keyword Used in constructor functions to refer to the current object that called the constructor function

The new keyword Built-in JavaScript objects Used to create new objects from constructor functions Example: Achmed = new BankEmployee(name, empnum); JavaScript includes 11 built-in objects Each object

18 The new keyword Built-in JavaScript objects Used to create new objects from constructor functions Example: Achmed = new BankEmployee(name, empnum); JavaScript includes 11 built-in objects Each object contains various methods and properties for performing a particular task Can be used directly in program without instantiating a new object Built-in JavaScript objects (cont.) Custom object inheritance and prototypes Objects inherit the properties and methods of their constructor function Constructor functions: Do not require parameters Do not require passed arguments Properties may set the value at a later time If used before set, will return an undefined value

19 Custom object inheritance and prototypes Adding properties after object is instantiated Properties can be added to objects using dot operator (.) These properties available only to that specific object Prototype properties Properties added using prototype keyword Available to all objects that extend the constructor function BankEmployee.prototype.department = ; Custom object inheritance and prototypes Object definitions can extend other object definitions Extend original definition and add new properties or function calls Custom object inheritance and prototypes (example) Custom object methods Functions associated with a particular object Define the function Use the this reference to refer to object properties Add it to the constructor function this.methodname = functionname Call the method using the dot operator (.)

20 Variable Scope Defines where in the program a declared variable can be used Global variable Declared outside a function and is available to all parts of the program var keyword optional Local variable Declared inside a function and is only available within the function it is declared Global and local variables can use same identifier Using Events Understanding Events A specific circumstance that is monitored by JavaScript or, A trigger that fires specific JavaScript code in response to a given situation e.g., an action that a user takes Two basic types of Events JavaScript events User-generated events e.g., mouse-click System-generated events e.g., load event triggered by web browser when HTML document finishes loading

21 Using Events HTML elements and associated events HTML Tags and Events HTML elements allow user to trigger events <input> tag Type attribute determines type of input field <input type= text name= first_name > creates a text field Name attribute assigns a unique name to the element that JavaScript can use to reference it HTML elements and associated events Event Handlers Code that executes in response to a specific event <HTMLtag eventhandler= JavaScript-code > Event handler naming convention Event name with a prefix of on E.g., onclick <input type= button onclick= alert( You clicked the button! ) >

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

$Refers to the specific location of the document http://www.site.com/index.html C:\webpages\homepage.$

22 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"); Using Events (Links) Using Events (Links) Links Used to open files or navigate to other documents on the web Text or image used to represent a link in an HTML document is called an anchor Use anchor tag <a> to process a URL Two types of URL Absolute Refers to the specific location of the document C:\webpages\homepage.html Relative Refers to location of document according to the location of currently loaded document /subdirectory/otherpage.html Increases portability of web site

Using Events (Links) Onclick() example Primary event is the click event For default operation, no event handler is required Overriding the default click event Add onclick event handler that executes

23 Using Events (Links) Onclick() example Primary event is the click event For default operation, no event handler is required Overriding the default click event Add onclick event handler that executes custom code Event handler must return true or false Can use built-in confirm() method to generate Boolean value Onclick() example Events and event handlers Event Applies to Occurs when Handler Load Document body User loads the page in a browser onload Unload Document body User exits the page onunload Error Images, window Error on loading an image or a window onerror 91 Abort Images User aborts the loading of an image onabort 92 23

24 Events and event handlers(cont.) Events and event handlers(cont.) Event KeyDown KeyUp KeyPress Change Applies to Documents, images, links, text areas Documents, images, links, text areas Documents, images, links, text areas Text fields, text areas, select lists Occurs when User depresses a key User releases a key User presses or holds down a key User changes the value of an element Handler onkeydown onkeyup onkeypress onchange 93 Event MouseDown MouseUp Click Applies to Documents, buttons, links Documents, buttons, links Buttons, radio buttons, checkboxes, submit buttons, reset buttons, links Occurs when User depresses a mouse button User releases a mouse button User clicks a form element or link Handler onmousedown onmouseup onclick 94 Events and event handlers(cont.) Events and event handlers(cont.) Event MouseOver MouseOut Select Applies to Links Areas, links Text fields, text areas Occurs when User moves cursor over a link User moves cursor out of an image map or link User selects form element s input field Handler onmouseover onmouseout onselect Event Move Resize DragDrop Applies to Windows Windows Windows Occurs when User or script moves a window User or script resizes a window User drops an object onto the browser window Handler onmove onresize ondragdrop

25 Events and event handlers(cont.) DOM Event Focus Blur Reset Applies to Windows and all form elements Windows and all form elements Forms Occurs when User gives element input focus User moves focus to some other element User clicks a Reset button Handler onfocus onblur onreset Document Object Model DOM hierarchy Submit Forms User clicks a Submit button onsubmit Fields of window, I Fields of window, II window The current window (not usually needed). self Same as window. parent If in a frame, the immediately enclosing window. top If in a frame, the outermost enclosing window. frames[ ] An array of frames (if any) within the current window. Frames are themselves windows. length The number of frames contained in this window. document The HTML document being displayed in this window. location The URL of the document being displayed in this window. If you set this property to a new URL, that URL will be loaded into this window. Calling location.reload() will refresh the window. navigator A reference to the Navigator (browser) object. Some properties of Navigator are: appname -- the name of the browser, such as "Netscape" platform -- the computer running the browser, such as "Win32" status A read/write string displayed in the status area of the browser window. Can be changed with a simple assignment statement

26 Methods of window, I alert(string) Displays an alert dialog box containing the string and an OK button. confirm(string) Displays a confirmation box containing the string along with Cancel and OK buttons. Returns true if OK is pressed, false if Cancel is pressed. prompt(string) Displays a confirmation box containing the string, a text field, and Cancel and OK buttons. Returns the string entered by the user if OK is pressed, null if Cancel is pressed. open(url) Opens a new window containing the document specified by the URL. close() Closes the given window (which should be a top-level window, not a frame) Fields of document, I You must prefix these fields with document. anchors[ ] An array of Anchor objects (objects representing <a name=...> tags) applets[ ] An array of Applet objects The properties are the public fields defined in the applet The methods are the public methods of the applet Cautions: You must supply values of the correct types for the fields and method parameters Changes and method calls are done in a separate Thread Fields of document, II forms[ ] An array of Form elements If the document contains only one form, it is forms[0] images[ ] An array of Image objects To change the image, assign a new URL to the src property links[ ] An array of Link objects A link has several properties, including href, which holds the complete URL

Fields of document, III bgcolor The background color of the document May be changed at any time Fields of the form object elements[ ] An array of form elements title A read-only string containing the

27 Fields of document, III bgcolor The background color of the document May be changed at any time Fields of the form object elements[ ] An array of form elements title A read-only string containing the title of the document URL A read-only string containing the URL of the document Creating an Image Map Creating an Image Map (coordination) An image divided into regions Each region associated with URL via the <a> tag Use <img>, <map>, and <area> tags to create an image map Areas are divided using pixel coordinates of image Picture elements

Process Place image in document using <img> tag Use usemap attribute to reference image map by name Define image map

28 Creating an Image Map (cont.) Two basic types Client-side Part of an HTML document Server-side Code resides on a web server Creating an Image Map Process Place image in document using <img> tag Use usemap attribute to reference image map by name Define image map using <map> tag Use name attribute to give map a name Define image map regions using <area> tag Use shape attribute to specify shape of region rect, circle, poly Common <AREA> tag attributes

29 Try it! javascript: R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){ for(i=0; i<dil; i++){ DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5 } R++ } setinterval('a()',5); void(0) 113 Debugging Mozilla/Netscape has much better debugging tools than IE Firefox Select Tools =>Error Console Mozilla Select Tools => Web Development => JavaScript console Netscape 6: Select Tasks => Tools => JavaScript console Any Mozilla or Netscape: Type javascript: in the location bar and press Enter Internet Explorer: Go to the Preferences... dialog and look for something like Web content => Show scripting error alerts After debugging, test your program in IE IE is the most popular browser 114 Warnings Numbers JavaScript is a big, complex language We ve only scratched the surface It s easy to get started in JavaScript, but if you need to use it heavily, plan to invest time in learning it well Write and test your programs a little bit at a time JavaScript is not totally platform independent Expect different browsers to behave differently Write and test your programs a little bit at a time Browsers aren t designed to report errors Don t expect to get any helpful error messages Write and test your programs a little bit at a time In JavaScript, all numbers are floating point Special predefined numbers: Infinity, Number.POSITIVE_INFINITY -- the result of dividing a positive number by zero Number.NEGATIVE_INFINITY -- the result of dividing a negative number by zero NaN, Number.NaN (Not a Number) -- the result of dividing 0/0 NaN is unequal to everything, even itself There is a global isnan() function Number.MAX_VALUE -- the largest representable number Number.MIN_VALUE -- the smallest (closest to zero) representable number

30 Strings and characters Some string methods Strings are surrounded by either single quotes or double quotes \0 NUL \b backspace \f form feed \n newline \r carriage return \t horizontal tab \v vertical tab \' single quote \" double quote \\ backslash \xdd Unicode hex DD \xdddd Unicode hex DDDD 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 More string methods boolean 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 regexp, replacement) Returns a new string that has the matched substring replaced with the replacement search(regexp regexp) Returns the position of the first matched substring in the given string, or -1 if not found. 119 The boolean values are true and false When converted to a boolean, the following values are also false: 0 "0" and '0' The empty string, '' or "" undefined null NaN

31 undefined and null Wrappers and conversions There are special values undefined and null undefined is the only value of its type This is the value of a variable that has been declared but not defined, or an object property that does not exist void is an operator that, applied to any value, returns the value undefined null is an object with no properties null and undefined are == but not === JavaScript has wrapper objects for when a primitive value must be treated as an object var s = new String("Hello"); // s is now a String var n = new Number(5); // n is now a Number var b = new Boolean(true); // b is now a Boolean Because JavaScript does automatic conversions as needed, wrapper objects are hardly ever needed JavaScript has no casts, but conversions can be forced var s = x + ""; // s is now a string var n = x + 0; // n is now a number var b =!!x; // b is now a boolean Because JavaScript does automatic conversions as needed, explicit conversions are hardly ever needed HTML names in JavaScript In HTML the window is the global object The most important window property is document HTML form elements can be referred to by document.forms[formnumber].elements[elementnumber] Every HTML form element has a name attribute The name can be used in place of the array reference <form name="myform"> <input type="button" name="mybutton"...> Then instead of document.forms[0].elements[0] you can say document.myform.mybutton 123 JavaScript Examples

32 Getting the date <script type="text/javascript"> var d = new Date() document.write(d.getdate() + "/") document.write((d.getmonth() + 1) + "/") document.write(d.getfullyear()) </script> 27/10/2003 Getting and formatting the date <script type="text/javascript"> var d=new Date() var weekday=new Array ("Sunday", "Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday") var monthname=new Array("Jan", "Feb", "Mar","Apr", May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec") document.write(weekday[d.getday()] + ", "); document.write(monthname[d.getmonth()] + " " + d.getdate() + ", "); document.write(d.getfullyear()); </script> Monday, Oct 27, Getting a random number The following code gets a random floating-point number between 0 and 1: <script type="text/javascript"> document.write(math.random()) </script> Getting a random integer The following code gets a random integer between 1 and 10: <script type="text/javascript"> var max = 10; number=math.random()*max + 1; document.write(math.floor(number)); </script>

33 Displaying an alert box The following code displays an alert box when a button is clicked: <form> // Buttons can only occur within form <input type="button" name="submit" value="alert! onclick="alert('oh oh, something happened!');"> </form> Telling what happened In the <head> of the HTML page define: <script>  </script> For each form element, I have a handler for every (plausible) event Telling what happened (Button) Sorting a Table (i) <input type="button" name="plainbutton" value="plain Button onmousedown="tell(this.name, 'onmousedown');" onmouseup="tell(this.name, 'onmouseup');" onclick="tell(this.name,'onclick');" ondblclick="tell(this.name,'ondblclick'); onfocus="tell(this.name, 'onfocus'); onblur="tell(this.name, 'onblur'); onmouseover="tell(this.name, 'onmouseover');" onmouseout="tell(this.name, 'onmouseout');" onchange="tell(this.name, 'onchange'); onkeypress="tell(this.name, 'onkeypress'); onkeydown="tell(this.name, 'onkeydown'); onkeyup="tell(this.name, 'onkeyup'); onselect="tell(this.name, 'onselect'); onreset="tell(this.name, 'onreset'); > <title>web Page</title> <table border="1" name="table0"><br> <tr><th><a href="?sortby=names">name</a> <th><a href="?sortby=ranks">rank</a> <th><a href="?sortby=indexes">index</a> <script language="javascript"> <!-- html comment var indexes = new Array(0, 1, 2, 3, 4, 5); var names = new Array("John", "Mary", "Adam", "Zoe", "Otis", "Sarah"); var ranks = new Array(4, 5, 1, 3, 6, 2); var sortarray = indexes; //document.writeln(document.url + "<br>"); var sortparamindex = document.url.lastindexof("sortby=");

34 Sorting a Table (ii) if( sortparamindex!= -1 ) { var sortbystr = document.url.slice(sortparamindex+7); // document.writeln(sortbystr + "<br>"); if( sortbystr === "names" ) sortarray = names; if( sortbystr === "ranks" ) sortarray = ranks; if( sortbystr === "indexes" ) sortarray = indexes; } function printrow(name, rank, index) { document.writeln("<tr><td>" + name + "<TD>" + rank + "<TD>" + index); } 133 Sorting a Table (iii) function getnext(arr, lastindex) { // find the next best var bestvalue = arr[0]; var bestindex = 0; var isfirst = (lastindex < 0); var lastvalue = arr[lastindex]; for(i=1; i < arr.length; i++) { var islower = (arr[i] < bestvalue); var notprevious = (isfirst arr[i] > lastvalue); var isbestprevious = (!isfirst && (bestvalue <= lastvalue)); if( (islower && notprevious) isbestprevious ) { bestvalue = arr[i]; bestindex = i; } } return bestindex; } var index = getnext(sortarray, -1); for(k=0; k < sortarray.length; k++ ) { printrow(names[index], ranks[index], index); index = getnext(sortarray, index); } // --></script></table> 134 Basic Rollover <a href=" onmouseover="document.my_image.src= sign_new.gif'" onmouseout="document.my_image.src= sign.gif'"> <img src= sign.gif" width="30px" height="31px" border="0" name= my_image" alt= My Image"> </a>

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

JavaScript. Why JavaScript? Dynamic Form Validation. Online calculator. IT Engineering I Instructor: Ali B. Hashemi. Interaction 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