Lecture 11: JavaScript Functions and DOM

JavaScript FunctionsA function is a block of code that can be reused. It is

similar to a method in Java.

It consists of a function name, an argument list, and code that is executed when the function is called.

Unlike Java methods, a function does not require the data types of formal parameters or data type of the return value of a function.

Example//declaration of function randomNum.

function randomNum(high){

return Math.ceil(Math.random() * high);

}//end of function declaration

//Initialize the computer’s number

//this is a function call

computerNumber = randomNum(100);

Function name

Parameter list

Function body

Argument list

Supply of argumentsIf too few arguments are supplied, the formal parameters

without arguments will be given the Undefined value.

It too many arguments are supplied, the excess arguments are ignored

Too Few Arguments function Sum(a, b){

return a + b;

}

//call the function

var num1 = 10;

var sum = Sum(num1); //what is sum now?

alert(sum);

Too Many Arguments function Sum(a, b){

return a + b;

}

//call the function

var num1 = 10;

var num2 = 5;

var num3 = 20;

var sum = Sum(num1, num2, num3); //what is sum now?

alert(sum);

Call By ValueCode within function body can assign values to the

function’s formal parameters, and such assignments will not change the values of any variables in the function call’s argument list, even if the variable and the parameter use the same identifier.

As in C++ and Java, this is call by value.

Call By Value var message = “dog”;

function ChangeMessage(message){

message = “cat”;

alert(message);

return;

}

ChangeMessage(message); //display cat

alert(message); //display dog

Global VS Local VariablesGlobal variables exist from the beginning of execution of a

program until the program terminates, while local variables exist only from the time the function declaring the variable is called until the function returns.

If a function is called multiple times, new copies of its local variables are created every time the function is called.

Example var j = 6;

function Test(){

var j; //local variable declaration

j = 7; //which variable(s) does this change?

return;

}

Test();

alert(j);

To access the global variable j, you need to use the object called window. For example, window.j

Global VS Local VariablesVariables declared outside of a function are called global

variables.

Variables declared in a function are called local variables.

Global variables can be accessed from any part of a program, while local variables can only be accessed from the function that declares them.

Built-In FunctionsJavaScript supplies some built-in functions.

For example, alert(), prompt(), Boolean(), String(), Number().

Boolean(), String(), Number() can be called to convert a value from any data type to a Boolean, String, or Number, respectively

DOMDocument Object Model (DOM) is an Application

Programming Interface (API) the defines how JavaScript programs can access and manipulate the HTML document.

JavaScript programs access the DOM through a host object named document. Host object is supplied by the host environment (browser),

such as window, document, etc.

Standardize a way to access documents

DOMRepresents HTML elements as objects

For example, var img = window.getElementById(“p1”)

Allows JavaScript to programmatically manipulate HTML elements

Provides methods and properties for object manipulation

DOM DocumentFinding HTML Elements

document.getElementById(“ID_VALUE”)document.getElementsByClassName(“CLASSNAME”)document.querySelector(“CSS-SELECTOR”)

Modifying HTML Elementsdocument.write(“text”)document.getElementById(“sectionOne”).innerHTML = “”document.getSelector(“.paraOne”).innerHTML = “”

SetAttribute() of a object You can set the attribute of a given element dynamically by

using the method setAttribute(attributeName, Value)object.setAttribute(attributeName, Value);SetAttribute is a method of an object/element

For example: var element = window.document.getElementById(“img1”);

var photoName = “fsu.JPG";

element.setAttribute("src", photoName);

Properties of an object You can set the attribute of a given element dynamically by

using the property of the object.object.attribute = value

For example: var element = window.document.getElementById(“img1”);

var photoName = “fsu.JPG";

element.src = photoName;

Intrinsic Event HandlingBrowser-based JavaScript programs are event-driven.

This means that a function is called in response to various user actions.

An event in a browser is an occurrence of potential interest.The mouse moving over an elementA mouse button being clickedA key being pressed

Intrinsic Event AttributeAn intrinsic event attribute is used to provide scripting

code that is called when a given event associated with the element containing the attribute occurs.

for example:

<button type="button" onclick="ChangeParagraph('para2')">

Event attribute

JavaScript function

Intrinsic Event AttributeA List of event attributes

onload – the body of the document has been fully read and parsed

onclick – a mouse button has been clicked and released over the element

ondblclick – the mouse has been double-clicked over the element

onmousedown – the mouse has been clicked over the element

onmouseup – the mouse has been release over the element

onmouseover – the mouse has just moved over the element

onkeypress – this element has the focus and a key has been pressed & released

onkeydown – this element has the focus and a key has been pressed

onkeyup – this element has the focus and a key has released

Intrinsic Event AttributeComplete list of event attribute:

www.w3schools.com/tags/ref_eventattributes.asp