Lecture 1 1: JavaScript Functions and DOM

Lecture 11: JavaScript Functions and DOM

JavaScript Functions • A 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 arguments • If 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 Value • Code 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 Variables • Global 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 Variables • Variables 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 Functions • JavaScript 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

DOM • Document 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

DOM • Represents HTML elements as objects • For example, varimg = window.getElementById(“p1”) • Allows JavaScript to programmatically manipulate HTML elements • Provides methods and properties for object manipulation

DOM Document • Finding HTML Elements • document.getElementById(“ID_VALUE”) • document.getElementsByClassName(“CLASSNAME”) • document.querySelector(“CSS-SELECTOR”) • Modifying HTML Elements • document.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”); varphotoName = “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”); varphotoName = “fsu.JPG"; element.src = photoName;

Intrinsic Event Handling • Browser-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 element • A mouse button being clicked • A key being pressed

Intrinsic Event Attribute • An 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 Attribute • A 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 Attribute • Complete list of event attribute: • www.w3schools.com/tags/ref_eventattributes.asp

Lecture 1 1: JavaScript Functions and DOM