Web Browser as generic Client

The web browser maintains a Document Object Model (DOM) for each window, along with Cascading Style Sheet (CSS), that describes what should be rendered. 

The DOM is constructed from a Web document such as a HTML document. It may contain JavaScript scripts, or link to them, that are loaded and executed in a JavaScript Engine.

The engine can manipulate DOM, receive user events from the browser window and make Web requests for data.

Document Object Model (DOM)

DOM as a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. Everything in a page is a node or part of the DOM tree.

The DIV (division) tag is used to provide a node in the DOM tree.

JavaScript (JS)

JS is a scripting language. It is created in 1995, from NS LiveScript.

JS can be used to:

1) validate user input in an HTML form before sending the data to a server;

2) build form that respond to user input without accessing a server;

3) change the appearance of HTML documents and dynamically write HTML into separate Windows;

4) open and close new browser windows or frames

5) manipulate HTML "layers" including hiding, moving and allowing the users to drag them around a browser window;

6) build small but complete client side programs

JavaScript combines with HTML and CSS.

Modern Web Sites and Application: HTML: Page Structure and Content. Base level interactivity.

      CSS: Page Design/ Look and feel. Simple interactivity.

      JavaScript: Scriptable page manipulation. High level interactivity.

SCRIPT tag: to let a browser know that part of an HTML document is JavaScript, enclose it inside the HTML SCRIPT tags.

SCRIPT files: Scripts can also be included from files, that define functions and then called.

JavaScript Libraries

While you can design and develop applications directly in JavaScript, there are many existing JavaScript libraries. A common library suite is jQuery:

1) jQuery library: HTML document traversal and manipulation, event handling, animation and Ajax;

2) jQuery UI library: user interface interactions, effects, widgets and themes;

3) jQuery Mobile library: user interface system for popular mobile device platforms

Document Ready

When a Web browser is interpreting a Web document, it (loads and) executes scripts as they are found in the document. This is okay for variable declarations and function definitions but not so safe for code that manipulates the DOM. The scripts may refer to elements of the DOM that have not yet been created by the document because they appear later in the Web document. Generally it is safest to only execute code when the document is ready.

The code insider the handler can assume that the entire DOM is ready to be accessed. The handler can proceed to prepare global variables, attach callbacks to events, retrieve more data from the web server, etc.

Selectors

Much of manipulating the DOM is concerned with selecting DOM elements.

Events

Events that occur in the browser window can be handled by JavaScript functions. 

Modifying CSS

CSS properties can be required and modified.

Time Events

JavaScript is not threaded, events can be set to be triggered after a certain timeout or at regular intervals.

Functions

Functions can be defined with any number of arguments.

Objects

Objects are constructed using the new keyword by using functions or existing object constructions.