1 JavaScript

2 What’s wrong with JavaScript? A very powerful language, yet –Often hated –Browser inconsistencies –Misunderstood –Developers find it painful –Lagging tool support –Bad name for a language! Java in it is misleading In reality, it’s a very elegant, powerful, object- oriented, and very expressive language

3 What it like? A little similarity with Java and C Quite some similarities with Perl –Interpreted –Support for regular expressions, handling arrays –Object is more close to Perl associative array than Java’s Untyped language

4 Coding in JavaScript Case sensitive Good practice to use ; to separate statements –However, optional if each statement on separate line –Watch out for line breaks, ; is inserted automatically! –May cause headache at times, so better to use ; Same commenting style as C++/Java –/**/ and // –Try not to use HTML commenting convention

5 Types null and undefined are used to indicate null Strings are single quoted or double quoted with \ used for escape –Strings are immutable A lots of things are objects –For instance functions are objects as well This leads to pretty interesting behavior

6 Variables Variables are typeless Good practice to use the var declaration –You may be able to omit it, but not a good idea Here is a catch. If you omit var, the variable is created global –Any change made anywhere affects it! Variable scope: –Global and local (function) –No block level scope Variable defined any where in a function has function scope –though not initialized until var is reached

7 Control Structure Most control structures are like ‘C’ structure –Statement –Expressions –if, switch, while, … –Exception handling much like Java try, catch, finally –Two types of for loop ‘C’ like for(…; …; …) { … } for ([var] variable in object) { … } –Iterates over all properties of the object

8 Functions You may pass arguments Function may return a value function name(argumentName, …) { … code return value; } Calling: var someThing = name(arg1, arg2);

9 Functions and Objects Functions are objects function foo(){…} is the same as Var foo = function(){…} This leads to some very powerful behavior –you can assign handlers to objects for events, etc.

10 Objects Create an object with new –var obj = new SomeThing(); Objects have properties and methods –obj.someProperty = value; –Var someValue = obj.someProperty; –obj.someMethod(…); –You may also treat an object as associative array Obj[someProperty] = value; Var someValue = obj[someProperty]; Date Object –var now = Date(); // current date and time –var newYearDay = new Date(00, 0, 01); Month is 0 based !

11 How to create a class? Let’s create the class used on previous page! function SomeThing() { this.someProperty = 0; } Notice how we assigned the property of the class But, then a class actually looks like a function –Ugly –Everything in a class is public

12 But, what about that method? someMethod was a method we called on that object of SomeThing Each class has a prototype member that holds its properties and methods You can access the prototype to add methods SomeThing.prototype.someMethod = function(val) { alert(val); }

13 How an object created? A object is created by copying the Prototype to __proto__ property of an object An object passes unhandled calls to the __proto__ Try this: for(var prop in obj) { print(prop); } someProperty someMethod for(var prop in obj.__proto__) { print(prop); } someMethod

14 OK, but what about Inheritance? You can some what “create” inheritance function SomeThingMore () {} SomeThingMore.prototype = new SomeThing() var obj2 = new SomeThingMore() obj.someMethod(4)

15 But, two problems You must set prototype before adding any methods to sub class Also, you need to reset the constructor for the sub class

16 Client-side JavaScripting JavaScript is very useful to run on the frontend –It allows you to validate data being sent to server –It eliminates overhead by processing on browser side Which otherwise may have to be done on server Browser provides a context in which script runs –Access to window object for execution context –Client-side objects –Event-driven model

17 Object Model Browser responsible for displaying HTML document in a window JavaScript has access to –Document object that represents the HTML document –Window object that represents the window that displays all global variables belong to this global object From the window object you may get to client side objects –Frames, Document, Forms (within document), etc. Browser generates events upon user input –you write and register event handler; browser notifies

18 JavaScript in HTML JavaScript needs to be provided for execution on browser May be provided in HTML document within and tags –you may also mention external file using the SRC attribute of SCRIPT tag Example: var today = new Date(); document.write(“Today is “ + today.toLocaleString());

19 Event Handling In the appropriate HTML tag, specify the event handler Write the event handler as a separate JavaScript function Example: function saySomeThing(name) { alert(name + " you are good!"); }