Javascript

Outline Introduction Fundamental of JavaScript Javascript events management DOM and Dynamic HTML (DHTML)

Introduction - Outline Introduction – –What is Javacript? – –What Javascript can do? – –Examples usage of Javascript – –How to use Javascript?

What is Javascript Official name: ECMAScript maintain by ECMA organisations Official name: ECMAScript maintain by ECMA organisations Invented by Brendan Eich at Netscape (with Navigator 2.0) Invented by Brendan Eich at Netscape (with Navigator 2.0) Development is still in progress! Development is still in progress!

What is Javascript Java and Javascript is not the SAME – only similar to Java and C++ Java and Javascript is not the SAME – only similar to Java and C++ The fundamentals of Javascript are similar to Java and/or C++ The fundamentals of Javascript are similar to Java and/or C++

What is Javascript? was designed to add interactivity to HTML pages was designed to add interactivity to HTML pages Is a scripting language Is a scripting language an interpreted language (means that scripts execute without preliminary compilation) an interpreted language (means that scripts execute without preliminary compilation) Case-sensitive Case-sensitive Must be embedded into HTML Must be embedded into HTML Browser dependent Browser dependent Execute whenever the HTML doc. which contain the script open by browser. Execute whenever the HTML doc. which contain the script open by browser. Free to use without license Free to use without license

What Javascript can do? JavaScript can read and write HTML elements JavaScript can read and write HTML elements JavaScript can react to events JavaScript can react to events JavaScript can be used to validate data JavaScript can be used to validate data JavaScript can be used to detect the visitor's browser JavaScript can be used to detect the visitor's browser

Examples usage of Javascript Event management Event management Form management & verification Form management & verification Dynamic HTML (DHTML) Dynamic HTML (DHTML) Client-Server application – AJAX Client-Server application – AJAX activity 01

How to use Javascript? – activity 02 Inside the head tag (head section) Inside the head tag (head section) Within the body tag (body section) Within the body tag (body section) In an external file (external script) In an external file (external script)

How to use Javascript? - head section function message() { alert("This alert box was called with the onload event"); }

How to use Javascript? - body section document.write("Hello World! from Javascript");

How to use Javascript? - external script // JavaScript Document (myjs.js) function popup() { alert("Hello World") }

How to use Javascript? All code inside head tag (except in function) will be executed first before the html load All code inside head tag (except in function) will be executed first before the html load js-sequence.html js-sequence.html

Use in alert box

Activity 03 Activity 03 Chrome > menu > more tools > developer tools > console Chrome > menu > more tools > developer tools > console Firefox > developer > developer toolbar > click wrench > console Firefox > developer > developer toolbar > click wrench > console Debugging

Simple JS application – input/output – activity 4

Javascript Fundamental A light Java/C++ A light Java/C++ All other things are more or less the same: All other things are more or less the same: –Keyword, variables –Operator –Conditional statement –Looping etc. Case sensitive Case sensitive No strong typing in JS for variable No strong typing in JS for variable

Javascript Variables – activity 5 Variables name – case sensitive Variables name – case sensitive No type! No type! Can change type during execution Can change type during execution –Activity 05 - a Use double qoute for character and string variable Use double qoute for character and string variable Cannot use reserve word for variable name! Cannot use reserve word for variable name! Variables name – case sensitive Variables name – case sensitive No type! No type! Can change type during execution Can change type during execution –Activity 05 - a Use double qoute for character and string variable Use double qoute for character and string variable Cannot use reserve word for variable name! Cannot use reserve word for variable name!

OUTPUT: 10 rosely 25 OUTPUT: 10 rosely 25

JS – Reserve Word

Javascript variables operation Arithmetic operations – same as Java/C++ Arithmetic operations – same as Java/C++ + operators is overloaded, can be used for string + operators is overloaded, can be used for string Number + string (or vice versa), result string Number + string (or vice versa), result string –Activity 05 - b – A = (result 7) – A = 2 + “5” (result 25) – A = A + 2 (result 252)

OUTPUT: OUTPUT:

JS Operators

Javascript – Conditional expressions – activity 06 If else, switch statement – same as C++/Java If else, switch statement – same as C++/Java Boolean Boolean –Value 0, false = false –Value 1, true = true String comparison, use the quote! String comparison, use the quote! –if (password == “007”) Check the example! Check the example! If else, switch statement – same as C++/Java If else, switch statement – same as C++/Java Boolean Boolean –Value 0, false = false –Value 1, true = true String comparison, use the quote! String comparison, use the quote! –if (password == “007”) Check the example! Check the example!

Javascript – Loop – Activity 7 for loop, while loop – same as C++/Java for loop, while loop – same as C++/Java Use break statement to exit loop Use break statement to exit loop JavaScript For...In Statement JavaScript For...In Statement –used to loop (iterate) through the elements of an array or through the properties of an object. – var mycars = new Array(); – for (x in mycars) document.write(mycars[x] + " "); document.write(mycars[x] + " "); Activity 07 Activity 07 for loop, while loop – same as C++/Java for loop, while loop – same as C++/Java Use break statement to exit loop Use break statement to exit loop JavaScript For...In Statement JavaScript For...In Statement –used to loop (iterate) through the elements of an array or through the properties of an object. – var mycars = new Array(); – for (x in mycars) document.write(mycars[x] + " "); document.write(mycars[x] + " "); Activity 07 Activity 07

Javascript Array – activity 08 (.1,.2,.3) Array is a built-in object in JS Array is a built-in object in JS – Means have methods and properties Means have methods and properties Important properties: Important properties: –length (total elements) –For traversing array elements Example method: Example method: –sort() : sorting array elements –join() : combine all array elements into a string

Javascript Array - creating var a = new Array(12); var b = new Array(); var c = new Array(12,10,11); var d = [12,10,11]; // same as c var e = [1,,,10]; // 4 elements array, only first & last element initialized

Javascript array: inserting values var A =new Array(); A[0]= 10; A[1]= 20; A[2]=“Ali”;A[3]=2.34;Result: A[0] 10 A[1] 20 A[2] Ali A[3] 2.34

JS Array: creating and accessing

JS Array: sort method

Javascript Array - Multidimensional – activity 08.4 Technically, JavaScript doesn't support multi- dimensional arrays Technically, JavaScript doesn't support multi- dimensional arrays Because array is an object, you can put object inside of another object, so emulating a multi dimensional array Because array is an object, you can put object inside of another object, so emulating a multi dimensional array So it is possible to have a different dimension (column) for each row! So it is possible to have a different dimension (column) for each row!

Javascript Array - Multidimensional var myarray=new Array(3) var myarray=new Array(3) Create a multidimensional array Create a multidimensional array

Javascript Array - Multidimensional

Javascript Function – Activity 9 Functions in Javascript behave similar to numerous programming languages (C, C++, PHP, etc). Functions in Javascript behave similar to numerous programming languages (C, C++, PHP, etc). No type! No type! Put in head section or external Put in head section or external Variables inside a function is local Variables inside a function is local Use return to return value and exiting the function (return without value) without finishing Use return to return value and exiting the function (return without value) without finishing

Javascript Functions Involves two steps: Define: to define what processes should be taken Define: to define what processes should be taken Call/Invoke: to execute the functions Call/Invoke: to execute the functions Syntax of function definition: function function_name (param1, param2,.., param_n) //parameters are optional //parameters are optional{ //function’s code goes here //function’s code goes here return value_or_object; //optional } Involves two steps: Define: to define what processes should be taken Define: to define what processes should be taken Call/Invoke: to execute the functions Call/Invoke: to execute the functions Syntax of function definition: function function_name (param1, param2,.., param_n) //parameters are optional //parameters are optional{ //function’s code goes here //function’s code goes here return value_or_object; //optional }

Javascript function – activity 09

Javascript – Window & Boxes Activity 10 –Alert message –Prompt (getting input) –Confirm message –Redirection

JS: Alert Creating message box Creating message box No input, only Ok button to continue No input, only Ok button to continue Useful for debugging Useful for debugging –alert (“hello world”); –var name = “rosely”; –alert (“hello ” + name); –var age = 17; –alert (“your age is: “ + age); Creating message box Creating message box No input, only Ok button to continue No input, only Ok button to continue Useful for debugging Useful for debugging –alert (“hello world”); –var name = “rosely”; –alert (“hello ” + name); –var age = 17; –alert (“your age is: “ + age);

JS: Prompt Getting input from user Getting input from user –name = window.prompt ("Please enter your name", “polan"); Getting input from user Getting input from user –name = window.prompt ("Please enter your name", “polan");

JS: Confirm Confirmation are most often used to confirm an important action that is taking place on a website. Confirmation are most often used to confirm an important action that is taking place on a website. For example they may be about to submit an order or about to visit a link that will take them away from the current website. For example they may be about to submit an order or about to visit a link that will take them away from the current website.

JS: Comment Same as Java/C++ Same as Java/C++ –// single line comment –/* – this – is – a multi line comment */ Same as Java/C++ Same as Java/C++ –// single line comment –/* – this – is – a multi line comment */

JS: Redirect To send user to your new website location To send user to your new website location In case of changing website address/domain In case of changing website address/domain