HTML

Hypertext is simply a piece oI text that works as a link.

Markuplanguage is a way oI writing layout inIormation within documents.
What is HTML?
W Is a language Ior describing web pages, a document Ior WWW.
W It is not a programming language, a markup language.
W Markup is a set oI markup tags.
W HTML uses tags to describe web pages.
W HTML is a subset oI SGML(Standard General Markup Language) , language used to
deIine the layout & also create links between web documents.
W All html Iiles have an extension oI .html or .htm.
Need Ior HTML
W Share a large amt oI inIormation across the world.
W reusability, read the code oI other people`s page.
HTML Concepts
W Html documents are essentially plain text Iiles.
W But include pointers or links to other Iile
W HTML is a made up oI tags and attributes.
W Tags provide document structure;others reIerence other Iiles
W Attributes provide additional inIormation within tags.
Creating HTML pages
W To create HTML pages we need two basic tools
An HTML editor
A web browser
HTML Editors:
- Text or code based editors
- WYSIWYG (shows the result oI the code as it appears in a browser, when we Iormat
the document).
ex. Netscape composer, MicrosoIt Iront page
Web Browsers:
- helps us to view html document
- 2 types: Text browser
Graphical browser
HTML tags and attributes
W HTML is made up oI tags and attributes,which work together to identiIy the document
parts and tell browsers how to display them,
Pages Structure:
- All normal webpage consists oI a head and a body.
- Head is used Ior text and tags that do not show directly on the page.
- Body is used Ior text and tags that are shown directly on the page.
Page Structure

Tags and tag order:
- tags are composed oI elements that are contained within angle brackets(~).
- tag~ this tells the browser that tag is opened.
- /tag~ this tells the browser that tag is closed.
- 'closing the most recent tag beIore closing older tags is the rule.
- DiIIerent tags:
- HTML~ - this is the Iirst tag oI html code which tells the browser that HTML code is
starting.
- HEAD~ - comes immediately aIter the html~ and used to tell the browser useIul
inIormation , such as title oI the page, topic oI your webpage & more.
- TITLE~ - must come between head~ & /head~ and will label the web browsers title
bar located in top leIt oI most browsers.
- BODY~ - this is the second tag which tells the browser that the visible part oI web page
content is to start.
Paragraph Level Formatting
P~ ---- Used to start paragraph.
ALIGN LEFT Ior leIt alignment.
ALIGN RIGHT Ior right alignment.
ALIGN CENTER Ior center alignment.
ADDRESS~ -- used Ior address and contact inIormation. OIten appears in italics
BR~ -- used Ior line break.
H1~ ../H1~ to H6~../H6~ -- Used Ior heading purpose.
BIG~ text /BIG~ -- Increase the Size by one.
Character Level Formatting
BASEFONT~ -- speciIy the overall Iont Ior your page.
FACE ~ -- speciIy the Iont name.
SIZE~ -- speciIy the Iont size.
(size must be between 1 to 7)
(deIault size is 3)
eg: BASEFONT FACE'ARIAL SIZE'4~
FONT STYLE:
B~ -- Applies Bold Face.
I~ -- Applies Italics.
U~ -- Applies Underline
S~ -- Applies Strike through to text. STRIKE~
BLINK~ -- Makes text Blink. Netscape only
SUB~ -- Formats text as subscript
SUP~ -- Formats text as Superscript
TT~ -- Writes text as on a classic typewriter
Graphical Elements
Color
BGCOLOR~ -- Applies background color to the page.
eg: BODY BGCOLOR'pink`~
eg: BODY BGCOLOR'#FF0000~
R G B
00 00 00
33 33 21
99 99 99
CC CC CC
FF FF FF
Color to Text
Two ways to speciIy the color.
Font creation time.
Eg: baseIont Iace"arial" size"4" color"green"~
2. BODY TEXT 'red~ -- Set the color Ior all text with in the document

Image
To insert the image on this webpage:
IMG SRC 'URL~

II the image is stored in the same Iolder as the HTML page
IMG SRC 'FILE NAME~
To change the size oI an image using the width and height attributes.
IMG SRC'URL WIDTH '60 HEIGHT'60~
add a border to the image
IMG SRC 'URL" border"5"~
-- Adding a border to your image might help the visitor recognize that the image is a link.
-- Note:
Netscape browsers will only show the border iI the image is a link.
add space over and under your images
IMG SRC'URL" Hspace"30" Vspace"10"~
add an alternative text to an image using the 'alt attribute
img src'URL" alt"text that goes with the image"~
users can get an idea oI what the image is about beIore it is loaded.

add a background image
body background'URL"~
use a background image Ior the page it is always a good idea to speciIy a background
color as well.
body background'URL" bgcolor'pink"~
List Format
BULLETED LISTS
ul~ and a /ul~ tag at the beginning and the end oI the list.
NUMBERED LISTS
ol~ tags instead oI ul~ tags.
To separate single list items use li~ and /li~ tags.
BULLETED LISTS
Bullet options:
1. Disc
2. Circle
3. Square.
-- deIault is Disc Format.
1. Disc
ul~
li~text/li~
li~text/li~
li~text/li~
/ul~
(or)
ul type"disc"~
2. Circle
ul type"circle"~
3. Square
ul type"square"~
NUMBERED LISTS
Number options:
1. Plain numbers
2. Capital Letters
3. Small Letters
4. Capital Roman Numbers
5. Small Roman Numbers
-- deIault is 1,2,3
ol~
li~text/li~
li~text/li~
li~text/li~
/ol~
Plain number start with particular no.
ol start"5"~
-- Capital Letters
ol type"A"~
-- Small Letters
ol type'a"~
-- Capital Roman Numbers
ol type'I"~
-- Small Roman Numbers
ol type'i"~
ol type'i" start"7"~
Text to scroll
Marquee tag is used to scroll the text
Behaviour
Alternate
Scroll
Slide
Direction
Sizing
Height,Width
Link creation
Tags used to produce links are the a~ and /a~.
Click a hreI"http://www.yahoo.com"~here/a~ to go to yahoo.
SpeciIy the target in the a hreI" "~.
Then add the text that should work as a link.
Finally add an /a~ tag to indicate where the link ends.
COLORS ON TEXT LINKS
Color oI text links is speciIied in the body~ tag
body link"#C0C0C0" vlink"#808080" alink"#FF0000"~
link (standard link) - to a page the visitor hasn't been to yet. (standard color is blue -
#0000FF).
vlink (visited link) - to a page the visitor has been to beIore. (standard color is purple -
#800080).
alink (active link) - the color oI the link when the mouse is on it. (standard color is red -
#FF0000).
LINK TARGETS
By deIault, links will open in the current window or Irame.
PredeIined targets are:
blank loads the page into a new browser window.
selI loads the page into the current window.
parent loads the page into the Irame that is superior to the Irame the hyperlink is
in.
top cancels all Irames, and loads in Iull browser window.
Eg: a hreI"http://www.yahoo.com" target"blank"~
IMAGE LINKS
To make an image work as a link, place the a hreI~ and the /a~ tags on each side oI the
image.
a hreI'URL"~ img src'Iile name"~ /a~
a hreI'URL"~ img src'Iilename" border"0" alt'text"~/a~
-- show a popup text when you place the mouse over it.
IMAGE MAPPING
To link one image to several pages, depending on where the image is clicked.
Simply speciIy which areas oI the image should link to where.
LINK TO EMAIL
Email links are done much the same as links to other pages, using the a hreI~ tag.
a hreI"mailto:youremailaddress"~Email Me/a~
This will result in opening a new email with your address already in the To: Iield.
-- To speciIic subject in the email, using 'subject' setting :
a hreI'mailto:youremailaddress?
Subject text ~Email Me/a~
speciIic text in the body oI their message, simply add body:
a hreI"mailto:youremailid?bodyMessage "~Send Email/a~
a hreI"mailto:youremailid?subjecttext
&bodyMessage"~Email Me/a~
Tables
Major purpose
Arranging inIormation .
Creating a page layout with the use oI hidden tables.
The most important layout aspects that can be done with tables are:
Dividing the page into separate sections.
Creating menus.
Adding interactive Iorm Iields.
Creating Iast loading headers Ior the page.
Easy alignment oI images that have been cut into smaller pieces.
A simple way to allow text to be written in two or more columns next to each
other.

Table Creation
To insert a table on your page, use TABLE~ tag.
To add rows to your table use the TR~ and /TR~ tags.
To divide rows into columns with TD~ and /TD~ tags.
To add heading to the row, use TH~ and /TH~ tags.
Eg:
TABLE~
TR~ TD~This is row one, leIt side./TD~
TD~This is row one, right side./TD~ /TR~
TR~ TD~This is row two, leIt side./TD~
TD~This is row two, right side./TD~ /TR~
/TABLE~
TABLE TAGS
ALIGNLEFT or CENTER or RIGHT
Result : leIt align table OR center table OR right align table
BACKGROUND Iilename
RESULT : image inserted behind the table.
BGCOLOR#rrggbb
Result : background color
BORDERN
Result : border thickness
BORDERCOLOR'#rrggbb
Result : Border oI the table with speciIic color.
BORDERCOLORDARK'#rrggbb
Result : Border with shadow
CELLPADINGN
Result : Distance between cell and content
CELLSPACINGN
Result : Distance between cells
FRAME
void removes all outer borders
above shows border on top oI table
below shows border on bottom oI table

lhs shows border on leIt side oI table

rhs shows border on right side oI table

hsides shows border on both horizontal sides

vsides shows border on both vertical sides

box shows border on all sides oI table
VALIGN
top aligns content to top oI cells
bottom aligns content to bottom oI cells
WIDTH
n,n minimum width oI table in pixels
n,n minimum width in percentage oI window size
to add a caption to a table.
caption~heading/caption~
AIter table~ tag
To add a heading to a column
th~
FORMS
A Iorm is simply an area that can contain Iorm Iields.
Form Iields are objects that allow the visitor to enter inIormation -
Two basic parts
Part we can see. (visitor Iills out )
Part we cannot see. (that speciIies how the server should process the inIormation)
FORM~ and /FORM~ tag is used to create a FORM.
Must be within BODY~ tag.
To insert a Iorm Iields, use INPUT~ TAG.
Form Fields are
Text Iields
Radio button
Check box
Buttons
Menus
Text Fields
One line areas that allow the user to input text.
Used Ior name and email address and so on.
To add a Text Fields to an existing Iorm,
FORM~
INPUT TYPE'TEXT~
/FORM~
ATTRIBUTE:
Size option deIines the width oI the Iield. That is how many visible characters it
can contain.
INPUT TYPE'TEXT SIZE'30~
-- Maxlength option deIines the maximum length oI the Iield. That is how many characters can
be entered in the Iield.
INPUT TYPE'TEXT SIZE'30 MAXLENGTH'30~
Name adds an internal name to the Iield so the program that handles the Iorm can identiIy
the Iields.
INPUT TYPE'TEXT NAME'Iirst name~
Value deIines what will appear in the box as the deIault value.
INPUT TYPE'TEXT VALUE'Enter ur name~
Align deIines how the Iield is aligned.
TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
Tabindex deIines in which order the diIIerent Iields should be activated when the visitor
clicks the tab key.
TEXT AREA
Text areas are text Iields that can span several lines.
Text areas are not deIined with an input~ tag.
textarea~ and /textarea~ tags are used.
Everything written between these tags will be presented in the text area box.
ATTRIBUTES:
Cols and Rows speciIy how many columns and rows you want in your text area.
wrap options speciIy the line break.
oII
Physical
Virtual
CHECK BOX
To select one or more options Irom a set oI alternatives.
INPUT TYPE'CHECKBOX~
ATTRIBUTES:
Name, Value, Align, Tabindex are applicable.

checked --- DeIault check this Iield.
Eg:
input type"checkbox" name'Drinks" value"Milk"~ Milkbr~
input type"checkbox" name'Drinks" value'TEA"~Tea br~
input type"checkbox" name'Drinks" value"CoIIee"~ CoIIee br~
DROP DOWN MENU
Depending on settings, it act as radio buttons (one selection only) or check boxes
(multiple selections allowed).
Advantage: it takes up less space.
Disadvantage:people can't see all options in the menu right away.
Drop-down menus combine select~ and option~.
Both tags have an opening and a closing tag.
Eg: select~
option~Milk/option~
option~CoIIee/option~
option~Tea/option~
/select~
Attributes:
For Select Drop-down menu
1. Name Name oI the Iield
2. Size Visible items in list.
3.Multiple Allows multiple choices iI yes
-- For Option Individual items in the menu.
1. Selected DeIault select the item.
2. Value Value to send iI selected.
BUTTONS
Three types oI buttons:
SUBMIT button.
RESET button.
SUBMIT and RESET button:
input type'SUBMIT"~ Ior submit button.
input type'RESET'~ Ior reset button.
Attributes:
Name adds an internal name to the button so the program that handles the Iorm
doesn't conIuse the button with the other Iields.
Value deIines what is written on the button.
Frames
Frames divides the screen into separate screens.
Each oI these windows can contain an HTML document.
A Iile that speciIies how the screen is divided into Irames is called a Irameset.
To make a homepage that uses Irames
make an HTML document with the Irameset
make the normal HTML documents that should be loaded into each oI these
Irames.
When a Irameset page is loaded, the browser automatically loads each oI the pages
associated with the Irames.
A Irameset is simply an HTML document that tells the browser how to divide the screen
into split windows.
Irameset cols"120,*"~ /Irameset~
Cols120,* indicates the screen is divided into two columns , the Iirst is 120 pixels and *
tells the second Irame occupies rest oI the space.

To add deIault Pages:
With src settings we can add deIault pages.
With name settings, we can add names to each Irame window.
Borders:
To make Irame borders invisible add the parameters -4rder0 to the Irameset
Resizeable windows:
II the Irame windows neednot be resized,then add the parameter "n4resi:e" to the Irame
src lines:
SCROLLBARS:
For a scroll bar in the menu window include scr4ing aut4 else scr4ing n4
Eg: Irameset cols"120,*" Irameborder"0" border"0" Iramespacing"0"~
Irame src"menu.htm" name"menu'noresize scrollingauto~
Irame src"IrontI.htm" name"main'noresize scrollingauto~
/Irameset~
Link Within:
a hreI'menu.htm" target"main"~Analysis/a~ oI the project
What is CSS?
O CSS stands Ior Cascading Style Sheets
O Styles deIine how to display HTML elements
O Styles were added to HTML 4.0 to solve a problem
O ternal Style Sheets can save a lot oI work
O External Style Sheets are stored in CSS files
Advantages:
Development oI large web sites, where Ionts and color inIormation were added to every single
page, became a long and expensive process. To solve this problem, the World Wide Web
Consortium (W3C) created CSS. In HTML 4.0, all Iormatting could be removed Irom the HTML
document, and stored in a separate CSS Iile. All browsers support CSS today.
O deIine the look oI your pages in one place rather than repeating yourselI over and
over again throughout your site. (Ever get tired oI deIining colors and Ionts each time
you start a new cell in a table? Those days are over with CSS!)
O easily change the look oI your pages even aIter they're created. Since the styles are
deIined in one place you can change the look oI the entire site at once. (Ever get tired
oI replacing tags throughout your site when you want to change the look oI a certain
element? Those days are over with CSS!)
O deIine Iont sizes and similar attributes with the same accuracy as you have with a
word processor - not being limited to just the seven diIIerent Iont sizes deIined in
HTML.
O position the content oI your pages with pixel precision.
O redeIine entire HTML tags. Say Ior example, iI you wanted the bold tag to be red
using a special Iont - this can be done easily with CSS.
O deIine customized styles Ior links - such as getting rid oI the underline.
O deIine layers that can be positioned on top oI each other (oIten used Ior menus that
pop up).
CSS Synta:
A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style. Each declaration consists oI a
property and a value. The property is the style attribute you want to change. Each property has a
value.A CSS declaration always ends with a semicolon, and declaration groups are surrounded
by curly brackets
E.g.: p color:red;text-align:center;}
CSS Comments:
Comments are used to explain your code, and may help you when you edit the source code at a
later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with
"*/".
The id and class Selectors:
In addition to setting a style Ior a HTML element, CSS allows you to speciIy your own selectors
called "id" and "class".
The id Selector
The id selector is used to speciIy a style Ior a single, unique element. The id selector uses the id
attribute oI the HTML element, and is deIined with#". The style rule below will be applied to
the element with id"para1". Do T start an ID name with a number! It will not work in
Mozilla/FireIox.
e.g.: html~head~style type"text/css"~
#para1 text-align: center; color: red ;}
/style~/head~
body~
p id"para1"~Hello World!/p~p~This paragraph is not aIIected by the style./p~
/body~/html~
Class vs. ID
The diIIerence between ID and class is that an ID selector can be called only once in a document,
while a class selector can be called multiple times in a document. The second diIIerence is that
ID can be called by JavaScript`s getElementByID Iunction. There is no hard rule on when to use
ID and when to use Class. My suggestion is to use class as much as possible Ior maximum
Ilexibility, with the only exception being when you want to use JavaScript`s getElementByID
Iunction, in which case you need use ID.
The class Selector
The class selector is used to speciIy a style Ior a group oI elements. Unlike the id selector, the
class selector is most oIten used on several elements. This allows you to set a particular style Ior
many HTML elements with the same class. The class selector uses the HTML class attribute, and
is deIined with a ".". In the example below, all HTML elements with class"center" will be
center-aligned:
E.g.: html~head~style type"text/css"~
.center text-align: center ;}
/style~/head~
body~h1 class"center"~Center-aligned heading/h1~p class"center"~Center-aligned
paragraph./p~
/body~/html~
Three Ways to Insert CSS
There are three ways oI inserting a style sheet:
O External style sheet
O Internal style sheet
O Inline style
ternal Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style
sheet, you can change the look oI an entire Web site by changing one Iile. Each page must link to
the style sheet using the link~ tag. The link~ tag goes inside the head section. An external
style sheet can be written in any text editor. The Iile should not contain any html tags. Your style
sheet should be saved with a .css extension.
ote: Do not leave spaces between the property value and the units! "Margin-leIt:20 px" (instead
oI "margin-leIt:20px") will work in IE, but not in FireIox or Opera.
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You deIine
internal styles in the head section oI an HTML page, by using the style~ tag.
Inline Styles
An inline style loses many oI the advantages oI style sheets by mixing content with presentation.
Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The
style attribute can contain any CSS property.
C# P#P#TIS:
Property Description Values
background
Sets all the background properties
in one declaration

background-attachment
Sets whether a background image is
Iixed or scrolls with the rest oI the
page
Scroll, Iixed
Background-color
Sets the background color oI an
element
'#IIIIII, color name, rgb(255,255,255)
Background-image
Sets the background image Ior an
element
URL
Background-position
Sets the starting position oI a
background image
percentage~, leIt top, leIt center
leIt bottom, right top, right center
right bottom, center top,center center
center bottom

Background-repeat
Sets how a background image will
be repeated
repeat, repeat-x, repeat-y
no-repeat

E.g : body background:#IIIIII url('imgtree.png') no-repeat scroll right top;}
FT P#P#TIS:
Property Description
Font Sets all the Iont properties in one declaration
Iont-Iamily SpeciIies the Iont Iamily Ior text
Iont-size SpeciIies the Iont size oI text
Iont-style SpeciIies the Iont style Ior text
Iont-variant SpeciIies whether or not a text should be displayed in a small-caps Iont
Iont-weight SpeciIies the weight oI a Iont
1avaScript Introduction:
1avaScript is the most popular scripting language on the Internet, and works in all major
browsers, such as Internet plorer, Firefo, Chrome, pera, and Safari.
What is 1avaScript?
O JavaScript was designed to add interactivity to HTML pages
O JavaScript is a scripting language.
O JavaScript is a client-side scripting language.
O A scripting language is a lightweight programming language
O JavaScript is usually embedded directly into HTML pages
O JavaScript is an interpreted language (means that scripts execute without preliminary
compilation)
O Everyone can use JavaScript without purchasing a license
1avaScript can do
O 1avaScript gives HTM designers a programming tool - HTML authors are normally
not programmers, but JavaScript is a scripting language with a very simple syntax!
Almost anyone can put small "snippets" oI code into their HTML pages
O 1avaScript can react to events - A JavaScript can be set to execute when something
happens, like when a page has Iinished loading or when a user clicks on an HTML
element
O 1avaScript can read and write HTM elements - A JavaScript can read and change the
content oI an HTML element
O 1avaScript can be used to validate data - A JavaScript can be used to validate Iorm
data beIore it is submitted to a server. This saves the server Irom extra processing
O 1avaScript can be used to detect the visitor's browser - A JavaScript can be used to
detect the visitor's browser, and - depending on the browser - load another page
speciIically designed Ior that browser
O 1avaScript can be used to create cookies - A JavaScript can be used to store and
retrieve inIormation on the visitor's computer.
1avaScript CMAScript
JavaScript is an implementation oI the ECMAScript language standard. ECMA-262 is the
oIIicial JavaScript standard. JavaScript was invented by Brendan Eich at Netscape (with
Navigator 2.0), and has appeared in all browsers since 1996.The oIIicial standardization was
adopted by the ECMA organization (an industry standardization association) in 1997. The
ECMA standard (called ECMAScript-262) was approved as an international ISO (ISO/IEC
16262) standard in 1998.
The development is still in progress.
What's the difference between 1avaScript and 1ava?
Actually, the 2 languages have almost nothing in common except Ior the name. Although Java is
technically an interpreted programming language, it is coded in a similar Iashion to C, with
separate header and class Iiles, compiled together prior to execution. It is powerIul enough to
write major applications and insert them in a web page as a special object called an "applet."
Java has been generating a lot oI excitement because oI its unique ability to run the same
program on IBM, Mac, and Unix computers. Java is not considered an easy-to-use language Ior
non-programmers.
JavaScript is much simpler to use than Java. With JavaScript, iI I want check a Iorm Ior errors, I
just types an iI-then statement at the top oI my page. No compiling, no applets, just a simple
sequence.
1avaScript How To
The HTML script~ tag is used to insert a JavaScript into an HTML page.

Try to avoid using document.write() in real liIe JavaScript code. The entire HTML page will
be overwritten iI document.write() is used inside a Iunction, or aIter the page is loaded.
However, document.write() is an easy way to demonstrate JavaScript output in a tutorial.
Some Browsers do ot Support 1avaScript
Browsers that do not support JavaScript will display JavaScript as page content.
To prevent them Irom doing this, and as a part oI the JavaScript standard, the HTML comment
tag should be used to "hide" the JavaScript.
Just add an HTML comment tag !-- beIore the Iirst JavaScript statement, and a --~ (end oI
comment) aIter the last JavaScript statement, like this:
script type"text/javascript"~
<!--
document.getElementById("demo").innerHTMLDate();
//-->
/script~
1avaScript Where To
Scripts in <head> and <body>
You can place an unlimited number oI scripts in your document, and you can have scripts in both
the body and the head section at the same time.
It is a common practice to put all Iunctions in the head section, or at the bottom oI the page. This
way they are all in one place and do not interIere with page content.
Using an ternal 1avaScript
JavaScript can also be placed in external Iiles. External JavaScript Iiles oIten contain code to be
used on several diIIerent web pages. External JavaScript Iiles have the Iile extension .js.
ote: External script cannot contain the script~/script~ tags!To use an external script, point to
the .js Iile in the "src" attribute oI the script~ tag:
head~
script type"text/javascript" src"xxx.js"~/script~
/head~
1avaScript Statements
JavaScript is a sequence oI statements to be executed by the browser. Unlike HTML,
JavaScript is case sensitive - thereIore watch your capitalization closely when you write
JavaScript statements, create or call variables, objects and Iunctions.
A JavaScript statement is a command to a browser. The purpose oI the command is to tell the
browser what to do. This JavaScript statement tells the browser to write "Hello Dolly" to the web
page:
E.g.: document.write("Hello Dolly");
1avaScript Comments
JavaScript comments can be used to make the code more readable.
Single line comments start with //.Multi line comments start with /* and end with */.
The comments are used to prevent the execution oI a code.
1avaScript Variables
Variables are "containers" Ior storing inIormation. JavaScript variables are used to hold values or
expressions.
A variable can have a short name, like x, or a more descriptive name, like carname.
Rules Ior JavaScript variable names:
O Variable names are case sensitive (y and Y are two diIIerent variables)
O Variable names must begin with a letter or the underscore character
ote: Because JavaScript is case-sensitive, variable names are case-sensitive.
A variable's value can change during the execution oI a script. You can reIer to a variable by its
name to display or change its value.
Declaring (Creating) 1avaScript Variables
Creating variables in JavaScript is most oIten reIerred to as "declaring" variables.
You declare JavaScript variables with the var keyword: var x; and var carname;
ocal 1avaScript Variables
A variable declared within a JavaScript Iunction becomes CA and can only be accessed
within that Iunction. (the variable has local scope).
You can have local variables with the same name in diIIerent Iunctions, because local variables
are only recognized by the Iunction in which they are declared. Local variables are destroyed
when you exit the Iunction. You will learn more about Iunctions in a later chapter oI this tutorial.
lobal 1avaScript Variables
Variables declared outside a Iunction become BA, and all scripts and Iunctions on the
web page can access it. Global variables are destroyed when you close the page.
II you declare a variable, without using "var", the variable always becomes BA.
Assigning Values to Undeclared 1avaScript Variables
II you assign values to variables that have not yet been declared, the variables will automatically
be declared as global variables.
1avaScript perators
1avaScript Arithmetic perators
Arithmetic operators are used to perIorm arithmetic between variables and/or values.
Given that y5, the table below explains the arithmetic operators:
perator Description ample #esult
Addition xy2 x7 y5
- Subtraction xy-2 x3 y5
* Multiplication xy*2 x10 y5
/ Division xy/2 x2.5 y5
Modulus (division remainder) xy2 x1 y5
Increment xy x6 y6
xy x5 y6
-- Decrement x--y x4 y4
xy-- x5 y4

1avaScript Assignment perators
Assignment operators are used to assign values to JavaScript variables.
Given that 10 and y5, the table below explains the assignment operators:
perator ample Same As #esult
xy x5
xy xxy x15
- x-y xx-y x5
* x*y xx*y x50
/ x/y xx/y x2
xy xxy x0
The + perator Used on Strings
The operator can also be used to add string variables or text values together.
To add two or more string variables together, use the operator.
Control structure :
Control structure includes the looping control structure and conditional or branching
control structure.

In a looping control structure, series oI statements are repeated. In a conditional or
branching control structure, a portion oI the program is executed once depending on what
conditions occur in the code.
Branching control structure:
The Switch Statement:
The Switch Statement is an alternative to a series oI else iI is the switch statement. Unlike iI-then
and iI-then-else, the switch statement allows Ior any number oI possible execution paths. A
switch works with the byte, short, char, and int primitive data types. It also works with
enumerated types. The body oI a switch statement is known as a switch block. Any statement
immediately contained by the switch block may be labeled with one or more case or deIault
labels. The switch statement evaluates its expression and executes the appropriate case.
Switch Statement Synta:
switch (expression)
case value1 :
statement (s);
break;
case value2 :
statement (s);
break;
.
.
.
case valuen :
statement (s);
break;
deIault:
statement (s);
}
ample: var monthparseInt(prompt('enter the month));
switch (month)
case 1: document.write("January"); break;
case 2: document.write("February"); break;
case 3: document.write ("March"); break;
case 4: document.write ("April"); break;
case 5: document.write ("May"); break;
case 6: document.write ("June"); break;
case 7: document.write ("July"); break;
case 8: document.write ("August"); break;
case 9: document.write("September"); break;
case 10: document.write ("October"); break;
case 11: document.write ("November"); break;
case 12: document.write ("December"); break;
deIault: document.write ("Wrong Input");
}
1avaScript Comments:
Comments can be used to make the code more readable.
Single line comments start with //.
Eg:
script type"text/javascript"~
// Write a heading
document.write("h1~This is a heading/h1~");
// Write two paragraphs:
document.write("p~This is a paragraph./p~");
document.write("p~This is another paragraph./p~");
/script~
Multi line comments start with /* and end with */.
Eg:
script type"text/javascript"~
/*
The code below will write
one heading and two paragraphs
*/
document.write("h1~This is a heading/h1~");
document.write("p~This is a paragraph./p~");
document.write("p~This is another paragraph./p~");
/script~

1avaScript Variables:
Variables are "containers" Ior storing inIormation. Variables can be used to hold values
(x5) or expressions (zxy).
JavaScript is case-sensitive, variable names are case-sensitive.
Variable names must begin with a letter or the underscore character.
Declaration:
var x;
Assignment:
x5;
perators:
Arithmetic Operators:
Arithmetic operators are used to perIorm arithmetic between variables and/or values.
Given that y5, the table below explains the arithmetic operators:
perator Description ample #esult
Addition xy2 x7
- Subtraction xy-2 x3
* Multiplication xy*2 x10
/ Division xy/2 x2.5
Modulus (division remainder) xy2 x1
Increment xy x6
-- Decrement x--y x4

1avaScript Assignment perators
Assignment operators are used to assign values to JavaScript variables.
Given that 10 and y5, the table below explains the assignment operators:
perator ample Same As #esult
xy x5
xy xxy x15
- x-y xx-y x5
* x*y xx*y x50
/ x/y xx/y x2
xy xxy x0
Comparison Operators
Comparison operators are used in logical statements to determine equality or diIIerence between
variables or values. Given that 5, the table below explains the comparison operators:
perator Description ample
is equal to x8 is Ialse
is exactly equal to (value and type) x5 is true
x"5" is Ialse
! is not equal x!8 is true
~ is greater than x~8 is Ialse
is less than x8 is true
~ is greater than or equal to x~8 is Ialse
is less than or equal to x8 is true

ogical perators
Logical operators are used to determine the logic between variables or values.
Given that 6 and y3, the table below explains the logical operators:
perator Description ample
&& And (x 10 && y ~ 1) is true
,, Or (x5 ,, y5) is Ialse
! Not !(xy) is true

Conditional perator
JavaScript also contains a conditional operator that assigns a value to a variable based on some
condition.
Synta
variablename(condition)?value1:value2
Control Structures:
If...else if...else Statement
Use the iI....else iI...else statement to select one oI several blocks oI code to be executed.
Synta
iI (c4nditi4n1)

c4de t4 -e executed if c4nditi4n1 is true
}
else iI (c4nditi4n2)

c4de t4 -e executed if c4nditi4n2 is true
}
else

c4de t4 -e executed if c4nditi4n1 and c4nditi4n2 are n4t true
}
The 1avaScript Switch Statement
Use the switch statement to select one oI many blocks oI code to be executed.
Synta
switch(n)

case 1:
execute c4de -4ck 1
break;
case 2:
execute c4de -4ck 2
break;
deIault:
c4de t4 -e executed if n is different fr4m case 1 and 2
}
1avaScript oops
OIten when you write code, you want the same block oI code to run over and over again in a
row. Instead oI adding several almost equal lines in a script we can use loops to perIorm a task
like this. Loops execute a block oI code a speciIied number oI times, or while a speciIied
condition is true.
In JavaScript, there are two diIIerent kinds oI loops:
O For - loops through a block oI code a speciIied number oI times
O While - loops through a block oI code while a speciIied condition is true
The for oop
The Ior loop is used when you know in advance how many times the script should run.
Synta
Ior (varstartvalue;varendvalue;varvarincrement)

c4de t4 -e executed
}
Sample program:
Html~
Body~
script type"text/javascript"~
var xparseInt(prompt('Enter the value,0));
Ior(i 0; i x; i)

document.write("The number is " i);
document.write("br /~");
}
/script~
/body~
/html~
The while oop
The while loop loops through a block oI code while a speciIied condition is true.
Synta
while (condition)

c4de t4 -e executed
}
Sample Program:
html~
body~
script type"text/javascript"~
var xparseInt(prompt('Enter the value,0));
var i0;
while (ix)

document.write("The number is " i);
document.write("br /~");
i;
}
/script~
/body~
/html~
The do...while oop
The do...while loop is a variant oI the while loop. This loop will execute the block oI code
ONCE, and then it will repeat the loop as long as the speciIied condition is true.
Synta
do

c4de t4 -e executed
}
while(condition);
Sample Program:
html~
body~
script type"text/javascript"~
var xparseInt(prompt('Enter the value,0));
var i0;
do

document.write("The number is " i);
document.write("br /~");
i;
}
while(ix);
/script~
/body~
/html~