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
Top Related