Internet Principles and Components, Client-Side Programming

Dept of CSE | III YEAR | VI SEMESTER CS T63 | WEB TECHNOLOGY | UNIT 1
1 |Prepared By : Mr. PRABU.U/AP |Dept. of Computer Science and Engineering | SKCET |
UNIT I
Internet Principles and Components: History of the Internet and World Wide Web –
HTML - Protocols – HTTP, SMTP, POP3, MIME, and IMAP. Domain Name Server, Web
Browsers and Web Servers. HTML- Style Sheets- CSS- Introduction to Cascading Style
Sheets-Rule- Features- Selectors- Attributes.
Client-Side Programming: The JavaScript Language- JavaScript in Perspective-Syntax-
Variables and Data Types- Statements- Operators- Literals- Functions- Objects- Arrays-
Built-in Objects- JavaScript Debuggers and Regular Expression.
INTERNET PRINCIPLES AND COMPONENTS
1.1 HISTORY OF INTERNET
Internet
 A network of networks, joining many government, university and private
computers together and providing an infrastructure for the use of E-mail, file
archives, hypertext documents, databases and other computational resources.
 It is an information distribution system spanning several continents.
 Interchange of information takes place rapidly and is inexpensive.
1. The Internet Terminology
i) Academic Internet
ii) Business Internet
2. A Brief History
i) In the mid-1960s
ii) In 1967
iii) By 1969
iv) In 1972
v) In 1973
vi) In 1978
3. Six Stages of Internet Growth
i) First Stage - Experimental Networking
ii) Second Stage- Discipline Specific Research
iii) Third Stage - General research networking (1985-1991)
iv) Fourth Stage - Privatization and Commercialization (1991)
v) Fifth Stage
vi) Sixth Stage - National Information Infrastructure
4. Internet Service Provider (ISP)
i) International Internet Service Providers
ii) National Internet Service Providers
iii) Regional Internet Service Providers
iv) Local Internet Service Providers

Origin/Motivation of Internet
The motivation behind the creation of the Internet were twofold:
1. Researchers wanted to communicate with each other and share their research
papers and documents.
2. The U.S military system wanted a strong communications infrastructure to
withstand any nuclear attack by the erstwhile Soviet Union.
Applications include
 E-Commerce and E-mail
 EDI (Electronic Data Interchange)
 Information Publishing
 Information retrieval
 Video Conferencing
1.1.1 The Internet Terminology
 The internet is mesh that is interconnected network linking approximately 4
million computers worldwide.
 The interconnected computers include stand-alone computers.
 LAN is characterized by its small geographic location which allows resource
sharing and workgroup interaction within a single building.
 MAN is used to be a BIG LANs, LANs are interconnected using devices called
bridges.
Internet classification are
 All the host computers communicate through TCP/IP.
 Consists of various government network, regional networks, campus networks,
and some international networks.
 The host computers communicate through a variety of languages other than
TCP/IP such as ISO/OSI x.25.
 Consists of on-line services, value-added networks, and other e-mail only
services.
1.1.2 A Brief History
 A network is a group of connected communicating devices such as computers
and printers. An internet (note the lowercase letter i) is two or more networks
that can communicate with each other.
 The most notable internet is called the Internet (uppercase letter I), a
collaboration of more than hundreds of thousands of interconnected networks.
i) In the mid-1960s
 The mainframe computers in research organizations were standalone devices.
Computers from different manufacturers were unable to communicate with one
another.
 The Advanced Research Projects Agency (ARPA) in the Department of Defense
(DoD) was interested in finding a way to connect computers so that the

researchers they funded could share their findings, thereby reducing costs and
eliminating duplication of effort.
ii) In 1967
 In 1967, at an Association for Computing Machinery (ACM) meeting, ARPA
presented its ideas for ARPANET, a small network of connected computers.
 The idea was that each host computer (not necessarily from the same
manufacturer) would be attached to a specialized computer, called an interface
message processor (IMP).
 The IMPs, in turn, would be connected to one another. Each IMP had to be able to
communicate with other IMPs as well as with its own attached host.
iii) By 1969
By 1969, ARPANET was a reality. Four nodes, at
1. The University of California at Los Angeles (UCLA),
2. The University of California at Santa Barbara (UCSB),
3. Stanford Research Institute (SRI), and
4. The University of Utah,
were connected via the IMPs to form a network. Software called the Network Control
Protocol (NCP) provided communication between the hosts.
iv) In 1972
In 1972, Vint Cerf and Bob Kahn, both of whom were part of the core ARPANET
group, collaborated on what they called the Internetting Project.
v) In 1973
Cerf and Kahn's landmark 1973 paper outlined the protocols to achieve end-to-
end delivery of packets. This paper on Transmission Control Protocol (TCP) included
concepts such as encapsulation, the datagram, and the functions of a gateway.
vi) In 1978
The authorities made a decision to split TCP into two protocols:
 Transmission Control Protocol (TCP) and Internetworking Protocol (lP).
 IP would handle datagram routing while TCP would be responsible for higher-
level functions such as segmentation, reassembly, and error detection.
 The internetworking protocol became known as TCP/IP.
1.1.3 Six Stages of Internet Growth
i) First Stage - Experimental Networking
It is a small technical community
ii) Second Stage- Discipline Specific Research
It is used to build international on-line communities, CSNET linked computer
researchers from all over the world.
iii) Third Stage - General research networking (1985-1991)
National Science Foundation Network (NSFNET), its growth is in the mid of
1980's used to exchange of information and access remote resources.
iv) Fourth Stage - Privatization and Commercialization (1991)
This involves remaining government subsidies to regional networks and
dismantling the carriers.
v) Fifth Stage
Parallel to this High Performance Computing and Communications(HPCC). This
is an R and D program. Programs linked to fundamental research.

vi) Sixth Stage - National Information Infrastructure
The main aim is to extend networking everywhere and enable new consumer
application.
1.1.4 Internet Service Provider (ISP)
 An ISP is an organization that provides individuals and other companies access
to the Internet and other related services such as Web Site building and virtual
hosting.
 There are international service providers, national service providers, regional
service providers, and local service providers.
i) International Internet Service Providers
At the top of the hierarchy are the international service providers that connect
nations together.
ii) National Internet Service Providers
 The national Internet service providers are backbone networks created and
maintained by specialized companies.
 There are many national ISPs operating in North America; some of the most well
known are SprintLink, PSINet, UUNet Technology, AGIS, and internet Mel.
 Some national ISP networks are also connected to one another by private
switching stations called peering points.
 These normally operate at a high data rate (up to 600 Mbps).
iii) Regional Internet Service Providers
Regional internet service providers or regional ISPs are smaller ISPs that are
connected to one or more national ISPs. They are at the third level of the hierarchy with
a smaller data rate.
iv) Local Internet Service Providers
Local Internet service providers provide direct service to the end users. The local
ISPs can be connected to regional ISPs or directly to national ISPs. Most end users are
connected to the local ISPs.
1.2 HISTORY OF THE WORLD WIDE WEB
World Wide Web
 The WWW allows computer users to locate and view multimedia-based
documents (ie., document with text, graphics, animations, audios or videos) on
almost any subject.
 The WWW is an application that runs on the internet and is one of the most
popular of all the Internet applications.
Intention of WWW
The WWW was first developed with a simple intention; to enable document sharing
between researchers and scientists who were located at physically different places.
In 1990s
In 1990s, Tim Berners-Lee at the Conseil European pour la Research Nucleaire
(CERN), now known as the European Organization for Nuclear Research developed the
World Wide Web and several communication protocols that form the backbone of the
web.

In 1993
 The use of the Web "exploded" with the availability in 1993 of the Mosaic
browser, which featured a user-friendly graphical interface.
 Marc Andreessen, whose team at the National Center for Supercomputing
Applications(NCSA) developed Mosaic, went on to found Netscape, the many
people credit with initiating the explosive Internet economy of the late 1990s.
In 1994
 In 1994, Lee founded an organization called World Wide Web Consortium
(W3C) devoted to developing non-proprietary, interoperable technologies for
the World Wide Web.
 The W3C is also a standardization organization. Web technologies
standardized by the W3C are called Recommendations.
Primary Goal of W3C
 One of the W3C's primary goals is to make the Web universally accessible-
regardless of ability, language or culture.
 The W3C homepage (www.w3.org) provides extensive resources on Internet and
Web technologies.
1. Web Architecture
2. Elements of the WWW
i) Server and Client
ii) Web Languages and Protocols
iii) Web Pages
iv) Home Page
v) Web Browsers
a) Microsoft Internet Explorer (IE)
b) Netscape Navigator
c) Others
d) Offline Browser (OB)
vi) Web Sites
a) Portal
b) Web Guides (WG)
c) Search Engines (SE)
[1] Web Crawler/ Software Agent
[2] Registration
d) Meta-Search Engines
3. Intranet
4. Intranet vs. LAN
1.2.1 Web Architecture
Client Browser www server functions Third-party services
Local or Company Specific Data
Mosaic/ WWW Browser
Browser Extensions
Information Retrieval
Data&Transaction Management
Secure Messaging
Digital Library of Data
Third-Party Information Processing Tools
Electronic

1.2.2 Elements of the WWW
The following are the software, hardware and protocols that are elements of the
WWW.
i) Server and Client
A web server is a computer that is connected to the Internet that has software
capable of storing, retrieving and distributing some of the web application files.
A web client/ web browser is a computer that requests files from the web.
When a client is requesting for a file in the web, the network directs the request
to the web server where that file has been available. The server by accepting the request
sends the file to the client.
ii) Web Languages and Protocols
There are various languages such as HTML, ASP, JSP, PHP and scripting
languages like VBscript and JavaScript.
The various protocols are HTTP, FTP, TCP,UDP, IP, ARP, RARP etc.
iii) Web Pages
A webpage is a HTML document that is present in a web server and that has an
URL so that it can be processed via the web
Example: www.pondiuniv.edu is the website name and it consists of several web pages
like home.html, contactus.html etc.
iv) Home Page
A home page is the front door of the web site. When the web user is typing a
website name in the browser, the home page is displayed first.
v) Web Browsers
A Web Browser is a software tool that computers use to communicate with web
servers on the Internet. Web browsers enable to download and display the web pages
that user requests.
The famous browsers available are
a) Microsoft Internet Explorer (IE)
This browser is shipped freely with almost all products of Microsoft and is tightly
coupled with the operating system. It comes with outlook express, an email client for
downloading the email messages from the server to the local machine.
b) Netscape Navigator
Netscape offers a close competition to Microsoft and it offers a better support to
display Java Applets than IE. Netscape also offers the email client besides other
functionalities like HTML editor and Calendar.
c) Others
Opera, Safari, Konqueror and Mosaic are some of the other popular browsers in
the market.
d) Offline Browser (OB)
Offline browser is a pull product that enables the users to retrieve web pages
automatically from their websites during the prescribed time.
Example: Web Zip is popular offline browser.

vi) Web Sites
A web site is a collection of web pages belonging to particular person or organization.
There are various websites that are in existence. Some of them are
a) Portal
Portal is website that provides numerous free services that enhance the web
experience. It has all services like email, chat, news, greetings, address book etc. Several
details can be obtained from the portals.
Some of the portals are Yahoo, Rediff etc.
b) Web Guides(WG)
A Web Guide is website with a system of categories and subcategories that
organizes links to the web pages.
c) Search Engines (SE)
Search Engines are widely used websites to find out any specific information. As
its name implies, the users can give a list of keywords or phrases(query) to the search
engines and it will return a list of web pages that contain those phrase or words.
Example: Google, Duckduckgo
[1] Web Crawler/ Software Agent
Web Crawler traverses the web automatically collecting index data by 2
principles.
Breadth first: It collects the entire network of links from a given point regardless of the
page contents.
Depth first: It follows the links that are relevant to a topic.
[2] Registration
The web developer can register their website detail in the search engine. The
keyword through which their web site has to be listed is given.
d) Meta-Search Engines
Meta-Search Engines automatically searches the user query into the search
engines and returns the lists of websites.
Example: Metacrawler, Starting Port.
1.2.3 Intranet
Intranet is a private network that allows people to access information within the
organization by using the web browsers and other internet programs with the help of
TCP/IP.
The intranets are also called as the internal webs, because they allow an
organization to have its own private web sites for use only by users on the intranet.
1.2.4 Intranet vs. LAN
 A LAN can add- Internet protocols and services to support the Intranet. The LAN
protocols like NetBEUI, IPX/SPX supports file sharing, printer sharing on a LAN
but does not support web browsers and web servers.
 Hence TCP/IP has to be installed in the LAN. Both LAN protocols and TCP/IP can
run simultaneously.
 An Intranet also can run on WAN, the Network that large organizations use to
connect geographically separated locations.

1.3 HTML
HTML is a language for describing web pages.
 It stands for Hyper Text Markup Language.
 It is a markup language and not a programming language
 HTML uses markup tags to describe web pages.
 The usual filename extension is .html or .htm
1. HTML Introduction
i) HTML Head Section
ii) HTML Body section
iii) Document (Body)Contents
2. Adding Physical/ Logical Character Effects
i) Physical Character Effects
ii) Logical Character Effects
3. Managing Document Spacing
i) Horizontal Line in Web Page
ii) Managing Vertical Spacing
iii) Divisions in HTML Document
4. Creating Tables
5. List in HTML
i) Numbered List
ii) Bulleted List
6. HTML Form
1.3.1 HTML Introduction
Tags are the strings in the language surrounded by a less than (<) and a greater
than (>) sign.
Opening Tag: <html> Ending Tag: </html>
Comments in HTML are given as

i) HTML Head Section
<head> <title>........ </title> </head>
ii) HTML Body section
<body> ....... </body>
Example:
<html>
<head><title>HOME</title></head>
<body>This is the first HTML page created</body>
</html>

Attributes used in <body> element are:
BGCOLOR Gives a background color to HTML Page
BACKGROUND Use to specify images to the BACKGROUND
TEXT Specifies text color throughout the browser window
LINK Used to specify link color
ALINK Specifies the active link color
VLINK Specifies visited link color
Example:
<html>
<head><title>Body Tag</title></head>
<body bgcolor="pink" text="black" alink="green" link="yellow">
<a href="body.html">Background</a>
Color of the Page is Pink and Text Color is Black
</body>
</html>
iii) Document (Body)Contents
<br> To insert new lines
<p> To create Paragraphs
<table> To create tables
<img> To insert images
1.3.2 Adding Physical/ Logical Character Effects
i) Physical Character Effects
Bold Font <b> ... </b>
Italic <i> .... </i>
Underline <u> ... </u>
Strikethrough <strike> or <s>
Fixed Width font <tt>
Subscript <sub>
Superscript <sup>
Font Manipulation
Font Face <font face="arial">
Font Color <font color="red"
Font Size <font size="8">
<small>
<big>

Example:
<html>
<head><title>Physical Character Effects</title></head>
<body>
<b> This is in Bold Font </b>
<i> This is in Italics </i>
<u> This Text is Underlined </u>
<small> This is Small Text </small>
<font size=7> This is very Large</font>
<font color="Blue"> This is Blue Text </font>
<strike> This is strikethrough Style Text</strike>
The Chemical Formula of Water is h<sub>2</sub>0
A Simple Formula for a parabola is y=x<sup>2</sup>
</body>
</html>
ii) Logical Character Effects
Heading Styles <hn> .... </hn> where value of n can range from 1 to 6.
Example:
<html>
<head><title>Heading Styles</title></head>
<body>This is the first HTML page created
<h1 align="left"> This is Level 1 Heading</h1>
<h2 align="right"> This is Level 2 Heading</h1>
<h3 align="center"> This is Level 3 Heading</h1>
</body>
</html>

1.3.3 Managing Document Spacing
i) Horizontal Line in Web Page
Horizontal Rule in an HTML document is represented as <hr>
Size <hr size="5">
Width <hr width="100"> or <hr width="60 %">
Align <hr align="center">
Color <hr color="red">
ii) Managing Vertical Spacing
<p> .... </p> Tag to start and end the new paragraph
<br> ... <br> Tag maintains current paragraph but enters text in the new line
iii) Divisions in HTML Document
<div> ..... <div> This Tag creates divisions in Web Pages
center
left
right
<body>
<div align="center"> This Text is Center of the window </div>
</body>
1.3.4 Creating Tables
<head>
<title>Untitled Page</title>
</head>
<body>
<table border="5">
<tr><th>Fruit</th><th>Good</th><th>Calories</th></tr>
<tr><td>Apple</td><td>Yes</td><td>450</td></tr>
<tr><td>Kiwi</td><td>Yes</td><td> </td></tr>
<tr><td>Berry</td><td colspan="2" align="center">NA</td></tr>
<tr><td rowspan="2" valign="top">Pomegranet</td><td>220</td><td>Yes</td></tr>
<tr><td>300</td><td>Yes</td></tr>
<tr><td colspan="2" align="center">Chickoo</td><td>No</td></tr>
</table>
</body>
</html>
1.3.5 List in HTML
i) Numbered List
HTML enables you to create a numbered or ordered, list that will automatically
generate numbers in front of each item in the list. To start an ordered list at a number
other than 1, place the START attribute on the <OL> tag at the beginning of the list.
Attribute Types
<ol type=A> <ol type=a> <ol type=I> <ol type=i> <ol type=1>

ii) Bulleted List
To create a bulleted list use the <ul> (unordered list) tag at the opening of the list
and </ul> at the end of the list.
Attribute Types
<ul> <li type="disc"> <li type="circle"> <li type="square"> </ul>
1.3.6 HTML Form
<html>
<head>
<title>Customer Information</title>
</head>
<body background="C welcomebckgrd.jpg">
<form name="Customer" method="post" action="">
<table align="center">
<tr>
<td align="center" colspan="2"><font color="blue">
<h1><u><i>CUSTOMER INFORMATION</i></u></h1>
</font></td>
</tr>
<tr>
<td><label><font color="black">
<h3><b>CUSTOMER_ID</b></h3>
</font></label></td>
<td><input type="text" name="cid" maxlength="3"></input></td>
</tr>
<tr>
<h3 align="justify"><b>NAME</b></h3>
<td><input type="text" name="cname"></input></td>
</tr>
<tr>
<h3 align="justify"><b>ACCOUNT NUMBER</b></h3>
<td><input type="text" name="cano"></input></td>
</tr>
<tr>
<td><label>
<h3>DEPOSIT TYPE</h3>
</label></td>
<td><input type="radio" name="cusdep" value="fdep"
checked="checked">FIXED DEPOSIT</td>
<td><input type="radio" name="cusdep" value="rdep">RECURRING
DEPOSIT</td>
</tr>
<tr>

<h3 align="justify"><b>AMOUNT TO DEPOSIT</b></h3>
<td><input type="text" name="amtdep"></input></td>
</tr>
<tr>
<td><label>
<h3>NO.OF YEARS</h3>
</label></td>
<td><input type="radio" name="nyear" value="one"
checked="checked">ONE</td>
<td><input type="radio" name="nyear" value="two">TWO</td>
<td><input type="radio" name="nyear" value="three">THREE</td>
</tr>
<tr>
<h3 align="justify"><b>EMAIL</b></h3>
<td><input type="text" name="mchk"></input></td>
</tr>
<tr>
<h3 align="justify"><b>RATE OF INTEREST</b></h3>
<td><input type="text" name="rinterest"></input></td>
</tr>
<tr>
<h3 align="justify"><b>MATURITY AMOUNT </b></h3>
<td><input type="text" name="mamount"></input></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Submit" name="sub"></input></td>
<td><input type="button" value="Reset" name="res"></input></td>
</tr>
<tr>
<td><marquee>
<h1><i>Have a nice day</i></h1>
</marquee></td>
</tr>
</table>
</form>
</body>
</html>

1.4 PROTOCOLS
 A protocol is a set of rules that govern data communications. A protocol defines
what is communicated, how it is communicated, and when it is communicated.
 The key elements of a protocol are syntax, semantics, and timing.
Syntax
 The term syntax refers to the structure or format of the data, meaning the order
in which they are presented.
 For example, a simple protocol might expect the first 8 bits of data to be the
address of the sender, the second 8 bits to be the address of the receiver, and the
rest of the stream to be the message itself.
Semantics
 The word semantics refers to the meaning of each section of bits. How is a
particular pattern to be interpreted, and what action is to be taken based on that
interpretation?
 For example, does an address identify the route to be taken or the final
destination of the message?
Timing
 The term timing refers to two characteristics: when data should be sent and how
fast they can be sent.
 For example, if a sender produces data at 100 Mbps but the receiver can process
data at only 1 Mbps, the transmission will overload the receiver and some data
will be lost.

The various protocols are
 Hyper Text Transfer Protocol (HTTP)
 Simple Mail Transfer Protocol (SMTP)
 Post Office Protocol Version 3 (POP3)
 Multipurpose Internet Mail Extension (MIME)
 File Transfer Protocol (FTP)
 Internet Protocol (IP)
 Transport Control Message (TCP)
 Internet Message Access Protocol (IMAP)
The various e-mail protocols are
 Simple Mail Transfer Protocol (SMTP)
 Post Office Protocol Version 3 (POP3)
 Multipurpose Internet Mail Extension (MIME)
 Internet Message Access Protocol (IMAP)
1.5 Hypertext Transfer Protocol (HTTP)
 The Hypertext Transfer Protocol (HTTP) is a protocol used mainly to access data
on the World Wide Web.
 HTTP functions as a combination of FTP and SMTP. It is similar to FTP because it
transfers files and uses the services of TCP.
 However, it is much simpler than FTP because it uses only one TCP connection.
1. HTTP Transaction
2. Messages
i) Request Messages
ii) Response Messages
3. Uniform Resource Locator (URL)
i) Method
ii) Host
iii) Port
iv) Path
1.5.1 HTTP Transaction
 Figure 1.1 illustrates the HTTP transaction between the client and server.
 The client initializes the transaction by sending a request message.
 The server replies by sending a response.
Figure 1.1: HTTP Transaction

1.5.2 Messages
There are two general types of HTTP messages
 Request Messages
 Response Messages
Both message types follow almost the same format.
i) Request Messages
A request message consists of a request line, headers and sometimes a body.
Figure 1.2: Request Message
ii) Response Messages
A response message consists of a status, headers and sometimes a body.
Figure 1.3: Response Message
1.5.3 Uniform Resource Locator (URL)
 A client that wants to access a document needs an address. To facilitate the
access of documents distributed throughout the world, HTTP uses the concept of
locators.
 The uniform resource locator (URL) is a standard for specifying any kind of
information on the Internet.
 The URL defines four things: method, host, port and path

Figure 1.4: URL
i) Method
The method is the protocol used to retrieve the document, for example HTTP.
ii) Host
 The host is the computer where the information is located, although the name of
the computer can be an alias.
 Web pages usually stored in computers, and computers are given alias names
that usually begin with the characters "www".
iii) Port
 The URL optionally can contain the port number of the server.
 If the port is included, it should be inserted between the host and the path, and it
should be separated from the host by a colon.
iv) Path
Path is the pathname of the file where information is located. Note that path can
contain slashes, separates the directories from the subdirectories and files.
1.6 SIMPLE MAIL TRANSFER PROTOCOL (SMTP)
 The TCP/IP protocol that supports electronic mail on the Internet is called
Simple Mail Transfer Protocol (SMTP).
 It is a system for sending messages to other computer users based on e-mail
addresses.
 SMTP provides for mail exchange between users on the same or different
computers and supports:
1. Sending a single message to one or more recipients.
2. Sending messages that include text, voice, video or graphics.
3. Sending messages to users on networks outside the Internet.
1. Components of SMTP system
i) User Agent (UA) and Mail Transfer Agent (MTA)
ii) Relay MTAs
iii) Mail Gateway
2. Addresses
i) Local Part
ii) Domain Name
3. The Entire E-mail system
Figure 1.5 shows the basic idea of SMTP concept
Figure 1.5: SMTP concept

1.6.1 Components of SMTP system
The SMTP client and server has two components namely:
 User Agent (UA)
 Mail Transfer Agent (MTA)
i) User Agent (UA) and Mail Transfer Agent (MTA)
 The User Agent (UA) prepares the message, creates the envelope, and puts the
message in the envelope.
 The Mail Transfer Agent (MTA) transfers the mail across the internet.
 Figure 1.6 shows the previous figure with the addition of these two components.
Figure1.6: UAs and MTAs
ii) Relay MTAs
 SMTP protocol allows a more complex system than the one shown. Relaying
could be involved.
 Instead of just one MTA at the sender site and one the at the receiving site, other
MTAs, acting either as client or server, can relay the mail (see Figure 1.7)
Figure 1.7: Relay MTAs
iii) Mail Gateway
 The relaying system allows sites that do not use the TCP/IP protocol suite to
send e-mail to users on other sites that may or may not use the TCP/IP protocol
suite.
 This is accomplished through the use of a mail gateway, which is a relay MTA
that can receive mail prepared by a protocol other than SMTP and transform it to
SMTP format before sending it (see Figure 1.8)

Figure 1.8 : Mail Gateway
1.6.2 Addresses
 To deliver mail, a mail handling system must use a unique addressing system.
 The addressing system used by SMTP consists of two parts
i) A local part and
ii) A domain name separated by an @ sign (see Figure 1.9)
Figure 1.9: E-mail address
i) Local Part
The local part defines the name of a special file, called the user mailbox, where all
of the mail received for a user is stored.
ii) Domain Name
The second part of the address is the domain name. An organization usually
selects one or more hosts to receive and send e-mail; they are sometimes called mail
exchangers.
1.6.3 The Entire E-mail system
Figure 1.10: The Entire E-mail system

1.7 POST OFFICE PROTOCOL (POP3)
 SMTP expects the destination host, the mail server receiving the mail, to be on-
line all the time; otherwise, a TCP connection cannot be established.
 For this reason, it is not practical to establish an SMTP session with a desktop
computer because desktop computers are usually powered down at the end of
the day.
 In many organizations, mail is received by an SMTP server that is always on-line.
This SMTP server provides a mail-drop service. The server receives the mail on
behalf of every host in the organization.
 Workstations interact with the SMTP host to retrieve messages by using a client-
server protocol such as Post Office Protocol (POP), version 3 (POP3).
 Although POP3 is used to download messages from the server, the SMTP client is
still needed on the desktop to forward messages from the workstation user to its
SMTP mail server (see Figure 1.11)
Figure 1.11: POP3 and SMTP

1.8 MULTIPURPOSE INTERNET MAIL EXTENSION (MIME)
 Multipurpose Internet Mail Extension (MIME) is a supplementary protocol that
allows non-ASCII data to be sent through SMTP.
 MIME is not a mail protocol and cannot replace SMTP; it is only an extension to
SMTP.
 MIME transforms non-ASCII data at the sender site to NVT ASCII data and
delivers it to the client SMTP to be sent through Internet.
 The server SMTP at the receiving side receives the NVT ASCII data and delivers it
to MIME to be transformed back to the original data.
 MIME is a set of software functions that transform non-ASCII data to ASCII data
and vice versa.
Figure 1.12: MIME

1.9 INTERNET MESSAGE ACCESS PROTOCOL (IMAP)
 IMAP stands for Internet Message Access protocol.
 This protocol is used to access the messages in e-mail or electronic bulletin
board that are in mail server
 It is an application layer Internet protocol that allows e-mail client to access e-
mail on a remote mail server
 The current version IMAP4 is defined by RFC3501.
 IMAP server on well-known port no.143
1. Objectives of IMAP
2. Features of IMAP
3. Operations
1.9.1 Objectives of IMAP
 Compatible with internet messaging standards Ex: MIME
 Allow message access from multiple computers.
 It supports for online, offline and disconnected access nodes.
 Support for concurrent access to shared mailboxes.
 Client software needs no knowledge about the servers file store format.
1.9.2 Features of IMAP
 The feature of IMAP is the mail messages remain on the server, instead of being
downloaded to a computer.
 Checking the mail with a client or web-based environment using the protocol.
 IMAP supports the use of folders for mail organization, but instead of organizing
the messages on the local computer, these folders are kept on the server.
 IMAP is quicker access to mail.
 The message headers are initially downloaded so the user can choose to
download, open and read only this message.
 Using IMAP and saving messages on the server is that the user will be restricted.
1.9.3 Operations
The protocols includes operations for
1. Creating mailboxes.
2. Deleting mailboxes.
3. Renaming mailboxes. Checking for new messages.
4. Permanently removing messages.
5. Setting and clearing flags.
6. Selective fetching of message attributes, text and portion of efficiency.
1.10 DOMAIN NAME SERVER (DNS)
DNS is a protocol that can be used in different platforms. In the Internet, the
domain name space (tree) is divided into three different sections
 Generic Domains
 Country Domains
 Inverse Domains

Figure 1.13: DNS in the Internet
1.10.1 Generic Domains
The generic domains define registered hosts according to their generic
behaviour. Each node in the tree defines a domain, which is an index to the domain
name space database.
Figure 1.14: Generic Domains
Generic Domain Labels
Label Description
com Commercial organizations
edu Educational institutions
gov Government institutions
int International Organizations
mil Military groups
net Network support centers
org Nonprofit Organizations
Proposed Generic Domain Labels
Label Description
arts Cultural organizations
firm Businesses or firms
info Information service providers
nom Personal nomenclatures

rec Recreation/ entertainment organizations
store Businesses offering goods to purchase
web Web-related organizations
1.10.2 Country Domains
 The country domain section follows the same format as the generic domains but
uses two-character country abbreviations (eg., "us" for United States) in place of
the three character organizational abbreviations at the first level.
 Second-level labels can be organizational, or they can be more specific, national
designations.
 The United States, for example, uses state abbreviations as a subdivision of "us"
(eg., ca.us)
 Figure 1.15 shows the country domain section. The address anza.cup.ca.us can
be translated to De Anza College in Cupertino in California in the United States.
Figure 1.15: Country Domains
1.10.3 Inverse Domain
 The inverse domain is used to map an address to a name. This may happen, for
example, when a server has received a request from a client to do a task.
 Whereas the server has a file that contains a list of authorized clients, the server
lists only the IP address of the client (extracted from the received IP packet).
Figure 1.16: Inverse Domain

1.11 WEB BROWSERS
A web browser is used to display web pages. The web browser is the interpreter
of our web sites. Web browsers are software programs that allow users to access the
web content.
1. Microsoft Internet Explorer
2. Mozilla-Based Browsers (Netscape, Mozilla, and Firefox)
3. Linux Browsers (Konqueror, Ephiphany, Galeon, Opera, and Firefox)
4.The Others (Safari)
1.11.1 Microsoft Internet Explorer
Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet
Explorer, commonly abbreviated IE or MSIE) is a series of graphical web browsers
developers by Microsoft and included as part of the Microsoft Windows line of
operating systems, starting in 1995.
Standards
Internet Explorer, using the Trident layout engine:
 Supports HTML 4.01, HTML 5, CSS Level 1, Level 2 and Level 3, XML 1.0, and
DOM Level 1, with minor implementation gaps.
 Fully supports XSLT 1.0 as well as an obsolete Microsoft dialect of XSLT often
referred to as WD-XSL, which was loosely based on the December 1998 W3C
Working Draft of XSL. Support for XSLT 2.0 lies in the future: semi-official
Microsoft bloggers have indicated that development is underway, but no dates
have been announced.
 Almost full conformance to CSS 2.1 has been added in the Internet Explorer 8
release. The trident rendering engine in Internet Explorer 9 in 2011 scored
highest in the official W3C conformance test suite for CSS 2.1 of all major
browsers.
 Supports XHTML in Internet Explorer 9 (Trident version 5.0). Prior versions can
render XHTML documents authored with HTML compatibility principles and
served with a text/html MIME-type.
 Supports a subset of SVG in Internet Explorer 9 (Trident version 5.0), excluding
SMIL, SVG fonts and filters.
1.11.2 Mozilla-Based Browsers (Netscape, Mozilla, and Firefox)
i) Netscape
Netscape is credited with developing the Secure Sockets Layer Protocol (SSL) for
securing online communication, which is still widely used, as well as JavaScript, the
most widely used language for client-side scripting of web pages.
ii) Mozilla
Mozilla is a free software community best known for producing the Firefox web
browser. The Mozilla community uses, develops, spreads and supports Mozilla
products, thereby promoting exclusively free software and open standards, with only
minor exceptions. The community is supported institutionally by the Mozilla
Foundation and its tax-paying subsidiary, the Mozilla Corporation.
iii) Firefox
Mozilla Firefox (known simply as Firefox) is a free and open-source web browser
developed for Windows, OS X, and Linux, with a mobile version for Android, by the
Mozilla Foundation and its subsidiary, the Mozilla Corporation.

1.11.3 Linux Browsers (Konqueror, Ephiphany, Galeon, Opera)
i) Konqueror
Konqueror is a free and open-source web browser and file manager that
provides file viewer functionality for file systems such as local files, files on a remote
FTP server and files in a disk image.
It is a core part of the KDE Software Compilation. Konqueror is developed by
volunteers and can run on most Unix-like operating systems and on Windows systems.
Konqueror is licensed and distributed under the GNU General Public License version 2.
The name "Konqueror" is a reference to the two primary competitors at the time
of the browser's first release: "first comes the Navigator, then Explorer, and then the
Konqueror".
ii) Ephiphany
Web (originally called Epiphany from 2003 to 2012) is a free software web
browser for the GNOME desktop environment. The browser was forked from Galeon
after developers' disagreements about Galeon's growing complexity.
Since then Web has been developed as part of the GNOME project and uses most
of GNOME's technology and settings when applicable. It is part of the GNOME Core
Applications.
iii) Galeon
Galeon was a Gecko-based web browser that was created by Marco Pesenti
Gritti with the goal of delivering a consistent browsing experience to GNOME desktop
environment. It gained some popularity in the early 2000s due to its speed, flexibility in
configuration and features.
iv) Opera
Opera is a web browser developed by Opera Software. The latest version is
available for Microsoft Windows, OS X, and Linux operating systems, and uses the Blink
layout engine. An earlier version using the Presto layout engine is still supported, and
additionally runs on FreeBSD systems.
1.11.4 The Others (Safari)
Safari is a web browser developed by Apple Inc. included with the OS X and iOS
operating systems. First released as a public beta on January 7, 2003, on the company's
OS X operating system, it became Apple's default browser beginning with Mac OS X
v10.3 "Panther". The native browser of iOS is also called Safari, but has a different UI
and uses a different WebKit version and API.
1.12 WEB SERVERS
 A software program or server computer equipped to offer World Wide Web
access. Web servers allow you to serve content over the Internet using the Hyper
Text Markup Language (HTML).
 The Web server accepts requests from browsers like Netscape and Internet
Explorer and then returns the appropriate HTML documents. A web server is a
computer with special software to host web pages and web applications.
 A computer that provides Web services and pages to intranet and Internet users.
A web server serves web pages to clients across the Internet or an Intranet.
 The web server hosts the pages, scripts, programs, and multimedia files and
serves them using HTTP, a protocol designed to send files to web browsers and
other protocols.

 A number of server-side technologies can be used to increase the power of the
server beyond its ability to deliver standard HTML pages.
1. Web Server Working- Overview
2. Web Server and Browser Interaction
3. Single-Threaded Web Server
4. Multi-Threaded Architecture
5. Multi-Process Architecture
6. Types of Web Server
i) Apache
ii) IIS
iii) Personal Web Server
iv) Differences between Apache and IIS servers
7. Additional Features of Web Servers
1.12.1 Web Server Working- Overview
1. User requests Document 4. Web Server returns document
(eg. index.html) data to Web Browser
2. Web Server looks for 3. Web Server retrieves document
document on the file system from the file system
Figure 1.17: Web Server Working
1.12.2 Web Server and Browser Interaction
A Web Browser acts as an interface between the user and the Web server. The
browser carries out the following on behalf of the user. Contacts a web server, Sends a
request for information, Receives the information and Displays it on the user's
computer.
1.12.3 Single-Threaded Web Server
Figure 1.18: Single-Threaded Web Server
 One process sequentially handles all client connections.
 Simple –requires no synchronization.
 Does not scale (one client at a time).
Web Browser
Web Server
File System
Accept
Connection
Parse
HTTP Request
Read File or
Generate Content
Send
Data

1.12.4 Multi-Threaded Architecture
Figure 1.19: Multi-Threaded Architecture
 Utilizes multiple threads, good performance
 Easy to change threading policies
 Need to synchronize, to avoid data races
 Resources utilization (kernel and user-level): memory consumption, context
switches, start-up
 Blocking I/O can cause deadlocks
1.12.5 Multi-Process Architecture
Process 1
...........
Process N
Figure 1.20: Multi-Process Architecture
 Utilizes multiple processors
 Easy to debug
 Can pre-fork a pool of processes
 Inter Process Communication is difficult and expensive
 High memory cost, context switches
1.12.6 Types of Web Server
i) Apache
 It is an excellent server because of its two important features: Reliability and
Efficiency.
 It is an open source software. That means it is freely available to anybody.
 Apache web server is best suitable for UNIX systems but it can also be used on
Windows box.
ii) IIS
 The internet information services or Internet Information Server is a kind of web
server provided by Microsoft.
 This server is most popular on Windows platform.
iii) Personal Web Server
 Microsoft's Personal Web Server (PWS) is a scaled-down version of the
commercial Internet Information Server (IIS)
 PWS is a great entry-level Web server that makes it easy to publish personal
home pages, serve small Web sites, and share documents via a local intranet.
Accept
Connection
Parse
HTTP Request
Read File or
Generate Content
Send
Data
Accept
Connection
Parse
HTTP Request
Read File or
Generate Content
Send
Data
Accept
Connection
Parse
HTTP Request
Read File or
Generate Content
Send
Data

 This allows to check the validity of links, scripts, and applications as well as to
ensure that the overall organization of the site is functioning correctly.
iv) Differences between Apache and ISS Servers
S.No. Apache web server IIS web server
1. Apache web server is useful on
both Unix based systems and
on Windows platform.
IIS web server is used on Windows
platform.
2. It is an open source product. It is a vendor specific product and can be
used on Windows products only.
1.12.7 Additional Features of Web Servers
 Logging
 Security (e.g., access control)
 Traffic analysis
 Require centralized data structures to implement
1.13 INTRODUCTION TO CASCADING STYLESHEETS
 Cascading Style Sheets, fondly referred to as CSS, is a simple design language
intended to simplify the process of making web pages presentable.
 CSS handles the look and feel part of a web page. Using CSS, you can control the
color of the text, the style of fonts, the spacing between paragraphs, how columns
are sized and laid out, what background images or colors are used, as well as a
variety of other effects.
 CSS is easy to learn and understand but it provides a powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.
1.13.1 Advantages of CSS
i) CSS saves time - You can write CSS once and then reuse the same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as many web
pages as you want.
ii) Pages load faster - If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences
of that tag. So, less code means faster download times.
iii) Easy maintenance - To make a global change, simply change the style, and all the
elements in all the web pages will be updated automatically.
iv) Superior styles to HTML - CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
v) Multiple Device Compatibility - Style sheets allow content to be optimized for more
than one type of device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cellphones or for
printing.
vi) Global web standards – Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to
make them compatible with future browsers.

1.14 RULES OF CSS
1. Multiple Style Rules
You may need to define multiple style rules for a single element. You can define
these rules to combine multiple properties and corresponding values into a single block
as defined in the following example:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Here all the property and value pairs are separated by a semicolon (;).
2. The @import Rule
The @import rule allows you to import styles from another style sheet. It should
appear right at the start of the style sheet before any of the rules, and its value is a URL.
It can be written in one of the two following ways:
<style tyle="text/css">

</style>
3. The @charset Rule
If you are writing your document using a character set other than ASCII or ISO-
8859-1 you might want to set the @charset rule at the top of your style sheet to indicate
what character set the style sheet is written in.
The @charset rule must be written right at the beginning of the style sheet
without even a space before it. The value is held in quotes and should be one of the
standard character-sets. For example:

</style>
4. The @font-face Rule
The @font-face rule is used to exhaustively describe a font face for use in a
document. @font-face may also be used to define the location of a font for download,
although this may run into implementation-specific limits.
In general, @font-face is extremely complicated, and its use is not recommended
for any except those who are expert in font metrics.
Here is an example:

</style>
1.15 FEATURES OF CSS
1. CSS3 Selectors
The most useful attributes for selectors are:
 [attr^=val] Â–- matches a DOM element with the attribute attr and a value starting
with val
 [attr$=val] Â–- matches a DOM element with the attribute attr and a value ending
with the suffix val
 [attr*=val] Â–- matches a DOM element with the attribute attr and a value
containing the substring val
CSS
<div class="code"><style>
p[title^="car"] {color: red;}
img[src*="birth"] {border:3px solid green;}
</style></div>
HTML
<div class="code"><img src="happy_birthdays.jpg" />
<p title="container">I am displaying a container. And this attribute won't match me.
</p>
<p title="carousel">This carousel will match</p></div>
2. CSS3 Rounded Corners
With the introduction of rounded corners, CSS 3 eliminates the need for
including external images or using any sort of JavaScript code to position the images. All
you need is the border-radius property.
CSS
<div class="code">.box{ border: 2px solid orange; border-radius : 25px; width: 100px;
padding: 10px; text-align:center; }</div>

HTML
div class="code"><div class="box">Submit</div></div>
3. CSS3 Border Image
The property border-image allows you to specify an image to display instead of a
plain solid-colored border.
CSS
<div class="code">#col{border-image:url(border_image.png) 100 100 100 100 round
round; border-width: 10px;}</div>
HTML
<div class="code"><div id="col">my content</div></div>
4. CSS3 Box Shadow
A box shadow allows you to create a drop shadow for an element. Usually this
effect is achieved using a repeated image around the element. However, with the
property box-shadow this can be achieved by writing a single line of CSS code.
CSS
<div class="code">.shadow{ background-color: #EEEEEE; box-shadow:3px 3px 3px 2px
#797979; height: 50px; width: 100px; padding: 5px;}</div>
HTML
<div class="code"><div class="shadow"> my content </div></div>
5. CSS3 Text Shadow
The new text-shadow property allows you to add drop shadows to the text on a
webpage.
CSS
<div class="code">p{ text-shadow: #aaa 2px 2px 2px; }</div>
HTML
<div class="code"><p>My text is more beautiful, than a normal webfont</p></div>
6. CSS3 Gradient
While the Gradient effect is a sleek Web design tool, it can be a drain on
resources if not implemented correctly using current CSS techniques.
CSS
<div class="code">#gradient { background-image: -webkit-gradient(linear,left
bottom,left top,color-stop(0, #E6C674),color-stop(1, #F7ECCA));

background-image: -moz-linear-gradient(center bottom , #E6C674 0pt, #F7ECCA
100%); height: 50px;}</div>
HTML
<div class="code"><p id="gradient">My text is more beautiful, than a normal
webfont</p></div>
7. CSS3 Transform (Element Rotation)
CSS 3 also introduced a property called transform, which enables rotating Web
elements on a webpage. As of now, if a designer wants to rotate of an element
CSS
<div class="code">p{ -moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);} </div>
HTML
<div class="code"><p>I can rotate this element, by 180degree using -moz-transform
property</p></div>
8. CSS3 Multicolumn Layout
CSS 3 supports the multicolumn layout property; all you have to do is specify
the number of columns you need and they will be created. This property is currently
supported by the Firefox and WebKit browsers.
CSS
<div class="code">#col{-moz-column-count:3;-webkit-column-count:3;} </div>
HTML
<div class="code"><div id="col"> text truncated, due to length</div></div>
1.16 CSS3 SELECTORS
A selector is an HTML tag at which a style will be applied. This could be any tag
like <h1> or <table> etc.
1.The Type Selectors
An example to give a color to all level 1 headings:
h1 {
color: #36CFFF;
}
2. The Universal Selectors
Rather than selecting elements of a specific type, the universal selector quite
simply matches the name of any element type:
* {
color: #000000;
}

3. The Descendant Selectors
Suppose you want to apply a style rule to a particular element only when it lies
inside a particular element. As given in the following example, the style rule will apply
to <em> element only when it lies inside the <ul> tag.
ul em {
color: #000000;
}
4. The Class Selectors
You can define style rules based on the class attribute of the elements. All the
elements having that class will be formatted according to the defined rule.
.black {
color: #000000;
}
This rule renders the content in black for every element with class attribute set
to black in our document. You can make it a bit more particular. For example:
h1.black {
color: #000000;
}
This rule renders the content in black for only <h1> elements with class attribute
set to black.
5. The ID Selectors
You can define style rules based on the id attribute of the elements. All the
elements having that id will be formatted according to the defined rule.
#black {
color: #000000;
}
This rule renders the content in black for every element with id attribute set to
black in our document. You can make it a bit more particular. For example:
h1#black {
color: #000000;
}
This rule renders the content in black for only <h1> elements with id attribute
set to black.
The true power of id selectors is when they are used as the foundation for
descendant selectors. For example:
#black h2 {
color: #000000;
}
In this example, all level 2 headings will be displayed in black color when those
headings will lie within tags having id attribute set to black.
6. The Child Selectors
This rule will render all the paragraphs in black if they are a direct child of the
<body> element. Other paragraphs put inside other elements like <div> or <td> would
not have any effect of this rule.
body > p {
color: #000000;
}

1.17 ATTRIBUTES
1. Embedded CSS - The <style> Element
You can put your CSS rules into an HTML document using the <style> element.
This tag is placed inside the <head>...</head> tags. Rules defined using this syntax will
be applied to all the elements available in the document. Here is the generic syntax:
<head>
<style type="text/css" media="...">
Style Rules
............
</style>
</head>
Attributes associated with <style> elements are:
Attribute Value Description
type text/css Specifies the style sheet language as a content-type
(MIME type). This is a required attribute.
media screen tty tv
projection
handheld print
braille
aural all
Specifies the device, the document will be displayed on.
Default value is all. This is an optional attribute.
Example
Following is an example of embed CSS based on the above syntax:
<head>
<style type="text/css" media="all">
h1{
color: #36C;
}
</style>
</head>
2. Inline CSS - The <style> Attribute
You can use style attribute of any HTML element to define style rules. These rules
will be applied to that element only. Here is the generic syntax:
<element style="...style rules....">
style style rules The value of style attribute is a combination of style
declarations separated by semicolon (;).
Example
Following is the example of inline CSS based on the above syntax:
<h1 style ="color:#36C;"> This is inline CSS </h1>
3. External CSS - The <link> Element
An external style sheet is a separate text file with .css extension. You define all
the Style rules within this text file and then you can include this file in any HTML
document using <link> element.
Here is the generic syntax of including external CSS file:
<head>
<link type="text/css" href="..." media="..." />
</head>

type text/css Specifies the style sheet language as a content-type
(MIME type). This attribute is required.
href URL Specifies the style sheet file having Style rules. This
attribute is a required.
media screen tty tv
projection
handheld print
braille aural all
Specifies the device the document will be displayed on.
Default value is all. This is an optional attribute.
Example
Consider a simple style sheet file with a name mystyle.css having the following rules:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Now you can include this file mystyle.css in any HTML document as follows:
<head>
<link type="text/css" href="mystyle.css" media="all" />
</head>
CLIENT-SIDE PROGRAMMING THE JAVASCRIPT LANGUAGE
1.18 JAVASCRIPT IN PERSPECTIVE
JavaScript is the scripting language of the web. JavaScript is used putting
dynamic content into HTML page and for client side validation.
1.18.1 Overview
 JavaScript is Netscape's cross-platform, object-based scripting language.
 JavaScript code is embedded into HTML pages. It is a lightweight programming
language.
 Client-side JavaScript extends the core language by supplying objects to control a
browser and its Document Object Model
 Server-side JavaScript extends the core language by supplying objects relevant to
running JavaScript on a server.
1.18.2 Working of JavaScript
When a JavaScript is inserted into a HTML document, and the HTML document
is opened on a web browser.
 The browser will read the HTML
 It interprets the JavaScript
 It executes the JavaScript immediately or at a later event.
1.18.3 Uses of JavaScript
 It provides HTML designers a programming tool. It puts dynamic text into an
HTML page.
 It reacts to events. It reads and writes to HTML elements. It can be used to
validate data.

1.18.4 Where to write JavaScript?
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event")
}
</script>
</head>
<body onload="message()">
</body>
</html>
1.19 SYNTAX
JavaScript syntax is the set of rules, how JavaScript programs are constructed.
1. JavaScript Values
The JavaScript syntax defines two types of values: Fixed values and variable
values. Fixed values are called literals. Variable values are called variables.
2. JavaScript Operators
JavaScript uses an assignment operator ( = ) to assign values to variables
Example:
<html>
<body>
<h1>Assigning Values</h1>
<p>In JavaScript the = operator is used to assign values to variables.</p>
<p id="demo"></p>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</script>
</body>
</html>
Output:
Assigning Values
In JavaScript the = operator is used to assign values to variables.
11
3. JavaScript Expressions
An expression is a combination of values, variables, and operators, which
computes to a value. The computation is called an evaluation.
Example:
<html>
<body>

<h1>JavaScript Expressions</h1>
<p>Expressions compute to values.</p>
<p id="demo"></p>
document.getElementById("demo").innerHTML = 5 * 10;
</script>
</body>
</html>
Output:
JavaScript Expressions
Expressions compute to values.
50
4. JavaScript Keywords
JavaScript keywords are used to identify actions to be performed. The var
keyword tell the browser to create a new variable
Example:
<html>
<body>
<h1>The var Keyword Creates a Variable</h1>
<p id="demo"></p>
var x = 5 + 6;
var y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>
</body>
</html>
Output:
The var Keyword Creates a Variable
110
5. JavaScript Comments
Not all JavaScript statements are "executed". Code after double slashes // or
between /* and */ is treated as a comment.
Comments are ignored, and will not be executed:
Example:
<html>
<body>
<h1>Comments are NOT Executed</h1>
<p id="demo"></p>
var x = 5;
// var x = 6; I will not be executed
document.getElementById("demo").innerHTML = x;

</script>
</body>
</html>
Output:
Comments are NOT Executed
5
1.20 VARIABLES AND DATATYPES
1.20.1 VARIABLES
JavaScript variables are containers for storing data values.
i) JavaScript Identifiers
All JavaScript variables must be identified with unique names. These unique
names are called identifiers. Identifiers can be short names (like x and y), or more
descriptive names (age, sum, totalVolume).
The general rules for constructing names for variables (unique identifiers) are:
 Names can contain letters, digits, underscores, and dollar signs.
 Names must begin with a letter
 Names can also begin with $ and _
 Names are case sensitive (y and Y are different variables)
 Reserved words (like JavaScript keywords) cannot be used as names
 Cannot include spaces or any other punctuation characters
 No official limit on the length of a variable name, but must fit within a line.
ii) Declaring (Creating) JavaScript Variables
Creating a variable in JavaScript is called "declaring" a variable. When adding a
number and a string, JavaScript will treat the number as a string. You declare a
JavaScript variable with the var keyword:
Example:
<html><body>
<h1>JavaScript Variables</h1>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
var x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
var y = "John" + " " + "Doe";
document.getElementById("demo1").innerHTML = y;
var z = 16 + "Volvo";
document.getElementById("demo2").innerHTML = z;
</script>
</body>
</html>
Output: JavaScript Variables
10
John Doe
16Volvo

1.20.2 DATATYPES
JavaScript variables can hold many data types: numbers, strings, arrays, objects
and more:
var length = 16; // Number
var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
i) Numbers
JavaScript has only one type of numbers. Numbers can be written with, or
without decimals. Extra large or extra small numbers can be written with scientific
(exponential) notation.
ii) Strings
A string (or a text string) is a series of characters like "John Doe". Strings are
written with quotes. You can use single or double quotes. You can use quotes inside a
string, as long as they don't match the quotes surrounding the string.
iii) Arrays
JavaScript arrays are written with square brackets. Array items are separated by
commas. Array indexes are zero-based, which means the first item is [0], second is [1],
and so on.
iv) Objects
JavaScript objects are written with curly braces. Object properties are written as
name: value pairs, separated by commas.
Example:
<html>
<body>
<p id="number"></p>
<p id="string"></p>
<p id="array"></p>
<p id="object"></p>
//Numbers
var x1 = 34.00; // Written with decimals
var x2 = 34; // Written without decimals
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
document.getElementById("number").innerHTML =
x1 + "<br>" + x2 + "<br>" + y + "<br>" + z
//String
var carName1 = "Volvo XC60"; // Using double quotes
var carName2 = 'Volvo XC60'; // Using single quotes
var answer1 = "It's alright"; // Single quote inside double quotes
var answer2 = "He is called 'Johnny'"; // Single quotes inside double quotes
var answer3 = 'He is called "Johnny"'; // Double quotes inside single quotes

document.getElementById("string").innerHTML =
carName1 + "<br>" + carName2 + "<br>" + answer1 + "<br>" + answer2 + "<br>" +
answer3;
//Arrays
var cars = ["Saab","Volvo","BMW"];
document.getElementById("array").innerHTML = cars[1];
// Objects
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("object").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Output:
34
34
12300000
0.00123
Volvo XC60
Volvo XC60
It's alright
He is called 'Johnny'
He is called "Johnny"
Volvo
John is 50 years old.
1.21 STATEMENTS
JavaScript statements often start with a keyword to identify the JavaScript
action to be performed. Statements are used to perform different actions based on
different conditions.
1. if else
<html>
<body>
var d = new Date();
var time = d.getHours();
if (time < 12)
{
document.write("<b>Good morning</b>");
}

else
{
document.write("<b>Good Noon</b>");
}
</script>
</body>
</html>
Output:
Good Morning
2. Switch
<html>
<body>
var d = new Date();
var theDay=d.getDay();
document.write(d);
switch (theDay)
{
case 5:
document.write("<b>Finally Friday</b>");
break;
case 6:
document.write("<b>Super Saturday</b>");
break;
case 0:
document.write("<b>Sleepy Sunday</b>");
break;
default:
document.write("<b>I'm really looking forward to this weekend!</b>");
}
</script>
</body>
</html>
Output:
Wed Dec 09 2015 21:23:36 GMT+0530 (India Standard Time)
I'm really looking forward to this weekend!
3. The Break and Continue statements
i) Break
This statement is used to break out of the current 'for' or 'while' loop. Control
resumes after the loop, as if it had finished.
ii) Continue
This statement continues a 'for' or 'while' loop without executing the rest of the
loop. Control resumes at the next iteration of the loop.
Example:
<html>
<body>

1.22 JAVASCRIPT OPERATORS
JavaScript is rich in operators: words and symbols in expressions that perform
operations on one or two values to arrive at another value.
 Any value on which an operator performs some action is called an operand.
 An expression may contain one operand and one operator (called a unary
operator) or two operands separated by one operator (called a binary operator).
1.22.1 Operator Categories
JavaScript operators are grouped into five categories. They are
TYPE DESCRIPTION
Comparison Compares the values of two operands, deriving a result of either true or
false (used extensively in condition statements for if...else and for loop
constructions)
Arithmetic Joins together two operands to produce a single value that is a result of an
arithmetical or other operation on the two
Assignment Stuffs the value of the expression of the right-hand operand into a
variable name on the left-hand side, sometimes with minor modification,
as determined by the operator symbol
Boolean Performs Boolean arithmetic on one or two Boolean operands
Typeof
operator
the typeof operator defines the kind of value and expression to which a
variable evaluates.
i) Comparison Operator
When two values are compared in JavaScript, the result is a Boolean true or
false value.
Operator Description Example Result
== is equal to 5==8 false
!= is not equal 5!=8 true
> is greater than 5>8 false
< is less than 5<8 true
>= is greater or equal 5>=8 false
<= is less or equal 5<=8 true
ii) Arithmetic Operator
Arithmetic operators are those operators that join two operands to yield a value
related to the operands.
Operator Description Example Result
+ Addition 2+2 4
- Subtraction 5-2 3
* Multiplication 4*5 20
/ Division 5/2 2.5
% Modulus 10%8 2

Example:
<html>
<body>
<h1>JavaScript Operators</h1>
<p>Adding a number and a string, returns a string.</p>
<p id="demo"></p>
var a = 2 + 2;
var s = 5-2;
var m = 4*5;
var d= 5/2;
var mod= 10%8;
document.getElementById("demo").innerHTML =
a + "<br>" + s + "<br>" + m + "<br>" + d + "<br>" + mod;
</script>
</body>
</html>
Output:
JavaScript Operators
Adding a number and a string, returns a string.
4
3
20
2.5
2
iii) Assignment Operator
These statements are where you copy a value or the results of an expression into
a variable for further manipulation of that value.
Operator Example Is same as
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
iv) Boolean / Logical Operators
A JavaScript Boolean represents one of two values: true or false.
Operator Description Example
&& and x=6; y=3; x<10 && y>1
returns true
|| or x=6; y=3; x<10 || y>5
returns true
! not x= false !x
returns true

v) Typeof Operator
The typeof operator defines the kind of value and expression to which a variable
evaluates.
typeof Undefined variable "undefined"
typeof 33 "number"
typeof "abcdef" "string"
typeof true "boolean"
typeof null "object"
Example:
<html>
<body>
<p>The typeof operator returns the type of a variable, object, function or
expression.</p>
<p id="demo"></p>
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof NaN + "<br>" +
typeof false + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof {name:'john', age:34} + "<br>" +
typeof new Date() + "<br>" +
typeof function () {} + "<br>" +
typeof myCar + "<br>" +
typeof null;
</script>
</body>
</html>
Output:
The typeof operator returns the type of a variable, object, function or expression.
string
number
number
boolean
object
object
object
function
undefined
object

1.23 LITERALS
 A literal is a notation for representing a fixed value in source code.
 Almost all programming languages have notations for atomic values such as
integers, floating-point numbers, and strings, and usually for Booleans and
characters;
 Some also have notations for elements of enumerated types and compound
values such as arrays, records, and objects.
i) JavaScript: Array Literals
In JavaScript an array literal is a list of expressions, each of which represents an
array element, enclosed in a pair of square brackets ' [ ] ' .
Creating an array with four elements.
var fruits = ["Orange", "Apple", "Banana", "Mango"]
ii) JavaScript: Integer Literals
An integer must have at least one digit (0-9).
 No comma or blanks are allowed within an integer.
 It does not contain any fractional part.
 It can be either positive or negative, if no sign precedes it is assumed to be
positive.
iii) JavaScript: Floating Number Literals
A floating number has the following parts.
 A decimal integer.
 A decimal point ('.').
 A fraction.
 An exponent.
The exponent part is an "e" or "E" followed by an integer, which can be signed
(preceded by "+" or "-").
Example:
 8.2935
 -14.72
 12.4e3 [ Equivalent to 12.4 x 103 ]
 4E-3 [ Equivalent to 4 x 10-3 => .004 ]
iv) JavaScript: Boolean Literals
The Boolean type has two literal values :
 true
 false
v) JavaScript: Object Literals
An object literal is zero or more pairs of comma separated list of property names
and associated values, enclosed by a pair of curly braces.
In JavaScript an object literal is declared as follows:
1. An object literal without properties:
var userObject = {}

2. An object literal with a few properties :
var student = {
First-name : "Suresy",
Last-name : "Rayy",
Roll-No : 12
};
vi) JavaScript: String Literals
JavaScript has its own way to deal with string literals. A string literal is zero or more
characters, either enclosed in single quotation (') marks or double quotation (") marks.
You can also use + operator to join strings. The following are the examples of string
literals :
 string1 = "w3resource.com"
 string1 = 'w3resource.com'
 string1 = "1000"
 string1 = "google" + ".com"
1.24 FUNCTIONS
 A JavaScript function is a block of code designed to perform a particular task.
 A JavaScript function is executed when "something" invokes it (calls it).
Syntax
 A JavaScript function is defined with the function keyword, followed by a name,
followed by parentheses ().
 Function names can contain letters, digits, underscores, and dollar signs (same
rules as variables).
 The parentheses may include parameter names separated by
commas: (parameter1, parameter2, ...)
 The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3)
{
code to be executed
}
 Function parameters are the names listed in the function definition.
 Function arguments are the real values received by the function when it is
invoked.
Why Functions?
 Can reuse code: Define the code once, and use it many times.
 Can use the same code many times with different arguments, to produce
different results.

Example:
<html>
<body>
<p>This example calls a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>
<script>
function toCelsius(f)
{
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
</script>
</body>
</html>
Output:
This example calls a function to convert from Fahrenheit to Celsius:
25
1.25 OBJECTS
JavaScript has predefined objects and uses standard browser objects. Predefined
objects in JavaScript are
 String Objects
 Math Objects
 Date
1.25.1 String Objects
A string consists of one or more standard text characters between matching
quote marks.
i) Properties of a String Object:
Length: The length property returns the number of characters in a string.
Syntax: stringObject.length
"Lincoln".length //result=7
Prototype: The prototype property allows you to add properties and methods to an
object.
Syntax: object.prototype.name=value
ii) Parsing Methods
a) charAt(index): The charAt() method returns the character at a specified position.
 Syntax: String charAt(index)
 "HelloWorld".charAt(5) //result "W"
b) concat(): The concat() method is used to join two or more strings. One or more
string objects to be joined to a string.
 Syntax: stringObject.concat(stringX, stringX,...., stringX)
c) match(regExpression): Searches for a specified value in a string.
 Syntax: string.match(regExpression)

d) replace (regExpression, replaceString): Replaces some characters with some
other characters in a string.
 Syntax: string.replace(regExpression, replaceString)
e) substr(start [, length]): Extracts a specified number of characters in a string, from a
start index.
 Syntax: string.substr(start [,length)
iii) Converting Methods
a) toLowerCase(): Displays a string in lowercase letters
 Syntax: string.toLowerCase()
b) toUpperCase(): Displays a string in uppercase letters
 Syntax: string.toUpperCase()
iv) Formatting Methods
a) string.bold(): Displays a string in bold
b) string.italics(): Displays a string in italic
c) string.fontcolor(colorValue): Displays a string in a specified color
d) string.fontsize(integer 1to 7): Displays a string in a specified size
e) string.big(): Displays a string in a big font
f) string.small(): Displays a string in a small font
1.25.2 Math Object
The Math object allows to perform mathematical tasks. All properties and
methods can be called without creating the Math object
Property/ Method Description
Math.PI PI (3.141592653589793116)
Math.SQRT2 Square root of 2(1.4142)
Math.random() Random number between 0 and 1
Math.round(val) N+1 when val>=n.5; otherwise N
Math.max(val1,val2) The greater of val1 or val2
Math. min(val1,val2) The lesser of val1 or val2
1.25.3 Date Object
The Date object evaluates to an object rather than to some string or numeric
value. The Date object has only a prototype property, which enables you apply new
properties and methods to every Date object created in the current page.
Property Description
dateObj.getTime() Milliseconds since 1/1/70 00:00:00 GMT
dateObj.getYear() Specfied year minus 1900
dateObj.getMonth() Month within the year (January=0)
dateObj.getDate() Date within the month

Example:
<html>
<body>
<p> Today's Full Details </p>
<script>
var dateinfo = new Date();
document.write(dateinfo.getDay()+ "<br>");
document.write(dateinfo.getDate()+ "<br>");
document.write(dateinfo.getMonth()+ "<br>");
document.write(dateinfo.getYear()+ "<br>");
document.write(dateinfo.getHours()+ "<br>");
document.write(dateinfo.getMinutes()+ "<br>");
document.write(dateinfo.getSeconds()+ "<br>");
</script>
</body>
</html>
Output:
Today's Full Details
4
17
11
115
10
40
45
1.26 ARRAYS
JavaScript arrays are used to store multiple values in a single variable.
1.26.1 Concept of Array Objects
An array is the sole JavaScript data structure provided for storing and
manipulating ordered collections of data.
Creating an Array
var myArray= new Array() //empty array
var solarSys= new Array(2) // Array defined with size
solarSys[0]= "Mercury" // Assigning values to array
var solarSys=new Array("Mercury", "Venus", ...) // Condensed array
solarsys= ["Mercury", "Venus", .... ] // Literal array
 Arrays are a special type of objects. The typeof operator in JavaScript returns
"object" for arrays.
 But, JavaScript arrays are best described as arrays.
 Arrays use numbers to access its "elements". In this example, person[0] returns
John:

Example:
<html>
<body>
<p id="demo"></p>
<script>
var person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>
</body>
</html>
Output:
John
 Objects use names to access its "members". In this example, person.firstName
returns John:
Example:
<html>
<body>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person["firstName"];
</script>
</body>
</html>
Output:
John
1.26.2 Array Properties and Methods
The real strength of JavaScript arrays are the built-in array properties and
methods.
Length Property: The length property of an array returns the length of an array (the
number of array elements).
Example:
<html>
<body>
<p>The length property returns the length of an array.</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.length;
</script>
</body>
</html>
Output:
The length property returns the length of an array.
4

1.26.3 Associative Arrays
 Many programming languages support arrays with named indexes.
 Arrays with named indexes are called associative arrays (or hashes).
 JavaScript does not support arrays with named indexes.
 In JavaScript, arrays always use numbered indexes.
1.26.4 The Difference Between Arrays and Objects
 In JavaScript, arrays use numbered indexes.
 In JavaScript, objects use named indexes.
1.26.5 When to Use Arrays and When to use Objects??
 JavaScript does not support associative arrays.
 You should use objects when you want the element names to be strings (text).
 You should use arrays when you want the element names to be numbers.
1.27 JAVASCRIPT DEBUGGERS
 Searching for errors in programming code is called code debugging.
 Debugging is not easy. But fortunately, all modern browsers have a built-in
debugger.
 Built-in debuggers can be turned on and off, forcing errors to be reported to the
user.
 With a debugger, you can also set breakpoints (places where code execution can
be stopped), and examine variables while the code is executing.
 Normally, otherwise follow the steps at the bottom of this page, you activate
debugging in your browser with the F12 key, and select "Console" in the
debugger menu.
Example:
<html>
<body>
<h1>My First Web Page</h1>
<p>
Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console"
in the debugger menu.
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
Output:

1.27.1 Major Browsers' Debugging Tools
Normally, you activate debugging in your browser with F12, and select "Console"
in the debugger menu.
Otherwise follow these steps:
i) Chrome
 Open the browser.
 From the menu, select tools.
 From tools, choose developer tools.
 Finally, select Console.
ii) Firefox Firebug
 Go to the web page:
http://www.getfirebug.com
 Follow the instructions how to: install Firebug
iii) Internet Explorer
 From the menu, select tools.
 From tools, choose developer tools.
 Finally, select Console.
iv) Opera
 Go to the webpage:
http://dev.opera.com
 Follow the instructions how to: add a Developer Console button to your toolbar.
v) Safari Firebug
 Go to the webpage:
http://extensions.apple.com
 Follow the instructions how to: install Firebug Lite.
vi) Safari Develop Menu
 Go to Safari, Preferences, Advanced in the main menu.
 Check "Enable Show Develop menu in menu bar".
 When the new option "Develop" appears in the menu: Choose "Show Error
Console".
1.28 REGULAR EXPRESSIONS
 Sequence or pattern of characters, matched against a text string, when searches
and replacements are performed.
 Performs client-side data validations or any other extensive text entry parsing.
1.28.1 RegEx-Special Characters
i) b Word Boundary
Get a match at the beginning or end of a word in the string.
/bor/ - matches "orgami" and "or" but not "normal"
/orb/ - matches "traitor" and "or" but not "perform"

ii) B Word Non-Boundary
Get a match when it is not at the beginning or end of a word in the string.
/Bor/ - matches "normal" but not "origami"
/orB/ - matches "normal" and "origami" but not "traitor"
iii) d Numeral
Find any single digit 0 through 9.
/ddd/ - matches "212" and "415" but not "B17"
iv) D Non-numerical
Find any non-digit.
/DDD/ - matches "ABC" but not "212" or "B17"
v) s Single White Space
Find any single space character.
/oversbite matches "over bite" but not "overbite" or ""over bite but not ""overbite"
or "over bite"
vi) w Letter, Numeral, or Underscore
/Aw/ - matches "A1" and "AA" but not "A+"
vii) W Not Letter, Numeral, or Underscore
/AW/ - matches "A+" but not "A1" and "AA"
Example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Customer Information</title>
function res()
{
Customer.reset();
}
function submitFields()
{
var cno=parseInt(document.Customer.cid.value);
var no=cno;
var nam=/^[a-zA-Z]+$/;
var a=document.Customer.cname.value;
var deptamt=parseInt(document.Customer.amtdep.value);
var dep=deptamt;
var mai=document.Customer.mchk.value;

if(no<0 || isNaN(no))
{
alert("Enter the customer id properly");

Customer.reset();
}
else if(!a.match(nam)||(a.length<6))
{
alert("Username should b in character between six and twelve characters");
Customer.reset();
}
else if(deptamt<1000||deptamt>100000)
{
alert("Enter amount between 100 and 100000");
Customer.reset();
}
else if(!mai.match(check1))
{
alert("Invalid email");
Customer.reset();
}
}
</script>
</head>
<body>
<form name="Customer" method="post" action="">
<table align="center">
<tr>
<td align="center" colspan="2"><font color="blue">
<h1><u><i>CUSTOMER INFORMATION</i></u></h1>
</font></td>
</tr>
<tr>
<h3><b>CUSTOMER_ID</b></h3>
<td><input type="text" name="cid" maxlength="3"></input></td>
</tr>
<tr>
<h3 align="justify"><b>NAME</b></h3>
<td><input type="text" name="cname"></input></td>
</tr>
<tr>
<h3 align="justify"><b>ACCOUNT NUMBER</b></h3>

Internet Principles and Components, Client-Side Programming

Internet Principles and Components, Client-Side Programming

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Internet Principles and Components, Client-Side Programming

Similar to Internet Principles and Components, Client-Side Programming (20)

More from Prabu U

More from Prabu U (20)

Recently uploaded

Recently uploaded (20)

Internet Principles and Components, Client-Side Programming