jacasc2 (1)

JAVASCRIPT:

1. DOCUMENT OBJECT MODEL (DOM)

Window

Document anchor

link

Form textbox

textarea

radiobutton

checkbox

select

button

2. Definition (DOM):

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

The W3C DOM specifies a way of treating a document as a tree of nodes.

Here, every discrete data item is a node, and child elements or enclosed text become subnodes.

3. JavaScript:An Object-oriented Script

JavaScript makes available a lot of predefined objects that gives us access to some aspect of the browser and document.

http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript

Object Description

Document Represents the current web page’s body.

Window This object provides access to the current browser window.

History Records what sites the browser has been to before opening the current web page

4. KEY LANGUAGE COMPONENTS

Objects img, form, checkbox, button, textarea

Attributes height, width, src, href, bgcolor, name

Methods onclick, focus, alert, getDate()

Statements document.myimage.src=“somepic.jpg”

Functions function doSomething()

{...statements...}

5. JAVASCRIPT ARRAYS

Arrays are predefined JavaScript objects. An array must be declared before it is used.

-- arrname= new Array (Array length);

-- arrname1= new Array();

JavaScript automatically extends the length of the array, when new array elements are initialized.

Dense Arrays:- It is an array that has been created with each of its elements being assigned a specific value.

6. FUNCTIONS

A function is a definition of a set of deferred actions. Functions are invoked by event handlers or by statements elsewhere in the script. Whenever possible, good functions are designed for reuse in other documents. They can become building blocks you use over and over again.

A script that is sectioned off as a separate piece of code and given a name. Using this name, another script can call this script to execute at any time and as often as it needs to.

predefined functions, like parseInt() user-defined functions recursive functions

JavaScript provides seven globally defined functions :- parseInt, parseFloat, escape, eval, isFinite, isNaN, unescape.

Creating Functions function functionName( [argument1]

[…,argumentN]) {

[statements]

} Where to declare Functions

A function can be any where inside a <script> block

It is recommended to declare functions in the <head> block of your HTML document

If you have programmed before, you can see parallels between JavaScript functions and other languages’ subroutines.

But unlike some languages that distinguish between procedures (which carry out actions) and functions (which carry out actions and return values), only one classification of routine exists for JavaScript.

A function is capable of returning a value to the statement that invoked it, but this is not a requirement.

Calling Functions<html><head> <title>CE3101 demo</title> <script type="text/javascript">  </script></head>

<body> <h1>Multiply the two numbers...</h1> <form name="form1" method="POST"> <pre> First Number: <input type="text" size="5" maxlength="5"

name="Number1"> </pre> <pre> Second Number: <input type="text" size="5"

maxlength="5" name="Number2"> </pre> <p> <input type="button" name="WizButton" value="Multiply" onclick="calculateValues()"> </p> </form></body></html>

FUNCTION PARAMETERS

Any call to a function, including one that comes from another JavaScript statement, works the same way: a set of parentheses follows the function name.

You also can define functions so they receive parameter values from the calling statement.

Parameters (also known as arguments) provide a mechanism for “handing off” a value from one statement to another by way of a function call.

If no parameters occur in the function definition, both the function definition and call to the function have only empty sets of parentheses.

When a function receives parameters, it assigns the incoming values to the variable names specified in the function definition’s parentheses. Consider the following script segment:

function sayHiToFirst(a, b, c) {

alert(“Say hello, “ + a);}sayHiToFirst(“Gracie”, “George”, “Harry”);sayHiToFirst(“Larry”, “Moe”, “Curly”);

VARIABLE SCOPE

Speaking of variables, it’s time to distinguish between variables that are defined outside and those defined inside of functions.

Variables defined outside of functions are called global variables; those defined inside functions are called local variables.

A global variable has a slightly different connotation in JavaScript than it has in most other languages.

For a JavaScript script, the “globe” of a global variable is the current document loaded in a browser window or frame.

VARIABLE SCOPE

Therefore, when you initialize a variable as a global variable, it means that all script statements in the page

(including those inside functions) have direct access to that variable value.

Statements can retrieve and modify global variables from anywhere in the page. In programming terminology, this kind of variable is said to have global scope because

everything on the page can “see” it. It is important to remember that the instant a page

unloads itself, all global variables defined in that page are erased from memory.

In contrast to the global variable, a local variable is defined inside a function.

The scope of a local variable is only within the statements of the function.

No other functions or statements outside of functions have access to a local variable.

Local scope allows for the reuse of variable names within a document.

For most variables, it is strongly discourage this practice because it leads to confusion and bugs that are difficult to track down.

<HTML><HEAD><SCRIPT LANGUAGE=”JavaScript”>var aBoy = “Charlie Brown” // globalvar hisDog = “Snoopy” // globalfunction demo() {// using improper design to demonstrate a pointvar hisDog = “Gromit” // local version of hisDogvar output = hisDog + “ does not belong to “ + aBoy +

“.<BR>”document.write(output)}

</SCRIPT></HEAD><BODY><SCRIPT LANGUAGE=”JavaScript”>demo() // runs as document loadsdocument.write(hisDog + “ belongs to “ + aBoy + “.”)</SCRIPT></BODY></HTML>

Global and Local Variables A variable is the name given to a location in a

computer’s memory where data is stored Declaring variables

To use the keyword var followed by the new variable name (e.g. var i,j,k)

Local variables A variable declared inside a function

Global variables A variable declared outside of any function and

shared by more than one functions

7. WINDOW OBJECT

At the very top of the document object hierarchy is the window object.

This object gains that exalted spot in the object food chain because it is the master container for all content you view in the Web browser.

As long as a browser window is open—even if no document is loaded in the window—the window object is defined in the current model in memory.

In addition to the content part of the window where documents go, a window’s sphere of influence includes the dimensions of the window and all of the “stuff” that

surrounds the content area.

The area where scrollbars, toolbars, the status bar, and (non-Macintosh) menu bar live is known as a window’s chrome.

Not every browser has full scripted control over the chrome of the main browser window, but you can easily script the creation of additional windows sized the way you want and have only the chrome elements you wish to display in that subwindow.

Attributes of window

window.status property The status bar at the bottom of the browser window

normally displays the URL of a link when you roll the mouse pointer atop it.

Other messages also appear in that space during document loading, Java applet initialization, and the like.

However, you can use JavaScript to display your own messages in the status bar at times that may be beneficial to your users.

window.alert() method This window method generates a dialog box that

displays whatever text you pass as a parameter. A single OK button (whose label you cannot change)

enables the user to dismiss the alert.

window.confirm() method The second style of dialog box presents two buttons

(Cancel and OK in most versions on most platforms) and is called a confirm dialog box.

More importantly, this is one of those methods that returns a value: true if the user clicks OK, false if the user clicks Cancel.

You can use this dialog box and its returned value as a way to have a user make a decision about how a script progresses.

window.prompt() method The final dialog box of the window object, the prompt

dialog box displays a message that you set and provides a text field for the user to enter a response.

Two buttons, Cancel and OK, enable the user to dismiss the dialog box with two opposite expectations: canceling the entire operation or accepting the input typed into the dialog box.

<HTML><HEAD><TITLE>Window Opener and Closer</TITLE><SCRIPT LANGUAGE=”JavaScript”>var newWindowfunction makeNewWindow() {newWindow = window.open(“”,””,”HEIGHT=300,WIDTH=300”)}function closeNewWindow() {if (newWindow) {newWindow.close()newWindow = null } }</SCRIPT></HEAD><BODY><FORM><INPUT TYPE=”button” VALUE=”Create New Window”

onClick=”makeNewWindow()”><INPUT TYPE=”button” VALUE=”Close New Window”

onClick=”closeNewWindow()”></FORM></BODY></HTML>

jacasc2 (1)

Documents