Web Application Development Client Side Programming Muhammad Ali

Need for Client Side Programming www. hotmail. com �The Problem Changing the Content of Page Dynamically Efficient Utilization of Resources

Need for Client Side Programming �The Solution �How? Scripting Languages

Scripting Languages Interpreted Languages Purpose “Automate tasks within a particular software environment” Java. Script VBScript JScript

Java. Script � Case Sensitive X != x � Few Snapshots from History Developed by Brendan Eich (Netscape 2. 0) How the Name was Coined? ▪ Live. Script ▪ Renamed to Java. Script (Dec 1995 ) ▪ Marketing Tactics ▪ Similarity with Java (& C++) Standardization Efforts ▪ ECMAScript

Some Components of Web Browser CSS XHTML Flash Java. Script Java Silverlight Communication

Usual Flow CSS HTML Flash Java. Script Silverlight Communication

Java. Script ~ Flow CSS HTML Flash Java. Script Silverlight Communication

Java. Script ~ Hello World! How to add Java. Script? <script type=“text/javascript”> & </script> Inclusion Methods ▪ Same File (HTML File) ▪ External File (JS File) ~ Preferred Approach

Java. Script ~ Hello World! <html> <head> <script type=“text/javascript”> alert("Hello World!"); </script> </head> <body> </html>

Java. Script ~ Disabled!!! <html> <head> <script> alert("Hello World!"); </script> <noscript> <h 1>Please enable Java. Script!</h 1> </noscript> </head> <body> </html>

Java. Script ~ For Older Browsers! <html> <head> <script>  </script> <noscript> <h 1>Please enable Java. Script!</h 1> </noscript> </head> <body> </html>

Misc. alert prompt confirm

Java. Script ~ Data Types �Number 1 2. 3 �String “a string” �Boolean true false

Java. Script ~ Variables Name it and Have it! Use ‘var’ to declare variables! Examples var num 1 = 1; var num 2 = 2. 3; var str = “A String”; var any. Var; // undefined

A Closer Look at … � String Type To append to strings var str 1 = “abc”; var str 2 = “def”; var str. Result = str 1 + str 2; What about var result = “ 1” + 2; And var result = “ 1” - 2; And var some. Var ; // No initialization alert(some. Var);

A Closer Look at … Boolean Type false ▪ false, undefined, null, 0, Na. N, “” (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 �parse. Int Converts a string to an integer number var integer. Number = parse. Int(“ 12”); �parse. Float Converts a string to a float number var float. Number = parse. Float(“ 12. 12”); �Converting a Number to a String?

Basic Programming Constructs Loops For Loop for (start; stop; step) { action } Example for (var i = 0; i < 10; ++i) { alert(i); }

Loops ~ Continued While Loop boolean some. Condition = true; while (some. Condition) { // Do something }

Loops ~ Continued Do-While Loop boolean some. Condition = true; do { // Do something } while (some. Condition);

if-then-else Statement Different forms if (expr) { } // Do something

if-then-else ~ Continued if (expr) { // Do something } else { // Do something }

if-then-else Ladder if (expr) { // Do something } else { // Do something }

Switch Statement switch (expr) { switch (grade) { case value 1: break; case value 2: break; case value. N: break; default: break; } case “A”: break; case “B”: break; case “C”: break; default: break; }

Java. Script ~ Objects ▪ “An object in Java. Script is a set of properties, each of which consists of a unique name and a value belonging to one of Java. Script’s six data types” ▪ NO Classes in Java. Script! ▪ Class-Like features. var obj = new Object(); obj. Test = “Some Value”; alert(obj. Test); // Some Value delete obj. Test; alert(obj. Test); // undefined

Java. Script ~ Objects Enumerating Properties for (var a. Property in obj) { alert(a. Property + “ is a property of obj”); } Displays Test is a property of obj

Java. Script ~ Array Notation Accessing Properties obj[“Test”] = “some. Value”; for (var a. Property in obj) { alert(a. Property + “ has value: ” + obj[a. Property]); }

String ~ Revisited var str = new String(“This is a string”); var str = new String("abcdef"); var ch = str. char. At(0); var index = str. index. Of("b", 0); if (index > 0) alert("Found at index: " + index); else alert("Not Found!");

String ~ Revisited split(separater, limit) to. Lower. Case() to. Upper. Case()

Java. Script ~ Array � What’s an Array? var ar 1 = new Array(); var ar 1 = new Array(5); var ar 2 = new Array(4, true, “OK”); var ar 3 = [4, true, “OK”]; var two. Dim. Ar = [ ]; [ “X”, “O”], [ “O”, “X”, “O”]

Java. Script ~ Array Access an Element at Index ‘i’ ar[i] = 12; alert(ar[3]);

Java. Script ~ Array to. String splice reverse length push

Java. Script Math abs, ceil, floor, round, random, … Trigonometric, logarithmic, etc Dates before January 1, 1970 are not supported

Event Driven Paradigm Action Event Handling (Also called as handler) Function

Functions function any. Function() { } alert(“Inside any. Function”); function sum(num 1, num 2) { return num 1 + num 2; }

Functions ~Parameter Passing function calculate. Grade(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 Java. Script 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) ▪ get. Element. By. Id ▪ Event model ▪ CSS ▪ DOM-3 ▪ Xpath ▪ Keyboard Event Handling

Mouse Events source: wikipedia

Keyboard Events source: wikipedia

Form source: wikipedia

source: wikipedia

History source: w 3 schools

Location source: w 3 schools

source: w 3 schools

Navigator Detecting Browser Version navigator. app. Name navigator. app. Version navigator. user. Agent

HTML - DOM <html> <head> <title>My Title</title> </head> <body> <a href="some. File. html">My link</a> <h 1>My header</h 1> </body> </html>

HTML - DOM Source: w 3 schools. com

Accessing Nodes in DOM get. Element. By. Tag. Id get. Elements. By. Tag. Name Traverse the DOM Tree

Adding an Element Dynamically function add. Element() { var newdiv = document. create. Element(“div”); newdiv. set. Attribute(“id”, ”my. Div”); newdiv. inner. HTML = “Element added!”; }

Removing an Element Dynamically function remove. Element(div. To. Remove) { var parent. Div = document. get. Element. By. Id('my. Div'); parent. Div. remove. Child(div. To. Remove); }

Add. Event. Listener var button = window. get. Element. By. Id(“msg. Button”); button. add. Event. Listener(“click”, say. Hello, false); function say. Hello() { } window. alert(“Hello”);

Remove. Event. Listener remove. Event. Listener The event listener will no longer exist!

Useful Links for DOM Quirksmode - DOM Traversal [http: //www. quirksmode. org/dom/intro. html ] w 3 schools - DOM Tutorials [http: //www. w 3 schools. com/HTMLDOM/dom_examples. asp] MREDKJ - DOM Tutorials [http: //www. mredkj. com/tutorials/htmljs. html]