JavaScript
(Array, Function, and Objects)
1 JavaScript Lecture-1 2/15/2016
Arrays
An array is an ordered collection of values. Each value is called an element,
and each element has a numeric position in the array, known as its index..
JavaScript arrays are dynamic entities that can change size after they are
created.
Example1. Array with 12 Elements
2 JavaScript Lecture-1 2/15/2016
Example:
3 JavaScript Lecture-2 3/27/2016
Decalring an Arrays
Using the new keyword.
var myList = new Array( );
Using the shortcut [ ].
var myList = [ ];
4 JavaScript Lecture-2 3/27/2016
Examle-1
Var studentNames = new studentNames[ ];
studentNames[0] = “Ahmad”;
studentNames[1] = “Ali”;
studentNames[2] = “Salma”;
Var studentNames = [ ];
studentNames[0] = “Ahmad”;
studentNames[1] = “Ali”;
studentNames[2] = “Salma”;
Var studentNames = [“Ahmad”, ”Ali”, ”Salma”];
5 JavaScript Lecture-1 2/15/2016
Examle-2
The following example uses an array to print student names
array.html
<!DOCTYPE html>
<!--. array.html-->
<html>
<head>
<title>Using Arrays</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div> <h1>Student List </h1> </div>
<script>
var names = ["Ahmad","Ali","Salma"];
n = names.length;
for ( var i = 0; i < n ; ++i ){
document.write(names[i] +"<br>");
}
</script>
</body>
</html>
6 JavaScript Lecture-1 2/15/2016
7 JavaScript Lecture-1 2/15/2016
Array Methods
Sort()
JavaScript includes a sort method for arrays, which returns an
alphabetically sorted version of the array.
Examle-2
The following example sorts an array and print it.
9 JavaScript Lecture-1 3/27/2016
10 JavaScript Lecture-1 3/27/2016
reverse()
The Array.reverse() method reverses the order of the elements of an array
and returns the reversed array.
var a = [1,2,3];
a.reverse(); // a is now [3,2,1]
concat()
The Array.concat() method creates and returns a new array that contains
the elements of the original array on which concat() was invoked, followed
by each of the arguments to concat().
var a = [1,2,3];
a.concat(4, 5) // Returns [1,2,3,4,5]
11 JavaScript Lecture-1 3/27/2016
slice()
The slice() method returns a slice, or subarray, of the specified array. Its
two arguments specify the start and end of the slice to be returned.
var a = [1,2,3,4,5];
a.slice(0,3); // Returns [1,2,3]
join()
The Array.join() method converts all the elements of an array to strings
and concatenates them, returning the resulting string. You can specify an
optional string that separates the elements in the resulting string.
var a = [1, 2, 3]; // Create a new array with these three elements
a.join(); // => "1,2,3"
a.join(" "); // => "1 2 3“
a.join(“-"); // => "1-2-3“
12 JavaScript Lecture-1 3/27/2016
Two-dimensional arrays.
Two dimensional arrays are often used to represent tables of values
consisting of information arranged in rows and columns.
13 JavaScript Lecture-1 3/27/2016
Arrays can be initialized in declarations like a one-dimensional array.
var b = [ [ 1, 2 ], [ 3, 4 ] ];
Declaring Array of Array
// Create a two mensional array
var table = new Array(10); // 10 rows of the table
for(var i = 0; i < table.length; i++)
table[i] = new Array(10); // Each row has 10 columns
14 JavaScript Lecture-1 3/27/2016
Examle-3
15 JavaScript Lecture-2 3/27/2016
16 JavaScript Lecture-2 3/27/2016
Functions
Functions
A function is a block of JavaScript code that is defined once but may be
executed, or invoked, any number of times.
The general syntax for a function is shown here:
function function-name( parameter-list )
{
declarations and statements
}
18 JavaScript Lecture-1 3/27/2016
Example-3
This example uses a square function to square the numbers 1-10
19 JavaScript Lecture-1 3/27/2016
Functions As Values
In JavaScript, functions are not only syntax but also values, which means
they can be assigned to variables.
function square(x) { return x*x; }
var s = square; // Now s refers to the same function that square does
square(4); // => 16
s(4); // => 16
20 JavaScript Lecture-1 3/27/2016
Example-4
21 JavaScript Lecture-2 3/27/2016
Variables Scope
Global Variable
Variables declared outside of a function are global variables and are
visible everywhere in a JavaScript program.
Local Variable
Variables declared inside a function have function scope and are visible
only to code that appears inside that function.
Global
variable
Local
variable
22 JavaScript Lecture-1 3/27/2016
Returning Multiple Data Values with a Function
In JavaScript a function can return multiple values;
23 JavaScript Lecture-2 3/27/2016
24 JavaScript Lecture-2 3/27/2016
Returning n Array
The following example shows how to return an Array.
25 JavaScript Lecture-1 3/27/2016
JavaScript Objects
Objects are variables can contain many values.
Var car = {type:” Kia”, model:”Picanto”,color:”white”}
var student = {
firstName:"Ali",
lastName:"Salim",
age:20,
eyeColor:"brown" };
26 JavaScript Lecture-2 3/27/2016
Accessing Object Properties
object properties can be accessed in two ways:
objectName.propertyName
car.type
objectName["propertyName"]
car[“type”]
27 JavaScript Lecture-2 3/27/2016
Example
28 JavaScript Lecture-2 3/27/2016
29 JavaScript Lecture-2 3/27/2016
JavaScript
(Event Handling)
1 JavaScript Lecture-1 2/15/2016
Events
Events are the actions that occur as a result of browser activities or user
interactions with the web pages.
An HTML web page has finished loading
Such as the user performs an action
mouse click
enters data
2 JavaScript Lecture-2 3/27/2016
Event Handlers
When an event occurs, a code is executed in response to a specific event is
called “event handler”.
Event handler names are quite similar to the name of events they handle.
E.g the event handler for the “click” event is “onClick”.
<HTMLtag eventhandler=“JavaScript Code”>
3 JavaScript Lecture-2 3/27/2016
4 JavaScript Lecture-2 3/27/2016
Onclick Example
5 JavaScript Lecture-2 3/27/2016
6 JavaScript Lecture-2 3/27/2016
Onload Example
7 JavaScript Lecture-2 3/27/2016
onMouseOver and onMouseOut
8 JavaScript Lecture-2 3/27/2016
Onsubmit Example
9 JavaScript Lecture-2 3/27/2016
10 JavaScript Lecture-2 3/27/2016
The following tables show the events and their event
handlers:
Mouse Events
Event Fires When
onclick mouse button is clicked
ondblclick mouse button is double-clicked
onmousedown mouse button is pressed down
onmouseup mouse button is released
onmousemove mouse moves
onmouseover mouse enters an element
onmouseout mouse leaves an element
Keyboard Events
Event Fires When The User
onkeypress presses then releases a key
onkeydown pushes down a key
onkeyup releases a key
Selection and Focus Events
Event Fires When
onselect text selection begins
(inside either <input type="text"> or <textarea>)
onchange when a text input is changed and the element loses focus,
or new choice is made in a select element
onfocus form element gains focus
onblur form element loses focus
Other Events
The following Link conations the HTML events.
List of HTML Events
15 JavaScript Lecture-2 3/27/2016
