JavaScript. What s wrong with JavaScript?

Transcription

1 JavaScript 1 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, objectoriented, and very expressive language 2

2 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 3 Case sensitive Coding in JavaScript 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 4

3 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 5 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 6

4 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 7 Functions You may pass arguments Function may return a value function name(argumentname, ) { code return value; } Calling: var something = name(arg1, arg2); 8

5 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. 9 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! 10

6 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 11 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); } 12

7 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 13 OK, but what about Inheritance? You can some what create inheritance function SomeThingMore () {} SomeThingMore.prototype = new SomeThing() var obj2 = new SomeThingMore() obj.somemethod(4) 14

8 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 15 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 16

9 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 17 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> 18

10 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> 19