1. 06 – Java Script (2) Informatics Department Parahyangan Catholic University

2.  An Object is a collection of attributes (variables) and methods (functions) that deal with related values and tasks  Simplest way to create an object in JS: var rocket = new Object(); This creates a new instance of an Object, a blank object template, and assigned it to a variable

3.  Adding attributes : var rocket = new Object(); rocket.engineCount = 2; rocket.thrust = 5000; rocket.astronautCount = 4; rocket.colour = "red";

4.  How do we make 2 rockets ? var rocket = new Object(); rocket.engineCount = 2; var anotherRocket = new Object(); anotherRocket.engineCount = 1; anotherRocket.wings = 2; Both rocket objects are seemingly identical, however, if we outputted the number of wings on the second rocket, we’d be returned “2”, but if we did the same to the first rocket, we’d be returned “undefined”.

5.  Similar concept as Java’s Class’ constructor  Creating objects from a template: function Rocket(engineCount, thrust, wings){ this.engineCount = engineCount; this.thrust = thrust; this.wings = wings; } var rocket = new Rocket(2, 5000, 4); var anotherRocket = new Rocket(1, 2000, 2); var creates a local variable this. creates an attribute for this instance of the object var creates a local variable this. creates an attribute for this instance of the object

6.  x is assigned a foo object with name attribute equals “FOOOOO”  y is assigned a number value: 123 var x = new foo(); var y = foo(); function foo(){ this.name = "FOOOOO"; return 123; }

7.  Adding methods:  Usage example: function Rocket(engineCount, thrust, wings) { this.engineCount = engineCount; this.enginesOn = false; this.thrust = thrust; this.wings = wings; this.turnEnginesOn = function() { this.enginesOn = true; alert("Engines are now on"); } var rocket = new Rocket(2, 5000, 4); rocket.turnEnginesOn();

8.  An object method is basically a function assigned to an object attribute.  functions are objects so they’re a data type and can be assigned to a variable.  The name of the method will take the name of the attribute the method is assigned to

9.  Similar to Java’s static keyword  prototype attributes / methods are shared among all instances of the same object function Rocket(engineCount, thrust, wings) { this.engineCount = engineCount; this.enginesOn = false; this.thrust = thrust; this.wings = wings; Rocket.prototype.fuel = “Liquid hydrogen”; Rocket.prototype.turnEnginesOn = function() { this.enginesOn = true; alert("Engines are now on"); }

10.  An associative array is one whose elements are referenced by name rather than by numeric offset. balls = { "golf": "Golf balls, 6", "tennis": "Tennis balls, 3", "soccer": "Soccer ball, 1", "ping": "Ping Pong balls, 1 doz“ } for (b in balls) document.write(b + " = " + balls[b] + " ")

11.  Creating an empty Array  concat concatenates two arrays, or a series of values with an array fruit = ["Banana", "Grape"]; veg = ["Carrot", "Cabbage"]; all = fruit.concat(veg); document.write(all); var A = Array(); pets = ["Cat", "Dog", "Fish"]; more_pets = pets.concat("Rabbit", "Hamster"); document.write(more_pets); RESULT: Banana,Grape,Carrot,Cabbage RESULT: Banana,Grape,Carrot,Cabbage RESULT: Cat,Dog,Fish,Rabbit,Hamster RESULT: Cat,Dog,Fish,Rabbit,Hamster

12.  push inserts a new value into an array  pop deletes the last inserted value and returns it sports = ["Football", "Tennis", "Baseball"]; document.write("Start = " + sports + " "); sports.push("Hockey"); document.write("After Push = " + sports + " "); removed = sports.pop(); document.write("After Pop = " + sports + " "); document.write("Removed = " + removed + " "); RESULT: Start = Football,Tennis,Baseball After Push = Football,Tennis,Baseball,Hockey After Pop = Football,Tennis,Baseball Removed = Hockey RESULT: Start = Football,Tennis,Baseball After Push = Football,Tennis,Baseball,Hockey After Pop = Football,Tennis,Baseball Removed = Hockey

13.  reverse  join convert all the values in an array to strings and then join them together into one large string, placing an optional separator between them. sports = ["Football", "Tennis", "Baseball", "Hockey"]; sports.reverse(); document.write(sports); pets = ["Cat", "Dog", "Rabbit", "Hamster"]; document.write(pets.join() + " "); document.write(pets.join(' : ') + " "); RESULT: Hockey,Baseball,Tennis,Football RESULT: Hockey,Baseball,Tennis,Football RESULT: Cat,Dog,Rabbit,Hamster Cat : Dog : Rabbit : Hamster RESULT: Cat,Dog,Rabbit,Hamster Cat : Dog : Rabbit : Hamster

14.  sort // Alphabetical sort sports = ["Football", "Tennis", "Baseball", "Hockey"]; sports.sort(); document.write(sports + " "); // Reverse alphabetical sort sports = ["Football", "Tennis", "Baseball", "Hockey"]; sports.sort().reverse(); document.write(sports + " "); // Ascending numerical sort numbers = [7, 23, 6, 74]; numbers.sort(function(a,b){return a - b}); document.write(numbers + " "); // Descending numerical sort numbers = [7, 23, 6, 74]; numbers.sort(function(a,b){return b - a}); document.write(numbers + " ");

15.  timers are methods that allow us to run blocks of code once after a certain amount of time has passed, or many times after a repeating interval

16.  Setting one-off timers  Unsetting one-off timers function onTimeout() { alert("Ding dong!"); }; var timer = setTimeout(onTimeout, 3000); clearTimeout(timer);

17.  Setting repeating timers  Unsetting repeating timers function onInterval() { alert("Ding dong!"); }; var interval = setInterval(onInterval, 3000); clearInterval(interval);

18.  jQuery is a JavaScript library  Why are we using it?  Most of the core features are apparent in all the major browsers  However, a lot of browsers implement other features in slightly different ways.  One example is detecting when a HTML document has finished loading (more on this later)

19.  To use JQuery, we need to link the JQuery file into our HTML document (need to go to the jQuery website, download the library, and add it into the same folder as your HTML page.)  Second option is to use Google-Hosted version

20.  Why can’t we just run JavaScript at any time?  Three ways:  The wrong way (window.onload)  The long way (The DOM)  The easy way (JQuery)

21.  The wrong way (window.onload)  window.onload is too patient. It doesn’t run until absolutely every piece of content has finished loading. window.onload = function() { alert("Hello, World!"); };

22.  The long way (The DOM) the DOM represents the raw structure of our content, which means it has to be created before the content is displayed on the screen. If we can find out when the DOM has finished loading, we’ll know when the content is accessible, regardless of whether it’s visible on the screen.  Unfortunately, detecting when the DOM has loaded is a troublesome task. There’s just no consistent method across all the major browsers.

23. // Dean Edwards/Matthias Miller/John Resig function init() { // quit if this function has already been called if (arguments.callee.done) return; // flag this function so we don't do the same thing twice arguments.callee.done = true; // kill the timer if (_timer) clearInterval(_timer); // do stuff }; /* for Mozilla/Opera9 */ if (document.addEventListener) { document.addEventListener("DOMContentLoa ded", init, false); } /* for Internet Explorer */ /*@cc_on @*/ /*@if (@_win32) document.write("<script id=__ie_onload defer src=javascript:void(0)> "); var script = document.getElementById("__ie_onload"); script.onreadystatechange = function() { if (this.readyState == "complete") { init(); // call the onload handler } }; /*@end @*/ /* for Safari */ if (/WebKit/i.test(navigator.userAgent)) { // sniff var _timer = setInterval(function() { if (/loaded|complete/.test(document.readyState)) { init(); // call the onload handler } }, 10); } /* for other browsers */ window.onload = init;

24.  The easy way (JQuery) $(document).ready(function() { alert("Hello, World!"); }); JQuery selector a method that does the same thing as Dean Edwards’ method

25. USING PURE JAVA SCRIPT  getElementById(“blog”)  getElementsByTagName(“p”)  innerHTML USING JQUERY  $(“#blog”)  $(“p”) .html() var secondaryHeadings = $("h2"); alert(secondaryHeadings.html()); secondaryHeadings.html("Now we've changed the content"); Example: