2.1. Java Script: 2.1.1.

Introduction:
In computer programming, a Script can be defined as a program or sequence of instructions, interpreted or carried out by another program rather than by the computer processor. Among some languages, which are conceived as Scripting languages, popular languages are PERL, Javascript, Rexx etc. script languages are often written to handle forms input or other services for a Web site and are processed on the Web server. A JavaScript in a Web page runs "client-side" on the Web browser. Generally, script languages are easier and faster to code than the more structured and compiled programming languages such as C and C++. A script takes longer time to run than a compiled program since each instruction is being handled by another program first, which requires additional instructions rather than directly by the basic instruction processor. What Is JavaScript? JavaScript is a scripting language developed by Netscape to use within HTML Web pages. JavaScript is a scripting language used for client side scripting. JavaScript developed by Netscape in 1995 as a method for validating forms and providing interactive content to web site. Microsoft and Netscape introduced JavaScript support in their browsers. (Client Side Scripting: On the World Wide Web, JavaScript scripts are client-side as they are executed by the browser (the client). In contrast, CGI scripts are termed as Server Side Scripting , because they run on the Web server. Java applets can be either server-side or client-side depending on which computer (the server or the client) executes them.) JavaScript is an easy to use programming language which can be embedded in the header of the web pages and can enhance the interactive features of the webpage by allowing performing calculations, checking forms, writing interactive games, adding special effects, customizing graphics selections, creating security passwords etc.JavaScript makes the webpages interactive. Difference between JavaScript and Java: The 2 languages have no common part except the name. Java is technically known as an interpreted programming language, which is coded in a similar fashion to C++, with separate header and class files, compiled together prior to execution. It is powerful enough to write major applications and insert them in a web page as a special object called an "applet." Java has ability to run the same program on IBM, Mac,

and Unix computers. Java is not considered an easy-to-use language for non-programmers. But JavaScript is much simpler to use than Java. With JavaScript, if a user wants to check a form for errors, It only types an if-then statement at the top of page and requires no compilation, no applets, but only by following a simple sequence. Difference between JavaScript and HTML: HTML is a mark up language. To use it, users requires starting with the content for web page and wrap each part of that content inside HTML tags to identify what that content is. Users have idea of paragraphs, headings, lists etc before they come across HTML and so learning a mark up language such as HTML is relatively straightforward sine the main thing that you need to learn to use a mark up language is the particular way that the language uses to do the mark up. In the case of HTML the mark up is enclosed within < > symbols with the tag name appearing first followed by a series of attributes. The closing tag to match an opening tag is identified by placing a slash in front of the tag name. JavaScript is not a mark up language; it is a programming language. Describe JavaScript a lot more difficult than it is to describe HTML. While a mark up language describes what something is, a programming language defines a series of actions that are to be performed. Each of the commands that are written in JavaScript will define an individual action which can be anything from copying a value from one place to another, performing calculations on something, testing a condition, or even providing a list of values to be used in running a long series of commands that have been previously defined. JavaScript is more complex than HTML.The user will be able to start writing useful JavaScript quicker than HTML.

2.1.2. Programming Fundamentals, Statements, Expressions:

A JavaScript consists of JavaScript statements that are placed within the <script>... </script> HTML tags in a webpage. The User can place the <script> tag containing JavaScript anywhere within webpage but it is preferred way to keep it within the <head> tags. The <script> tag alerts the browser program to begin interpreting all the text between these tags as a script. The General syntax of JavaScript is: <script> JavaScript code </script>. The script tag takes two important attributes.

1. Language: This attribute specifies what scripting language is being used. Typically, its value will be JavaScript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute.

2. Type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to "text/JavaScript". The browser will use the <script type="text/JavaScript"> and </script> to tell where JavaScript starts and ends. A browser does not know how to interpret a language that is specified in the script tag .So to make it simpler for the browser to determine what programming language it is supposed to interpret,the "language" attribute of the script tag should always be used. Example: Write A JavaScript code to print Hello World <html> <body> <script language="javascript" type="text/javascript"> document. write ("Hello World!") </script> </body> </html> Above code will display the result: Hello World! Comment line: Code can be hidden inside an HTML comment tag. An HTML comment tag looks like :<!--This is a comment.-->.The opening <!-- part of the tag is usually placed on the next line right after the opening<SCRIPT>tag and the closing part of the comment tag on the line just before the closing</SCRIPT>tag.To make things more complicated the closing part of the HTML comment tag must be preceded by the // characters that precede a JavaScript comment. JavaScript statements are placed on the line after the<!--and on lines before the// ->. Ex:<SCRIPT Language="JavaScript"> <!-// --> </SCRIPT> Document.write():An application object that contains information about the document loaded into a frame or window. In the JavaScript documentation the information about an object is referred as its properties. Some of the properties of the document object can be changed and others are read only.The dot(.)between the document object and the write() method is significant. The dot operator allows to access information or object properties and methods for working with that information in an object. The method or property of an object is on the right side of the dot and the object is on the left side. For example, information

about the document that contains the script is available using the document object, the dot notation, and the names of properties of the document object are : 1. document.bgColor- makes it possible to get or set the background colour of the document. 2. document.location- contains the URL for the current document. 3. document.lastModified- holds the date when the document was last modified on server. Write(): write() is a method or function belonging to the document object.write() will output a string of text to the document. The round brackets following the word write are required. Any JavaScript expression can be placed inside the round brackets. The expression will be evaluated and the result converted, if necessary, to text to be written into the current Web page.For ex. In <P>Hello World</P>",The double quoted text is a "literal" string of text including HTML markup. To get it started, it requires a web browser(MS Internet Explorer) and a text editor(wordpad or notepad). The Process to run a JavaScript code is: Open the text editor. create a file containing html and Javascript save as text file with file type .htm or .html open the browser click on file, open file locate the file you just created open file in browser

JavaScript Statements and Source Code: The JavaScript text is often referred as "source code" or "code".It is made up of statements. The statement document. write("<P>Script tags can be placed ") write some text, consisting of an HTML paragraph, into the Web page being loaded by the browser. Simple Statements: An example of simpler JavaScript statement: a = 2 + 5

The JavaScript interpreter will read in this line of text or source code and interprete it. It evaluate the right hand part of the statement after the"=". The expression2 + 5,which the interpreter will evaluate to the number7. The next thing it will do is place the number7in the variable named a. it is an example of a simple JavaScript statement that contains a simple expression. Expressions: An expression is any valid unit of a code that resolves to a value. Conceptually, there are two types of expressions: those that assign a value to a variable, and those that simply have a value. For example, the expression x = 7 is an expression that assigns x the value seven. This expression itself evaluates to seven. Such expressions use assignment operators. The expression 3 + 4 simply evaluates to seven; it does not perform an assignment. JavaScript has the following types of expressions:

Arithmetic: evaluates to a number, for example 3.141 String: evaluates to a character string, for example, "red" or "1234". Logical: evaluates to true or false. Object: evaluates to an object. Conditional Expressions:A conditional expression can have one of two values based on a condition. The syntax is (condition) ? val1 : val2.If condition is true, the expression has the value of val1, Otherwise it has the value of val2. You can use a conditional expression anywhere you would use a standard expression. For example, status = (age >= 18) ? "voter: "minor" This statement assigns the value "voter" to the variable status if age is eighteen or greater. Otherwise, it assigns the value "minor" to status.

2.1.3. Operators:
The operators used in such expressions are referred to simply as operators. JavaScript has the following types of operators. This section describes the operators and contains information about operator precedence.

Assignment operators Comparison operators Arithmetic operators Bitwise operators Logical operators String operators

Special operators JavaScript has both binary and unary operators, and one special ternary operator, the conditional operator. A binary operator requires two operands, one before the operator and one after the operator: operand1 operator operand2. For example, 3+4 or x*y.A unary operator requires a single operand, either before or after the operator: operator operand or operand operator. 1.Assignment operators: An assignment operator assigns a value to its left operand based on the value of its right operand. The basic assignment operator is equal (=), which assigns the value of its right operand to its left operand. That is, A=B assigns the value of B to A.
Operator = += -= Description Simple assignment operator, Assigns values from right side operands to left side operand Add AND assignment operator, It adds right operand to the left operand and assign the result to left operand Subtract AND assignment operator, It subtracts right operand from the left operand and assign the result to left operand Multiply AND assignment operator, It multiplies right operand with the left operand and assign the result to left operand Divide AND assignment operator, It divides left operand with the right operand and assign the result to left operand Modulus AND assignment operator, It takes modulus using two operands and assign the result to left operand Example C = A + B will assign value of A + B into C C += A is equivalent to C = C + A C -= A is equivalent to C = C - A

*=

C *= A is equivalent to C = C * A

/= %=

C /= A is equivalent to C = C / A C %= A is equivalent to C = C % A

2. Comparison operators: A comparison operator compares its operands and returns a logical value based on whether the comparison is true. The operands can be numerical, string, logical, or object values. Strings are compared based on standard lexicographical ordering, using Unicode values. In most cases, if the two operands are not of the same type, JavaScript attempts to convert the operands to an appropriate type for the comparison. (The sole exceptions to this rule are === and !==, which perform "strict" equality and inequality and which do not attempt to convert the operands to compatible types before checking equality.) This generally results in a numerical comparison being performed.
Operator == != > < Description Checks if the values of two operands are equal or not, if yes then condition becomes true. Checks if the values of two operands are equal or not, if values are not equal then condition becomes true. Checks if the value of left operand is greater than the value of right operand, if yes then condition becomes true. Checks if the value of left operand is less than the value of right operand, if yes then condition becomes true. Example (A == B) is not true. (A != B) is true. (A > B) is not true. (A < B) is true.

>=

<=

Checks if the value of left operand is greater than or equal to the value of right operand, if yes then condition becomes true. Checks if the value of left operand is less than or equal to the value of right operand, if yes then condition becomes true.

(A >= B) is not true.

(A <= B) is true

3.Arithmetic operators: Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value. The standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/). These operators work as they do in most other programming languages when used with floating point numbers.
Operator + * / % ++ -Description Adds two operands Subtracts second operand from the first Multiply both operands Divide numerator by denumerator Modulus Operator and remainder of after an integer division Increment operator, increases integer value by one Decrement operator, decreases integer value by one Example A + B will give 30 A - B will give -10 A * B will give 200 B / A will give 2 B % A will give 0 A++ will give 11 A-- will give 9

4. Bitwise operators: Bitwise operators treat their operands as a set of 32 bits (zeros and ones), rather than as decimal, hexadecimal, or octal numbers. For example, the decimal number nine has a binary representation of 1001. Bitwise operators perform their operations on such binary representations, but they return standard JavaScript numerical values. 5. Logical operators: Logical operators are typically used with Boolean (logical) values; when they are, they return a Boolean value. The && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a nonBoolean value. 6. String operators: In addition to the comparison operators, which can be used on string values, the concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings. For example, "my " + "string" returns the string "my string".The shorthand assignment operator += can also be used to concatenate strings. For example, if the variable mystring has the value "alpha", then the expressionmystring += "bet" evaluates to "alphabet" and assigns this value to mystring. 7. Special operators: JavaScript provides the following special operators:

Conditional operator Comma operator

Conditional operator: The conditional operator is the only JavaScript operator that takes three operands. The operator can have one of two values based on a condition. The syntax is: condition? val1: val2.If condition is true, the operator has the value of val1. Otherwise it has the value of val2. We can use the conditional operator anywhere we use a standard operator. var status = (age >= 18) ? "voter" : "minor". This statement assigns the value " voter " to the variable status if age is eighteen or more. Otherwise, it assigns the value "minor" to status. Comma operator: The comma operator (,) simply evaluates both of its operands and returns the value of the second operand. This operator is primarily used inside a for loop, to allow multiple variables to be updated each time through the loop.

2.1.4. Pop Up Boxes:

JavaScript provides the ability to create small windows called JavaScript Popup Box. User can create alert boxes, confirm boxes, and prompt boxes. These boxes let users generate output and receive input from the user. JavaScript provides three kind of pop-up boxes: alert, confirm, prompt. i) Alert-Box: If some surety is required from the user or an alert message is to generate

then we can use alert box, user has to click ok button to proceed. ii) Confirm Box: This box is used when some confirmation is required from user, it has ok

and cancel button. Ok button returns true value and Cancel button returns false value. iii) Prompt Box: This box is used when the web page needs some input from user, it has ok

and cancel button. Ok button returns the value entered by the user and cancel button returns null value. Example 1 (Alert Box): <html> <head> <script type="text/javascript"> alert("This is an alert box"); </script> </head> </html>

Output:

Example 2 (Confirm Box): <html> <head> <script type="text/javascript"> var a=confirm("This is a confirm box"); if(a==true) { document. write("You have clicked ok"); } else { document.write("You have clicked cancel"); } </script> </head> </html> Output:

If you click OK button: You have clicked ok If you click cancel button: You have clicked cancel

Example 3 (Prompt Box) <html> <head> <script type="text/javascript"> var a=prompt("Enter your age"," "); if(a>=18) { document. write("Eligible to cast your vote"); } else { document.write("Sorry you are not Eligible"); } </script> </head> </html> Output:

if you enter equal or more than 18 output will be displayed on the browser as follows: Eligible to cast your vote Otherwise: Sorry you are not eligible

2.1.5 Control Statements:

Control statements are designed to create scripts that can decide which lines of code are evaluated, or how many times to evaluate them. There are two different types of control statements: conditional statements and loop statements. Control statements make their decisions based on an expression that evaluates to the logical values true or false or their equivalents in other data types.

Numbers are treated as true if not equal to 0, otherwise they are treated as false.

Strings are treated as true if greater than 0 characters in length, otherwise they are treated as false

undefined is treated as false null is treated as false

Conditional Statements
Conditional statements are used to make decisions. The if, else, and else if Statements: The if, else, and else if statements allow you to make a choice among several options. The if statement is the most frequently used decision-making statement. It checks a condition and if it evaluates to true, then the statements that it governs are evaluated, but if it evaluates to false then the statements are passed over. The syntax is as follows: If (condition) statement or if (condition) statement The condition is always surrounded by parentheses but the statement it governs can be on the same line or the following line. The JavaScript interpreter always associates the if statement with whatever statement follows it. Both code layouts work but some people prefer using separate lines because it makes their if statements easier to read. Here is an example that uses two if statements how the if statement works: var myVar1 = true; var myVar2 = false; if (myVar1 == true) alert("myVar1 is true"); if (myVar2 == true) alert("myVar2 is true"); This will display only one alert box. The final line in the code will not cause an alert box to be displayed because the variable myVar2 has the value of false. The first if statement evaluates to true so the first alert box displays. Remember that the comparison operator, ==, checks to see if the operands to its right and left are equal. If they are equal it returns true, and if they are not equal it returns false. In the above example, the condition for the first if statement evaluates to true because the value of myVar1 istrue. The condition for the second statement evaluates to false because myVar2 does not equal true. As you can see, the if statement makes the decision as to whether the alert() function is called based on the evaluation of the condition.

Ex.if (4 < 3) alert("4 is less than 3"); else alert("4 is greater than 3"); Since 4 is greater than 3, the alert after the if statement is ignored; therefore, the alert() function after the else statement is evaluated. The else statement can also be used with a function block so you could write: if (4 < 3) { alert("The if statement's statement block was evaluated"); alert("because 4 is less than 3"); } else { alert("The else statement's statement block was evaluated") alert("because 4 is greater than 3") }

The switch Statement

The switch statement allows you to choose one of several options. It has functionality which resembles that provided by the if, else if, and else statements. The switch statement is different syntax from the if...else statements, but it works in a similar way. Its structure is shown below. Note that the lines that begin with case must end in a colon. switch (expression){ case value: statements case value: statements case value: statements } Ex. Switch Statement <html> <head> <title>Switch Statement Demo</title>

<script language="javascript"> switch (1+1){ case "a": alert(1); case 2: alert(2); case true: alert(3); } </script> </head> <body> <h1>Switch Statement Demo</h1> </body> </html>

Loop Statements
There are three types of loop statements: the while statement, the do while statement, and thefor statement. Let's look at the while statement first. The while Statement The while statement is the easiest of the looping statements to understand and use. Although it performs a different task, its structure is similar to the if statement: while (expression) statement or while (expression) statement Like all the looping statements, the while statement evaluate the expression contained within its parentheses to see whether the expression evaluates to true or false. If the expression evaluates to true, the while statement evaluates its statements.
Ex. <script language="javascript">

var i = 1; while(i<=10){ document.write(i+"<br>"); i+=2; } </script> O/P:1,3,5,7,9

The do while Statement The do while statement is very similar to the while statement. The difference is that the expression is evaluated at the end of the statement. In other words, the statement block is always evaluated once before the expression is evaluated. The structure of a do while statement is shown below: do statement while (expression); do while statement to control multiple statements: do { statement1 statement2 ... statement5 } while(condition); The for Statement The while and do...while statements have three essential elements: a statement that sets the initial value of a counter; an expression that tests a condition and an expression that increments the counter. It is written with the following structure: for (setInitialCounterValue; test Condition; changeCounterValue) statement ex.for (var i=0; i<3; i++) { alert(i); } The first statement in the parentheses declares and assigns to the variable i an initial value. It is this variable that then acts as the loop counter. it is only evaluated at the beginning of the first loop. The second statement is the condition for the loop. Each time a loop finishes it is checked again to determine whether another loop should be made. The third statement declares how the loop counter should be incremented or decremented. Try. Catch Statement The try statement allows you to define a block of code to be tested for errors while it is being executed. The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.

Syntax: try { //Run some code here } catch(err) { //Handle errors here } The Throw Statement: The throw statement allows you to create a custom error. The correct technical term is to create or throw an exception. If you use the throw statement together with try and catch, you can control program flow and generate custom error messages. Syntax: throw exception

2.2 CSS (CASCADING STYLE SHEET)

CSS stands for Cascading Style Sheets. Its objective is to divide the content from the layout on web pages. A style is a definition of fonts, colors, etc.Each style has a unique name: selector. The selectors and their styles are defined in one place. Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a mark up language. Its most common application is to style web pages written in HTML. The purpose of cascading style sheets (CSS) is to allow Web authors to manipulate a Web page's appearance without affecting its HTML structure. In order for style sheet to properly display Web page, the Web Document must be attached to a style sheet. Attaching the style sheet can be done by adding this HTML tag into the Web pages source code: <STYLE TYPE=text/css>. Close the tag with</STYLE>. Styles should be set right before the <BODY> tag. Between the <STYLE>tags. Each rule has a selector and a declaration. The selector is the part of the code that links the HTML to the style you want to appear. The declaration is the part that defines the attributes that will appear in the displayed Web page.
Example 1: To put all of H1 headings to appear in a 24-point font size and in the color blue, the following tags can be used: <STYLE TYP=text/css> H1 {font size: 24; color: blue} </STYLE> <BODY> In this example, a style is attached to a specific HTML tag. H1 is the selector and {font size: 24; color: blue} is the declaration.

Internal Stylesheet:First The internal method can be explained by simply placing the CSS code within the <head></head> tags of each HTML file user want to style with the CSS. The format for this is shown in the example below.
<head> <title><title> <style type="text/css"> CSS Content Goes Here </style> </head> <body>

With this method each HTML file contains the CSS code needed to style the page. That any changes you want to make to one page, will have to be made to all. This method can be good if you need to style only one page, or if you want different pages to have varying styles. External Stylesheet: An external CSS file can be created with any text or HTML editor such as "Notepad" or "Dreamweaver". A CSS file contains no HTML, only CSS. You simply save it with the .css file extension. You can link to the file externally by placing one of the following links in the head section of every HTML file you want to style with the CSS file. <head> <title><title> <style type="text/css"> import url(Path To stylesheet.css) </style> </head> <body> By using an external style sheet, all of HTML files link to one CSS file in order to style the pages. That means if you need to alter the design of all your pages, you only need to edit one .css file to make global changes to your entire website. Inline Styles Inline styles are defined in the HTML file along side the element you want to style. Ex.<style type="text/css">import url(Path To stylesheet.css)</style> <head> <title><title> <link rel="stylesheet" type="text/css"href="style.css" /> </head> <body> or <head> <title><title> <style type="text/css"> import url(Path To stylesheet.css) </style> </head>

<body> <p style="color: red;">Some red text</p> Advantages of CSS: 1. CSS saves time CSS can be written once and then reuse same sheet in multiple HTML pages. we can define a style for each HTML element and apply it to as many Web pages as per requirement. 2. Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times. 3. Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. 4. Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes. 5. Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing. 6. Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So it is a good idea to start using CSS in all the HTML pages to make them compatible to future browsers. Selector and Declarations: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc. A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc. Values are assigned to properties. For example color property can have value either red or #F1F1F1 etc. The Class Selectors: With the class selector you can define different styles for the same type of HTML element.Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles: p.right {text-align: right} p.center {text-align: center} You have to use the class attribute in your HTML document: <p class="right"> This paragraph will be right-aligned. </p> <p class="center">

This paragraph will be center-aligned. </p> The id Selector:we can also define styles for HTML elements with the id selector. The id selector is defined as a #.The style rule below will match the element that has an id attribute with a value of "green": #green {color: green} The style rule below will match the p element that has an id with a value of "para1": p#para1 { text-align: center; color: red } CSS Background Properties:
Property background Description A shorthand property for setting all background properties in one declaration Values background-color background-image background-repeat background-attachment background-position scroll fixed

background-attachment

Sets whether a background image is fixed or scrolls with the rest of the page Sets the background color of an element

background-color

color-rgb color-hex color-name transparent url none top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos

background-image

Sets an image as the background Sets the starting position of a background image

background-position

background-repeat

Sets if/how a background image will be repeated

repeat repeat-x repeat-y no-repeat

CSS Text Properties:

Property color direction Description Sets the color of a text Sets the text direction Values color ltr rtl normal length left right center justify none underline overline line-through blink length % none capitalize uppercase lowercase normal pre nowrap normal length

letter-spacing

Increase or decrease the space between characters Aligns the text in an element

text-align

text-decoration

Adds decoration to text

text-indent

Indents the first line of text in an element Controls the letters in an element

text-transform

white-space

Sets how white space inside an element is handled

word-spacing

Increase or decrease the space between words

CSS Font Properties:

Property font Description A shorthand property for setting all of the properties for a font in one declaration Values font-style font-variant font-weight font-size/line-height

font-family caption icon menu message-box small-caption status-bar font-family A prioritized list of font family names and/or generic family names for an element Sets the size of a font family-name generic-family

font-size

xx-small x-small small medium large x-large xx-large smaller larger length %

font-size-adjust

Specifies an aspect value for none an element that will preserve number the x-height of the firstchoice font Condenses or expands the current font-family normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded normal italic oblique normal small-caps normal bold

font-stretch

font-style

Sets the style of the font

font-variant

Displays text in a small-caps font or a normal font Sets the weight of a font

font-weight

bolder lighter 100 200 300 400 500 600 700 800 900

Class and ID Selector: In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (# ). So the CSS looks like: #top { background-color: #ccc; padding: 1em } .intro { color: red; font-weight: bold; } The HTML refers to the CSS by using the attributes id and class. It could look something like this: <class="tag">div class="attribute">id=class="string">"top"> <class="tag">h1>Chocolate</class="tag">h1> <class="tag">p class="attribute">class=class="string">"intro">This is my recipe </class="tag">p> <class="tag">pclass="attribute">class=class="string">"intro">Mmmmm mmm</class="tag"><p> </class="tag">div> The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.one can also apply a selector to a specific HTML element by simply stating the HTML selector first.

DIV and SPAN Tag: The element <span> is what you could call a neutral element which does not add anything to the document itself. But with CSS, <span> can be used to add visual features to specific parts of text in your documents. <p>Early to bed and early to rise makes a man <span class="benefit">healthy</span>, <span class="benefit">wealthy</span> and <span class="benefit">wise</span>.</p> span.benefit { color:red; } <span> is used within a block-level element as seen in the previous example, <div> is used to group one or more block-level elements. Ex. <div id="democrats"> <ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul> </div> #democrats { background:blue; } #republicans { background:red; } O/P:

2.3: Document Object Model

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API). The history of the Document Object Model is intertwined with the history of the "browser wars" of the late 1990s between Netscape Navigator and Microsoft Internet Explorer, as well as with that of JavaScript and JScript, the first scripting languages to be widely implemented in the layout engines of web browsers. he Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions - in particular, the DOM interfaces for the XML internal and external subsets have not yet been specified. It is based on an object structure that closely resembles the structure of the documents it models. DOM Architecture:The DOM specifications provide a set of APIs that forms the DOM API. Each DOM specification defines one or more modules and each module is associated with one feature name. For example, the DOM Core specification defines two modules: The Core module, which contains the fundamental interfaces that must be implemented by all DOM conformant implementations, is associated with the feature name "Core";The XML module, which contains the interfaces that must be implemented by all conformant XML 1.0 [XML 1.0] and higher DOM implementations, is associated with the feature name "XML".The following representation contains all DOM modules, represented using their feature names, defined along the DOM specifications: The DOM originated as a specification to allow JavaScript scripts and Java programs to be portable among Web browsers. "Dynamic HTML" was the immediate ancestor of the

Document Object Model, and it was originally thought of largely in terms of browsers. However, when the DOM Working Group was formed at W3C, it was also joined by vendors in other domains, including HTML or XML editors and document repositories. Several of these vendors had worked with SGML before XML was developed; as a result, the DOM has been influenced by SGML Groves and the HyTime standard. Some of these vendors had also developed their own object models for documents in order to provide an API for SGML/XML editors or document repositories, and these object models have also influenced the DOM. The complete list of DOM Level 3.0 modules and the features used by them. Feature names are case-insensitive. Core module: defines the feature "Core". XML module: Defines the feature "XML". Events module: defines the feature "Events" in [DOM Level 3 Events]. User interface Events module:defines the feature "UIEvents" in [DOM Level 3 Events]. Mouse Events module:defines the feature "MouseEvents" in [DOM Level 3 Events]. Text Events module:defines the feature "TextEvents" in [DOM Level 3 Events]. Keyboard Events module:defines the feature "KeyboardEvents" in [DOM Level 3 Events]. Mutation Events module:defines the feature "MutationEvents" in [DOM Level 3 Events]. Mutation name Events module:defines the feature "MutationNameEvents" in [DOM Level 3 Events]. HTML Events module:defines the feature "HTMLEvents" in [DOM Level 3 Events]. Load and Save module:defines the feature "LS" in [DOM Level 3 Load and Save]. Asynchronous load module:defines the feature "LS-Async" in [DOM Level 3 Load and Save]. Validation module:defines the feature "Validation" in [DOM Level 3 Validation]. XPath module:defines the feature "XPath" in [DOM Level 3 XPath]. A DOM implementation must not return true to the DOMImplementation.hasFeature (feature, version) method of the DOM Implementation interface for that feature unless the implementation conforms to that module. The version number for all features used in DOM Level 3.0 is "3.0".