CHAPTER 4 CLIENT SIDE SCRIPTING PART 3 OF 3 Madam Hazwani binti Rahmat http://fsktm2.uthm.edu.my/hazwani/v2/
RECAP Syntax : <script language="javascript" type="text/javascript"> Placement section : <head>...</head> <body>...</body> and <head>...</head> external file and then include in <head>...</head>. Data types : number, string, boolean Variables declaration and naming convention : keyword var Operator and expression : comparison operator, logical operator Input and Output functions
var hardware = new Array("monitor","mouse","keyboard"); ARRAY - what is an array? Array is an ordered stack of data items with the same data type. It can store multiple values within it under the same variable name. For example, to use variable to store and write three values on the screen: var hardware1 = "monitor“; var hardware2 = "mouse“; var hardware3 = "keyboard“; Using array, all three values can be hold in a single name variable instead: var hardware = new Array("monitor","mouse","keyboard");
var x = [1, 'referencedesigner.com', true, 43.34]; ARRAY - what is an array? JavaScripts allows to create an array with a mixture of integers, strings and booleans. Example : var x = [1, 'referencedesigner.com', true, 43.34]; For ease of readability it is possible to list array element in separate lines. Example : var hardware = [ “monitor”, “mouse”, “keyboard”]; √ mixed data types √
ARRAY - creating arrays JavaScript arrays are created by first assigning an array object to a variable name. Syntax: var array_name = new Array(number_of_elements_arrayLength); Example : var hardware = new Array(3); // initialises array length // size of 3
ARRAY - creating arrays However, it is not necessary to specify the length of the JavaScript array at the beginning. The array can stay unspecified at the beginning and grow as required if the elements of the array are unknown beforehand. Example : var name = new Array(); or var area = [];
ARRAY - arrays initialisation When assigning values to each element, index number must be stated. The number corresponds to element's position in the array (numbers start at 0). Syntax: array_name[index_number] = “element_values“; Example : hardware[0] = “monitor“;
ARRAY - arrays initialisation However, the initialisation can be combined in one single statement if the elements of the array are known beforehand. Example : var hardware = new Array(“monitor”,”mouse”,”keyboard”); Javascript has yet another preferred way of declaring the arrays directly using the Array keyword and use square brackets [ ]. var hardware = [“monitor”,”mouse”,”keyboard”];
ARRAY - displaying array elements Following methods are used to display array’s element: Syntax 1: document.write(array_name[0] + "<BR>"); Example2: document.write(hardware[0] + "<BR>"); Syntax2: document.write(array_name[index_number]); Example2: document.write(hardware[0]);
ARRAY - arrays and loops Arrays become extremely powerful when used in combination with loops. That's because the index number of arrays are numbers swappable for the loop variable. Example: var counter = 0; // loop variable var printed_numbers = new Array(); // array declaration while ( counter < 5 ) { printed_numbers[counter] = counter + 1; document.write(printed_numbers[counter] + "<BR>" ); counter++; }
ARRAY - arrays and loops Example: var counter = 0; // loop variable var printed_numbers = new Array(); // array declaration while ( counter < 5 ) { printed_numbers[counter] = counter + 1; document.write(printed_numbers[counter] + "<BR>" ); counter++; } Instead of stating printed_numbers[0], printed_numbers [1], printed_numbers [2], etc, the index number are replaced with the variable name counter.
FUNCTIONS - what is a function? A function is a group of reusable code which can be called anywhere within a program. Functions group together script code; control structures, operations, method calls, etc. Javascript written into functions will not be performed when loaded until it is called (event is triggered).
FUNCTIONS - what is a function? Advantages: Reusability eliminates the need of writing same code again and again. Modularity big program can be divided in a number of small and manageable functions and each is called where required. Understandability increase the understanding of the code.
FUNCTIONS - creating functions A function must be defined before it can be used. The most common way to define a function in JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces. Syntax: function functionname(variable1, variable2,..., variableX) { statements }
FUNCTIONS - creating functions Example : <script type="text/javascript"> <!-- function sayHello() { // start of function alert("Hello there"); // statement } // end of function //--> </script>
FUNCTIONS - calling a function To call a function into action, then, all you need to do is to type the function name, and its round brackets, ending the line with a semicolon. Syntax : function_name(); Example : <script type="text/javascript"> <!— sayHello(); //--> </script>
FUNCTIONS - function arguments Arguments are values passed to a function through a function call. When a function is called, the arguments (values) passed to it in the brackets are assigned to the parameter (variable names in the brackets of the function definition). Multiple arguments passed are separated by comma. Syntax: function functionname(parameter1, parameter2,..., parameterX) { statements } functionname(argument1, argument2,..., argumentX);
FUNCTIONS - function parameters Parameters are variables used to receive values passed from a called function. A function can take multiple parameters separated by comma. Any manipulation can be done over the parameters. Syntax: function functionname(parameter1, parameter2,..., parameterX) { statements }
FUNCTIONS - function parameters Example : <script type="text/javascript"> <!-- function sayHello(name, age) { alert( name+ "is" +age+ "years old."); } sayHello('Zara', 7 ); // function call //--> </script>
FUNCTIONS - variable scope There are TWO types of variable scope: Global scope Variable declared outside of any function which accessible from anywhere in the code. Local scope Variables declared inside of functions which cannot be accessible (seen) from outside of that function.
FUNCTIONS - variable scope Example : function myFunction() { var alertString = "ALERT!!!"; secondFunction(); } function secondFunction() alert(alertString); local to myFunction (it's inside of myFunction curly brackets and has been set up with the var keyword). So the secondFunction can't see inside of this variable.
FUNCTIONS - variable scope Solution : var alertString = "ALERT!!!"; function myFunction() { secondFunction(); } function secondFunction() { alert(alertString); the variable declared outside of the two functions (global scope). Accessible throughout the program.
FUNCTIONS - return statement The return statement causes a function to stop executing at that point. However, the function call (code that called the function) will still continue to execute. A JavaScript function can have an optional return statement. However, it is required when returning a value (duplication) from a function. This statement should be the last statement in a function.
FUNCTIONS - return statement Example: <script type="text/javascript"> <!-- function concatenate(first, last) { var full; full = first + last; return full; } var result; result = concatenate('Zara‘, 'Ali'); alert(result); //--> </script>