JavaScript Making Web pages come alive

Objectives Be able to read JavaScript scripts Be able to write JavaScript scripts

To See Examples Open text editor Create HTML page Type in each example, save and view with browser

Static vs. Dynamic Static –page appears exactly as it was encoded, nothing changes –only HTML Dynamic –page changes (possibly in response to users actions) –Can’t be only HTML –Scripts

Scripts: server-side vs. client-side Server-side –the first type possible on the Web –action occurs at the server Client-side –handles user interaction –generally easier to implement –may be prepared and implemented offline –action occurs on the client side (browser) –JavaScript is the most common example

DHTML HTML-Document description-we did JavaScript- Client-side interaction-will do CSS- Style definition-beyond Dynamic HTML = HTML + CSS + scripts

JavaScript Developed by Netscape to be simple, cross-browser scripting language for Web Syntax based on ‘C’ - a good starting point to learn other programming languages JavaScript is not Java … enclose a JavaScript script

Write() JavaScript’s output statement: document.write (“Text”); Inside the tag, we must output HTML document.write (“ Text text ”);

Hello World hello javascript document.writeln ("Hello, World!"); Output?

What is the output? hello javascript document.write ("Hello,\n World"); document.write ("Hello, 2 the World");

Why? Hello, WorldHello, 2 the World the document.writeln() method preserves any line breaks in the text string.

JavaScript Statements end with ; –Can often get away with omitting Character strings enclosed in “ ” or ‘ ’ Can include an external source file with the src attribute :

JavaScript Comments // Ignore rest of line /* Ignore everything enclosed */ Don’t forget to end the comment

Objects JavaScript is an Object Oriented Language. Objects are things—nouns –They have attributes---adjectives We call the attributes properties –They have actions---verbs We call the actions methods– use ()

Objects Use dot-notation to indicate that a method or a property belongs to an object. Car analogy document.write() document.bgColor Recall: methods have ()

Objects JavaScript objects include the HTML elements, window, document lastModified is a property of the document object.

JavaScript A variable stores a value. –Declare a variable with the keyword var Assignment: variable = value; + adds numbers + concatenates strings of characters e.g. “ab” + “cd” is “abcd” lastModified is a property of the document object.

Example Last Modified var date; date=document.lastModified; document.writeln ("This page was last modified:“ + date); Will automatically update. Output?

Output This page was last modified: 01/25/ :40:18 Note: var date=document.lastModified; could have been in one line See new window 2.html

Window The document object is contained within a window object. window has methods: –Alert () –Confirm () –Prompt () window is assumed so alert () is equivalent to window.alert ()

Alert() Alert (“some string”) pops up a message box containing its string. It is a method of the (assumed) window object.

Alert() hello alert alert ("Hello, World!"); Output: alert box. Run it to see.

Confirm Confirm uses if-else logic. true/false. Can I assume? Declare a variable. Confirm returns a value which you assign to a variable. O.K. button sends true. Cancel sends false. Test the variable:

Confirm var x = confirm ("Are you sure you are ok?"); if (x) alert ("Good!"); else alert ("Too bad");

Prompt() Prompt() method returns the text var y=prompt ("please enter your name"); document.writeln (“Hello, ” + y);

Prompt() You assign the result to a variable. You use the value. Optional: Second parameter to Prompt() Is the default value.

Equality == tests for equality A==B has the value true when A and B are the same; false otherwise. != tests for inequality

Password var guess; var password=“fool”; guess=prompt(' enter password '); if (password!=guess) location=“forbidden.html”; Why fool? …

Because… Password is in source which may be viewed. I must admit that I couldn’t view it!!

Events Usually, user actions generate events that belong to objects. mouseover load click

Event Handlers Event handlers-respond to users actions –onmouseover –onmouseout –onload –onunload Event handlers are put inside corresponding HTML tags. Not inside …

Case onClick="alert ('You clicked the button!');" The underlined parts are HTML The quoted string is JavaScript onClick –The Java naming convention is easier to read. –This is fine in HTML, but an error if it occurs in JavaScript. JavaScript is case sensitive. HTML is not. Please note: Since we have a quoted string inside another quoted string, we need both single and double quotes.

Event Handlers Most HTML elements have the following event handlers: –onClick -- the form element is clicked –onDblClick -- the form element is clicked twice in close succession –onMouseDown -- the mouse button is pressed while over the form element –onMouseOver -- the mouse is moved over the form element –onMouseOut -- the mouse is moved away from the form element –onMouseUp -- the mouse button is released while over the form element –onMouseMove -- the mouse is moved In JavaScript, these should be spelled in all lowercase

Change Color Change the Background Color Move your cursor over this link to change background color to blue.

OnMouseover Don't click this link! What’s the first thing you’ll do? Aside: I typed this twice. One worked. One didn’t. I never figured out difference.

Status (skip) The window object has the property status whose value is displayed in the status bar. Change it only briefly cause need the info.? Place your mouse here!

Push Button Object that has some effect when it is pushed: e.g. doorbell except traffic light User defined (as opposed to which?) Has no default behavior. (what was….) May have client side scripts associated with its event attributes. When an event occurs (e.g., the user presses the button, releases it, etc.), the associated script is triggered.

Buttons are contained in forms window document form textsubmitresetbutton

Button type="button" This command declares the input to be a button. value="Click Me" This will be the text people will see on the button. Write whatever you want your visitors to see. name="button1" You can give the button a name so you can refer to it.

Button event handler Recall: window is the assumed object.

Color buttons

open open( ) is a method of the window object. It opens a new window. open(“URL”); You can use it inside an event handler. I had to use window.open(). I don’t know why.

Open open sesame

Full featured window window.open(' ‘title','width=400,height=200,toolbar=yes, location=yes,directories=yes,status=yes,m enubar=yes,scrollbars=yes,copyhistory=ye s, resizable=yes') ;

Functions A function is a named piece of code that performs a task. Has () Functions are put in so they are loaded before the page displays. Are executed only when invoked. Body enclosed in{ } (called a block) May have parameters in () (values used by the the function to do its task).

Functions Methods are similar to functions that belong to an object. Functions are similar to methods that belong to the script. Placed in head so they are loaded before they are called. An event handler should be very short –Many handlers call a function to do their job (delegate).

Examples Function_wo_param Simple calculator.html Bgcolor_buttons_func.html –On slide, too Mixed up –On slide, too

function yellow(){document.bgColor='yellow';} function white(){document.bgColor='white';} <input type="button" value="Change toYellow" name="buttonY“ onClick=“yellow();">

function yellow(){document.bgColor='yellow';} function white(){document.bgColor='white';} <input type="button" value="Change toYellow" name="buttonY“ onClick="white()">

Script in Head welcome! alert (‘Welcome!'); This will display the alert before the page starts loading. It’ll disappear when page loads. A function would be called from the body and executed.

Debugging Your JavaScript Programs Three types of errors: –Load-time errors (occurs when the script is loading) –Run-time errors (occurs when the being executed) –Logical errors (free from syntax and structural mistakes, but result in incorrect results)

Common Mistakes You need to debug your program: fix the mistakes w/o adding new ones. Common mistakes include: –Misspelling a variable name –Mismatched parentheses or braces –Mismatched quotes –Missing quotes –Using ( instead of [ or { –Using = in place of ==

Tips for Writing Good JavaScript Code Use good layout to make your code more readable. Indent command blocks to make them easier to read and to set them off from other code Use descriptive variable names to indicate the purpose of your variables Be careful how you use uppercase and lowercase letters in your code, because JavaScript commands and names are case-sensitive

Tips for Writing Good JavaScript Code Add comments to your code to document the purpose of each script Initialize all variables at the top of your script and insert comments describing the purpose and nature of your variables Create customized functions that can be reused in different scripts. Place your customized functions in external files to make them available to your entire Web site

Summary Objects –Properties –Methods Variables Push buttons Events and handlers-inside HTML tags functions

Summary Given an HTML file containing a script, you should be able to show the corresponding web page. Given a web page, you should be able to show the corresponding HTML file.