JavaScript

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 <SCRIPT> and </SCRIPT> tags • you may also mention external file using the SRC attribute of SCRIPT tag • Example: <SCRIPT type=“text/javascript”> var today = new Date(); document.write(“Today is “ + today.toLocaleString()); </SCRIPT>

19. Event Handling • In the appropriate HTML tag, specify the event handler • Write the event handler as a separate JavaScript function • Example: <HTML> <FORM> <INPUT type="text" name="name" onChange="saySomeThing(this.value)" > </FORM> <SCRIPT> function saySomeThing(name) { alert(name + " you are good!"); } </SCRIPT> </HTML>