201

3

WEB
TECHNOLOGIES
CSE & IT 3 -2
[Type the abstract of the document here. The abstract is
typically a short summary of the contents of the document. Type
the abstract of the document here. The abstract is typically a
short summary of the contents of the document.]

P.Malla Reddy(CSE Dept)

What is web technology?
Web technology is software, hardware and network architectures that use standards and
technologies developed for the Internet and the World Wide Web (WWW).Web technologies related
to the interface between web servers and their clients. This information includes markup languages,
programming interfaces and languages, and standards for document identification and display.
What is the use of this technology?
Technology is very good at: storing, transferring, processing, filtering and protecting data.
Most of this data is unstructured (documents, emails, ideas, requests, results etc…) as opposed to
structured (databases). It allows users to maximize the potential of this data by better organization and
access.
What is the URL?
URL stands for Uniform Resource Locator. A URL is a formatted text string used by Web
browsers, email clients and other software to identify a network resource on the Internet. Network
resources are files that can be plain Web pages, other text documents, graphics, or programs.
URL strings consist of three parts (substrings):
1. network protocol
2. host name or address
3. file or resource location
Syntax:- protocol :// host / location (Ex:-http://google.com)
URL Protocol
The 'protocol' substring defines a network protocolto be used to access a resource. These
strings are short names followed by the three characters '://' (a simple naming convention to denote a
protocol definition). Typical URL protocols include http://,ftp://, and mailto://.
URL Host
The 'host' substring identifies a computer or other network device. Hosts come from standard
Internet

databases

such

as DNS and

can

be

names

or IP

addresses.

For

example,

compnetworking.about.com is the host for this Web page.
URL Location
The 'location' substring contains a path to one specific network resource on the host.
Resources

are

normally

located

in

a

host

directory

or

folder.

For

example,/od/internetaccessbestuses/bldef-url.htm is the location of this Web page including two
subdirectories and the file name.
What is a Website?
A website is a collection of web pages (documents that are accessed through the Internet),
such as the one you're looking at now. A web page is what you see on the screen when you type in a

P.MallaReddy
Page 2

web address, click on a link, or put a query in a search engine. A web page can contain any type of
information, and can include text, color, graphics, animation and sound.
What is web page?
Webpage is a document commonly written in HyperText Markup Language (HTML) that is
accessible through the Internet or other network using a browser. A web page is accessed by entering
a URL addresses and may contain text, graphics, and hyperlinks to other web pages and files. The
page you're reading now is an example of a web page.
When was the first web page created?
The first web page was created at CERN by Tim Berners-Lee and put online August 6, 1991.
What is the difference between a website and web page?
A website refers to a central al location that contains more than one web page. For example,
Computer Hope is considered a website, which contains thousands of different pages. However, this
page you're reading now is considered a web page on Computer Hope.
What is a Web Browser?
Browser, short for web browser, is a software application used to enable computers users to
locate and access web pages. Browsers translates the basic HTML (Hypertext Mark Up Language)
code that allows us to see images, text videos and listen to audios on websites, along with hyperlinks
that let us travel to different web pages. The browser gets in contact with the web server and requests
for information. The web server receives the information and displays it on the computer.
There are several types of browsers

Mozilla Firefox

Netscape Navigator

Microsoft Internet Explorer

What is A Web Server?
A web server is a piece of software that enables a website to be viewed using HTTP. HTTP
(HyperText Transfer Protocol) is the key protocol for the transfer of data on the web.
 HTML (HTML stands for Hypertext Markup Language)
What does that mean?

Hyper is the opposite of linear. Old-fashioned computer programs were necessarily linear that is, they had a specific order. But with a "hyper" language such as HTML, the user can go
anywhere on the web page at any time.

Text is just English characters used to make up ordinary words.

Mark-up is what is done to the text to change its appearance. For instance, "marking up"
your text with <b> before it and </b> after it will put that text in bold.

Language is just that. HTML is the language that computers read in order to understand web
pages.

P.MallaReddy
Page 3

Developed by scientist Tim Berners-Lee in 1990, HTML is the "hidden" code that helps us
communicate with others on the World Wide Web (WWW).
Basic Concepts`
HTML is written in plain text. That means you don’t need any fancy software programs like a
word processor to create your HTML files. All you need is a simple text-editor that’s already on your
system. For MACs, that would be SimpleText and for Windows, Notepad.

HTML is a markup language

A markup language is a set of markup tags
HTML markup tags are usually called HTML tags

HTML tags are keywords (tag names) surrounded by angle brackets like <html>

HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the start tag, the second tag is the end tag

The end tag is written like the start tag, with a forward slash before the tag name

Start and end tags are also called opening tags and closing tags

Elements
The words/letters between these two angle brackets are called elements. These are the coded
commands within HTML. Elements tell the browser how to display the web page. For example: <hr>
tells the browser to display a horizontal rule;
Tag of Html

Html is tag-based system. A distinction is often drawn between WYSIWYG formatting
system, and tag-based system. WYSIWYG stands for “What You See Is What You Get”.

Display, Tag is a special instruction for browser, which indicates that the given information
after tag should be rendered according to the given instruction.

Tags are two kinds’ singleton tags and paired tags.

Singleton tags does not require an ending tag (Eg: - <hr>, <br>).

Paired tags required an ending tag, which is exactly first tag in a pair is the start tag, the
second tag is the end tag The end tag is written like the start tag, with a forward slash before
the tag name

Html tags are not case-sensitive.

Syntax: - <tag name [Parameter(s)=[values]]>
HTML structure.
All HTML documents are divided into two main parts: the head and the body.

P.MallaReddy
Page 4

You must have the <html>, <head> and <body> container tags in every HTML file.
The document Head Part
HTML <head> tag is a Container Tag. All Header element contains like general information about
page, meta-information, style sheet URL and document type information.
HTML <head> tag inside elements does not display in body part on web browser.
HTML <head> tag inside Elements is <! doctype>, <base>, <link>, <meta>, <title>, <style> and
<script>.
Head Elements Usages
HTML <! doctype> tag use for define a type of document.
HTML <link> tag is use for linked external CSS style sheet, external java script etc... URL define.
HTML <meta> tag use for improve a rankings in search engines means optimize webpage using
proper meta data information

.

HTML <title> tag define a document title.
HTML <style> tag is use for write internal CSS inside current document.
HTML <script> tag is use for create a dynamic web pages easy and more flexible in internal and
external write a java script code.
Tag

Description

<!DOCTYPE>

Defines a document type and write before the <html> start tag.

<head>

Defines a harder information about the webpage document.

<meta>

Defines meta information use to improve a rankings in Search Engines.

<title>

Defines a Document Title.

<link>

Defines a URL link using External Style Sheet, JavaScript etc..

<base>

Defines a base is used to specify a base URL to relative webpage URL links.

The document Body part
HTML body section is a main contain section of web page all contain that will be seen when the
user loads the webpage.HTML body section supported all the contains such as text, hyperlinks,
images, Special Character, lists, tables, frames, forms etc.It's most powerful section and important
section to display web page. It is largest part all.
P.MallaReddy
Page 5

Click Open Step 5 If all went as planned. </body> </html> Step 3 Save the document as: firstpage. There's more to come. Basic Tags When you learn beginners HTML. Headline tag In HTML.<Hn [ALIGN={LEFT | RIGHT | CENTER}]> P. click on it.html Your file can be saved as either an htm or html file. Our next tags--headline. ranging from <h1>…</h1> to <h6>…</h6>. It’s a lively place to be. There are six levels of headlines. you’ll notice that a Web page is made up of more than just plain words on a screen. line break and horizontal rule--will help us make our current page a lot more exciting. Here is an example of the code for all the headline sizes: Syntax:. colors and much more. Step 4 To preview your new document. This is my first web page. Remember to save your document on the computer in a place that you can find it again. bold copy is created by using the headline tag.How to Creating a web page Step 1 Open up a text editor (SimpleText for Mac or Notepad for Windows) Step 2 Enter the following: <html> <head> <title> This is my first web page</title> </head> <body> Hello world. open Netscape Navigator.MallaReddy Page 6 . There are headlines. which should now be showing your file. Here all Basic HTML tags are listed to help you learn. length of time on the Internet. paragraph. graphics. This will bring you back to the dialogue box. Select Choose File Go to where you saved your file. It's important to have a basic HTML tags understanding. paragraphs. Let’s learn how. your file should look like this in your browser. On the tool bar (located up near the top of the browser): Select File menu.-->Select Open  A dialogue box appears.

Tag Example Results <b> <b>Bold Text</b> An example of Bold Text <big> <big>Big Text</big> An example of Big Text <center> <center>Center Text</center> An example of Center Text <em> <em>Emphasized Text</em> An example of Emphasized Text <i> <i>Italic Text</i> An example of Italic Text <small> <small>Small Text</small> An example of Small Text <strong> <strong>Strong Text</strong> An example of Strong Text <sub> <sub>Subscript Text</sub> An example of Subscript Text <sup> <sup>Superscript Text</sup> An example of Superscript Text <del> <s> <strike> <del>DeleteText</del> <s>StrikeText</s> <strike>Strike Text</strike> An example of An example of Strike Text An example of Strike Text <u> <u>Underline Text</u> An example of Underline Text <tt> <tt>Teletype Text</tt> An example of Teletype Text P. To add a single line of space. It will become necessary to make minor changes to the formatting of those elements.MallaReddy Page 7 . you use break tag: <br> This is an empty tag and stands alone.</Hn> Example: <h1>Level 1 Headline</h1> <h2>Level 2 Headline</h2> <h3>Level 3 Headline</h3> <h4>Level 4 Headline</h4> <h5>Level 5 Headline</h5> <h6>Level 6 Headline</h6> Paragraphs & Line Breaks To add space between paragraphs you use the paragraph tag: <p>…</p> This is a container tag and must have a beginning and an ending. Horizontal Rule To create a horizontal line on your page you use the empty tag.-------------. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. You can use the <br> tag to insert one or more blank lines. <hr [[size=n] [width=n][align={left|right|center}]] > Text Formatting Tags HTML formatting tags use for formatting a text style.

Font face is nothing but font name for text like Arial. The font face is used to change the font of the text. This will have value scroll.  Direction: which direction the marquee should scroll.</FONT>tag pair..  Loop: how many times to loop. This will have a value like 10 etc. HTML Comment HTML Comment P. This is created by using HTML tag <marquees>. down.more attributes> One or more lines or text message or image </marquee> Attributes: A HTML marquee can have following attributes:  Width: how wide the marquee is. A simple syntax to use marquee is as follows: <marquee attribute name="attribute value". Courier.. which is default size. The default value is INFINITE. Example: <FONT SIZE=+4 COLOR=”red” FACE=”courier”> Well come to Sits </FONT> A HTML marquee tag is a scrolling piece of text displayed either horizontally across or vertically down your web site page depending on the settings.<blockquote> <blockquote>Long Quotation</blockquote> <q>Short Quotation Text</q> An example of Long Quotation Text An example of Short Quotation Text Text Fonts: Display a piece of text. each stored character value must be mapped to a visual representation of the character’s shape such a representation is called a glyph..  Scroll amount: how far to jump. slid and alternate. This will have a value like 10 or 20%etc.. This will have value either up. Size ranges from -7 to +7. Glyphs are arranged into collection called fons.MallaReddy Page 8 .  Bgcolor: background color. This will have any color name or color hex value. which means that the marquee loops endlessly. The fonts can be varied as per the customized needs for given values using the <FONT>…. This will have a value like 10 etc.HTML provides <FONT> tag for facilitating various types of fonts. Accordingly –n or +n the size decrease respectively.  Height: how tall the marquee is. Syntax: <FONT [SIZE=+n/-n] [COLOR=color] [FACE=”font name”]> </FONT> The font size is taken basis of Base font size. left or right. This will have a value like 10 or 20% etc.  Behavior: what type of scrolling. Times New Roman.  Scroll delay: how long to delay between each jump.

which indicates the link’s destination. scripts and style elements. HTML Comment Example-Code: An HTML comment begins with "<!--". When you move the cursor over a link in a Web page. The most important attribute of the <a> element is the href attribute. It looks like this: <A HREF=”address/url” NAME=”id” TARGET=”target window”>Link text </A> HREF which indicates the destination document. You can also write a specify information inside comments. ends with "-->". A hyperlink (or link) is a word. Common Syntax: <IMG SRC=”filename | path” [BORDER=n] [ALT=”textual messages”] [HEIGHT=n] [WIDTH=n]> Example: <IMG SRC=”sunset. Hyperlinks (Links) in HTML The HTML <a> tag defines a hyperlink. In this case they will not be display on web document and not visible for the user. So as a Web Developer you should have clear understanding on how to use images in your web pages. It's good habit to write a comment into a source code to improve user readability and understands. Name and Target parameter are optional IMAGES Images are very important to beautify as well as to depicts many concepts on your web page. By default. group of words. or image that you can click on to jump to another document.jpg” border=”2” alt =”this is sunset image” width=”300” height=”300”> Image Attributes P. It is true that one single image is worth than thousands of words. Comment Tag does not support any Standard Attributes. Following is the simple syntax to use this tag. A good habit is write comment text inside html pages.MallaReddy Page 9 . Other parameter Name and TARGET can useful for identification for anchor tag and the location of a frame where target page is to be displayed respectively.Html comment Tag use to insert a comment into a source code. You will insert any image in your web page by using <img> tag. links will appear as follows in all browsers:  An unvisited link is underlined and blue  A visited link is underlined and purple  An active link is underlined and red HTML Link Syntax The HTML code for a link is simple. the arrow will turn into a little hand.

This will have a value like 1 or 2 etc. right or center.jpg”height=”300” width=”300”></A> HTML Lists List is collection of items and they may be ordered or unordered. disc or circle. The Unordered List elements used to present a list of items.  Alt: this is an alternate text which will be displayed if image is missing. Using <UL> tag dose Creation of unordered lists in HTML. which is called as unordered lists.  Border: sets a border around the image. Syntax: <UL [TYPE= {square.  Height: sets height of the image. End of ordered list is specified with ending tag </OL> P. Elements used to present a list of items. which is immediately followed by a <LI>element which is same as <LI> in unordered list.  Align: this sets horizontal alignment of the image and takes value either left. This will have a value like 10 or 20%etc. hence it sometimes called as numbered lists. An ordered list should start with the <OL> element. disk or circle}]> <LI> item name 1 <LI> item name 2 --------------------<LI>item name n </UL> ORDERED LIST Ordered lists are also called sequenced or numbered lists. Image as Hyperlinks: Before <img> tag if specify anchor tag(<A>)then image converted as hyperlink Example: <A><img src=”sunset.MallaReddy Page 10 . Other lists included as directory lists.  Src: specifies URL of the image file. In the ordered list the lists of items have an order that is signified by number. Width: sets width of the image. In ms-word you may be familiar item bullets. so it requires in ending tag that is </UL>. This will have a value like 10 or 20% etc. The TYPE attribute can also be added to the <UL> tag that indicates the displayed bullet along with list of item is square. Which is paired tag. The list of items are included in between <UL>…</UL>. definition lists that are very useful to make the web page attractive UNORDERED LISTS Unordered list are also called unnumbered lists. Ordered lists are nothing but sequenced list which are number or alphabets. white space and /or marked by bullets. By default it is disc. which are typically separated by white space and/or marked by numbers or alphabets.

typically 24 characters wide. so it is not preferable to use Hence.</DIR> A directory List element is used to present a list of items containing up 20 characters each. Syntax: <OL [TYPE={“1” or “ I “ or “A” or “ a ” or “ i “ }] [ START = n ]> <LI> item name 1 <LI> item name 2 ------------------------<LI> item name n </OL> OTHER LISTS There are several other lists in HTML. Moreover. Example: <DL> <DD> Internet <DL> Networking is connection of two or more computers together <DD>UML <DL>Unified Modeling Language </DL> Directory List <DIR> …. which is immediately followed by a <LI> element. A Directory List must being with <DIR>elements. Example: <DIR> <LI>List item1 <LI>list item2 ----------------------P. Another optional parameter with <OL>tag is START attribute. Definition List <DL> …</DL> A Definition list is a list of Definition terms <DT> and corresponding Definition Description <DD> on a new line.MallaReddy Page 11 . which indicates the starting number or alphabet of ordered list. Items in a Directory List may be arranged in columns. some of them are Definition List and Directory List. use <UL> instead of <DIR>.Different Ordered list types like Roman numeral list. this tag is a deprecated tag. alphabet list etc can be specified with TYPE tag. To create a definition it must start with <DL> and immediately followed by the first definition term <DT>.

says actual data is started Indicates starting of a table row Actual table data for a cell. There are several tags that are needed for designing HTML table.You can specify table width or height in Align terms of integer value or in terms of percentage of available screen area Alignment of text in the table General Syntax: Example: <TABLE> <table> <TR> <tr> <TH> ……</TH> <th>Rno</th> <th>Name</th> </TR> </tr> <TR> <tr> <TD>…</TD> </TR> </TABLE> <td>101</td> <td>MallaReddy</td> </tr> </table> HTML Forms P.MallaReddy Page 12 . Cellpadding It represents the distance between cell borders and the content within. rows. A row is contained inside a <tr> tag. Table Attributes border it will put border across all the cells. Tables are just like spreadsheets and they are made up of rows and columns. for each cell we should give <TD> Used to define foot information of the table. they are <TABLE> <THEAD> <TH> <TBODY> <TR> <TD> <TFOOT> <CAPTION> Indicates start of a table Starts the header part of table. Background You can set background image for whole table or just for one cell. caption text is used to help text-based browsers interpret the table date. cellspacing You will use to adjust the white space in your table cell. You will create a table in HTML/XHTML by using <table> tag. columns and cells. Which stands for table data Any table is essentially made up of head.<LI>List item n </DIR> HTML Tables Tables are one of the important concepts while displaying information on web pages. inserts caption data directly above the table. and it should followed by <TH> Used to given table heading (column headers) Starts the main area of table. Inside <table> element the table is written out row by row. width and height You can set a table width and height . To insert caption in to table. Colspan if you want to merge two or more columns into a single column rowspan If you want to merge two or more rows. Which stands for table row and each cell is then written inside the row element using a <td> tag. This is another way of formatting text. Bgcolor You can set background color for whole table or just for one cell.

4. 5. There are two methods of sending of information. textarea etc. 2. 4.  Text input controls  Buttons  Checkboxes and radio buttons  Select boxes  File select boxes  Hidden controls  Submit and reset button P. which send the information along with the body of Html. HTML Forms use to get a users information. The <FORM> tag is used to create H TML forms. 5. when the user submits the form where it should go is given to ACTION parameter. other one GET. one is POST. There are several differences between POST method and GET method. </form> The <FORM> tag is used to create HTML forms. HTML Forms is a information tools to get information from the web surfer. No security. which may be web server. address. GET METHEOD Information sent along with URL. it is the first elements for specifying the form. <FORM> tag has several attributes and important among them is METHOD and ACTION. Data visible in site address. POST METHEOD Information sent along with body Data is visible while sending Provides security Can sent any number of characters Special characters are also possible 1. ASP Script or PHP script etc. it is the first elements for specifying the form. sends the data along with web page address that is appended to the URL. 3. Differences between Post Method and Get Method 1. Then your back-end application will do required processing on that data in whatever way you like. 3.HTML Forms is most important future in HTML. Only limited number of characters. its also say user is interactive with it. because password also sent like. 2. phone number etc. ACTION parameter indicates path to this script. End of the form is indicated by </FORM> tad. A form will take input from the site visitor and then will post your back-end application such as CGI.MallaReddy Page 13 . End of the form is indicated by Syntax <form name =”id” action="back-end script" method="posting method"> form elements like input. such as: name.MOTHED parameter specifies how the data entered in form is send to the destination. email address. Special character are not possible to sent. only for standard character There are different types of form controls that you can use to collect data from a visitor to your site.

 maxlength: Allows you to specify the maximum number of characters a user can enter into the text box.MallaReddy Page 14 . Syntax: <textarea rows="N" cols="N" name="description"> Enter description here.Text Input Controls: There are actually three types of text input used on forms:  Single-line text input controls: Used for items that require only one line of user input.  Password input controls: Single-line text input that mask the characters a user enters.. This is used in the name/value pair that is sent to the server.  cols: Indicates the number of columns of text area box. such as search boxes or names.  size: Allows you to specify the width of the text-input control in terms of characters. Syntax: <INPUT TYPE=”TEXT” NAME=”ID” VALUE=”INITIAL VILUE” SIZE=”N”> Following is the list of attributes for <input> tag.. Multi-line input controls are created with the <textarea> element. </textarea>  name: The name of the control.  Multi-line text input controls: Used when the user is required to give details that may be longer than a single sentence. They are created using the <input> element. you should create a multiple-line text input control using the <textarea> element.  type: Indicates the type of input control you want to create.  name: Used to give the name part of the name/value pair that is sent to the server. Password input controls: This is also a form of single-line text input controls are created using an <input> element whose type attribute has a value of password Syntax: <INPUT TYPE=”PASSWORD” NAME=”ID” > Multiple-Line Text Input Controls: If you want to allow a visitor to your site to enter more than one line of text.  value: Provides an initial value for the text input control that the user will see when the form loads. Single-line text input controls(textbox): Single-line text input controls are created using an <input> element whose type attributes has a value of text. representing each form control and the value the user entered.  rows: Indicates the number of rows of text area box. Buttons P.

Syntax: P.  reset: This creates a button that automatically resets form controls to their initial values.  value: Used to indicate the value that will be sent to the server if this option is selected. the type of button you create is specified using the type attribute. They are created using <input> tag as shown below: Syntax: <INPUT TYPE=”RAIDO” NAME=”ID” VALUE=”CAPTION” CHECKED> Following is the list of important radiobox attributes:  type: Indicates that you want to create a radiobox. Syntax: <INPUT TYPE =”CHECKBOX” NAME=”ID” VLAUE=”CAPTION” CHECKED> Following is the list of important checkbox attributes:  type: Indicates that you want to create a checkbox. Raido box Control: Radio Buttons are used when only one option is required to be selected. Select box Control: Drop Down Box is used when we have many options available to be selected but only one or two will be selected.  checked: Indicates that when the page loads.  name: Name of the control. More than one checkbox should share the same name only if you want to allow users to select several items from the same list. button: This creates a button that is used to trigger a client-side script when the user clicks that button Syntax: <INPUT TYPE=”BUTTON” NAME=”ID” VALUE=”CAPTION”> <INPUT TYPE=”SUBMIT” NAME=”ID” VALUE=”CAPTION”> <INPUT TYPE=”RESET” NAME=”ID” VALUE=”CAPTION”> Checkboxes Control: Checkboxes are used when more than one option is required to be selected. They are created using <input> tag as shown below. When you use the <input> element to create a button.  name: Name of the control. the checkbox should be selected.HTML to create clickable buttons. The type attribute can take the following values:  submit: This creates a button that automatically submits a form.  value: The value that will be used if the checkbox is selected.MallaReddy Page 15 <SELECT NAME =”ID” SIZE=”N” MULTIPLE > . You can create clickable button using <input> tag.  checked: Indicates that this option should be selected by default when the page loads.

If you define frames by using rows then horizontal frames are created. Creating Frames .  Some smaller devices cannot cope with frames. Each frame is then represented by a <frame> element. One of the key advantages that frames offer is that you can then load and reload single panes without having to reload the entire contents of the browser window.  The <frameset> tag defines how to divide the window into frames.MallaReddy Page 16 . first you need the <frameset> element. A collection of frames in the browser window is known as a frameset.  The browser's back button might not work as the user hopes.  Some time your page will be displayed differently on different computers due to different screen resolution. </OPTION> </SELECT> Following is the list of important attributes of <select>:  name: This is the name for the control. P. Frames Frames divide a browser window into several pieces or panes. </OPTION> <OPTION VLAUE=”ID” SELECTED > …. To create a frameset document. The simplest of framesets might just divide the screen into two rows.  size: This can be used to present a scrolling list box. each pane containing a separate XHTML/HTML document. often because their screen is not big enough to be divided up.  multiple: If set to "multiple" then allows a user to select multiple items from the menu.The <frameset> Element:  The <frameset> tag replaces the <body> element in frameset documents. while a complex frameset could use several rows and columns There are few drawbacks also you should be aware of with frames are as follows:  Some browsers do not print well from framesets. which in turn specify where each individual frame will go. which is used instead of the <body> element. Following is the list of important attributes of <option>:  value: The value that is sent to the server if this option is selected.  There are still few browsers who do not support farme technology. The window is divided up into frames in a similar pattern to the way tables are organized: into rows and columns. The frameset defines the rows and columns your page is divided into.  Each frameset defines a set of rows or columns.  selected: Specifies that this option should be the initially selected value when the page loads. If you define frames by using columns then vertical farmes are created.<OPTION VALUE=”ID” > ….

80%. For example to create three vertical frames. You can specify the height of each row in the same way as explained above for columns. It is used to indicate which frame a document should be loaded into. For example to create two horizontal frames. 90%".  Each farme is indicated by <frame> tag and it defines what HTML document to put into the frame. You can specify the absolute values in pixels. You can use relative widths of the browser window. *. Here the window is divided into sixths: the first column takes up half of the window.  name: attribute allows you to give a name to a frame. This is especially important when you want to create links in one frame that load pages into a second frame. <Frame> Element Attributes  src: indicates the file that should be used in the frame. use cols="10%. Frame's name and target attributes: P.  border: attribute specifies the width of the border of each frame in pixels.  Using a wildcard symbol. usecols="100. For example to create three vertical frames. The values of the rows/columns indicate the amount of screen area each row/column will occupy.10%".100". For example to create three vertical frames. This is an alternative to percentages. A value of zero specifies that no border should be there.  As relative widths of the browser window. Its value can be any URL. Syntax: <FRAMESET ROWS/COLS =”%. and the third takes one sixth. 500. %. in which case the second frame needs a name to identify itself as the target of the link. For example. In this case wildcard takes remainder of the window. use rows="10%. %.MallaReddy Page 17 . but it is used to specify the rows in the frameset.2*. For example to create three vertical frames.  rows: attribute works just like the cols attribute and can take the same values.htm" will load an HTML file avaible in html directory.10%". *”> <FRAME SRC=”URL” NAME=”ID”> <FRAME SRC=”URL” NAME=”ID”> </FRAMESET> <Frameset> Attributes:  cols: specifies how many columns are contained in the frameset and the size of each column.  A percentage of the browser window. the second takes one third. src="/html/top_frame. use cols="10%.1*". use cols="3*. For example border="5".

opening a new window. _top Loads the page into the browser window. _blank Loads a page into a new browser window. _parent Loads the page into the parent window.MallaReddy Page 18 . replacing any current frame Cascading Style Sheets (CSS) P.Value Description _self Loads the page into the current frame. which in the case of a single frameset is the main browser window.

Okay. Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented the World Wide Web. CSS was invented to remedy this situation by providing web designers with sophisticated layout opportunities supported by all browsers. and much more. and much more What is the difference between CSS and HTML? HTML is used to structure content. These are good enough to get a reasonable looking document that shows the true structure of information. But please continue reading. it sounds a bit technical and confusing. Advantages of CSS  CSS saves time When most of us first learn HTML. style etc P. the browser producers (at that time Netscape and Microsoft) invented new HTML tags such as for example <font> which differed from the original HTML tags by defining layout .and not structure. you can set font properties (size. exactly where an element will be on a page. Many new layout tags such as <blink> were only supported by one type of browser. we get taught to set the font face.What does CSS stand for? CSS stands for Cascading Style Sheets. border styles. size. background images. This also led to a situation where original structure tags such as <table> were increasingly being misused to layout pages instead of adding structure to text. Sure. separation of the presentation style of documents from the content of documents makes site maintenance a lot easier. However. designers started looking for possibilities to add layout to online documents. As the Web gained popularity. colors. To meet this demand. At the same time. what the page will look like when printed. it's a far cry from some of the excellent layout & design that we see in magazines and printed brochures etc. and you have control over alignment etc. you have much better control over the layout of your web pages. "You need browser X to view this page" became a common disclaimer on web sites. It will all make sense to you soon. These styles are set using CSS properties. What is CSS? CSS is a language that you can use to define styles against any HTML element. you have 6 different levels of headings and 6 different sizes of fonts. For example. An author could mark his text by stating "this is a headline" or "this is a paragraph" using HTML tags such as <h1>and <p>. style etc). color. You also have tables. With CSS. the language HTML was only used to add structure to text. CSS Advantages HTML has its limitations when it comes to layout. CSS is used for formatting structured content.MallaReddy Page 19 . You can specify exactly how big a font will be.

designers and users can create style sheets that define how different elements. copy our form as we have displayed below. CSS Code: <html> P. CSS will automatically apply the specified styles whenever that element occurs. Css is a new feature being added to HTML that gives both Web site developers and users more control over how pages are displayed. you only have to specify these details once for any element. such as headers and links. some browser manufacturers decide to come up with their own proprietary tags. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation (the look and formatting) of a document written in a markup language. CSS was developed by the W3C. These style sheets can then be applied to any Web page.  Superior styles to HTML CSS has a much wider array of attributes than HTML. color: white. Embedded styles/internal styles embedded styles are styles that are embedded in the head of the document. Instead. appear. Types of CSS Styles There are three types of CSS styles: Inline styles Inline styles are styles that are written directly in the tag on the document. every time it occurs on a page. Inline styles affect only the tag they are applied to. you only have to make an edit in one place.  Easy maintenance To change the style of an element. The term cascading derives from the fact that multiple style sheets can be applied to the same Web page. To confuse things more. Disadvantages of CSS Browser compatibility Browsers have varying levels of compliance with Style Sheets. If you use quotations the browser will interpret this as the end of your style value. With CSS. Pages load faster Less code means faster download times. With CSS. Embedded styles affect only the tags on the page they are embedded in.MallaReddy Page 20 . CSS Code: <p style="background: blue.">A new background and font color with inline CSS</p> When using CSS inline you must be sure not to use quotations within your inline CSS. This means that some Style Sheet features are supported and some aren't. This means we find ourselves typing (or copying & pasting) the same thing over and over again.

} body {background-color: black.css" /> Why use external css?  It keeps your website design and content separate.class-name { property:value.<head> <style type="text/css"> p {color: white.) followed by the class name. then assigning that class to the element. CSS Class In CSS. }  Place your CSS Code between <style> and </style>  Be sure you know the correct format(syntax) of CSS code. After the class name you simply enter the properties/values that you want to assign to your class.. External styles External styles are styles that are written in a separate document and then attached to various Web documents.  You can make drastic changes to your web pages with just a few changes in a single CSS file.MallaReddy Page 21 . Instead of typing the same CSS code on every web page you have. You make up the class name yourself.. . simply have many pages refer to a single CSS file with the "link" tag. classes allow you to apply a style to a given class of an element. you link the element to the style by declaring a style for the class.  CSS will literally save you hours of time. after you spend a few getting the hang of it. } Example P. CSS Class Syntax You declare a CSS class by using a dot (. To do this. } </style> </head> <body> <p>White text on a black background!</p> </body> </html> General CSS Format: "HTML tag" { "CSS Property" : "Value" . <link rel="stylesheet" type="text/css" href="styles. External style sheets can affect any document they are attached to.  It's much easier to reuse your CSS code if you have it in a separate file.

</p> CSS Properties CSS .second{ color: red.The id selector uses the id attribute of the HTML element. } p#exampleID2 { text-transform: uppercase..Font Properties The CSS font properties control all aspects of your text graphical representation. CSS ID Syntax The syntax for declaring a CSS ID is the same as for classes .first{ color: blue. you use a hash (#). and is defined with a "#". #id-name { property:value.second CSS code!</p> . } p.CSS Code: p.except that instead of using a dot.</p> <p class="first">This is a paragraph that uses the p. } Html Code <p id="ExampleID1">this paragraph has an ID name of “exampleID1" and has a white CSS defined background</p> <p id="ExampleID2">This paragraph has an ID name of “exampleID2" and has had its text transformed to uppercase letters.first CSS code!</p> <p class="second">This is a paragraph that uses the p. Here are all the font properties at your disposal:       font font-family font-size font-style font-weight font-variant P. From the thickness of your font (font-weight) to font type (font-family) of your choice.MallaReddy Page 22 .. } HTML Code: <html> <body> <p>This is a normal paragraph. unique element. The id Selector The id selector is used to specify a style for a single. } Example CSS Code p#exampleID1 { background-color: white.

decoration.Text Properties The CSS text properties control the spacing.MallaReddy Page 23 . bottom. and Padding all have four properties each: top. and other miscellaneous aspects of the text. Remember to check out our CSS Properties Reference for a description and example of all of the properties mentioned in this lesson. alignment. and left. Here is a list of all the CSS text properties.CSS .Box Properties The CSS box properties are used to define the spacing in and around HTML elements. Margin.         letter-spacing word-spacing text-decoration vertical-align text-transform text-align text-indent line-height CSS . Color CSS – Background Properties The CSS background properties control things like if the background is a single color or maybe an image.Color Properties The CSS color property defines what color the text inside the specified HTML element will have. and other positioning aspects. their borders. If it's an image you can set the position of the image and tell it whether or not you want the image to repeat left-to-right and/or top-to-bottom. Border. Use classes or identifiers to have multiple colors for one type of HTML element.       Background Background Color Background Image Background Repeat Background Attachment Background Position P.           Margin Padding Border Border-width Border-color Border-style Width Height Float Clear CSS . right.

Other scripting languages are server-side scripting languages that manipulate the data.UNIT -2(JAVA SCRIPTING) JAVA SCRIPTING Introduction to Scripting Scripting language is A high-level programming language that is interpreted by another program at runtime rather than compiled by the computer's processor as other programming languages (such as C and C++) are. Difference between Server side scripting and Client side scripting | Server side scripting vs. These types of languages are client-side scripting languages. commonly are used to add functionality to a Web page. Scripting languages.  Scripting language has event-handling capabilities. JavaScript. PHP. frames and browser interface. Java Scripting and JScripting are examples for client side Scripting and ASP.are example of server – side scripting Importance of scripting language or application:  To design computer programming enhance the functionality and appearance of web pages. P.  Scripting languages are Object based. Client side scripting  Server side scripting is used to create dynamic pages based a number of conditions when the users browser makes a request to the server. Tcl and Python are examples of scripting languages. Scripting languages came about largely because of the development of the Internet as a communications tool. ASP. such as different menu styles or graphic displays or to serve dynamic advertisements. because they can run only within a web page on a browser compatible with script languages.  Scripting languages are sectionalized programming languages that are inserted on the web page to control different elements of the page including elements. VB Scripting. JSP. which can be embedded within HTML. on the server. Scripting language are two kinds one is client-side scripting other one is server-side scripting general client side scripting is used for verifying simple validations at client side.  They limited power. Perl.Servlets etc.JSP. such as Internet Explorer  Scripting language modify the document’s content dynamically. usually in a database.MallaReddy Page 24 . affecting the data that the end user sees in a browser window.

 Server side scripting is used to connect to the databases that reside on the web server.  Response from a server-side script is slower as compared to a client-side script because the scripts are processed on the remote computer. Ruby. The syntax of the script tag <SCRIPT LANGUAGE=”Scripting language name”> -------------------<.  Client side scripting can’t access the file system that resides at the web server.  Examples of Server side scripting languages: PHP.Net.SCRIPT> LANGUAGE attribute is specifies the scripting language used in the script.  The Web Browser executes the client side scripting that resides at the user’s computer. etc .  The settings that belong to Web server can be accessed using Server side scripting. JSP. Perl n many more.  Client side scripting cannot be used to connect to the databases on the web server. VB script.  Client – Side scripts can be placed anywhere in the html text.  Response from a client-side script is faster as compared to a server-side script because the scripts are processed on the local computer.  Examples of Client side scripting languages: JavaScript.  Server side scripting can access the file system residing at the web server. The most common place for scripts is head section. the web browser either executes the code immediately or waits until the user performs some action.MallaReddy Page 25 .  The files and settings that are local at the user’s computer can be accessed using Client side scripting. • Depending on how the script is to be run. ASP.  Using a script tag in the header section is a good place to define all the subroutines.  The Web Server executes the server side scripting that produces the page to be sent to the browser. ASP. Introduction to JAVASCRIPT P. <SCRIPT TAG> Script tag is used to indicate the browser that the text that follows is part of a script. Running client – side scripts • Client side scripts are run by loading the web page in which they are embedded into a web browser that supports that scripting language. Client side scripting is used when the users browser already has all the code and the page is altered on the basis of the users input.

 Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have forgotten to enter something. One of the misconception about the javascript is. JavaScript is developed Netscape Navigator. which means less load on your server.  Java is full-featured programming language but JavaScript is not. The Object-based architecture allows JavaScript to interact with the properties of objects that it recognizes. only interpreted. Microsoft version of JavaScript is Jscript.MallaReddy Page 26 . If you add script to HTML page it is called dynamic page. This saves server traffic. JavaScript code not compiled.JavaScript is Object-based scripting language designed to enhance web pages that are constructed with html documents. interpreted programming language with object-oriented capabilities Advantages of JavaScript: The merits of using JavaScript are:  Less server interaction: You can validate user input before sending the page off to the server. Limitations with JavaScript:  Client-side JavaScript does not allow the reading or writing of files. which is having interactions with client and as well as validations can be added. This has been kept for security reason. it is developed by Sun Microsystems because it developed Java. Polymorphism. static web page where there is no specific interaction with the client other one is dynamic web page. Web pages are two kinds.  Inheritance. internal built-in object such as windows objects.  JavaScript cannot be used for networking applications because there is no such support available. JavaScript is a lightweight. Navigator objects. Simple HTML script is called static page.  Richer interfaces: You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors. Differences between JavaScript and Java  Java is object oriented programming language where as JavaScript is object-based programming language. Threads are not available in JavaScript. Netscape developed JavaScript.  Java Supports many kinds of data types.  Java source code is first compiled and the client interprets the code. JavaScript can’t distinguish between data types P.  JavaScript doesn't have any multithreading or multiprocessor capabilities.  Increased interactivity: You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.

which allows object references to be checked when the interpreted is actually running the program. not working etc. behavior means what action it can perform like walking on roads. World wide web”). Java uses a technique referred to as static binding. or docment. JavaScript Syntax A simple JavaScript program: <html> <head> <Title> Hello World </Title> </head> <body> <script language=“JavaScript”> document. fruit etc. other one is by using window. identity and behavior. there are two ways.  Labeled break and Labeled Continue available in both. color etc. JavaScript uses dynamic binging. Similarities between Java and JavaScript:  Both java and JavaScript having same kind of operators  JavaScript uses similar control structures of Java.MallaReddy Page 27 . working. finally state of object is what is present condition of car. whether it is standing. vehicle number.  Now a day’s both are used for on Internet. In JavaScript we are two Basic objects one is document and other one is window DOCUMENT OBJECT: To display some information on the screen. Almost all the programs of JavaScript uses Objects.alert( ) method that displays a message dialog box. compiler verifies before source code is being processes.. Object is a real world entity that means employee. For example if you have car as Object the identification of it is the company name.writeln(“ any message”). moving. An Object is having state.write(“any message”). write (“Hello.document.  Up to concept of objects and method both are similar. Syntax:. student. PROGRAM 1 Write a program that display textual messages using write( ) and writeln( ) <html> P.write( ) method which displayed directly on the browser. </script> </body> </html> Basic Objects in JavaScript JavaScript is Object based programming language. One is by using document.

MallaReddy Page 28 . Prompt Box A prompt box is often used if you want the user to input a value before entering a page. document.confirm("sometext"). the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK". When a confirm box pops up. document.write(“Alert messages” ). </script> </head> </html> WINDOW OBJECT The JavaScript windows objects one is alert box.write(“Form validation ”). When a JavaScript alert box is triggered. If the user clicks "OK" the box returns the input value. PROGRAM 2 Write a program to display a dialog box when you load web page. alert (“Hello World\t--.write(“<h1> JavaScript is include </h1>” ). P. the box returns true. the alert box is useful for alerting your users to something important.alert(“any measseg”).Java Script “). the box returns false. If the user clicks "Cancel" the box returns null. </script> </head> <Body> <h2> Press F5 function key or refresh to see aging </h2> </body> </html> Confirm Box A confirm box is often used if you want the user to verify or accept something. When a prompt box pops up. document. <html> <Head> <Title>Example for JavaScript Write Method </title> <script language=”javascript”> window.write(“explain about JavaScript” ). document.<Head> <title>Example for JavaScript Write Method </title> <script language=”javascript”> document. anther one is the prompt(). If the user clicks "Cancel". the user will have to click either "OK" or "Cancel" to proceed.writeln(“JavaScript is Object base language” ). window. a small box will pop up and display the text that you specify in your JavaScript code. Syntx: window.

//-. Here 4 and 5 are called operands and + is called operator. JavaScript language supports following type of operators.prompt("sometext".> </script> </head> DATA TYPES JavaScript supports the following data types  Number this Consists of numbers both integer and flotation-point. JAVASCRIPT MEMORY CONCEPTS Variable is a name location that store values into it. that is they are whole numbers and do not contain fractions. Every variable has a name.  Sting this Consists of text specified within single or quotes. JavaScript is type less language. float types.Syntax window.”Your name here”). Integer are numbers without any decimal portion. To declare a variable in JavaScript var keyword is used. a type and a value.  Boolean this of Boolean values true and false JavaScript supports Integer and Floating-Point values. Even though it not compulsion for declaration of a variable. integers."defaultvalue"). Example: <head> <script type="text/javascript"> <!-var retVal =prompt(“Enter Name:”. var x=”35” declares x as string and stores string 35 var y=35 declares y as integer and stores integer value 35. Only var keyword declares strings. alert(“You hava entered: “+ retVal). it is not having any predefined data type in it as in Java.  Arithmetic Operators  Relational Operators  Logical Operators  Assignment Operators  Conditional (or ternary) Operators Arithmetic Operators: P.  Null this is used to indicate that a variable is uninitialized. JAVASCRIPT OPERATORS What is an operator? Simple answer can be given using expression 4 + 5 is equal to 9. Integers can be negative and the maximum integer size is dependent on the operating system.MallaReddy Page 29 .

Logical Operators: JavaScript provides three kinds of logical operators. if values are not (A != B) is true. Checks if the value of left operand is less than or equal to the value of (A <= B) is true. Operator + * / % ++ -- Description Adds two operands Subtracts second operand from the first Multiply both operands Divide numerator by enumerator Modulus Operator and remainder of after an integer division Increment operator. right operand. decreases integer value by one Example A + B will give 30 A . >= <= Checks if the value of left operand is greater than or equal to the value of (A >= B) is not right operand. Logical And is same AND operation of two Boolean values. condition becomes true.MallaReddy Page 30 . > < Checks if the value of left operand is greater than the value of right (A > B) is not operand. one logical AND (&&) . if yes then (A == B) is not condition becomes true. if yes then condition becomes true. true.Its take numerical values as their operands and return single numerical value. Checks if the values of two operands are equal or not. Checks if the value of left operand is less than the value of right (A < B) is true. if yes then condition becomes true.B will give -10 A * B will give 200 B / A will give 2 B % A will give 0 A++ will give 11 A-. true. Assume variable A holds 10 and variable B holds 20 then: Operator == != Description Example Checks if the values of two operands are equal or not. if yes then condition becomes true.will give 9 Relational Operators A relation operator compares its operands and returns a logical value based on whether the comparison is true or not. operand. P. The operands may be numerical or string values. the comparison is based the lexicographical order. second one is logical OR ( | | ) and third one is logical Not ( ! ). equal then condition becomes true. true. If both the operands are non zero then then (A && B) is true. Assume variable A holds 10 and variable B holds 20 then: Operator && Description Example Called Logical AND operator. increases integer value by one Decrement operator. When used on string. if yes then condition becomes true.

second one is truth result and third one is false result. It takes modulus C %= A is equivalent to C = C using two operands and assign the result to left operand %A Conditional (or ternary) Operators: JavaScript provide conditional operator ( ? : ) which is used for comparing two expressions. Use to reverses the logical state of its !(A && B) is false. It multiplies right C *= A is equivalent to C = C * operand with the left operand and assign the result to A left operand /= Divide AND assignment operator. Ex: k=5  assigning constant 15 to variable k K= a + s * 12  given expression is assigned to k JavaScript allows other kind of assignment operator which is called abbreviated assignment expression. First kind is normal equal operator. It takes three arguments. ! Called Logical NOT Operator. Assignment Operators: JavaScript provides two kinds of assignment operators.|| Called Logical OR Operator.MallaReddy Page 31 . It adds right operand to C += A is equivalent to C = C + the left operand and assign the result to left operand A Subtract AND assignment operator. Ex: k + = 3 (k = k + 3) Operator = += -= Description Example Simple assignment operator. It subtracts right C -= A is equivalent to C = C - operand from the left operand and assign the result to A left operand *= Multiply AND assignment operator. operand. If a condition is true then Logical NOT operator will make false. It assign the given variable or constant or expression assigned for given variable. then then condition becomes true. Assigns values from right C = A + B will assigne value of side operands to left side operand A + B into C Add AND assignment operator. Ex: s = (a > b)? a : b P. this first evaluates an expression for a true or false value and then execute one of the two given statements depending upon the result of the evaluation. It divides left C /= A is equivalent to C = C / operand with the right operand and assign the result to A left operand %= Modulus AND assignment operator. one is condition. Syntax: variable = condition ? truth value: false value. If any of the two operands are non zero (A || B) is true.

assigning a new value. These distinct groups of statements include  Conditional Statements  Loop Statements  Object Manipulation Statements  Comment Statements  Exception Handling Statements Conditional Statements Conditional statements are used to control your scripts so that different actions can be taken depending on the situation.MallaReddy Page 32 .else statement .use this statement to select one of many blocks of code to be executed  switch statement ... P.use this statement to execute some code only if a specified condition is true  if.use this statement to select one of many blocks of code to be executed If Statement The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally.. you want to perform different actions for different decisions. You may want to display a special image on your home page during the holidays. We will provide a brief overview of each of these categories in this lesson and cover them in greater detail later in the tutorial. Syntax if (condition) { Statement(s) to be executed if expression is true } Example : If(time>=20) X=”Good Day”.. You can use conditional statements in your code to do this. Very often when you write code. In JavaScript we have the following conditional statements:  if statement .. there are groups of statements that are distinct in their purpose. or calling a function.JavaScript Statements: In addition to standard statements like changing a variable's value. This condition would depend on what day it was..else statement . and if it was a holiday.else if. then a special holiday image would be displayed to your visitors.use this statement to execute some code if the condition is true and another code if the condition is false  if..

.if.. Syntax: if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if neither condition1 nor condition2 is true } Examlpe: var book = "maths".write("<b>Does not qualify for driving</b>").write("<b>Qualifies for driving</b>").... } if. Syntax if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true } Example: var age = 15..else if. if( age > 18 ){ document.. statement is the one level advance form of control statement that allows JavaScript to make correct decision out of several conditions.. statement: The if..MallaReddy Page 33 .else if..else statement: Use the if..else statement to execute some code if a condition is true and another code if the condition is not true.. }else{ document.. if( book == "history" ){ P.

case 5: x="Today it's Friday". break. break. }else if( book == "maths" ){ document.write("<b>History Book</b>"). switch (day) { case 0: x="Today it's Sunday". case 3: x="Today it's Wednesday". adefault condition will be used. break. case condition 2: statement (s) Break. }else{ document. switch (expression) { case condition 1: statement (s) Break.write("<b>Economics Book</b>"). } This is how it works: First we have a single expression n (most often a variable). case 1: x="Today it's Monday".. case 4: x="Today it's Thursday". break. If there is a match.write("<b>Maths Book</b>").MallaReddy Page 34 break.write("<b>Unknown Book</b>"). to perform a multiway branch.else if statements. break. this is not always the best solution. case condition n: statement (s) Break.document. that is evaluated once. P.getDay(). Syntax: The basic syntax of the switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. case 2: x="Today it's Tuesday".. }else if( book == "economics" ){ document. the block of code associated with that case is executed. However. The value of the expression is then compared with the values for each case in the structure. Example: var day=new Date(). default: statement(s). If nothing matches. Use break to prevent the code from running into the next case automatically. Switch Case statement You can use multiple if. especially when all of the branches depend on the value of a single variable. case 6: . The interpreter checks each case against the value of the expression until a match is found.

. The do. even if the condition is false. the loop stops and the rest of the code continue along.while loop is similar to the while loop except that the condition check happens at the end of the loop.. Once expression becomes false. Example: do { x=x+1. and if that condition is true. P. x++.. The while Loop The most basic loop in JavaScript is the while loop which would be discussed in this tutorial.x="Today it's Saturday". it executes a chunk of code. Syntax: while(condition) { Code block to be executed } Example: while(x<15) { y=y+x. the process starts over again. Syntax: do { Code block to be executed } while(condition). If it is true. This means that the loop will always be executed at least once. i++. the loop will be exited..MallaReddy Page 35 . the condition is checked again.while Loop: The do. After the code is executed. } Loop Statements A loop statement checks to see if some condition is true. } The purpose of a while loop is to execute a statement or code block repeatedly as long asexpression is true. break. if it is false.

i<10.MallaReddy Page 36 . The for Loop The for loop is the most compact form of looping and includes the following three important parts:  The loop initialization where we initialize our counter to a starting value. If condition is true then code given inside the loop will be executed otherwise loop will come out.  The iteration statement where you can increase or decrease your counter. test condition. Syntax: for(variable name in object) { statement or block to execute } In each iteration one property from object is assigned to variablename and this loop continues till all the properties of the object are exhausted.lname:"Doe".} while(i<15). } The For/In Loop The JavaScript for/in statement loops through the properties of an object: There is one more loop supported by JavaScript.i++) { doument.. It is called for. Syntax: for(initialization.write(“I value is “+i). You can put all the three parts in a single line separated by a semicolon. for (x in person) { P. This loop is used to loop through an object's properties.  The test statement which will test if the given condition is true or not. Example: var person={fname:"John".in loop..age:25}. The initialization statement is executed before the loop begins. iteration statement) { Statement(s) to be executed if test condition is true } Example: For(i=0.

Example document. } x=x + "The number is " + i + "<br>". is used to exit a loop early. breaking out of the enclosing curly braces.txt=txt + person[x]. Example for (i=0. which was briefly introduced with the switch statement.i<=10. program flow will move to the loop check expression immediately and if condition remain true then it start next iteration otherwise control comes out of the loop.A label is simply an identifier followed by a colon that is applied to a statement or block of code. } The continue Statement: The continue statement tells the interpreter to immediately start the next iteration of the loop and skip remaining code block. Example for (i=0.i++) { if (i==3) continue. We will see two different examples to understand label with break and continue. } Labels break and continue a label can be used with break and continue to control the flow more precisely.write("Entering the loop!<br /> "). Note: Line breaks are not allowed between the continue or break statement and its label name.i<10. there should not be any other statement in between a label name and associated loop.MallaReddy Page 37 . i < 5. Also. x=x + "The number is " + i + "<br>". outerloop: // This is the label name for (var i = 0. } The break Statement: The break statement. When a continue statement is encountered.i++) { if (i==3) { break. i++) { P.

There are two main categories of functions you will be using in JavaScript: those that have already been created for you and those you create in your code.write("Innerloop: " + j + " <br />"). j < 5. Avoid repeating code in a program: When you repeating certain code several times then no need to write again and again just you can combine the repeated instruction in to a function and you can call that function where ever the repeated code is required.and – conquer approach: this less your code to be more manageable.document. Software Reusability: you can build independent methods or function or packages that can be used in other program. // Quit the outer loop document. Divide . you can verify independently the function. Functions are two kinds. JavaScript Functions A function is an assignment that JavaScript can take care of for you. you can then place in comments for yourself. // Quit the innermost loop if (i == 2) break innerloop.write("Outerloop: " + i + "<br />"). 3.MallaReddy Page 38 . innerloop: for (var j = 0. then you can combine them. By disallowing the block of text from being be read. 2. The single line comment is just two slashes (//) and the multiple line comment starts with (/*) and ends with (*/). j++) { if (j > 3 ) break . It is a technique used to isolate a group of instructional code so that other parts of the application can depend on it to provide them with a reliable result.write("Exiting the loop!<br /> "). } } document. much like HTML comments. You can also block out segments of your code for whatever reason you may have. Why would you want to do this? There are many reasons. which are called as built-in function. one is user-defined functions or programmer functions and other one is library function Library function:In many programming languages there are library functions. // Do the same thing if (i == 4) continue outerloop. We will talk about comments in greater depth in a later lesson. Advantages for functions 1. These functions are supplied along with language by the vendors. JavaScript also P. so software reusability. Comment Statements Comment statements are used to prevent the browser from executing certain parts of code that you designate as non-code.

In JavaScript we have object-based method and as well as library functions which are not required any object reference. User-Defined Function: javascript allows user to define their function with the help of these function programmers can divide a large program into small function. It lets the browser know that you are creating a function. Function in JavaScript To create a function. Function Parameters: Till now we have seen function without a parameters. parentheses. This statement should be the last statement in a function. followed by an opening curly bracket “{“ and ending with a closing curly bracket “}”. type the function keyword followed by a name for the function. then a closing. digits. But there is a facility to pass different parameters while calling a function. Note: We are using + operator to concatenate string and number all together. and underscores in any combination  Cannot contain space  Cannot contain special characters Calling a Function: To invoke a function somewhere later in the script. followed by an opening. This is required if you want to return a value from a function. The name of the function:  Must start with a letter or an underscore  Can contain letters. Here is the syntax for creating a function: function functionname(parameter-list) { Statement } The function keyword is required. Function name(). The return Statement: A JavaScript function can have an optional return statement. JavaScript does not mind in adding numbers into strings.have those kind of function.MallaReddy Page 39 . P. These are called as JavaScript global functions. you would simple need to write the name of that function. These passed parameters can be captured inside the function and any manipulation can be done over those parameters.

which can hold more than one value at a time. Create Allocating and Initializing an Array JavaScript provides facilities to declare and allocating memory for array by using new operator. var numbers=new Array[12. Statement can be used. memory allocation and initialization is also done. However. 2)Two-dimensional or Double –Subscripted array.What is an Array? An array is a special variable.67. whish having state. var numbers =new Array(10). Only for declaration var numbers.78. and identity givens unique identification for object. Single dimensional Array: Only one subscripted array Example var numbers =new Array(15). State of an object represents what is its current state.34.MallaReddy Page 40 . var car3="BMW". or Two-dimensional Array: If we have two subscripts it is called as two –dimensional array Example var numbers =new Array [3][3] It more than one subscripts is given for arrays is called as multiple Objects in Java Script Object is an entity. var car2="Volvo". At a time declaration.56.45. Operator new is known as dynamic memory allocating operator. behavior and identity. P. and you can access the values by referring to an index number. If you have a list of items (a list of car names. An array can hold many values under a single name.89. this is used for declare and allocating memory locations.23. what if you want to loop through the cars and find a specific one? And what if you had not 3 cars. but 300? The solution is an array!. 3)Multiple Subscripted Array.90]. for example). Array are three type 1)Single dimensional Array. To allocate memory then Numbers=new Array (10). behavior indicates what actions can be performed with that object. storing the cars in single variables could look like this: var car1="Saab".

write("SQRT2: " + Math.E). 3. 0.SQRT2). mainly to get current date and time.707) SQRT2 Returns the square root of 2 (approx.JavaScript has several built-in or native objects. 0. 2. Math is not a constructor.414) Example: <script type="text/javascript"> document. Math Object Properties Property E Description Returns Euler's number (approx. These objects are accessible anywhere in your program and will work the same way in any browser running in any operating system. All properties and methods of Math are static and can be called by using Math as an object without creating it. String String manipulation can be done and also include to generate HTML markup Date Array methods. Name of Object Purpose of the Object Document To get complete control on document along with display content.write("Euler's number: " + Math. Math Object: The math object provides you properties and methods for mathematical constants and functions. Window To get dialog control and provision for accepting data from user. 1. For date manipulation. There are several objects in JavaScript programming language.302) LOG2E Returns the base-2 logarithm of E (approx. 0.442) LOG10E Returns the base-10 logarithm of E (approx. Math Used for mathematical functions and standard constants in mathematics. 2. document.693) LN10 Returns the natural logarithm of 10 (approx.14159) SQRT1_2 Returns the square root of 1/2 (approx. </script> P.MallaReddy Page 41 .718) LN2 Returns the natural logarithm of 2 (approx. Global Global object that stores some predefined global functions.434) PI Returns PI (approx. Number To get number constants. 1. Boolean Wrapper class for Boolean type. The Array object let's you store multiple values in a single variable.

.acos(1) + "<br />").acos(0) + "<br />").write(Math. document.acos(-1) + "<br />"). document..y.abs(7.25) + "<br />").acos(2)).n) Returns the number with the highest value min(x. document. document.64) + "<br />").. </script> String Objects P.write(Math. rounded downwards to the nearest integer log(x) Returns the natural logarithm (base E) of x max(x. document. rounded upwards to the nearest integer cos(x) Returns the cosine of x (x is in radians) exp(x) Returns the value of Ex floor(x) Returns x. document.write(Math.abs(null) + "<br />").. in radians asin(x) Returns the arcsine of x..abs(-7.25-10)).write(Math.z. document.write(Math.abs(7..abs("Hello") + "<br />"). document...y) Returns the value of x to the power of y random() Returns a random number between 0 and 1 round(x) Rounds x to the nearest integer sin(x) Returns the sine of x (x is in radians) sqrt(x) Returns the square root of x tan(x) Returns the tangent of an angle Example: <script type="text/javascript"> document.x) Returns the arctangent of the quotient of its arguments ceil(x) Returns x.y.write(Math.acos(0.write(Math.25) + "<br />"). document.Math Object Methods Method Description abs(x) Returns the absolute value of x acos(x) Returns the arccosine of x.MallaReddy Page 42 .z.n) Returns the number with the lowest value pow(x.write(Math.write(Math.write(Math. in radians atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians atan2(y.

such as extracting a substring. and replaces the matched substring with a new substring search() Searches for a match between a regular expression and a string. searching for the occurrence of a certain character within it etc String Object Properties length Returns the length of a string String Object Methods Method Description charAt() Returns the character at the specified index charCodeAt() Returns the Unicode of the character at the specified index concat() Joins two or more strings. and through the specified number of character substring() Extracts the characters from a string. beginning at a specified start position. and returns the position of the match slice() Extracts a part of a string and returns a new string split() Splits a string into an array of substrings substr() Extracts the characters from a string.MallaReddy Page 43 . between two specified indices toLowerCase() Converts a string to lowercase letters toUpperCase() Converts a string to uppercase letters valueOf() Returns the primitive value of a String object Example: P.The String object of JavaScript allows you to perform manipulations on a stored piece of text. and returns the matches replace() Searches for a match between a substring (or regular expression) and a string. and returns a copy of the joined strings fromCharCode() Converts Unicode values to characters indexOf() Returns the position of the first found occurrence of a specified value in a string lastIndexOf() Returns the position of the last found occurrence of a specified value in a string match() Searches for a match between a regular expression and a string.

// extract from the end of the string.slice(6.lastIndexOf("world")).slice(0. var patt1=/ain/gi.match(patt1)). document.write("First character: " + str.search("Google")). document.substring(3)+"<br />"). var str = "Hello world!". document. start at position 6: document.MallaReddy Page 44 .slice(-6)+"<br />"). var str="Hello world!".write(str.<script type="text/javascript"> var str = "Hello world!". </script> String HTML Wrapper Methods The HTML wrapper methods return the string wrapped inside the appropriate HTML tag.write(str. start at position 0: document.charCodeAt(str. // extract the characters from position 6 to position 11: document.11)+"<br />").slice(6)+"<br />").write("First character: " + str. document.7)).charAt(str. var str="Visit Microsoft!". document.write(str. // extract all characters. document.length-1)).charAt(0) + "<br />"). and to position -6: document. document.write("Last character: " + str.write("Last character: " + str. var str="The rain in SPAIN stays mainly in the plain".lastIndexOf("WORLD") + "<br />").write(str.write(str.slice(0)+"<br />"). // extract only the first character: document. document. document.write(str. var str="Hello world!".write(str.substring(3. // extract all characters.length-1)).lastIndexOf("d") + "<br />"). var str="Hello happy world!".1)+"<br />"). "Google")) var str="Visit Google!".replace("Microsoft".charCodeAt(0) + "<br />"). document.write(str.write(str.write(str.write(str. document.write(str. Method Description anchor() Creates an anchor big() Displays a string using a big font blink() Displays a blinking string bold() Displays a string in bold fixed() Displays a string using a fixed-pitch font fontcolor() Displays a string using a specified color fontsize() Displays a string using a specified size italics() Displays a string in italic link() Displays a string as a hyperlink P. document.write(str.

Use the setFullYear() method instead .write(str. 1970 Deprecated. document. Method getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getYear() setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setYear() Example: P. alert(txt.small() Displays a string using a small font strike() Displays a string with a strikethrough sub() Displays a string as subscript text sup() Displays a string as superscript text Example: <script type="text/javascript"> var txt = "Chapter 10". document. var str = "Hello world!".com")). txt.anchor("myanchor")).big()).write(str. Use the getFullYear() method instead Sets the day of the month (from 1-31) Sets the year (four digits) Sets the hour (from 0-23) Sets the milliseconds (from 0-999) Set the minutes (from 0-59) Sets the month (from 0-11) Sets the seconds (from 0-59) Sets a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1.write(str. document. document.google. Date objects are created with the new Date( ) and times.link("http://www.bold()). 1970 Deprecated.anchor("chap10").write(str.fontcolor("green")). </script> Date Objects The Date object is a datatype built into the JavaScript language.MallaReddy Page 45 Description Returns the day of the month (from 1-31) Returns the day of the week (from 0-6) Returns the year (four digits) Returns the hour (from 0-23) Returns the milliseconds (from 0-999) Returns the minutes (from 0-59) Returns the month (from 0-11) Returns the seconds (from 0-59) Returns the number of milliseconds since midnight Jan 1.

d.write(d).write(d. document.getDate()). Method Description concat() Joins two or more arrays.setFullYear(2020). and returns the new array sort() Sorts the elements of an array splice() Adds/Removes elements from an array toString() Converts an array to a string. and returns a copy of the joined arrays join() Joins all elements of an array into a string pop() Removes the last element of an array.getMonth()). document.getHours()). var d=new Date().valueOf()).<script type="text/javascript"> var d = new Date(). var d = new Date(). d. document.write(d). document.getDay()). document. and returns that element push() Adds new elements to the end of an array. document. document.write(d. document.write(d.write(d. document. and returns the result unshift() Adds new elements to the beginning of an array. document. document. and returns that element slice() Selects a part of an array. d.write(d).setHours(15). and returns the new length valueOf() Returns the primitive value of an array Example: P.write(d). d.write(d).write(d. </script> Array Objects The Array object let's you store multiple values in a single variable.getFullYear()).getTime() + " milliseconds since 1970/01/01").setDate(15).setTime(77771564221).MallaReddy Page 46 . and returns the new length reverse() Reverses the order of the elements in an array shift() Removes the first element of an array. d.write(d.write(d. var d = new Date(). document.setMonth(0).

write(fruits. document. </script> Number Object The Number object is an object wrapper for primitive numeric values.write(fruits.write(fruits. var fruits = ["Banana".join("+") + "<br />").slice(0.write(family).reverse())."Lemon") + "<br />").write(fruits."Pineapple") + "<br />").1) + "<br />"). "Mango"]. document.unshift("Lemon". document.slice(1) + "<br />").valueOf()).slice(-2) + "<br />").write(fruits. document.join(" and ")). Number Object Properties Property Description MAX_VALUE Returns the largest number possible in JavaScript MIN_VALUE Returns the smallest number possible in JavaScript NEGATIVE_INFINITY Represents negative infinity (returned on overflow) POSITIVE_INFINITY Represents infinity (returned on overflow) Number Object Methods Methods Description toExponential(x) Converts a number into an exponential notation toFixed(x) Formats a number with x numbers of digits after the decimal point toPrecision(x) Formats a number to x length P. document. document.push("Lemon".write(fruits.write(fruits.write(fruits).write("Added: " + fruits. document. "Tove"]. document. var family = parents. document.write(fruits. document.write(fruits + "<br />").write(fruits.0. document. document. "Orange".splice(2.shift() + "<br />").write(fruits. var children = ["Cecilie".<script type="text/javascript"> var parents = ["Jani".write(fruits.Number objects are created with new Number(). document.push("Kiwi") + "<br />").write(fruits).MallaReddy Page 47 .write(fruits).pop() + "<br />").unshift("Kiwi") + "<br />"). document. "Apple". document. "Lone"].write(fruits. document.write(fruits.concat(children). document.write(fruits."Pineapple") + "<br />"). document. document. document.join() + "<br />"). document.write(fruits).

document.toFixed(1)+"<br />").MallaReddy Page 48 . document.3714). document.write(bool. document. var num = new Number(13.toString(16)+"<br />"). document. document.write(num. document.write(num.toPrecision()+"<br />").write(num. var num=new Number(15). document. document.valueOf()).toPrecision(2)+"<br />").toString()+"<br />").toExponential(2)+"<br />"). </script> Boolean Object The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).toString(2)+"<br />").toFixed(3)+"<br />").toPrecision(3)+"<br />").toFixed(10)). var num=new Number(15).toString() Converts a Number object to a string valueOf() Returns the primitive value of a Number object Example: <script type="text/javascript"> var num = new Number(13.write(num. document.toExponential(10)).write(num.write(num. Method Description toString() Converts a Boolean value to a string.write(num. document.write(num. document. document.write(num. document. and returns the result valueOf() Returns the primitive value of a Boolean object Example: <script type="text/javascript"> var bool = new Boolean(1).3714).toExponential(3)+"<br />").write(num.write(num.toPrecision(10)).write(num. document.toExponential()+"<br />").write(num. var num = new Number(13.toFixed()+"<br />").write(num. document.write(num.toString(8)+"<br />"). document.write(num. P. document.3714).toString()).write(num.

var bool = new Boolean(0). document. document.write(isFinite(123)+ "<br />"). document.write(isFinite(-1. P.write(escape("Need tips? Visit W3Schools!")).write(isFinite(5-2)+ "<br />"). document.MallaReddy Page 49 . document.23)+ "<br />"). eval("x=10.write(x*y)"). </script> JavaScript Global Objects and Properties The JavaScript global properties and functions can be used with all the built-in JavaScript objects . document. document.document.valueOf()). document.y=20. Global Properties Property Infinity NaN undefined Description A numeric value that represents positive/negative infinity "Not-a-Number" value Indicates that a variable has not been assigned a value Global Objects Method decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() isFinite() isNaN() Number() parseFloat() parseInt() String() unescape() Description Decodes a URI Decodes a URI component Encodes a URI Encodes a URI component Encodes a string Evaluates a string and executes it as if it was script code Determines whether a value is a finite. legal number Determines whether a value is an illegal number Converts an object's value to a number Parses a string and returns a floating point number Parses a string and returns an integer Converts an object's value to a string Decodes an encoded string Example: <script type="text/javascript"> document.write(bool.write(isFinite("2005/12/12")+ "<br />"). document.write("<br />" + eval(x+17)).write(isFinite(0)+ "<br />").write("<br />" + eval("2+2")).write(isFinite("Hello")+ "<br />").

document. Boolean(false). />"). var str="Need tips? Visit W3Schools!".write(isNaN(-1.write(isNaN(5-2)+ "<br />"). document.write(Number(test3)+ document.write(Number(test2)+ document.23)+ "<br />").write(isNaN(123)+ "<br />").write(isNaN("Hello")+ "<br />"). document.write(str_esc + "<br />") document. String("999"). />").write(isNaN("2005/12/12")+ "<br />"). var str_esc=escape(str). document.var var var var var test1= test2= test3= test4= test5= new new new new new Boolean(true). Date().write(Number(test1)+ document.write(Number(test5)+ "<br "<br "<br "<br "<br />"). document. />").write(unescape(str_esc)) </script> P. document.write(Number(test4)+ document.write(isNaN(0)+ "<br />"). document.MallaReddy Page 50 . />"). String("999 888"). document.

Dynamic HTML with Java Script P.MallaReddy Page 51 .