Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work
description
Transcript of Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work
![Page 1: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/1.jpg)
• 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 :
![Page 2: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/2.jpg)
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]
![Page 3: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/3.jpg)
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
![Page 4: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/4.jpg)
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?
![Page 5: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/5.jpg)
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”];
![Page 6: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/6.jpg)
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”];
![Page 7: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/7.jpg)
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}
![Page 8: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/8.jpg)
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>
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
![Page 9: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/9.jpg)
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
![Page 10: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/10.jpg)
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>
![Page 11: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/11.jpg)
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?
![Page 12: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/12.jpg)
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 statementA 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>
![Page 13: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/13.jpg)
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: AnonymousA 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.
![Page 14: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/14.jpg)
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.
![Page 15: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/15.jpg)
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.
Object Attributes ActionsDog Tail Wag
Bark
Car Transport
Model
Horn honk
Object Property Methoddocument title
URL
write
![Page 16: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/16.jpg)
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.
Object Attributes ActionsDog Tail Wag
Bark
Object Property Methoddocument title
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()
![Page 17: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/17.jpg)
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
![Page 18: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/18.jpg)
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??
![Page 19: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/19.jpg)
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:
![Page 20: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/20.jpg)
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
![Page 21: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/21.jpg)
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
![Page 22: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/22.jpg)
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
![Page 23: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/23.jpg)
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
![Page 24: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/24.jpg)
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
![Page 25: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/25.jpg)
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
![Page 26: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/26.jpg)
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
![Page 27: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/27.jpg)
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 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>
![Page 28: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/28.jpg)
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.
![Page 29: Arrays What is it? Creation Changing the contents Functions What is it? Syntax How they work](https://reader035.fdocuments.us/reader035/viewer/2022062813/56816461550346895dd63d3e/html5/thumbnails/29.jpg)
(Quiqley,2011)
View the HTML document