1. Web Application Development Muhammad Ali

2.  The Problem  Changing the Content of Page Dynamically  Efficient Utilization of Resources

3.  The Solution  How?  Scripting Languages

4.  Interpreted Languages  Purpose  “Automate tasks within a particular software environment”  JavaScript  VBScript  JScript

5.  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

6. Communication XHTMLCSS JavaScript Flash Java Silverlight

7. Communication HTMLCSS JavaScript Flash Silverlight Java

8. Communication HTMLCSS JavaScript Flash Silverlight Java

9. Communication HTMLCSS JavaScript Flash Silverlight Java

10. Communication HTMLCSS JavaScript Flash Silverlight Java

11.  How to add JavaScript?  &  Inclusion Methods ▪ Same File (HTML File) ▪ External File (JS File) ~ Preferred Approach

12. alert("Hello World!");

13. alert("Hello World!"); Please enable JavaScript!

14. <!-- alert("Hello World!"); // --> Please enable JavaScript!

15.  alert  prompt  confirm

16.  Number  1  2.3  String  “a string”  Boolean  true  false

17.  Name it and Have it!  Use ‘var’ to declare variables!  Examples var num1 = 1; var num2 = 2.3; var str = “A String”; var anyVar; // undefined

18.  String Type  To append to strings var str1 = “abc”; var str2 = “def”; var strResult = str1 + str2;  What about var result = “1” + 2; And var result = “1” - 2; And var someVar ; // No initialization alert(someVar);

19.  Boolean Type  false ▪ false, undefined, null, 0, NaN, “” (empty string)  true ▪ Any other value is considered as true ▪ true, “abc”, 1, …

20.  alert(typeof (1));  number  alert(typeof(“abc”));  alert(typeof(“1”));  alert(typeof(true));

21.  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?

22.  Loops  For Loop for (start; stop; step) { action } Example for (var i = 0 ; i < 10 ; ++i) { alert(i); }

23.  While Loop boolean someCondition = true; while (someCondition) { // Do something }

24.  Do-While Loop boolean someCondition = true; do { // Do something } while (someCondition);

25. Different forms  if (expr) { // Do something }

26.  if (expr) { // Do something } else { // Do something }

27. if (expr) { // Do something } else if (expr) { // Do something } else { // Do something }

28. 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; }

29.  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

30.  Enumerating Properties for (var aProperty in obj) { alert(aProperty + “ is a property of obj”); }  Displays Test is a property of obj

31.  Accessing Properties  obj[“Test”] = “someValue”; for (var aProperty in obj) { alert(aProperty + “ has value:” + obj[aProperty]); }

32. 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!");

33.  split(separater, limit)  toLowerCase()  toUpperCase()

34.  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”] ];

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

36.  toString  splice  reverse  length  push

37.  Math  abs, ceil, floor, round, random, …  Trigonometric, logarithmic, etc  Date  Dates before January 1, 1970 are not supported

38.  Action  Event  Handling (Also called as handler)  Function

39. function anyFunction() { alert(“Inside anyFunction”); } function sum(num1, num2) { return num1 + num2; }

40. function calculateGrade(marks) { if (marks >= 90 && marks <= 100) { return “A”; } else if (marks >= 80) { return “B”; } else if (marks >= 70) { return “Pass”; }

41.  API (Application Programming Interface)  For how JavaScript Programs can access and manipulate the HTML Document  DOM Standardization

42. ▪ 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

43. source: wikipedia

44. source: wikipedia

46. source: wikipedia

47. source: wikipedia

48. History source: w3schools

49. Location source: w3schools

50. source: w3schools

51. source: w3schools

52.  Detecting Browser Version  navigator.appName  navigator.appVersion  navigator.userAgent

53. My Title My link My header

54. Source: w3schools.com

55.  getElementByTagId  getElementsByTagName  Traverse the DOM Tree

56.  function addElement() { var newdiv = document.createElement(“div”); newdiv.setAttribute(“id”,”myDiv”); newdiv.innerHTML = “Element added!”; }

57. function removeElement(divToRemove) { var parentDiv = document.getElementById('myDiv'); parentDiv.removeChild(divToRemove); }

58. var button = window.getElementById(“msgButton”); button.addEventListener(“click”, sayHello, false); function sayHello() { window.alert(“Hello”); }

59.  removeEventListener  The event listener will no longer exist!

60.  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 ]

61.  Sets the timeout for the function  var tid = setTimeout("timedCount()", 1000);  Clears the timout  clearTimeout(tid);

62.  Breakpoints  Call Stack  Watch & Inspect  Step-into, Step-over, Step-out