Web Application Development Muhammad Ali. The Problem Changing the Content of Page Dynamically Efficient Utilization of Resources

Client Side Programming

Web Application Development

Muhammad Ali

Need for Client Side Programming

The Problem Changing the Content of Page Dynamically Efficient Utilization of Resources

www.hotmail.com

Need for Client Side Programming

The Solution

How? Scripting Languages

Scripting Languages

Interpreted Languages

Purpose “Automate tasks within a particular

software environment”

JavaScriptVBScript JScript

JavaScript

Case Sensitive X != x

Few Snapshots from History Developed by Brendan Eich (Netscape 2.0)

How the Name was Coined?▪ LiveScript▪ Renamed to JavaScript (Dec 1995 )

▪ Marketing Tactics▪ Similarity with Java (& C++)

Standardization Efforts▪ ECMAScript

Some Components of Web Browser

Communication

XHTML

CSSJavaScri

pt

Flash

Java

Silverlight

Usual Flow

Communication

HTML

CSSJavaScri

pt

Flash

Silverlight

Java

Usual Flow

Communication

HTML

CSSJavaScri

pt

Flash

Silverlight

Java

JavaScript ~ Flow

Communication

HTML

CSSJavaScri

pt

Flash

Silverlight

Java

JavaScript ~ Flow

Communication

HTML

CSSJavaScri

pt

Flash

Silverlight

Java

JavaScript ~ Hello World!

How to add JavaScript? <script type=“text/javascript”> &

</script>

Inclusion Methods▪ Same File (HTML File)▪ External File (JS File) ~ Preferred Approach

JavaScript ~ Hello World!

<html><head>

<script type=“text/javascript”>alert("Hello World!");

</script></head><body></body>

</html>

JavaScript ~ Disabled!!!

<html><head><script>alert("Hello World!");</script><noscript><h1>Please enable JavaScript!</h1></noscript></head><body></body>

</html>

JavaScript ~ For Older Browsers!

<html><head>

<script></script><noscript>

<h1>Please enable JavaScript!</h1></noscript>

</head><body></body>

</html>

Misc.

alert

prompt

confirm

JavaScript ~ Data Types

Number 1 2.3

String “a string”

Boolean true false

JavaScript ~ Variables

Name it and Have it!

Use ‘var’ to declare variables!

Examplesvar num1 = 1;var num2 = 2.3;var str = “A String”;

var anyVar; // undefined

A Closer Look at …

String Type To append to strings

var str1 = “abc”;var str2 = “def”;

var strResult = str1 + str2;

What about var result = “1” + 2;

Andvar result = “1” - 2;

Andvar someVar ; // No initializationalert(someVar);

A Closer Look at …

Boolean Type false

▪ false, undefined, null, 0, NaN, “” (empty string)

true▪ Any other value is considered as true▪ true, “abc”, 1, …

The typeof Operator

alert(typeof (1)); number

alert(typeof(“abc”));

alert(typeof(“1”));

alert(typeof(true));

Type Conversions

parseInt Converts a string to an integer number var integerNumber = parseInt(“12”);

parseFloat Converts a string to a float number

var floatNumber = parseFloat(“12.12”);

Converting a Number to a String?

Basic Programming Constructs

Loops For Loop

for (start; stop; step) {action

}

Examplefor (var i = 0; i < 10; ++i) { alert(i);}

Loops ~ Continued

While Loopboolean someCondition = true;while (someCondition) {

// Do something}

Loops ~ Continued

Do-While Loopboolean someCondition = true;do {

// Do something} while (someCondition);

if-then-else Statement

Different forms

if (expr) {// Do something

}

if-then-else ~ Continued


}else {

// Do something}

if-then-else Ladder


} else if (expr) {

// Do something}else {

// Do something}

Switch Statement

switch (expr) {

case value1: break; case value2: break; case valueN: break;default: break;}

switch (grade) {

case “A”: break; case “B”: break; case “C”: break;default: break;}

JavaScript ~ Objects

Objects▪ “An object in JavaScript is a set of properties, each of

which consists of a unique name and a value belonging to one of JavaScript’s six data types”

▪ NO Classes in JavaScript!▪ Class-Like features.

var obj = new Object();obj.Test = “Some Value”;alert(obj.Test); // Some Value

delete obj.Test; alert(obj.Test); // undefined

JavaScript ~ Objects

Enumerating Properties

for (var aProperty in obj) {alert(aProperty + “ is a property of obj”);

}

Displays Test is a property of obj

JavaScript ~ Array Notation

Accessing Properties obj[“Test”] = “someValue”;

for (var aProperty in obj) {alert(aProperty + “ has value:” + obj[aProperty]);

}

String ~ Revisited

var str = new String(“This is a string”);

var str = new String("abcdef");var ch = str.charAt(0);

var index = str.indexOf("b", 0);if (index > 0)

alert("Found at index: " + index);else

alert("Not Found!");

String ~ Revisited

split(separater, limit)

toLowerCase() toUpperCase()

JavaScript ~ Array

What’s an Array? var ar1 = new Array(); var ar1 = new Array(5); var ar2 = new Array(4, true, “OK”);

var ar3 = [4, true, “OK”]; var twoDimAr = [

[ “X”, “O”, “O”],[ “O”, “X”, “O”],[ “O”, “X”, “O”]

];

JavaScript ~ Array

Access an Element at Index ‘i’ ar[i] = 12; alert(ar[3]);

JavaScript ~ Array

toString

splice

reverse

length

push

JavaScript

Math abs, ceil, floor, round, random, … Trigonometric, logarithmic, etc

Date Dates before January 1, 1970 are not

supported

Event Driven Paradigm

Action

Event

Handling (Also called as handler) Function

Functions

function anyFunction() {alert(“Inside anyFunction”);

}

function sum(num1, num2) {return num1 + num2;

}

Functions ~Parameter Passing

function calculateGrade(marks) {

if (marks >= 90 && marks <= 100) {return “A”;

} else if (marks >= 80) {

return “B”;}

else if (marks >= 70) {return “Pass”;

}}

Document Object Model

API (Application Programming Interface) For how JavaScript Programs can access

and manipulate the HTML Document

DOM Standardization

DOM Standardization

▪ DOM – 1 (1998)▪ Complete model for an entire HTML or XML

document, including means to change any portion of the document.

▪ DOM-2 (late 2000)▪ getElementById▪ Event model▪ CSS

▪ DOM-3▪ Xpath▪ Keyboard Event Handling

Mouse Events

source: wikipedia

Keyboard Events

source: wikipedia

Form

source: wikipedia

source: wikipedia

History

source: w3schools

Location

source: w3schools

source: w3schools

source: w3schools

Navigator

Detecting Browser Version

navigator.appName

navigator.appVersion navigator.userAgent

HTML - DOM

<html><head>

<title>My Title</title></head><body>

<a href="someFile.html">My link</a>

<h1>My header</h1></body>

</html>

HTML - DOM

Source: w3schools.com

Accessing Nodes in DOM

getElementByTagId

getElementsByTagName

Traverse the DOM Tree

Adding an Element Dynamically

function addElement() { var newdiv = document.createElement(“div”);

newdiv.setAttribute(“id”,”myDiv”); newdiv.innerHTML = “Element added!”;

}

Removing an Element Dynamically

function removeElement(divToRemove) {

var parentDiv = document.getElementById('myDiv');

parentDiv.removeChild(divToRemove); }

AddEventListener

var button = window.getElementById(“msgButton”);

button.addEventListener(“click”, sayHello, false);

function sayHello() {window.alert(“Hello”);

}

RemoveEventListener

removeEventListener The event listener will no longer exist!

Useful Links for DOM

Quirksmode - DOM Traversal[http://www.quirksmode.org/dom/intro.html ]

w3schools - DOM Tutorials [http://www.w3schools.com/HTMLDOM/dom_examples.asp

]

MREDKJ - DOM Tutorials[http://www.mredkj.com/tutorials/htmljs.html]

Timer

Sets the timeout for the function var tid = setTimeout("timedCount()",

1000);

Clears the timout clearTimeout(tid);

Debugging

Breakpoints

Call Stack

Watch & Inspect

Step-into, Step-over, Step-out

The End!It’

s NOT !

Documents

Web Application Development Muhammad Ali. The Problem Changing the Content of Page Dynamically Efficient Utilization of Resources