slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work PowerPoint Presentation
Download Presentation
Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work

Loading in 2 Seconds...

play fullscreen
1 / 29

Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work - PowerPoint PPT Presentation


  • 67 Views
  • Uploaded on

Topic 5_2: Arrays, Functions and Objects in JavaScript. By the end of this lecture you should :. 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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work' - lucus


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Topic 5_2: Arrays, Functions and Objects in JavaScript

  • By the end of this lecture you should :
  • 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
slide2

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

[11]

[10]

[9]

[8]

[7]

[6]

[0]

[1]

[2]

[3]

[4]

[5]

An array is actually considered a special type of variable, capable of storing multiple values

slide3

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

slide4

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?

slide5

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: varfruits = ["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”];

slide6

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: varfruits = ["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”];

slide7

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}

slide8

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:

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction()

{

alert("Hello World!");

}

</script>

</head>

<body>

<button onclick="myFunction()">Try it</button>

</body>

</html>

3. The function makes an alert box that says ‘Hello World’

2. when user clicks button mouse function is called

1. produces a button on web page with label ‘try it’

slide9

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

slide10

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

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

</body>

</html>

slide11

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?

Global or local variable?

Global or local variable?

Global or local variable?

Global or local variable?

slide12

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.

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

slide13

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

View example of HTML code.

Closure:

An anonymous function defined within another function (Quiqley, 2011)

slide14

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:

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.

slide15

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.

slide16

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.

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

slide17

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

slide18

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:

Varmyname=‘Geraldine’

Is creation of a string object

Varlastname=‘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??

slide19

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:

slide20

Topic 5_2: Arrays, functions and objects in JavaScript

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

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

slide21

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

slide22

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

slide23

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

slide24

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

slide25

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

slide26

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
slide27

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

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

slide28

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.asp provides an excellent detailed reference to the DOM, its objects, properties and methods.