Javascript Javascript Introduction Java Script enhancing the functionality

Javascript Introduction Java. Script: enhancing the functionality and appearance of web pages More dynamic

Client-side vs Server-side Client-side scripting language Client = the system where the web browser

Client-side vs Server-side scripting language: works on the server side (where the web page

<? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML

First Javascript Example document. writeln --> document is an object, representing the XHTML document

First Javascript Example document. writeln ("<h 1>Welcome to Java. Script Programming!</h 1>" ); this

Write: Printing on 1 line with multiple statements <? xml version = "1. 0"?

Writeln: Printing on multiple lines <? xml version = "1. 0"? > <!DOCTYPE html

Another Example document. write(“Box”); //<--this writes the word only document. write(“Circle”); //<-- this is

Alert Dialog (Pop-up) <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W

Escape Sequences n = new line t = horizontal tab r = carriage return.

Obtaining User Input Using a prompt dialog allows user to input a value that

Obtaining User Input (cont’d) Keywords in javascript: words that have special meaning E. g.

Function vs Method Function call is not preceded by an object name (such as

Decision Making: Equality and Relational Operators

document. write( "<h 1>Good Afternoon, " ); <html> <head> <title>Using Relational Operators</title> <script type

Algorithms Any computing problem can be solved by executing a series of actions in

Control Structures Sequential execution = statements in a program execute one after another in

<html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> end. Tag = "</ol>"; list.

Control Structures (cont’d) Javascript provides 4 repetition structure types while do. . while for…in

Assignment Operators c = c + 3 --> c += 3 -= *= /=

Increment and Decrement ++ Preincrement: ++a = increment a by 1, then use new

Essentials of Counter. Controlled Repetition The name of a control variable (or loop counter)

<html> <head> <title>Counter-Controlled Repetition</title> <script type = "text/javascript"> <!-var counter = 1; // initialization

Repetitive Statement <html> <head> <title>Counter-Controlled Repetition</title> <script type = "text/javascript"> <!-// Initialization, repetition condition

do. . while Repetition <html> <head> <title>Using the do. . . while Repetition Statement</title>

Break and Continue Statement <html> <head> <title> Using the break Statement in a for

Logical Operators Logical AND (&&), logical OR (||) and logical NOT (!)

Functions Used to define specific tasks that may be used at many points in

<html > <head> <title>A Programmer-Defined square Function</title> <script type = "text/javascript"> <!-document. writeln( "<h

Arrays Array = a group of memory locations that all have the same name

<html > <head> <title>Initializing an Array</title> <script type = "text/javascript"> <!-// this function is

Objects String Methods, e. g. : substr (start, length) = returns a string containing

Objects Date Methods, e. g. : get. Date( ): returns a number from 1

Objects Document Manipulating document that is currently visible in the browser window Window Manipulating

Individual Assignment Answer this question: What is the difference between server-side scripting and client-side

Expected result 3: Prompt second integer

Expected result 4: Display name and result of division (integer 1 divided by integer

Slides: 52

Download presentation

Javascript

Javascript Introduction Java. Script: enhancing the functionality and appearance of web pages More dynamic and interactive website Provides the programming foundation for the more complex server-side scripting Java. Script is a client-side scripting language A browser contains a javascript interpreter: Processes the commands written in javascript

Client-side vs Server-side Client-side scripting language Client = the system where the web browser is running can be used to validate user input, to interact with the browser, to enhance web pages and to add functionalities like AJAX limitations: browser dependency, restriction from accessing local hardware and filesystem (security reasons) and the script can be viewed by client (browser’s view source capability) example: javascript

Client-side vs Server-side scripting language: works on the server side (where the web page and other contents are) tends to be used for sending/receiving data between server and client and to generate responses for clients database have a wider range of programmatic capabilities than client-side scripting example: php

<? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title>A First Program in Java. Script</title> <script type = "text/javascript"> <!-document. writeln( "<h 1>Welcome to Java. Script Programming!</h 1>" ); // --> </script> </head><body></body> </html>

First Javascript Example document. writeln --> document is an object, representing the XHTML document the browser is currently displaying Object contains information used by the script Has attributes (data) and behaviors (methods) A method may require additional information (arguments) document. writeln --> writeln is a method to write a line of XHTML markup in an XHTML document

First Javascript Example document. writeln ("<h 1>Welcome to Java. Script Programming!</h 1>" ); this is called a statement every statement should end with a semicolon “; ” (a statement terminator) writeln method vs write method

Write: Printing on 1 line with multiple statements <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title>Printing a Line with Multiple Statements</title> <script type = "text/javascript"> <!-document. write( "<h 1 style = "color: magenta">" ); document. write( "Welcome to Java. Script " + "Programming!</h 1>" ); // --> </script> </head><body></html>

Writeln: Printing on multiple lines <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head><title>Printing Multiple Lines</title> <script type = "text/javascript"> <!-document. writeln( "<h 1>Welcome to Java. Script" + " Programming!</h 1>" ); // --> </script> </head><body></html>

Another Example document. write(“Box”); //<--this writes the word only document. write(“Circle”); //<-- this is on the same line document. write(“Square”); //<-- still on the same line document. writeln(“Triangle”); //<-- creates new line Output: Box. Circle. Square Triangle

Alert Dialog (Pop-up) <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head><title>Printing Multiple Lines in a Dialog Box</title> <script type = "text/javascript"> <!-window. alert( "Welcome ton. Java. Scriptn. Programming!" ); // --> </script> </head> <body> <p>Click Refresh (or Reload) to run this script again. </p> </body> </html>

Escape Sequences n = new line t = horizontal tab r = carriage return. Cursor goes to the beginning of the current line \ = backslash ” = double quote --> window. alert (“”in quotes””); --> output: “in quotes” ’ = single quote --> window. alert (‘’in quotes’’); --> ‘in quotes’

Obtaining User Input Using a prompt dialog allows user to input a value that the script can use

<? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 1//EN" " http: //www. w 3. org/TR/xhtml 11/DTD/xhtml 11. dtd"> <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title>Using Prompt and Alert Boxes</title> <script type = "text/javascript"> <!-var name; // string entered by the user // read the name from the prompt box as a string name = window. prompt( "Please enter your name", "Your Name" ); document. writeln( "<h 1>Hello " + name + ", welcome to Java. Script programming!</h 1>" ); // --> </script> </head> <body> <p>Click Refresh (or Reload) to run this script again. </p> </body> </html>

Obtaining User Input (cont’d) Keywords in javascript: words that have special meaning E. g. : var --> variable, break, delete, function, if, else, window, document etc. A declaration: var name; --> create a variable called “name” The name of a variable can be any valid identifier A series of character consisting of letters, digits, underscores and dollar signs that does not begin with a digit and is not a reserved Java. Script keyword Comments: // (single line) or /* … */ (multi-lines)

<? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 strict. dtd"> <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title>An Addition Program</title> <script type = "text/javascript"> <!-var first. Number, // first string entered by user second. Number, // second string entered by user number 1, // first number to add number 2, // second number to add sum; // sum of number 1 and number 2 // read in first number from user as a string first. Number = window. prompt( "Enter first integer", "0" ); // read in second number from user as a string second. Number = window. prompt( "Enter second integer", "0" ); // convert numbers from strings to integers number 1 = parse. Int( first. Number ); number 2 = parse. Int( second. Number ); // add the numbers sum = number 1 + number 2; // display the results document. writeln( "<h 1>The sum is " + sum + "</h 1>" ); // --> </script> </head> <body> <p>Click Refresh (or Reload) to run the script again</p> </body> </html>

Function vs Method Function call is not preceded by an object name (such as document or window) and a dot (. ) Method means that the functions belongs to a particular object

Arithmetic Calculations

Arithmetic

Decision Making: Equality and Relational Operators

document. write( "<h 1>Good Afternoon, " ); <html> <head> <title>Using Relational Operators</title> <script type = "text/javascript"> <!-var name; // string entered by the user now = new Date(); // current date and time hour = now. get. Hours(); // current hour (0 -23) // read the name from the prompt box as a string name = window. prompt( "Please enter your name", "Your Name" ); // determine whether it is morning if ( hour < 12 ) document. write( "<h 1>Good Morning, " ); // determine whether the time is PM if ( hour >= 12 ) { // convert to a 12 hour clock hour = hour - 12; // determine whether it is before 6 PM if ( hour < 6 ) // determine whether it is after 6 PM if ( hour >= 6 ) document. write( "<h 1>Good Evening, " ); } document. writeln( name + ", welcome to Java. Script programming!</h 1>" ); // --> </script> </head> <body> <p>Click Refresh (or Reload) to run this script again. </p> </body> </html>

Algorithms Any computing problem can be solved by executing a series of actions in a specific order --> a procedure A procedure for solving a problem in terms of The actions to be executed, and The order in which the actions are to be executed • is called an algorithm

Control Structures Sequential execution = statements in a program execute one after another in the order in which they are written Transfer of control = the ability of programmer to specify that the next statement to execute may not be the next on in sequence Old school: goto Javascript provides 3 types of selection structures if (single-selection structure) if… else (double-selection structure) Switch (multiple-selection structure)

<html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> end. Tag = "</ol>"; list. Type = "<h 1>Ordered List: Lettered</h 1>"; <title>Switching between XHTML List Formats</title> <script type = "text/javascript"> <!-var choice, start. Tag, // user’s choice // starting list item tag end. Tag, // ending list item tag valid. Input = true, // indicates if input is valid list. Type; // list type as a string choice = window. prompt( "Select a list style: n" + "1 (bullet), 2 (numbered), 3 (lettered)", "1" ); switch ( choice ) { case "1": start. Tag = "<ul>"; end. Tag = "</ul>"; list. Type = "<h 1>Bullet List</h 1>"; break; case "2": start. Tag = "<ol>"; end. Tag = "</ol>"; list. Type = "<h 1>Ordered List: Numbered</h 1>"; break; case "3": start. Tag = "<ol type = "A">"; break; default: valid. Input = false; } if ( valid. Input == true ) { document. writeln( list. Type + start. Tag ); for ( var i = 1; i <= 3; ++i ) document. writeln( "<li>List item " + i + "</li>" ); document. writeln( end. Tag ); } else document. writeln( "Invalid choice: " + choice ); // --> </script> </head> <body> <p>Click Refresh (or Reload) to run the script again</p> </body> </html>

Control Structures (cont’d) Javascript provides 4 repetition structure types while do. . while for…in

Assignment Operators c = c + 3 --> c += 3 -= *= /= %=

Increment and Decrement ++ Preincrement: ++a = increment a by 1, then use new value of a Postincrement: a++ = use current value of a, then increment by 1 -Predecrement: --b = decrement b by 1, then use new value of b Postincrement: b-- = use current value of b, then decrement by 1

Essentials of Counter. Controlled Repetition The name of a control variable (or loop counter) The initial value of the control variable The increment (or decrement) by which the control variable is modified each time through the loop (also known as each iteration of the loop) The condition that tests for the final value of the control variable to determine whether looping should continue

<html> <head> <title>Counter-Controlled Repetition</title> <script type = "text/javascript"> <!-var counter = 1; // initialization while ( counter <= 7 ) { // repetition condition document. writeln( "<p style = "font-size: " + counter + "ex">XHTML font size " + counter + "ex</p>" ); ++counter; // increment } // --> </script> </head><body></body> </html>

Repetitive Statement <html> <head> <title>Counter-Controlled Repetition</title> <script type = "text/javascript"> <!-// Initialization, repetition condition and // incrementing are all included in the for // statement header. for ( var counter = 1; counter <= 7; ++counter ) document. writeln( "<p style = "font-size: " + counter + "ex">XHTML font size " + counter + "ex</p>" ); // --> </script> </head><body></body> </html>

do. . while Repetition <html> <head> <title>Using the do. . . while Repetition Statement</title> <script type = "text/javascript"> <!-var counter = 1; do { document. writeln( "<h" + counter + ">This is " + "an h" + counter + " level head" + "</h" + counter + ">" ); ++counter; } while ( counter <= 6 ); // --> </script> </head><body></body> </html>

Break and Continue Statement <html> <head> <title> Using the break Statement in a for Statement </title> <script type = "text/javascript"> <!-for ( var count = 1; count <= 10; ++count ) { if ( count == 5 ) break; // break loop only if count == 5 document. writeln( "Count is: " + count + " " ); } document. writeln( "Broke out of loop at count = " + count ); // --> </script> </head><body></body> </html>

Logical Operators Logical AND (&&), logical OR (||) and logical NOT (!)

Functions Used to define specific tasks that may be used at many points in a script --> programmer-defined functions A function is invoked by a function call Local variables: known only in the function in which they are defined Parameters: means for communication information between functions via function calls Why use functions? Software reusability

<html > <head> <title>A Programmer-Defined square Function</title> <script type = "text/javascript"> <!-document. writeln( "<h 1>Square the numbers from 1 to 10</h 1>" ); // square the numbers from 1 to 10 for ( var x = 1; x <= 10; ++x ) document. writeln( "The square of " + x + " is " + square( x ) + " " ); // The following square function's body is executed // only when the function is explicitly called. // square function definition function square( y ) { return y * y; } // --> </script> </head><body></body> </html>

Arrays Array = a group of memory locations that all have the same name and normally are of the same type Location = name of the array + position number of the particular element in the array Start at zero (0) E. g. c [0] = -45 c [1] = 23

<html > <head> <title>Initializing an Array</title> <script type = "text/javascript"> <!-// this function is called when the <body> element's // onload event occurs function initialize. Arrays() { var n 1 = new Array( 5 ); // allocate 5 -element Array var n 2 = new Array(); // allocate empty Array // assign values to each element of Array n 1 for ( var i = 0; i < n 1. length; ++i ) n 1[ i ] = i; // create and initialize five-elements in Array n 2 for ( i = 0; i < 5; ++i ) n 2[ i ] = i; output. Array( "Array n 1 contains", n 1 ); output. Array( "Array n 2 contains", n 2 ); } // output "header" followed by a two-column table // containing subscripts and elements of "the. Array" function output. Array( header, the. Array ) { document. writeln( "<h 2>" + header + "</h 2>" ); document. writeln( "<table border = "1" width =" + ""100%">" ); document. writeln( "<thead><th width = "100"" + "align = "left">Subscript</th>" + "<th align = "left">Value</th></thead><tbody>" ); for ( var i = 0; i < the. Array. length; i++ ) document. writeln( "<tr><td>" + i + "</td><td>" + the. Array[ i ] + "</td></tr>" ); document. writeln( "</tbody></table>" ); } // --> </script> </head><body onload = "initialize. Arrays()"></body> </html>

Objects String Methods, e. g. : substr (start, length) = returns a string containing length characters starting from index start value. Of( ) = returns the same string as the source string split(string) = splits the source string into an array of strings

Objects Date Methods, e. g. : get. Date( ): returns a number from 1 to 31 representing the day of month in local time Boolean True/false Numbers var n = new Number (numeric. Value);

Objects Document Manipulating document that is currently visible in the browser window Window Manipulating browser windows

Individual Assignment Answer this question: What is the difference between server-side scripting and client-side scripting? Look at slide 19 and 20 and create a similar HTML with javascript but for Division (SEE NEXT SLIDES FOR EXPECTED RESULT) Your script must: Prompt for name Prompt for first number (integer) Prompt for second number (integer) Display the name AND the result of first number divided by second number SUBMIT YOUR ASSIGNMENT INDIVIDUALLY (don’t forget your name + NIK) to PULSE. DEADLINE: MONDAY, 1 April 2013 (NOT April Fool’s)

Expected result 1: Prompt name

Expected result 2: Prompt first integer

Expected result 3: Prompt second integer

Expected result 4: Display name and result of division (integer 1 divided by integer 2)