2. 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.

3. 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

4. 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

5. 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);

6. 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);

7. 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.

8. Call By Value var message = “dog”; function ChangeMessage(message){ message = “cat”; alert(message); return; } ChangeMessage(message); //display cat alert(message); //display dog

9. 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.

10. 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

11. 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.

12. 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

13. 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

14. DOM Represents 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

15. 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 = “”

16. 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);

17. 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;

18. 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

19. 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: Event attribute JavaScript function

20. 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

21. Intrinsic Event Attribute Complete list of event attribute: www.w3schools.com/tags/ref_eventattributes.asp