Client Side Technologies

Each point is an IP address Length of line between points is indicative of the delay between 2 nodes Only 30% of Class C Networks are Represented here Lines are colour coded based upon the network type – Dark Blue – net, ca, us Green – com, org Red – mil, gov, edu Yellow – jp, cn, au, de

What’s in store… Basic HTML Defining with CSS Powering up with JavaScript Events firing everywhere! Dynamic and not-so basic HTML

HTML’s T I M E L I N E Derived from SGML , extended to XHTML November 1995 – HTML 2.0 Basic form based, table structure, internationalisation support January 1997 – HTML 3.2 Adopted Netscape’s visual tags December 1997 – HTML 4.0 Strict , transitional and frameset DTDs introduced January 2008 – HTML 5.0 working draft released XHTML is a separate language Began as a reformulation of HTML 4.01 using XML 1.0

The Problem with X H T M L Adoption has been really slow Breaks backward compatibility – adoption almost non-existent Most of the XHTML based websites invalid Some work as browsers treat them as normal HTML Too many restrictions, too fast!

The M A R K U P Language DOCTYPE – specifies declarations to which that conform to a particular markup ELEMENTS Structural – describes purpose. <h2> Presentational – describes appearance of text. No purpose. Hypertext – links parts of a document to other documents ATTRIBUTES – name-value pairs

The M A R K U P Language Meta tags – metadata to inform the browser of the content type, caching, redirecting, etc head – container for important set of tags like title , link external files, script and style elements

Important H T M L T A G S Besides the <html>, <head>, <body> … <form> - encapsulating relevant elements. Can have other forms too! <div> - container, used primarily for formatting <table> - provides a table layout <input> - to capture user interaction <img> - embedding images <b>, <i>, <u> - text formatting

Important H T M L Attributes Common set of attributes across elements style – specifying inline styling properties id – unique identifier for the element name* – name of the element value* - associates a value with the element

Cascading S T Y L E S H E E T S What’s meant ‘styling’ ? How HTML elements are to be displayed HTML meant to define content, not format – the <font> nightmare! Multiple styles cascade into one Multiple ways of specifying style Inside an HTML element Inside the <head> section In an external file What order of priority – 1. browser default, 2. External stylesheet, 3. Internal stylesheet, 4. Inline style P 4 > P 1

Defining S T Y L E S H E E T S CSS syntax – selector { property : value; } body { color : black; } Class selector – defines different stylesheets for same HTML element [can be different too!] p.right { text-align: right; } .left { text-align: left; } Id selector – style applies to elements with particular ‘id’ attribute value #someStyle { color: red; } - applies to all elements with id = “someStyle” Inline – style properties specified within tag < div style=“border: 1px solid;”>

More on S T Y L E S H E E T S Linking external stylesheets – < link rel=“stylesheet” type=“text/css” href=“style.css”/> Internal stylesheets – when a single document has a unique style Within <head> tags <style type=“text/css”> hr { color: green; } </style> A whole set of stylesheet properties can be found here -

J A V A S C R I P T ~ 1995 – Developed by Brendan Eich as Mocha -> LiveScript -> JavaScript No relation to Java! Name’s a co-marketing deal between Netscape and Sun Structurally a lot is borrowed from C Similar naming constructs as that in Java Microsoft came up with ‘JScript’ for IE The very genesis of cross-browser conflicts! Finally handed over to ECMA International for standardisation

J A V A S C R I P T - Features Supports dynamic typing – types associated with values not variables! Arrays and associative arrays Run-time evaluation using eval Object Oriented Programming concepts! DOM based traversal of HTML document

J A V A S C R I P T - Accessing Page Elements window > document > form > … getElementById() – allows you to access any particular element/node using ‘id’ Supported only by the document object getElementByTagName(‘name’) Node based methods and properties like – childNodes, firstChild, lastChild, etc By retrieving the ‘form’ element – most commonly used way document.<formName> document.forms[n]

J A V A S C R I P T - Variables, Arrays, Functions, Objects var variableName – declaring a variable var a = 23 // a is int a = ‘text’ // a is string var arr = new Array(“a”, “b”), or, [“a”, “b”] – declaring an array length, indexOf(), join(param), pop(), push(param,…), slice(start, end) function someMethod() – declaring a function Even var a = function() is valid Objects can be declared using Object, JSON or functions !

J A V A S C R I P T - O B J E C T S var obj = new Object() // using JavaScript’s inbuilt Object class var obj = {a : “”} // JSON representation of an object var method() { … } var obj = new method(); // strange but true!!

J A V A S C R I P T - Debugging A big pain!!! Things changed dramatically with Firebug – Firefox addon Google’s Chrome comes with a JavaScript console Both allow element inspection Breakpoint oriented debugging Still evolving, but debugging’s simplified a great deal!

All about E V E N T S Almost all HTML elements can generate events HTML provides multiple ‘hooks’ to capture events through attributes onBlur, onFocus, onClick, onKeyDown, onKeyPress, … Typical events – moving the mouse, typing, clicking, etc JavaScript allows meaningful work to be done upon event generation 2 models of Event propagation exist – Capturing – W3C model Bubbling – Microsoft model Element 1 Element 2 Capture Bubble

D Y N A M I C HTML Altering the contents of a page dynamically Primarily achieved through JavaScript Used for on-screen validation, alerts, rich interface experience A crucial role in Web 2.0

R E F E R E N C E S Eloquent JavaScript – Marijn Haverbeke Quirksmode W3Schools Wikipedia

Client Side Technologies

More Related Content

What's hot

Similar to Client Side Technologies

Recently uploaded

Client Side Technologies