Building Web Applications

Using JavaScript, MochiKit and Dojo

Part I - Introduction to JavaScript

Anant Narayanan

Malaviya National Institute of Technology, Jaipur

Overview - Part I

• Web Applications - Why not a desktop app?
• JavaScript - An introduction
• AJAX - What's all the hype about?

What are web applications?

• Applications that run on a web browser
• Relies entirely on HTML and JavaScript for User Interface
• Local Server <-> Browser (or) Internet <-> Browser
• Usually consists of only a few web pages
• Examples include: YouOS, GMail, phpmyadmin

Why web applications?

• Very lean pre-requisites - Browser + Plugins
• Reaches a vast majority of people
• No Installation, easy updating and maintenance
• No cross platform quirks
• Needs lesser effort to guarantee consistent output

Why NOT web applications?

• Highly customised UI's not possible
• Not very reliable
• Inherent delays (Internet)
• Not very secure
• No system software is possible

Traditional web applications

• J2EE extremely popular
• Synchronous action - response model
• Relies on Java Applets or Flash for richer widgets
• All processing is done on the server, client is "dumb"
• Still useful in many cases

Enter JavaScript!

• Plays two major roles:
  • Allows for a more richer and dynamic UI
  • Makes the client a bit more intelligent
• Client is now able to handle data and respond to the user
• User is now more involved instead of "Click and Wait"
• Most browsers come with JavaScript enabled, no other pre-requisites!
• Supports object-oriented programming, powerful and easy to learn

So how does it work?

• Scripting language embedded in HTML
• Executed as an interpreted language by the browser (client)
• Open specification, driven by Mozilla
• Can be used for simple tasks like:
  • Creating customised popup windows
  • Creating cookies
  • Detect user's browser
• More powerful applications are possible through the AJAX concept!

How do we interact with HTML?

• Document Object Model
• Specified by the W3C as a standard
• Representation of an XML document as a tree
• Defines specific methods of accessing XML elements
  • Nodes
  • Elements
  • Attributes
  • Text
• Defines events that can be attached to HTML nodes
• Four levels of specification: 0, 1, 2, 3 - implemented by most modern browsers

What can we do with DOM?

• Dynamically add, remove and modify HTML
• React to events triggered by user immediately
• Validate forms on the client-side
• Play around with XML files!

Need more interactivity with the server?

• Enter AJAX!
• Asynchronous Javascript And Xml
• Can make requests (usually GET or POST) to server without page reload

What's different?

User feels less bored!

How do I do this AJAX stuff?

• Makes use of the XMLHttpRequest() object (JavaScript), ActiveXObject(Microsoft.XMLHTTP) (JScript)
• Yeah, different browsers implement JavaScript (and DOM!) in different ways :-(
• You'll have to detect the browser and use an appropriate object

There MUST be an easier way!

Any questions so far?