JavaScript Part 6

Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate that by having only functions in our JavaScript and calling a specific function when an HTML page loads or when an event happens such as, clicking a button or submitting a form. This can be done in different ways:  In HTML: Using the attribute onload or onclick inside any HTML element. Example:  In JavaScript: Using window.addEventListener. When a certain event occurs (page loads or mouse clicks) a JavaScript functions starts running. Example: window.addEventListener(“load”, myfunction, false);

Calling JavaScript functions on an event <!-- function start() { document.writeln(" The function has started. "); f1(); } function f1() { document.writeln(" We are now in function f1. "); } // --> Output:

Calling JavaScript functions on an event <!-- function f1() { document.writeln(" You have pressed Button 1. "); } function f2() { document.writeln(" You have pressed Button 2. "); } // --> Button 1 Button 2

Calling JavaScript functions on an event <!-- function start() { document.writeln(" The function has started using window.addEventListener. "); f1(); } function f1() { document.writeln(" We are now in function f1. "); } window.addEventListener("load", start, false); // -->

document.getElementById() method The getElementById() method returns the element that has the ID attribute with the specified value. This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document. Returns null if no elements with the specified ID exists. An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element. In JavaScript: var par1 = document.getElementById(“p1”); In the HTML body:

After getting the element by using document.getElementById() you can change the element’s content or attributes. You can also add an event listener to the element. // to change the content inside the HTML element par1.innerHTML = “New text of paragraph with id p1”; //to change the attributes values of the element par1.setAttribute(“style”,”color:red”); par1.style.color = “red”; //another way img1.src = “Kuwait.jpg”; //changing the image source for an img element with id = img1 var imagesrc = img1.src; //getting the value of the attribute as a string //add an event listener to an element par1.addEventListener(“click”, myfunction, false); document.getElementById() method

<!-- function f1() { var par1 = document.getElementById("p1"); par1.innerHTML = "You have pressed Button 1."; par1.setAttribute("style","color:blue"); } function f2() { var par1 = document.getElementById("p1"); par1.innerHTML = "You have pressed Button 2."; par1.style.color = "red"; } // --> Click any button and I will tell you which button you clicked Button 1 Button 2

document.getElementById() method

Processing form values in JavaScript

JavaScript code in a separate file The JavaScript code can be written in a separate file with the extension.js and put the file name in the src attribute of the script element. This easily allows you to use any JavaScript file available on the web in your web site.

Ch10: JavaScript Arrays Arrays are used to store multiple values in a single variable. There are a couple of ways to create and initialize an array. var arr = [1, 2, 3]; var cars = new Array(“Toyota”, “BMW”, “Honda”); Arrays can be created without being initialized. var arr = new Array(5); //array arr is created and memory is allocated for 5 elements var c = new Array(); //array c is created and memory will be dynamically allocated as elements // are added to the array A single value in an array can be accessed by its index number. The array index starts with a zero. document.writeln(arr[0]); //writes 1 in the HTML document arr[1] = 3; // arr values become 1,3,3 Unlike other programming languages, arrays in JavaScript can store different types of values. var person = [“John”, “Doe”, 46];

Array properties and methods The real strength of JavaScript arrays are the built-in array properties and methods: var x = cars.length; // The length property returns the number of elements in cars var y = cars.sort(); // The sort() method sort cars in alphabetical order The length property of an array returns the length of an array (the number of array elements). var fruits = ["Banana", "Orange", "Apple", "Mango"]; var l = fruits.length; // the length of fruits is 4 Elements can be added dynamically to the array increasing its size. The length property is used to add elements to the end of the array.

Adding elements to an array The length property provides an easy way to append new elements to an array without using the push() method. Try it <!-- var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits; function myFunction() { fruits[fruits.length] = "Kiwi"; document.getElementById("demo").innerHTML = fruits; } // -->

Adding elements to an array

Multidimensional Arrays To identify a particular two-dimensional multidimensional array element Specify the two subscripts By convention, the first identifies the element’s row, and the second identifies the element’s column In general, an array with m rows and n columns is called an m-by-n array Two-dimensional array element accessed using an element name of the form a[ i ][ j ] a is the name of the array i and j are the subscripts that uniquely identify the row and column Multidimensional arrays are maintained as arrays of arrays var a = [[1,2,3], [4,5,6],[7,8,9]];

20 Fig | Two-dimensional array with three rows and four columns.