1. JAVASCRIPT Dr Mohd Soperi Mohd Zahid Semester 2 2015/16

2. Overview JavaScript jQuery jQuery Mobile AJAX

3. JavaScript Brief History Not Java programming language Focus on simulating and creating interactivity on the WWW From a language called LiveScript, developed by Brendan Erich at Netscape sometime in 1995 – 1996 Not a compiled language Browser implement JavaScript based on ECMAScript, a language specification standard ECMAScript first version released in 1997, latest 2009 Early JavaScript concentrated on client-side form validation and working with images

4. Activity 1 Open a web browser In the address bar, type javascript:alert(“Hello World”);

5. Placing JavaScript in HTML Preferred practice: JavaScript appears just before tag … // here // and, or here too! External or embedded scripts

6. How Browsers handle Scripts As a page loads, browsers download external scripts, parses, and execute each script in the order in which they appear in html document Blocking behavior – content appears after a script element is downloaded or rendered only after browser has completely processed the script element

7. Data types Numbers Strings Booleans Null Undefined Objects

8. Activity 2 Hexadecimal Numbers var h = 0xe; var i = 0x2; var j = h * i; var k = 4; var m = 51.50; window.alert(j); window.alert(k + m); Greetings/ Assalamualaykum! document.write("j + k + m = ", j, " + ", k, " + ", m, "= ", j + k + m); Integers and floating point do not have special or separate types in JavaScript Variables in JavaScript is not strongly typed

9. Some valid strings “Hello world” “B” “This is ‘another string’.” ‘The cow says “moo”.’ ‘Assalamualaykum dunia, damailah pada kamu semua’ ‘Escape char needed in string\’s with single quotations’ “\”hello\” and goodbye!”

10. Null, Undefined Null is simply nothing and represents or evaluates to false Different than empty var myvar = ‘’; sets myvar to empty but is not null Undefined is used in variable that does not have a value yet

11. Objects and Arrays JavaScript is an object-based language A collection of properties where each can have a value Each property can have a value, an object, or even a function that returns a value Built-in objects are available like Date() etc. or you can define your own objects Array is a collection of elements accessible by numbered index values var carCatalog = { “id”: “1”, “model”: “Honda Freed” }; window.alert(carCatalog.model); // create empty object var myObj = {}; var star = new Array(); star[0] = “Polaris”; star[1] = “Deneb”; star[2] = “Vega”; star[3] = “Altair”; var star = [“Polaris”, “Deneb”];

12. Activity 3 Calculating render time var started = new Date(); var now = started.getTime(); var bottom = new Date(); var diff = (bottom.getTime() - now)/1000; var finaltime = diff.toPrecision(5); var dateLoc = document.getElementById("dateField"); dateLoc.innerHTML = "Page rendered in " + finaltime + " seconds.";

13. Activity 4 Javascript Operators var x = Number("42"); var y = "42"; if (x == y) { alert('x is equal to y'); // using simple test } else { alert("x is not equal to y"); } Type and launch the code in a web browser. What output do you get? Change the equality test with x === y (using the strict test). Launch the code in a web browser. What output do you get now?

14. Activity 5 Javascript Operators var myObj = { star: "Algol", constellation: "Perseus" }; // check a property is in an object if ("star" in myObj) { alert("The property called star in this object"); } What is the operator name being used in the if statement? Explain how the operator is used in the if statement.

15. Activity 6 (The prompt() function) Using prompt() function var inputNum = prompt("Please enter a number below 100:"); if (inputNum > 99) { alert("That number, " + inputNum + ", is not below 100."); } else { alert(“Good! You entered ” + inputNum); } Change the program so that message is displayed when a number outside the range from 51 to 99 inclusive is entered. Change the program using NaN function and else if to validate that user has entered a number.

16. Activity 7 A Basic Form function alertName() { var name = document.forms[0].nametext.value; if (name == "Amanah") { alert("Hello " + name + ". Welcome! Blessings for all"); } else if (name == "DAP") { alert("Hello DAP!"); } else { alert("Hello " + name +"!"); } return true; } Username:

17. Looping through object properties Properties var star = {}; function Star(constell, type, specclass, magnitude) { // create object this.constellation = constell; // adding properties this.type = type; this.spectralClass = specclass; this.mag = magnitude; this.show = function() { // adding method alert(“hello, an object is created as the value for a property.”); } } star[“Polaris”] = new Star(“Ursa Minor”, “Dauble/Cepheid”, “F7”, 2.0); star[“Vega”] = new Star(“Lyra”, “White Dwarf”, “A0 V”, 0.03); star[“Altair”] = new Star(“Aquila”, “White Dwarf”, “A7 V”, 0.77); for (var element in star) { star[element].show(); // call a method for (var propt in star[element]) { alert(element + “: “ + propt + “ = “ + star[element][propt]); }}

18. Array methods var myArray1 = new Array(); myArray1[0] = "first"; myArray1[1] = "second"; var newArray = myArray1.concat("third"); // myArray is now [first,second,third] alert(newArray); var myArray2 = [51,67]; newArray = newArray.concat(myArray2); newArray.push("bye"); for (var i = 0; i < newArray.length; i++) { alert(newArray[i]); } var arrayString = newArray.join("**"); alert(arrayString); newArray.pop(); alert(newArray); var sortednewArray = newArray.sort(); alert(newArray);

19. The Browser Object Model Browser itself is represented by one object, called the window object, a parent of several child objects:

20. BOM objects Each object has several properties, methods, and child objects Methods for Window object – alert(), prompt(), etc Navigator object provides several properties to detect various elements of the browser and its environment Location object gives us access to information about the currently loaded Uniform Resource Identifier (URI)

21. Activity 10 Browser Object Model if (navigator.javaEnabled()) { alert("Java is enabled"); } else { alert("Java is not enabled"); } var body = document.getElementsByTagName("body")[0]; for (var prop in navigator) { var elem = document.createElement("p"); var text = document.createTextNode(prop + ": " + navigator[prop]); elem.appendChild(text); body.appendChild(elem); }

22. JavaScript Libraries and frameworks Library – grouping of code that provides common or additional functionality Libraries consist of files that expose objects and functions To use the objects and functions, developer includes or call the library

23. Creating a library Type the following code and save in a file called library.js Create an html document that use the library as follows: var MyLibrary = {}; MyLibrary.sendAlert = function(mesg, elm) { alert(mesg); }; A Basic Example MyLibrary.sendAlert(“hello, this is the message”);

24. Public JavaScript libraries & frameworks jQuery – add effects to web pages, enhance usability, and make processing of data with Asynchronuous JavaScript and XML (AJAX) easier http://jquery.com Modernizr – uses feature detection to determine whether a given browser supports a certain widget or effect and provides alternative means of accomplishing the task http://modernizr.com Yahoo! User Interface (YUI) – like jQuery but with excellent documentation http://developer.yahoo.com/yui/