1. Arrays – What is it? – Creation – Changing the contents Functions – What is it? – Syntax – How they work – Anonymous functions A quick lesson in Objects – JavaScript: A world of objects – The DOM Topic 5_2: Arrays, Functions and Objects in JavaScript By the end of this lecture you should :

2. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Arrays: What does an egg carton have to do with an array??? An array is actually considered a special type of variable, capable of storing multiple values [0] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

3. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Arrays: Creation

4. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Arrays: Creation: Accessing the elements You refer to an element in an array by referring to the index number. Example: var fruit=new Array(”apple",”cherry",”grape"); var favourite=fruit[2]; What is the value of favourite?

5. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Arrays: Changing contents Adding elements to an array: add at the end use push( ) example: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi") Results in ["Banana", "Orange", "Apple", "Mango”,”kiwi’]; add at the front use unshift( ) Example: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Kiwi") Results in [“kiwi”,"Banana", "Orange", "Apple", "Mango”];

6. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Arrays: Changing contents Deleting elements from an array: from end use pop( ) example: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop( ) Results in ["Banana", "Orange", "Apple”]; From front use shift( ) Example: var fruits = ["Banana", "Orange", "Apple", "Mango"]; Fruits. Shift( ) Results in ["Orange", "Apple", "Mango”];

7. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Functions: What are they? & Syntax A function is______________________? A function is a block of statements that performs some task and returns a value. Syntax for a function: function functionname() { some code to be executed }

8. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Functions: How they work A function is______________________? A function is an independent part of the program and it is not executed until it is called. Example in html: function myFunction() { alert("Hello World!"); } Try it 1. produces a button on web page with label ‘try it’ 3. The function makes an alert box that says ‘Hello World’ 2. when user clicks button mouse function is called

9. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Functions: How they work A function is______________________? Functions can have arguments. Parameters are passed to the function arguments when it is called. Function_name(parameter1,parameter2,…); function definition that receives the arguments Function_name(argument1, argument2….); function call that passes the arguments to the parameters

10. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Functions: How they work A function is______________________? Functions can have arguments. Parameters are passed to the function arguments when it is called. Example: htt p://www.w3schools.com/js/js_functions.asp function myFunction(name,job) { alert("Welcome " + name + ", the " + job); } Click the button to call a function with arguments Try it

11. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Functions: How they work-variable scope Global or local variable?

12. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Functions: How they work -return statement A return statement, stops the function executing and returns a specified value back to where the function call was made. Can also use return to simply exit a function. function calculate(a,b,c) { var d = (a+b) * c; return d; } alert("The answer to 3+2x3 is" +calculate(3,2,3));

13. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Functions: Anonymous A function with no name. An anonymous function is simply a function containing the steps that you wish to perform Function( ) { //code goes here } Anonymous Functions as Variables: e.g. var greetings=function( ) ( ) is an operator indicating the function is to be called Closure: An anonymous function defined within another function (Quiqley, 2011) View example of HTML code.

14. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: The concept of objects is programming is analogous to objects in the real world. Many elements of JavaScript as well as elements of a webpage can be considered to be objects.

15. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: A function is______________________? Many elements of JavaScript as well as elements of a webpage can be considered to be objects. The concept of objects is programming is analogous to objects in the real world. ObjectAttributesActions DogTailWag Bark CarTransport Model Hornhonk ObjectPropertyMethod documenttitle URL write

16. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: A function is______________________? Objects have associated properties and methods. ObjectAttributesActions DogTailWag Bark ObjectPropertyMethod documenttitle URL write If the world worked like javaScript, you’d get a dog to wag its tail by using dog.tail.wag( ) In JavaScript we can write to the document by using document.write()

17. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: Another analogy example, from w3cschools

18. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: In JavaScript virtually everything is an object. For example: Var myname=‘Geraldine’ Is creation of a string object Var lastname=‘Torrisi’ – this creates another instance of a string object. Example 2: A array is considered an object. In the previous topic we already encountered several methods associated with an array. What were they??

19. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: On w3c schools there is a comprehensive list of objects and their methods. Following is the reference for arrays:

20. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: http://www.w3schools.com/jsref/jsref_obj_array.asp

21. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: The HTML DOM

22. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: The HTML DOM

23. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: The HTML DOM

24. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: The HTML DOM

25. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: The HTML DOM Objects: e.g. a window, button or web page document Properties: e.g. document.bgcolor Methods: e.g. document.write() Events: e.g. on click

26. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: The HTML DOM Each object is identified by an object name To indicate the location of an object within the hierarchy, you separate each level using a dot Dot syntax

27. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: The HTML DOM Referencing Objects Your name: Your car: To access an item in a collection you can either use the number or the name of the item: document.write(" The first form's name is: " + document.forms[0].name + " "); document.write(" The first form's name is: " + document.getElementById("Form1").name + " ");

28. Topic 5_2: Arrays, functions and objects in JavaScript Arrays What is it? Creation Changing the contents Functions What are they? Syntax How they work Anonymous functions A quick lesson in Objects JavaScript: A world of objects The DOM Objects: The HTML DOM http://www.w3schools.com/jsref/jsref_ obj_array.asphttp://www.w3schools.com/jsref/jsref_ obj_array.asp provides an excellent detailed reference to the DOM, its objects, properties and methods.

29. (Quiqley,2011) View the HTML document