An Introduction to HTML[1]

8/8/2019 An Introduction to HTML[1]

http://slidepdf.com/reader/full/an-introduction-to-html1 1/118



ContCont

The markup tags tell the Web browserThe markup tags tell the Web browserhow to displayhow to display the pagethe page

An HTML file must have an An HTML file must have an htmhtm oror htmlhtmlfile extension.file extension.

HTML will display the data not descripeHTML will display the data not descripethe data.the data.



Tags in HtmlTags in Html

HTML files are just plain text, withHTML files are just plain text, with tagstags mixed inmixed infor formatting. Tags are used like this:for formatting. Tags are used like this:

<h1>Blorf!</h1><h1>Blorf!</h1> Tags come in pairs surroundingTags come in pairs surrounding

pieces of text. The tags themselves are made uppieces of text. The tags themselves are made upof <, the tag name, and >. The first tag (of <, the tag name, and >. The first tag (<H1><H1>) ) is called theis called the start tagstart tag, the text inside ("Blorf!") is, the text inside ("Blorf!") iscalled thecalled the content content, and the second tag (, and the second tag (</H1></H1>) )

is called theis called the end tagend tag.. The <h1> tag signifies that the content text The <h1> tag signifies that the content text

should be displayed as a header (the 1 meansshould be displayed as a header (the 1 meansthat it is at level 1, the largest ). When viewed inthat it is at level 1, the largest ). When viewed inthe browser (Mosaic, lynx, or whatever), thethe browser (Mosaic, lynx, or whatever), theabove line will look like:above line will look like:



Cont.Cont.

Although most tags work this way, some tags Although most tags work this way, some tagsdon't have end tags. For example, thedon't have end tags. For example, the <P><P> tagtagfor specifying the beginning of a paragraphfor specifying the beginning of a paragraph

doesn't need adoesn't need a </P></P> at the end of theat the end of theparagraph. We will discuss this tag (and others) paragraph. We will discuss this tag (and others) later in this document.later in this document.

Tag names are not caseTag names are not case--sensitive, sosensitive, so <H1><H1> andand<h1><h1>

are equivalent, for instance.are equivalent, for instance.



ContCont

Some tags may also have optionalSome tags may also have optional attributesattributes,,which modify the interpretation of the tag. Forwhich modify the interpretation of the tag. Forexample, theexample, the <IMG><IMG> tag, which tells the browsertag, which tells the browser

to display an image, can have a SRC attribute toto display an image, can have a SRC attribute tospecify the image's name or an ALIGN atttributespecify the image's name or an ALIGN atttributeto specify the alignment compared to theto specify the alignment compared to thesurrounding text. With attributes, a tag might besurrounding text. With attributes, a tag might be

used like this:used like this: <IMG SRC="blorf.gif" ALIGN="top"><IMG SRC="blorf.gif" ALIGN="top">





OUTPUTOUTPUT



Paragraphs and SpacesParagraphs and Spaces

The biggest problem that beginners have withThe biggest problem that beginners have withHTML is that spaces, tabs, and returnsHTML is that spaces, tabs, and returns----knownknowncollectively as "white space"collectively as "white space"----are all treated theare all treated the

same. If I typesame. If I type This is a test.This is a test. oror

This isa test.This isa test. oror

This is a test.This is a test. the result is always the same:the result is always the same:

This is a test.This is a test. So, just pressing "return" at the end of a line willSo, just pressing "return" at the end of a line will

not make a new paragraph. To make anot make a new paragraph. To make aparagraph, use theparagraph, use the <P><P> tag at thetag at the beginningbeginning of of

the paragraph. For example:the paragraph. For example:



Section HeadingsSection Headings

Heading level 1 <H1>Heading level 1 <H1>


Heading level 3 <H3>Heading level 3 <H3> Heading level 4 <H4>Heading level 4 <H4>





ExampleExample

<html><html> <head><head> <title>Hello Student</title><title>Hello Student</title> </head></head>

<body><body> <h1>welcome to IPEC </h1><h1>welcome to IPEC </h1> <h2>welcome to IPEC </h2><h2>welcome to IPEC </h2> <h3>welcome to IPEC </h3><h3>welcome to IPEC </h3> <h4>welcome to IPEC </h4><h4>welcome to IPEC </h4> <h5>welcome to IPEC </h5><h5>welcome to IPEC </h5>

<h6>welcome to IPEC </h6><h6>welcome to IPEC </h6>

</html></html>



OUTPUTOUTPUT



Type StylesType Styles

HTML allows the use of a number of different HTML allows the use of a number of different type styles. The most useful aretype styles. The most useful are <EM><EM>, for, foraddingadding emphasisemphasis likelike thisthis, and, and <STRONG><STRONG> forfor

stronger emphasisstronger emphasis. Browsers may display the. Browsers may display thetext in italics, in bold characters, underlined, intext in italics, in bold characters, underlined, inall capital letters, or with asterisks around it.all capital letters, or with asterisks around it.

In general, it is best to useIn general, it is best to use <EM><EM> andand<STRONG><STRONG>, since they give good results on all, since they give good results on allbrowsers. If you need to, however, you can usebrowsers. If you need to, however, you can use<I><I>, which produces, which produces italicsitalics, or, or <B><B> whichwhichproducesproduces boldbold text.text.

There is also typewriter style,There is also typewriter style, like thislike this,,produced with theproduced with the <TT><TT> tag.tag.



ListsLists

Lists are a very useful construct in HTML. ThereLists are a very useful construct in HTML. Thereare three types of lists: ordered, unordered, andare three types of lists: ordered, unordered, anddescriptive.descriptive.

Ordered lists produce a list of numbered items.Ordered lists produce a list of numbered items.To make an ordered list, use theTo make an ordered list, use the <OL><OL> (ordered(orderedlist ) andlist ) and <LI><LI> (list item) tags, like this:(list item) tags, like this:

<OL><LI>Get two slices of bread, peanut butter,<OL><LI>Get two slices of bread, peanut butter,

and jelly.<LI>Spread jelly on one side of oneand jelly.<LI>Spread jelly on one side of oneslice of bread.<LI>Spread peanut butter on theslice of bread.<LI>Spread peanut butter on theother side of the other slice.<LI>Put theother side of the other slice.<LI>Put thesandwich together and eat!</OL>sandwich together and eat!</OL>



Cont.Cont.

The result is this:The result is this:

1.1. Get two slices of bread, peanut butter, and jelly.Get two slices of bread, peanut butter, and jelly.

2.2. Spread jelly on one side of one slice of bread.Spread jelly on one side of one slice of bread.

3.3. Spread peanut butter on the other side of theSpread peanut butter on the other side of theother slice.other slice.

4.4. Put the sandwich together and eat!Put the sandwich together and eat!

As you can see, the items are automatically As you can see, the items are automaticallynumbered in order.numbered in order.

Unordered lists are similar: instead of Unordered lists are similar: instead of <OL><OL>, use, use<UL><UL>. For example:. For example:

Bread (two slices) Bread (two slices)

ellell





ContCont

<h4>Letters list:</h4><h4>Letters list:</h4><ol type=" A"><ol type=" A">

<li> Apples</li><li> Apples</li> <li>Bananas</li><li>Bananas</li> <li>Lemons</li><li>Lemons</li> <li>Oranges</li><li>Oranges</li></ol></ol>



ContCont

<h4>Lowercase letters list:</h4><h4>Lowercase letters list:</h4><ol type="a"><ol type="a">




ContCont

<h4>Roman numbers list:</h4><h4>Roman numbers list:</h4><ol type="I"><ol type="I">




ContCont

<h4>Lowercase Roman numbers<h4>Lowercase Roman numberslist:</h4>list:</h4>

<ol type="i"><ol type="i"> <li> Apples</li><li> Apples</li> <li>Bananas</li><li>Bananas</li> <li>Lemons</li><li>Lemons</li>

<li>Oranges</li><li>Oranges</li> </ol></ol>

</body></body> </html></html>



OUTPUTOUTPUT



Example 2Example 2

<html><html> <body><body>

<h4> An Unordered List:</h4><h4> An Unordered List:</h4> <ul><ul> <li>Coffee</li><li>Coffee</li> <li>Tea</li><li>Tea</li> <li>Milk</li><li>Milk</li>

</ul></ul>




OUTPUTOUTPUT



TablesTables

Tables are defined with the <table> tag. A table isTables are defined with the <table> tag. A table isdivided into rows (with the <tr> tag), and eachdivided into rows (with the <tr> tag), and eachrow is divided into data cells (with the <td>row is divided into data cells (with the <td>

tag). The letters td stands for "table data,"tag). The letters td stands for "table data,"which is the content of a data cell. A data cellwhich is the content of a data cell. A data cellcan contain text, images, lists, paragraphs,can contain text, images, lists, paragraphs,forms, horizontal rules, tables, etc.forms, horizontal rules, tables, etc.

<table border="1"><tr><td>row 1, cell<table border="1"><tr><td>row 1, cell1</td><td>row 1, cell 2</td></tr><tr><td>row 2,1</td><td>row 1, cell 2</td></tr><tr><td>row 2,cell 1</td><td>row 2, cell 2</td></tr></table>cell 1</td><td>row 2, cell 2</td></tr></table>



Tables and the Border AttributeTables and the Border Attribute

<table border="1"><tr><td>Row 1, cell<table border="1"><tr><td>Row 1, cell

1</td><td>Row 1, cell 2</td></tr>1</td><td>Row 1, cell 2</td></tr></table></table>

<table<tableborder="1"><tr><th>Heading</th><th>Anoborder="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cellther Heading</th></tr><tr><td>row 1, cell

1</td><td>row 1, cell1</td><td>row 1, cell

2</td></tr><tr><td>row 2, cell2</td></tr><tr><td>row 2, cell1</td><td>row 2, cell 2</td></tr>1</td><td>row 2, cell 2</td></tr></table></table>



Empty Cells in a TableEmpty Cells in a Table

<table border="1"><tr><td>row 1, cell<table border="1"><tr><td>row 1, cell

1</td><td>row 1, cell1</td><td>row 1, cell2</td></tr><tr><td>row 2, cell2</td></tr><tr><td>row 2, cell

1</td><td></td></tr>1</td><td></td></tr></table></table>

<table border="1"><tr><td>row 1, cell<table border="1"><tr><td>row 1, cell

1</td><td>row 1, cell1</td><td>row 1, cell

2</td></tr><tr><td>row 2, cell2</td></tr><tr><td>row 2, cell1</td><td> </td></tr>1</td><td> </td></tr></table></table>





ContCont

<tr><tr> <td>First</td><td>First</td> <td>Row</td><td>Row</td> </tr></tr> <tr><tr> <td>Second</td><td>Second</td>

<td>Row</td><td>Row</td> </tr></tr> </table></table>

<h4>With a thick border:</h4><h4>With a thick border:</h4>



ContCont

</table></table>

</body></body></html></html>





Table TagsTable Tags

TagTag

DescriptionDescription

<table><table>

Defines a tableDefines a table <th><th>

Defines a table headerDefines a table header

<tr><tr> Defines a table rowDefines a table row

<td><td>

Defines a table cellDefines a table cell

<caption><caption>





FramesFrames

With frames, you can display more thanWith frames, you can display more thanone HTML document in the same browserone HTML document in the same browserwindow. Each HTML document is called awindow. Each HTML document is called aframe, and each frame is independent of frame, and each frame is independent of the others.the others.



The Frameset TagThe Frameset Tag

The <frameset> tag defines how to divide theThe <frameset> tag defines how to divide thewindow into frameswindow into frames

Each frameset defines a set of rowsEach frameset defines a set of rows oror columnscolumns

The values of the rows/columns indicate theThe values of the rows/columns indicate theamount of screen area each row/column willamount of screen area each row/column willoccupyoccupy

The Frame TagThe Frame Tag

The <frame> tag defines what HTML document The <frame> tag defines what HTML document to put into each frameto put into each frame



ContCont

In the example below we have a frameset withIn the example below we have a frameset withtwo columns. The first column is set to 25% of two columns. The first column is set to 25% of the width of the browser window. The secondthe width of the browser window. The secondcolumn is set to 75% of the width of thecolumn is set to 75% of the width of the

browser window. The HTML document browser window. The HTML document "frame_a.htm" is put into the first column, and"frame_a.htm" is put into the first column, andthe HTML document "frame_b.htm" is put intothe HTML document "frame_b.htm" is put intothe second column:the second column:

<frameset cols="25%,75%"><frameset cols="25%,75%"> <frame src="frame_a.htm"><frame src="frame_a.htm"> <frame src="frame_b.htm"><frame src="frame_b.htm"> </frameset></frameset>



Examples according to columnsExamples according to columns

<html><html>

<frameset cols="25%,50%,25%"><frameset cols="25%,50%,25%">

<frame src="frame_a.htm"><frame src="frame_a.htm"> <frame src="frame_b.htm"><frame src="frame_b.htm">

<frame src="frame_c.htm"><frame src="frame_c.htm">

</frameset></frameset>

</html></html>



OUTPUTOUTPUT



Examples according to RowsExamples according to Rows

<html><html>

<frameset cols="25%,50%,25%"><frameset cols="25%,50%,25%">

<frame src="frame_a.htm"><frame src="frame_a.htm">

<frame src="frame_b.htm"><frame src="frame_b.htm">

<frame src="frame_c.htm"><frame src="frame_c.htm">

</frameset></frameset>

</html></html>



OUTPUTOUTPUT







LinksLinks

A full explanation of how to create links between A full explanation of how to create links betweendocuments is beyond the scope of thisdocuments is beyond the scope of thisdocument. However, we can give a quickdocument. However, we can give a quick

introduction.introduction. Links, sometimes referred to as "anchors", areLinks, sometimes referred to as "anchors", are

specified with thespecified with the <A><A> tag. Like thetag. Like the <IMG><IMG> tag,tag,<A><A> does nothing bydoes nothing by IPECelf IPECelf. The. The HREF=""HREF=""

attribute specifies the URL that the link pointsattribute specifies the URL that the link pointsto. As always, an example:to. As always, an example:

If you click <A HREF="link.html">here</A>, youIf you click <A HREF="link.html">here</A>, youwill seethe file "link.html".will seethe file "link.html".



Other Random TagsOther Random Tags

There are a number of other tags, more and lessThere are a number of other tags, more and lessuseful. A quick survey:useful. A quick survey:

<PRE><PRE>

Preformatted text: rendered in aPreformatted text: rendered in a monospacemonospace

font. Unlike most HTML, white space isfont. Unlike most HTML, white space issignificant. Tags are still honored, though. Thissignificant. Tags are still honored, though. Thisstyle is useful for tables of information, sincestyle is useful for tables of information, sincetabs work.tabs work.

<LISTING><LISTING>

Similar toSimilar to <PRE><PRE>, but in a smaller size. Meant , but in a smaller size. Meant for program listings. Supposedly, embeddedfor program listings. Supposedly, embeddedtags are ignored.tags are ignored.

<BLOCKQUOTE><BLOCKQUOTE>



How to make FormsHow to make Forms

<form method="post" action="mailto:<form method="post" action="mailto:your email address here">your email address here">

Next you want to actually start yourNext you want to actually start your

form:form: First Name: <input name="first"First Name: <input name="first"

type="text" size=12>type="text" size=12> Last Name: <input name="last"Last Name: <input name="last"

type="text" size=12>type="text" size=12> Email Address: <input name="address"Email Address: <input name="address"

type="text" size=30>type="text" size=30>



Cont.Cont.

Comments:Comments: <textarea name="whatever" rows=5<textarea name="whatever" rows=5

cols=30> </textarea>cols=30> </textarea>

<select name="whatever" size=4><select name="whatever" size=4><option>choose me <option>choose me<option>choose me <option>choose me<option>choose me <option>choose me<option>choose me <option>choose me<option>choose me<option>choose me

</select></select> Now you want your buttons at the Now you want your buttons at the bottom of the form:bottom of the form:

<input type="Submit" value="Send it in"><input type="Submit" value="Send it in">

<input type="reset" value="reset"><input type="reset" value="reset">



Cont.Cont.

And then you need And then you need

the

clo

sing tag:the

clo

sing tag:</form></form> This is whatThis is what

itwo

uld all loo

k like

:itwo

uld all loo

k like

:



OUTPUTOUTPUT



What is JavaScript?What is JavaScript?

JavaScript is used in millions of WebJavaScript is used in millions of Webpages to improve the design, validatepages to improve the design, validateforms, detect browsers, create cookies,forms, detect browsers, create cookies,and much more.and much more.

JavaScript is the most popular scriptingJavaScript is the most popular scriptinglanguage on the internet, and works in alllanguage on the internet, and works in all

major browsers, such as Internet Explorer,major browsers, such as Internet Explorer,Mozilla, Firefox, Netscape, and Opera.Mozilla, Firefox, Netscape, and Opera.



Cont.Cont.

JavaScript was designed to addJavaScript was designed to addinteractivity to HTML pagesinteractivity to HTML pages

JavaScript is a scripting languageJavaScript is a scripting language A scripting language is a lightweight A scripting language is a lightweight

programming languageprogramming language

A JavaScript consists of lines of executable A JavaScript consists of lines of executablecomputer codecomputer code



ContCont

A JavaScript is usually embedded directly A JavaScript is usually embedded directlyinto HTML pagesinto HTML pages

JavaScript is an interpreted languageJavaScript is an interpreted language(means that scripts execute without (means that scripts execute without preliminary compilation)preliminary compilation)

Everyone can use JavaScript without Everyone can use JavaScript without

purchasing a licence.purchasing a licence.

Are Java and Java cript theAre Java and Java cript the



Are Java and Java cript theAre Java and Java cript the

Same?Same?

NO!NO!

Java and JavaScript are two completelyJava and JavaScript are two completelydifferent languages in both concept anddifferent languages in both concept and

design!design! Java (developed by Sun Microsystems) isJava (developed by Sun Microsystems) is

a powerful and much more complexa powerful and much more complex

programming languageprogramming language -- in the samein the samecategory as C and C++.category as C and C++.



What can a JavaScript Do?What can a JavaScript Do?

JavaScript gives HTML designers aJavaScript gives HTML designers aprogramming toolprogramming tool -- HTML authors areHTML authors arenormally not programmers, but JavaScript is anormally not programmers, but JavaScript is ascripting language with a very simple syntax!scripting language with a very simple syntax! Almost anyone can put small "snippets" of code Almost anyone can put small "snippets" of codeinto their HTML pagesinto their HTML pages

JavaScript can put dynamic text into anJavaScript can put dynamic text into anHTML page HTML page -- A JavaScript statement like this: A JavaScript statement like this:document.write("<h1>" + name + "</h1>") document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page.can write a variable text into an HTML page.





Cont.Cont.

avaScript can be used to validate avaScript can be used to validate datadata -- A JavaScript can be used to A JavaScript can be used tovalidate form data before it is submitted tovalidate form data before it is submitted toa server. This saves the server from extraa server. This saves the server from extraprocessing .processing .

JavaScript can be used to create JavaScript can be used to create

cookiescookies -- A JavaScript can be used to A JavaScript can be used tostore and retrieve information on thestore and retrieve information on thevisitor's computer .visitor's computer .



First Java ScriptFirst Java Script

<html><html>

<head><head>

<title>ok</title><title>ok</title>

<script language="javascript"><script language="javascript">

document.write(<B>Hello World!")document.write(<B>Hello World!")

</script></script>

</html</html



OutputOutput





ContCont

<p>This example declares a variable, assigns a<p>This example declares a variable, assigns avalue to it, and then displays the variable.</p>value to it, and then displays the variable.</p>

<p>Then the variable is displayed one more<p>Then the variable is displayed one moretime, only this time as a heading.</p>time, only this time as a heading.</p>






ContCont

HegeHegeHegeHege

This example declares a variable, assignsThis example declares a variable, assignsa value to it, and then displays thea value to it, and then displays thevariable.variable.

Then the variable is displayed one moreThen the variable is displayed one moretime, only this time as a heading.time, only this time as a heading.



Alert() methodAlert() method

alert()alert() is a method of the window object.is a method of the window object.It is employed to display popIt is employed to display pop--up boxesup boxeswith some text and a button labeled "OK".with some text and a button labeled "OK".

Usage of the alert() method is similar toUsage of the alert() method is similar tothe write() method of the window object.the write() method of the window object.The text placed inside the parenthesis isThe text placed inside the parenthesis is

displayed on the popdisplayed on the pop--up box.up box.



Cont.Cont.

window.alert("I am an alert box");window.alert("I am an alert box"); SinceSince

it's not necessary to specify the windowit's not necessary to specify the windowobject we can leave it out from the code.object we can leave it out from the code.

Thus, the following code will functionThus, the following code will functionequally well as the one above.equally well as the one above.

alert("I am an alert box");alert("I am an alert box");



How to write text on multiple How to write text on multiple

lines in an alert box? lines in an alert box? Here are some commonly used escapesHere are some commonly used escapes

characters:characters:

\\nn: Inserts a new line and causes the text : Inserts a new line and causes the text

following it to be placed on that line.following it to be placed on that line. \\tt: Inserts a tab: Inserts a tab

\\rr: Carriage return: Carriage return

\\bb: Backspace: Backspace \\ff: Form feed: Form feed

\\'': Single quote: Single quote





Cont.Cont.

<input type=button value="Try it now"<input type=button value="Try it now" onClick="if(confirm('Format the hardonClick="if(confirm('Format the hard

disk?'))disk?'))

alert('You are very brave!');alert('You are very brave!'); else alert(' A wise decision!')">else alert(' A wise decision!')"> </form></form> </script></script> </body></body> </html></html>



OutputOutput



ContCont

lobal and Local variables inlobal and Local variables in



lobal and Local variables inlobal and Local variables in

JavaScript FunctionsJavaScript Functions

JavaScript functions help us divided ourJavaScript functions help us divided ourscript into discrete chunks of code.script into discrete chunks of code.Functions contain blocks of statementsFunctions contain blocks of statements

that can be regarded as separate entitiesthat can be regarded as separate entitiesfrom the main script because they arefrom the main script because they areonly executed when the function is called.only executed when the function is called.

Understanding Java cript orUnderstanding Java cript or



Understanding Java cript or Understanding Java cript or

LoopLoop

for (Initialization statements; Condition;for (Initialization statements; Condition;

UpdationUpdation statements) { ... statements ... }statements) { ... statements ... }

We can use aWe can use a forfor loop to print loop to print digIPECdigIPEC 1 to1 to10 in an alert box.10 in an alert box.

varvar msgmsg = ""; for (= ""; for (varvar x = 1; x <= 10; x++) {x = 1; x <= 10; x++) {

msgmsg == msgmsg + x + "+ x + "\ \n"; } alert(n"; } alert(msgmsg););



OutputOutput



The while loopThe while loop

The while loop is used when you want theThe while loop is used when you want theloop to execute and continue executingloop to execute and continue executingwhile the specified condition is true.while the specified condition is true.

while (var<=endvalue) {while (var<=endvalue) {

code to be executedcode to be executed

}}



ExampleExample

<html> <body> <script <html> <body> <script type="text/javascript">type="text/javascript">

var i=0 while (i<=10) {var i=0 while (i<=10) {document.write("The number is " + i) document.write("The number is " + i) document.write("<br />") i=i+1 }document.write("<br />") i=i+1 }</script></script>

</body></body>

</html></html>



OutputOutput



The do...while LoopThe do...while Loop

The do...while loop is a variant of theThe do...while loop is a variant of thewhile loop. This loop will always execute awhile loop. This loop will always execute ablock of code ONCE, and then it willblock of code ONCE, and then it will

repeat the loop as long as the specifiedrepeat the loop as long as the specifiedcondition is truecondition is true



ExampleExample

<html> <body><html> <body>

<script language="javascript"><script language="javascript">

var i=0 do {var i=0 do { document.write("The number is " + i) document.write("The number is " + i)

document.write("<br />") i=i+1 }document.write("<br />") i=i+1 }

while (i<0) while (i<0) </script> </body> </html></script> </body> </html>



OutputOutput



Switch StatementSwitch Statement

<html><html> <body><body> <script type="text/javascript"><script type="text/javascript"> var d = new Date()var d = new Date() theDay=d.getDay()theDay=d.getDay()



ContCont

switch (theDay)switch (theDay) {{ case 5:case 5: document.write("<b>Finallydocument.write("<b>Finally

Friday</b>")Friday</b>") breakbreak case 6:case 6: document.write("<b>Superdocument.write("<b>SuperSaturday</b>")Saturday</b>")

breakbreak



ContCont

case 0:case 0: document.write("<b>Sleepydocument.write("<b>SleepySunday</b>")Sunday</b>")

breakbreak default:default: document.write("<b>I'm really lookingdocument.write("<b>I'm really looking

forward to this weekend!</b>")forward to this weekend!</b>") }} </script></script>



Cont.Cont.

<p>This JavaScript will generate<p>This JavaScript will generatea different greeting based ona different greeting based onwhat day it is. Note that what day it is. Note that

Sunday=0, Monday=1,Sunday=0, Monday=1,Tuesday=2, etc.</p>Tuesday=2, etc.</p>

</body></body></html></html>



Br eak statementBr eak statement

<html> <body><html> <body>

<script language="javascript"><script language="javascript">for(var i=0; i<5; i++)for(var i=0; i<5; i++)

{{ if(i == 3) if(i == 3) break;break;

document.write("i isdocument.write("i is -- "+i);"+i);}}

document.write("document.write(" ------------------ After Looping After Looping------------ ");");</script></script></body></html></body></html>







A function is a reusable code A function is a reusable code--block that will beblock that will beexecuted by an event, or when the function isexecuted by an event, or when the function iscalled.called.

Functions can be defined both in the <head>Functions can be defined both in the <head>and in the <body> section of a document.and in the <body> section of a document.However, to assure that the function isHowever, to assure that the function isread/loaded by the browser before it is called, it read/loaded by the browser before it is called, it

could be wise to put it in the <head> section.could be wise to put it in the <head> section.

ExampleExample



ExampleExample

html> <head> <script type="text/javascript">html> <head> <script type="text/javascript">function displaymessage() {function displaymessage() {

alert("Hello World!")alert("Hello World!")

} </script>} </script> </head></head>

<body> <form> <input type="button"<body> <form> <input type="button"

value="Click me!" onclick="displaymessage()" >value="Click me!" onclick="displaymessage()" ></form> </body> </html></form> </body> </html>



OutputOutput



ExampleExample

<html><html>

<head><head>

<script language="javascript"><script language="javascript"> function myfunction()function myfunction()

{{

alert("HELLO")alert("HELLO")

}}

</script></script>

</head></head>



ContCont

<body><body> <form><form> <input type="button"<input type="button" onclick="myfunction()"onclick="myfunction()" value="Call function">value="Call function"> </form></form> <p>By pressing the button, a function will be<p>By pressing the button, a function will be

called. The function will alert a message.</p>called. The function will alert a message.</p> </body></body> </html></html>



OutputOutput



OutputOutput

Java cript ArraysJava cript Arrays -- creatingcreating



and storing valuesand storing values

An array can be regarded as a set of An array can be regarded as a set of variables. This does not mean that thevariables. This does not mean that thevariables in an array are related to eachvariables in an array are related to each

other; they are still separate entities inother; they are still separate entities inthemselves. Arrays helps us groupthemselves. Arrays helps us groupvariables, which we plan to use for avariables, which we plan to use for a

particular purpose because accessing theirparticular purpose because accessing theirvalues becomes a lot easier this way.values becomes a lot easier this way.



Cont.Cont.

Let's see how we make an array.Let's see how we make an array.

var city = new Array();var city = new Array(); Each array isEach array is

initialized using theinitialized using the newnew keyword with thekeyword with the Array() Array() construct (Isn't this similar toconstruct (Isn't this similar tousingusing Date() Date()?). So here we initialize and?). So here we initialize andarray calledarray called citycity. Now we fill this array. Now we fill this array

with our values (city names).with our values (city names).



ContCont

city[0] = "New York"; city[1] = "London";city[0] = "New York"; city[1] = "London";

city[2] = "New Delhi"; city[3] = "Sydney";city[2] = "New Delhi"; city[3] = "Sydney";city[4] = "Tokyo"; city[5] = "Moscow";city[4] = "Tokyo"; city[5] = "Moscow";

city[6] = "Lima";city[6] = "Lima";



ExampleExample

<html><html> <head><head> <title>Javascipt <title>Javascipt -- array plusarray plus

manipulation</title>manipulation</title> <script language=javascript "><script language=javascript "> function array() { }function array() { } student = new array()student = new array() student[1] = 23student[1] = 23 student[2] = 34student[2] = 34 student[3] = 67student[3] = 67

student[4] = 76student[4] = 76



ContCont

document.writeln("<h2>Student document.writeln("<h2>Student results</h2>")results</h2>")

document.writeln("<ul>")document.writeln("<ul>")

numStudents = 0numStudents = 0 sum=0sum=0 ans=0ans=0



ContCont

for (i in student ){for (i in student ){ document.writeln("<li>Student " + i + document.writeln("<li>Student " + i +

": " + student[i] + "%")": " + student[i] + "%")

numStudents++numStudents++ sum=sum+student[i]sum=sum+student[i] }} document.writeln("</ul>")document.writeln("</ul>")

ans = Math.round(sum/numStudents)ans = Math.round(sum/numStudents) document.writeln("student average is " + document.writeln("student average is " +

ans + "%")ans + "%")





OutputOutput

The Java cript promptThe Java cript prompt --



Getting user inputGetting user input

TheThe prompt() prompt() is a method of the windowis a method of the windowobject, just likeobject, just like alert() alert() oror confirm() confirm()..

The format forThe format for prompt() prompt() is similar tois similar toalert() alert() oror confirm() confirm() except for oneexcept for oneaddition.addition.

prompt("Message", "default value in theprompt("Message", "default value in the

text field");text field");





OutputOutput

Date and Time in JavaScriptDate and Time in JavaScript



Date and Time in JavaScriptDate and Time in JavaScript

To start working with dates and time, weTo start working with dates and time, wefirst initialize a variable and assign it afirst initialize a variable and assign it avalue with the new operator and thevalue with the new operator and the

Date() constructor. The main function of Date() constructor. The main function of the new operator with Date() constructorthe new operator with Date() constructoris to create a new date object that isis to create a new date object that is

stored in the variable. Here is the code:stored in the variable. Here is the code: var d = new Date();var d = new Date();



ContCont

var t_date = d.var t_date = d.getDate()getDate();;

the month var t_mon = d.the month var t_mon = d.getMonth()getMonth();;

var t_year = d.var t_year = d.getFullYear()getFullYear();;

year var t_hour = d.year var t_hour = d.getHours()getHours();;

var t_min = d.var t_min = d.getMinutes()getMinutes();;

var t_sec = d.var t_sec = d.getSeconds()getSeconds();; var t_mil = d.var t_mil = d.getMillisecondsgetMilliseconds;;

CC



ContCont

alert("Today's date is " + t_date + "alert("Today's date is " + t_date + "--" +" +

t_mon + "t_mon + "--" + t_year);" + t_year);



C tC t



ContCont

navigator.appVersionnavigator.appVersion -- Gives the browserGives the browserversion (version (appapplicationlication Version Version))

navigator.appCodeNamenavigator.appCodeName -- Gives theGives thebrowser codename (browser codename (appapplicationlicationCodeNameCodeName))

navigator.platformnavigator.platform -- Gives the platform onGives the platform on

which the browser is runningwhich the browser is running

C tC t



Cont.Cont.

To automatically transfer the visitor, we have toTo automatically transfer the visitor, we have totake the help of take the help of locationlocation property of theproperty of thewindowwindow object. Let's look at the code.object. Let's look at the code.

<SCRIPT LANGUAGE="JavaScript"<SCRIPT LANGUAGE="JavaScript"TYPE="TEXT/JAVASCRIPT"> <!TYPE="TEXT/JAVASCRIPT"> ></SCRIPT></SCRIPT>

E t H dli i J S i tE t H dli i J S i t



Event Handling in Java ScriptEvent Handling in Java Script

The object may be a bus, travelling around IPEC The object may be a bus, travelling around IPEC route. The events that are significant for the busroute. The events that are significant for the busare:are:

Passenger boardsPassenger boards Passenger paysPassenger pays Passenger leavesPassenger leaves Bus arrives at destinationBus arrives at destination The important features of the model are that theThe important features of the model are that the

bus can take any route and still use the samebus can take any route and still use the sameevents, and the same events apply to any busevents, and the same events apply to any busand any combination of passengers.and any combination of passengers.

C tC t



ContCont

Computer programs use this idea. We can modelComputer programs use this idea. We can modelmost situations with the basic Object most situations with the basic Object--OrientatedOrientatedEvent Event--Driven computer programming idiom.Driven computer programming idiom.

HTML and JavaScript provide an excellent HTML and JavaScript provide an excellent

example of this model. HTML provides theexample of this model. HTML provides theobjects, and JavaScript provides the event objects, and JavaScript provides the event handling capability.handling capability.

This article will introduce the idea of attachingThis article will introduce the idea of attachingevents to HTML elements, and writing code toevents to HTML elements, and writing code to

provide greater finesse within our webprovide greater finesse within our webdocuments.documents.

107107

HTML EVENTSHTML EVENTS



HTML EVENTSHTML EVENTS

moving the mouse pointer and clicking themoving the mouse pointer and clicking themouse buttons create the following events:mouse buttons create the following events:

· onmousedown· onmousedown

· onmousemove· onmousemove· onmouseout · onmouseout · onmouseover· onmouseover· onmouseup· onmouseup

· onclick· onclick· ondblclick· ondblclick

C tC t



ContCont

Mouse Event Mouse Event DescriptionDescription

onmousedownonmousedown A mouse button has A mouse button hasbeen pressedbeen pressed

onmousemoveonmousemove The mouse has beenThe mouse has beenmovedmoved

onmouseout onmouseout The mouse pointer hasThe mouse pointer has

left an element left an element onmouseoveronmouseover The mouse pointer hasThe mouse pointer has

entered an element entered an element

onmouseuponmouseup A mouse button has A mouse button has

C tC t



ContCont

Mouse Event Mouse Event DescriptionDescription

onbluronblur An element loses focus An element loses focus

onloadonload The document hasThe document hascompletely loadedcompletely loaded

onscrollonscroll The document is scrolledThe document is scrolled

onsubmit onsubmit A form submit command A form submit commandis issuedis issued

E lE l



ExampleExample

<HTML><HTML><HE AD><HE AD><TITLE>Hello from the 60's</TITLE><TITLE>Hello from the 60's</TITLE></HE AD></HE AD>

<BODY><BODY><P<Ponmousemove="style.color=Math.floor(Math.ranonmousemove="style.color=Math.floor(Math.random()*16777216);"dom()*16777216);"STYLE="position:absolute;top:10;left:10;color:blSTYLE="position:absolute;top:10;left:10;color:bl

ack">Hello from the 60's</P>ack">Hello from the 60's</P></BODY></BODY></HTML></HTML>

O t tO t t



OutputOutput



OutputOutput



OutputOutput

What is the Document ObjectWhat is the Document Object

Model?Model?



Model?Model?

The Document Object Model (DOM) is anThe Document Object Model (DOM) is anapplication programming interface (application programming interface ( API API) for valid) for validHTMLHTML and welland well--formedformed XMLXML documents. It documents. It defines the logical structure of documents anddefines the logical structure of documents and

the way a document is accessed andthe way a document is accessed andmanipulated. In the DOM specification, the termmanipulated. In the DOM specification, the term"document" is used in the broad sense"document" is used in the broad sense --increasingly, XML is being used as a way of increasingly, XML is being used as a way of representing many different kinds of informationrepresenting many different kinds of information

that may be stored in diverse systems, andthat may be stored in diverse systems, andmuch of this would traditionally be seen as datamuch of this would traditionally be seen as datarather than as documents.rather than as documents.

ContCont



Cont.Cont.

For instance, consider this table, takenFor instance, consider this table, takenfrom an HTML document from an HTML document--

<T ABLE><T ABLE>

<TBODY> <TR> <TD>Shady<TBODY> <TR> <TD>ShadyGrove</TD> <TD> Aeolian</TD> </TR>Grove</TD> <TD> Aeolian</TD> </TR>

<TR> <TD>Over the River, Charlie</TD><TR> <TD>Over the River, Charlie</TD>

<TD>Dorian</TD> </TR> </TBODY><TD>Dorian</TD> </TR> </TBODY></T ABLE></T ABLE>

Graphical representationGraphical representation



Graphical r epr esentationGraphical r epr esentation

Documents

An Introduction to HTML[1]