Today topic:

1- Arrays

2-Document Object Model (DOM):

Objects and Collections

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 1
10
JavaScript: Arrays

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 2
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 3
10.1 Introduction
 Arrays:
 Data structures consisting of related data items
 JavaScript arrays
 “dynamic” entities that can change size after they are
created
 An array is a group of memory locations
 All have the same name and normally are of the same
type (although this attribute is not required in
JavaScript)
 Each individual location is called an element
 We may refer to any one of these elements by

giving the array’s name followed by the position

number of the element in square brackets ([])
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 4
 10.2 Arrays (Cont.)
 The first element in every array is the zeroth element.
 The ith element of array c is referred to as c[i-1].
 Array names follow the same conventions as other
identifiers
 A subscripted array name (Ex: myArray[i])
 can be used on the left side of an assignment to place a new value
into an array element ex: myArray[i]=5
 can be used on the right side of an assignment operation to use its
value Ex:n1=myArray[i]

 Every array in JavaScript knows its own length, which

it stores in its length attribute and can be found with
the expression arrayname.length
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 5
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 6
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 7
 10.3 Declaring and Allocating
Arrays
 JavaScript arrays are Array objects.
 You use the new operator to create an array
and to specify the number of elements in
an array.
 The new operator creates an object as the
script executes by obtaining enough memory to
store an object of the type specified to the right
of new ©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 8
let's remember this example

©1992-2012 by Pearson Education, Inc. All

Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
10.4 Examples Using
Arrays
 Zero-based counting is usually used to
iterate through arrays
 JavaScript reallocates an Array when a

value is assigned to an element that is

outside the bounds of the original Array
var myArray = ["A", "B", "C"];
myArray[5] = "Z";

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 11
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 12
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 13
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 14
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 15
10.4 Examples Using Arrays
(Cont.)
Using an Initializer List
 Arrays can be created using a comma-

separated initializer list enclosed in square

brackets ([]) Ex: var myArray = [10, 20, 30];
 The array’s size is determined by the
number of values in the initializer list
 The initial values of an array can be specified

as arguments in the parentheses following

new Array ex: var myArray=new Array(10, 20,
30);
 The size of the array is determined by the
number Question?
of valuesnew
in Array(10)
parentheses
vs new Array[10]
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 16
10.4.2 Initializing Arrays with
Initializer Lists
 The example in Figs. 10.5–10.6 creates
three Array objects to demonstrate
initializing arrays with initializer lists.
 Figure 10.5 is nearly identical to Fig. 10.3
but provides three divs in its body element
for displaying this example’s arrays.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 17
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 18
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 19
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 20
 10.4.3 Summing the Elements
of an Array with for and for…in
JavaScript’s for…in Repetition Statement
Enables a script to perform a task for each element in an array

var numbers = [10, 20, 30, 40]; var numbers = [10, 20, 30, 40];
var sum = 0; var sum = 0;
for (var i = 0; i < numbers.length; i++) for (var index in numbers)
{ {
sum += numbers[i]; sum += numbers[index];
} }
document.writeln("Sum = " + sum); document.writeln("Sum = " + sum);

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 21
 10.4.3 Summing the Elements
of an Array with for and for…in
 The example in Figs. 10.7–10.8 sums an array’s
elements and displays the results.

 The document in Fig. 10.7 shows the results of the

script in Fig. 10.8.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 22
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 23
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 24
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 25
10.5 Random Image Generator
Using Arrays
 In Chapter 9, the random image generator
required image files to be named with the word
die followed by a number from 1 to 6 and the file
extension .png (e.g, die1.png).
 The example in Figs. 10.11–10.12 does not
require the image filenames to contain integers in
sequence.

©1992-2012 by Pearson Education, Inc. All

Rights Reserved. 26
10.5 Random Image Generator
Using Arrays
 It uses an array pictures to store the
names of the image files as strings.
 Each time you click the image in the document,
the script generates a random integer and uses
it as an index into the pictures array.
 The script updates the img element’s src
attribute with the image filename at the
randomly selected position in the pictures
array.
 We update the alt attribute with an appropriate
description of the image from the descriptions
array.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 27
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 28
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 29
30
12
Document Object Model (DOM):
Objects and Collections

©1992-2012 by Pearson Education, Inc.

All Rights Reserved. 31
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 32
 12.1 Introduction
 The Document Object Model (DOM) gives you
scripting access to all the elements on a web
page.
 getElementById method
 Returns objects called DOM nodes
 Every piece of an HTML5 page (elements,
attributes, text, etc.) is modeled in the web
browser by a DOM node

©1992-2012 by Pearson Education, Inc.

All Rights Reserved. 33
12.3 Traversing and Modifying a
DOM Tree (Cont.)

 The DOM element methods setAttribute

and getAttribute allow you to modify an

attribute value and get an attribute value,

respectively.

©1992-2012 by Pearson Education, Inc.

All Rights Reserved. 34
 12.5 Dynamic Styles
 An element’s style can be changed
dynamically
 E.g., in response to user events
 Can create mouse-hover effects, interactive menus and
animations
 The document object’s body property
 Refers to the body element
 The setAttribute method is used to set the style
attribute with the user-specified color for the
background-color CSS property.
 If you have predefined CSS style classes defined for
your document, you can also use the setAttribute
method to set the class attribute.
©1992-2012 by Pearson Education, Inc.
All Rights Reserved. 35
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 36
Another way to modify a DOM
attribute
In addition to setAttribute and getAttribute
methods,
element.setAttribute("attribute", "value");
element.getAttribute("attribute");
The value of an HTML attribute can be also set
and get using element.attribute = value;
Ex1: document.body.style.backgroundColor=inputColor

Ex2: document.body.setAttribute("style", "background-color: " +

inputColor);
Note: CSS property with hypen

When a CSS property have a hyphen, it is

removed and the first letter after the
hyphen is capitalized
Ex:
background-color
backgroundColor
 visibility and display properties
Can be both used to hide or show an element
show
object.style.visibility =“visible”
object.style.display=value //value can be “inline”,
“block”,..

Hide
object.style.visibility=“hidden”
object.style.display=“none”
Difference:
Visibility “hidden” keep the element in its
position but hidden.
Display “none” removes the entire element.
 Regular Expression
The string method match() is used to match a
regular expression.
In the format /pattern/modifier,
string.match(/pattern/modifier);
Where modifier can be (i) to perform case
insensitive, (g) to find all matches, and (m) for
multiline matching str.match(/^[A-Za-z]+$/i);
str.match(/^[A-Z]+$/i);
Ex: str.match(/^hello/i);

var str = "HelloWorld";

var result = str.match(/^[A-Za-z]+$/);
document.writeln(result); // ["HelloWorld"]
Ex: form validation using
javascript

 Validate form fields before sending to

server.
 Use the form element onsubmit event.
 Use regular expression to check that form

fields meat the requirement.

 Validate the following

Name: only letters.

postcode: numbers, 5 only.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
</head>
<body>
<form onsubmit="return validateForm()" method="post">
<label for="name">Name (only letters):</label>
<input type="text" id="name" name="name">
<br><br>
<label for="postcode">Postcode (5 digits only):</label>
<input type="text" id="postcode" name="postcode">
<br><br>
<input type="submit" value="Submit">
</form>

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
<script>
function validateForm() {
// Get the values of the form fields
var name = document.getElementById("name").value;
var postcode = document.getElementById("postcode").value;
var namePattern = /^[A-Za-z]+$/; // Regular expression for Name: only letters
var postcodePattern = /^\d{5}$/; // Regular expression for Postcode: 5 digits only
// Validate Name
if (!namePattern.test(name)) {
window.alert("Name must contain only letters.");
return false; // Prevent form submission
}
// Validate Postcode
if (!postcodePattern.test(postcode)) {
window.alert("Postcode must be 5 digits.");
return false; // Prevent form submission
}
return true; // If both validations pass, allow the form to be submitted
}
</script> </body> </html>

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
refrences
http://www.w3schools.com