JavaScript

1
JavaScript
2
Whats 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, its 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 Javas
• 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
• ObjsomeProperty value
• Var someValue objsomeProperty
• 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?

• Lets 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 ltSCRIPTgt
  and lt/SCRIPTgt tags
• you may also mention external file using the SRC
  attribute of SCRIPT tag
• Example
• ltSCRIPT typetext/javascriptgt
• var today new Date()
• document.write(Today is today.toLocale
  String())
• lt/SCRIPTgt

19
Event Handling

• In the appropriate HTML tag, specify the event
  handler
• Write the event handler as a separate JavaScript
  function
• Example
• ltHTMLgt
• ltFORMgt
• ltINPUT type"text" name"name"
  onChange"saySomeThing(this.value)" gt
• lt/FORMgt
• ltSCRIPTgt
• function saySomeThing(name)
• alert(name " you are good!")
• lt/SCRIPTgt
• lt/HTMLgt