1 / 63

Web Design

Web Design. Chapter 4: JavaScript. Introduction. The JavaScript we write will appear in the <head> section. The browser interprets the contents of the <head> section first. We use <script> tag to indicate to the browser that the text which follows is part of a script. The syntax:

mbowler
Download Presentation

Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design Chapter 4: JavaScript

  2. Introduction • The JavaScript we write will appear in the <head> section. • The browser interprets the contents of the <head> section first. • We use <script> tag to indicate to the browser that the text which follows is part of a script. • The syntax: <script type = “text/javascript” > <!- - Script code here // - -> </script>

  3. Document object • The document object allows a script programmer to specify text to display in the XHTML document. • The object’s methods use the attributes to provide useful services. document.writeln(“<h1>Welcome to JavaScript<h1>”); Object Method Argument Semicolon Statement

  4. Window Object • The window object represents an open window in a browser.

  5. Escape sequence

  6. Variables • A named memory location where we can store data. • Declared with the keyword var. • Names are case sensitive. • No special characters or spaces. • Should MEAN something. • A variable name can be any identifier consisting of an uppercase and lowercase ASCII letter, digits, dollar sign ($) and underscore ( _ ) that doesn’t begin with a digit and doesn’t contain any spaces.

  7. Variables • Declaring a variable: • Using a statement to create a variable • varexampleVariable; • Initializing a variable: • Assigning a specific value to it. • Can be done when you declare the variable with assignment operator “=“ • var variable_name = value;

  8. Variables • Can declare multiple variables using a single varkeyword: • var customerName = "Don Gosselin", orderQuantity = 100, salesTax = .05; • Can assign value of one variable to another • varsalesTotal; varcurOrder = 40; salesTotal = curOrder;

  9. Dynamic Welcome Page • A script can adapt the content based on input from the user or other variables.

  10. When the user clicks OK, the value typed by the user is returned to the program as a string. This is the promptto the user. Dynamic Welcome Page This is the text field in which the user types the value. This is the default value that appears when the dialog opens. Prompt dialog displayed by the window object’s prompt method.

  11. Adding Integers • Prompt user for two integers. • parseInt • Converts its string argument to an integer. • Calculate the sum.

  12. JS Operators

  13. Precedence of operators

  14. Converting algebra to JS • Algebra: JavaScript: m = ( a + b + c + d + e ) / 5 ; • Algebra: y = mx + b JavaScript: y = m * x + b ;

  15. Control structures • Control structures: • Sequence structure • Selection structures: • if structure (single selection) • if/else structure (double selection) • switch structure (multiple selection) • Repetition structures: • while structure. • do/while structure. • for structure.

  16. ifandif/elsestructures • Allows a program to make decision based on the truth or falsity of a condition. • Conditions can be formed by using the equality and relational operators. • Examples: • if (studentGrade >= 60 ) document.writeln( “Passed” ); • if (studentGrade >= 60 ) document.writeln( “Passed” ); else document.writeln( “Failed” ); • Placing a semicolon immediately after the right parenthesis of the condition is a logic error. • Use braces { } to delimit a compound statements.

  17. ifstructure example

  18. Conditional operator (?:) • It is closely related to the if/else structure. • if (studentGrade >= 60 ) document.writeln( “Passed” ); else document.writeln( “Failed” ); • document.writeln( studentGrade >= 60 ? “Passed” : “Failed” );

  19. switchstructure example

  20. while structure example

  21. for structure example

  22. do/while structure example

  23. break and continue statements

  24. Program Modules in JavaScript • The format of function definition is: function function-name (parameter-list ) { declarations and statements } • Function calls: • Name • Left parenthesis • Arguments separated by commas • Constants, variables or expressions • Right parenthesis • Examples: • total += parseFloat( inputValue ); • total += parseFloat( s1 + s2 );

  25. Declaring and Allocating Arrays • Arrays in memory: • Operator new: • Allocates memory for objects • Dynamic memory allocation operatorvar c;c = new Array( 12 ); • Possible to declare and initialize in one step: • Initialized list var n = [ 10, 20, 30, 40, 50 ];var n = new Array( 10, 20, 30, 40, 50 ); • Also possible to only initialize some values • Leave uninitialized elements blank • Uninitialized elements default to “undefined” var n = [ 10, 20, , 40, 50 ];

  26. <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- SumArray.html --> <!-- Summing Elements of an Array --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Sum the Elements of an Array</title> <script type = "text/javascript"> <!-- function start() { var theArray = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; var total1 = 0, total2 = 0; for ( var i = 0; i < theArray.length; i++ ) total1 += theArray[ i ]; document.writeln( "Total using subscripts: " + total1 ); for ( var element in theArray ) total2 += theArray[ element ]; document.writeln( "<br />Total using for/in: " + total2 ); } // --> </script> </head><body onload = "start()"></body> </html>

  27. Building an Online Quiz Radio buttons Represented as an array Name of radio buttons is name of array One element per button checked property is true when selected XHTML Forms Contain controls, including radio buttons action property specifies what happens when submitted Can call JavaScript code

More Related