arrays – what is it? – creation – changing the contents functions – what is it? – syntax...

• 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 :

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]

contents

work• Anonymous

functions

• The DOM

Arrays: Creation

contents

work• Anonymous

functions

• 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?

contents

work• Anonymous

functions

• 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”];

contents

work• Anonymous

functions

• 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”];

contents

Functions• What are

they?• Syntax• How they

work• Anonymous

functions

• 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}

contents

work• Anonymous

functions

• 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:<!DOCTYPE html><html><head><script>function myFunction(){alert("Hello World!");}</script></head>

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

contents

work• Anonymous

functions

• The DOM

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

contents

work• Anonymous

functions

• The DOM

A function is______________________?Functions can have arguments. Parameters are passed to the function arguments when it is called.

Example: http://www.w3schools.com/js/js_functions.asp

<!DOCTYPE html><html><head><script>function myFunction(name,job){alert("Welcome " + name + ", the " + job);}</script></head><body>

<p>Click the button to call a function with arguments</p>

</body></html>

contents

work• Anonymous

functions

• The DOM

Functions: How they work-variable scope

Global or local variable?

contents

work• Anonymous

functions

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

<!DOCTYPE html><html><head><script>function calculate(a,b,c) {

var d = (a+b) * c;return d;}</script></head><body><script>alert("The answer to 3+2x3 is" +calculate(3,2,3));</script></body></html>

contents

work• Anonymous

functions

• The DOM

Functions: Anonymous

A function with no name.An anonymous function is simply a function containing the steps that you wish to performFunction( ) {//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.

contents

work• Anonymous

functions

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

contents

work• Anonymous

functions

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

Object Attributes Actions

Dog Tail WagBark

Car Transport

Horn honk

Object Property Method

document title

contents

work• Anonymous

functions

• The DOM

Objects:A function is______________________?Objects have associated properties and methods.

Object Attributes Actions

Dog Tail WagBark

Object Property Method

document title

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()

contents

work• Anonymous

functions

• The DOM

Objects: Another analogy example, from w3cschools

contents

work• Anonymous

functions

• 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??

contents

work• Anonymous

functions

• The DOM

Objects:

On w3c schools there is a comprehensive list of objects and their methods. Following is the reference for arrays:

contents

work• Anonymous

functions

• The DOM

Objects:http://www.w3schools.com/jsref/jsref_obj_array.asp

contents

work• Anonymous

functions

• The DOM

Objects: The HTML DOM

contents

work• Anonymous

functions

• The DOM

contents

work• Anonymous

functions

• The DOM

contents

work• Anonymous

functions

• The DOM

contents

work• Anonymous

functions

• The 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

contents

work• Anonymous

functions

• 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

contents

work• Anonymous

functions

• The DOM

Objects: The HTML DOMReferencing Objects<html><body><form id="Form1" name="Form1">Your name: <input type="text"></form><form id="Form2" name="Form2">Your car: <input type="text"></form><p>To access an item in a collection you can either use the number or the name of the item:</p><script type="text/javascript">document.write("<p>The first form's name is: " + document.forms[0].name + "</p>");document.write("<p>The first form's name is: " + document.getElementById("Form1").name + "</p>");</script></body></html>

contents

work• Anonymous

functions

• The DOM

http://www.w3schools.com/jsref/jsref_obj_array.asp provides an excellent detailed reference to the DOM, its objects, properties and methods.

(Quiqley,2011)

View the HTML document

arrays – what is it? – creation – changing the contents functions – what is it? – syntax...

Documents

the power functions direct variation what is it and how do i...

overview intro to functions what are functions? why use...

it answers - excel functions

multiple literacies theory: how it functions, what it...

4.4 evaluate logarithms & graph logarithmic functions p. 251...

what are the functions of proteins

it hash functions

excel functions explained...date & time functions date &...

calculus what is it? what good is it? what is it? what good...

aphasia: symptoms and syndromes ling 411 – 04. simple...

what noun functions as a subject?

mpi – an introduction by jeroen van hunen what is mpi and...

the prefrontal cortex: what is it? its functions, its...

what are the functions of management

andrew tu, matt guarino, brent bachert. what it is drug ...

lyapunov functions and memory justin chumbley. why do we...

definition and measurement of money. objectives: what is...

what education production functions really show:...

it service management features & functions

march 2011 what is public health?. march 2011 public health...