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

JavascriptJavascript

OutlineOutline

• Introduction

•Fundamental of JavaScript

• Javascript events management

•DOM and Dynamic HTML (DHTML)

Introduction - OutlineIntroduction - Outline

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

What is JavascriptWhat is Javascript

• Official name: ECMAScript maintain Official name: ECMAScript maintain by ECMA organisationsby ECMA organisations

• Invented by Brendan Eich at Invented by Brendan Eich at Netscape (with Navigator 2.0) Netscape (with Navigator 2.0)

• Development is still in progress!Development is still in progress!

What is JavascriptWhat is Javascript

• Java and Javascript is not the SAME – Java and Javascript is not the SAME – only similar to Java and C++only similar to Java and C++

• The fundamentals of Javascript are The fundamentals of Javascript are similar to Java and/or C++ similar to Java and/or C++

What is Javascript?What is Javascript?

• was designed to add interactivity to HTML was designed to add interactivity to HTML pagespages

• Is a scripting languageIs a scripting language• an interpreted language (means that an interpreted language (means that

scripts execute without preliminary scripts execute without preliminary compilation) compilation)

• Case-sensitiveCase-sensitive• Must be embedded into HTMLMust be embedded into HTML• Browser dependentBrowser dependent• Execute whenever the HTML doc. which Execute whenever the HTML doc. which

contain the script open by browser.contain the script open by browser.• Free to use without licenseFree to use without license

What Javascript can do?What Javascript can do?

• JavaScript can read and write HTML JavaScript can read and write HTML elements 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 JavaScript can be used to detect the

visitor's browservisitor's browser

Examples usage of JavascriptExamples usage of Javascript

• Event managementEvent management• Form management & verificationForm management & verification• Dynamic HTML (DHTML)Dynamic HTML (DHTML)• Client-Server application – AJAXClient-Server application – AJAX• activity 01

How to use Javascript?– activity 02 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

<html><head><script type="text/javascript">function message(){ alert("This alert box was called with the onload event");}</script></head>

<body onload="message()">

</body></html>

How to use Javascript?- body section

<html><body><script type="text/javascript">document.write("Hello World! from Javascript");</script></body></html>

How to use Javascript?- external script<html><head><script src="myjs.js"></script></head><body><input type="button" onclick="popup()" value="Click Me!"></body></html>

// JavaScript Document (myjs.js)function popup() {alert("Hello World")}

How to use Javascript?

• All code inside head tag (except in All code inside head tag (except in function) will be executed first before function) will be executed first before the html <body> loadthe html <body> load

• js-sequence.htmljs-sequence.html

Use in alert boxUse in alert box

• Activity 03Activity 03

• Chrome > menu > more tools > Chrome > menu > more tools > developer tools > consoledeveloper tools > console

• Firefox > developer > developer Firefox > developer > developer toolbar > click wrench > consoletoolbar > click wrench > console

DebuggingDebugging

Simple JS application – Simple JS application – input/output – input/output – activity 4activity 4

Javascript FundamentalJavascript Fundamental

• A light Java/C++A light Java/C++• All other things are more or less the All other things are more or less the

same:same:– Keyword, variablesKeyword, variables– OperatorOperator– Conditional statementConditional statement– Looping etc.Looping etc.

• Case sensitiveCase sensitive• No strong typing in JS for variableNo strong typing in JS for variable

Javascript Variables – Javascript Variables – activity 5activity 5• Variables name – case sensitiveVariables name – case sensitive• No type!No type!• Can change type during executionCan change type during execution

– Activity 05 - aActivity 05 - a

• Use double qoute for character and Use double qoute for character and string variablestring variable

• Cannot use reserve word for variable Cannot use reserve word for variable name!name!

• Variables name – case sensitiveVariables name – case sensitive• No type!No type!• Can change type during executionCan change type during execution

– Activity 05 - aActivity 05 - a

• Use double qoute for character and Use double qoute for character and string variablestring variable

• Cannot use reserve word for variable Cannot use reserve word for variable name!name!

OUTPUT:

10rosely25

OUTPUT:

10rosely25

JS – Reserve WordJS – Reserve Word

Javascript variables Javascript variables operationoperation• 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 - bActivity 05 - b

– A = 2 + 5 (result 7)A = 2 + 5 (result 7)– A = 2 + “5” (result 25)A = 2 + “5” (result 25)– A = A + 2 (result 252)A = A + 2 (result 252)

OUTPUT:

225252

OUTPUT:

225252

JS OperatorsJS Operators

JS OperatorsJS Operators

Javascript – Conditional Javascript – Conditional expressions – expressions – activity 06activity 06Javascript – Conditional Javascript – Conditional expressions – expressions – activity 06activity 06

• If else, switch statement – same as If else, switch statement – same as C++/JavaC++/Java

• BooleanBoolean– Value 0, false = falseValue 0, false = false– Value 1, true = true Value 1, true = true

• String comparison, use the quote!String comparison, use the quote!– if (password == “007”)if (password == “007”)

• Check the example!Check the example!

• If else, switch statement – same as If else, switch statement – same as C++/JavaC++/Java

• BooleanBoolean– Value 0, false = falseValue 0, false = false– Value 1, true = true Value 1, true = true

• String comparison, use the quote!String comparison, use the quote!– if (password == “007”)if (password == “007”)

• Check the example!Check the example!

Javascript – Loop – Javascript – Loop – Activity 7Activity 7

• for loop, while loop – same as C++/Javafor loop, while loop – same as C++/Java• Use Use breakbreak statement to exit loop statement to exit loop• JavaScript JavaScript For...InFor...In Statement Statement

– used to loop (iterate) through the used to loop (iterate) through the elements of an array or through the elements of an array or through the properties of an object.properties of an object.

– var mycars = new Array(); var mycars = new Array(); – for (x in mycars) for (x in mycars)

• document.write(mycars[x] + "<br />");document.write(mycars[x] + "<br />"); •Activity 07Activity 07

• for loop, while loop – same as C++/Javafor loop, while loop – same as C++/Java• Use Use breakbreak statement to exit loop statement to exit loop• JavaScript JavaScript For...InFor...In Statement Statement

– used to loop (iterate) through the used to loop (iterate) through the elements of an array or through the elements of an array or through the properties of an object.properties of an object.

– var mycars = new Array(); var mycars = new Array(); – for (x in mycars) for (x in mycars)

• document.write(mycars[x] + "<br />");document.write(mycars[x] + "<br />"); •Activity 07Activity 07

Javascript ArrayJavascript Array– – activity 08 (.1, .2, .3)activity 08 (.1, .2, .3)Javascript ArrayJavascript Array– – activity 08 (.1, .2, .3)activity 08 (.1, .2, .3)

• Array is a built-in object in JSArray is a built-in object in JS– http://www.w3schools.com/jsref/jsref_obj_array

.asp

• Means have methods and propertiesMeans have methods and properties• Important properties: Important properties:

– length (total elements) length (total elements) – For traversing array elementsFor traversing array elements

• Example method: Example method: – sort() : sorting array elementssort() : sorting array elements– join() : combine all array elements into a stringjoin() : combine all array elements into a string

http://www.w3schools.com/jsref/jsref_obj_array.asp

http://www.w3schools.com/jsref/jsref_obj_array.asp

Javascript Array - creatingJavascript Array - creating

var a = new Array(12);var a = new Array(12);

var b = new Array();var b = new Array();

var c = new Array(12,10,11);var c = new Array(12,10,11);

var d = [12,10,11]; // same as cvar d = [12,10,11]; // same as c

var e = [1,,,10]; // 4 elements array, only first & last var e = [1,,,10]; // 4 elements array, only first & last element initializedelement initialized

Javascript array: inserting Javascript array: inserting valuesvalues

var A =new Array();var A =new Array();

A[0]= 10;A[0]= 10;

A[1]= 20;A[1]= 20;

A[2]=“Ali”;A[2]=“Ali”;

A[3]=2.34;A[3]=2.34;

Result:Result:A[0] 10

A[1] 20

A[2] Ali

A[3]2.34

JS Array: creating and JS Array: creating and accessingaccessing

JS Array: sort methodJS Array: sort method

Javascript Array - Javascript Array - MultidimensionalMultidimensional– – activity 08.4activity 08.4

Javascript Array - Javascript Array - MultidimensionalMultidimensional– – activity 08.4activity 08.4• Technically, JavaScript doesn't support Technically, JavaScript doesn't support

multi-dimensional arraysmulti-dimensional arrays

• Because array is an object, you can put Because array is an object, you can put object inside of another object, so object inside of another object, so emulating a multi dimensional arrayemulating a multi dimensional array

• So it is possible to have a different So it is possible to have a different dimension (column) for each row!dimension (column) for each row!

Javascript Array - Javascript Array - MultidimensionalMultidimensionalJavascript Array - Javascript Array - MultidimensionalMultidimensional

• var myarray=new Array(3)var myarray=new Array(3)

• Create a multidimensional arrayCreate a multidimensional array



Javascript Function – Javascript Function – Activity 9Activity 9• Functions in Javascript behave similar Functions in Javascript behave similar

to numerous programming languages to numerous programming languages (C, C++, PHP, etc). (C, C++, PHP, etc).

• No type!No type!• Put in head section or externalPut in head section or external• Variables inside a function is Variables inside a function is locallocal• Use Use returnreturn to return value and exiting to return value and exiting

the function (return without value) the function (return without value) without finishingwithout finishing

Javascript FunctionsJavascript FunctionsInvolves two steps:Involves two steps:

• Define: Define: to define what processes should be takento define what processes should be taken

• Call/Invoke: Call/Invoke: to execute the functionsto execute the functions

Syntax of function definition:Syntax of function definition:

function function function_name function_name ((param1param1, param2, .., param_n, param2, .., param_n))

//parameters are optional//parameters are optional

{ {

//function’s code goes here//function’s code goes here

return return value_or_object; value_or_object; //optional//optional

}}

Involves two steps:Involves two steps:

• Define: Define: to define what processes should be takento define what processes should be taken

• Call/Invoke: Call/Invoke: to execute the functionsto execute the functions

Syntax of function definition:Syntax of function definition:

function function function_name function_name ((param1param1, param2, .., param_n, param2, .., param_n))

//parameters are optional//parameters are optional

{ {

//function’s code goes here//function’s code goes here

return return value_or_object; value_or_object; //optional//optional

}}

Javascript function – Javascript function – activity activity 0909Javascript function – Javascript function – activity activity 0909

Javascript – Window & Javascript – Window & BoxesBoxes

Activity 10Activity 10– Alert message Alert message – Prompt (getting input)Prompt (getting input)– Confirm messageConfirm message– RedirectionRedirection

JS: Alert JS: Alert

• Creating message boxCreating message box• No input, only Ok button to continueNo input, only Ok button to continue• Useful for debuggingUseful for debugging

– alert (“hello world”);alert (“hello world”);– var name = “rosely”;var name = “rosely”;– alert (“hello ” + name);alert (“hello ” + name);– var age = 17;var age = 17;– alert (“your age is: “ + age);alert (“your age is: “ + age);

• Creating message boxCreating message box• No input, only Ok button to continueNo input, only Ok button to continue• Useful for debuggingUseful for debugging

– alert (“hello world”);alert (“hello world”);– var name = “rosely”;var name = “rosely”;– alert (“hello ” + name);alert (“hello ” + name);– var age = 17;var age = 17;– alert (“your age is: “ + age);alert (“your age is: “ + age);

JS: Prompt JS: Prompt JS: Prompt JS: Prompt

• Getting input from userGetting input from user– name = window.prompt ("Please enter your name", name = window.prompt ("Please enter your name",

“polan");“polan");

• Getting input from userGetting input from user– name = window.prompt ("Please enter your name", name = window.prompt ("Please enter your name",

“polan");“polan");

JS: ConfirmJS: Confirm

• Confirmation are most often used to Confirmation are most often used to confirmconfirm an important action that is an important action that is taking place on a website. taking place on a website.

• For example they may be about to For example they may be about to submit an order or about to visit a submit an order or about to visit a link that will take them away from link that will take them away from the current website. the current website.

JS: Comment JS: Comment

• Same as Java/C++Same as Java/C++– // single line comment// single line comment

– /* /* – thisthis– isis– a multi line comment */a multi line comment */

• Same as Java/C++Same as Java/C++– // single line comment// single line comment

– /* /* – thisthis– isis– a multi line comment */a multi line comment */

JS: Redirect JS: Redirect

• To send user to your new website To send user to your new website locationlocation

• In case of changing website In case of changing website address/domain address/domain

Documents

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