0% found this document useful (0 votes)

38 views454 pages

WT Complete Notes

Uploaded by

abbashaider786000

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

38 views454 pages

WT Complete Notes

Uploaded by

abbashaider786000

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 454

Unit Wise Notes

rd
3 Year
Branch: CSE/IT
Subject: Web Technology (BCS- 502)

Subject Co-ordinator: Mr. Sachin Kr. Sonker

Contact Number: 9260905108

ENCLOSURES:
BRANCH Units S. No. FACULTY NAME
Unit-1 1 Mr. Sachin Kumar Sonker
Unit-2 2 Mr. Sachin Kumar Sonker
CSE/AIML/IT Unit-3 3 Mr. Sachin Kumar Sonker
Unit-4 4 Mr. Ajai Kumar Maurya
Unit-5 5 Mr. Sachin Kumar Sonker

Note: If you have any doubts or need further clarification on any topics, contact to the subject
coordinator.
Unit-1
Unit- I Introduction and Web Development Strategies

1. World Wide Web:

The World Wide Web is a system of interlinked hypertext documents accessed via the Internet.
Web is a huge collection of pages of information linked to each other around the globe.

History of WWW:
WWW is created by Sir Tim Berners Lee in 1989 at CERN in Geneva.
In 1990, the first text only browsers were setup and CERN scientist could access hypertext
files and other information at CERN. HTML was based on a subset of the standard generalized
markup language (SGML). To transfer HTML document to remote sites a new protocol was
devised called HTTP (Hyper Text Transfer Protocol).
In the fall of 1991, conference goes around the world started hearing about the promise but
sparks still were not flying.
In 1993, there are only about 50 websites world wide. A browser that allowed user to take
advantage of the web’s graphical capabilities was developed at the National center for Super
Computing application (NCSA). NCSA called the browser Mosaic.

2. Protocols Governing Web:

Protocol: A protocol is a set of rules that is used to communicate applications to each other.
OR
A protocol is the interface required for communicating the different applications.
Classification:
 HTTP
 TCP/IP
 FTP
 E-MAIL
 TELNET

HTTP: HTTP is the primary protocol used to distribute information on the web.
Initial HTTP 0.9 does not allow for content typing and does not have provisions for supplying
meta-information.
Content Typing: To identify the type of data being transferred.
Meta Information: It is supplemental data, such as environment variables that identify the
client’s computer Current version is HTTP 1.0
TCP/IP: It is a set of rules that an application can use to package its information for sending
across the networks of networks.
FTP: It is used to transfer the files over networks.
E-Mail: It is a method of exchanging digital messages across the Internet or other computer
networks.
Telnet: Telnet lets you remotely log into another system and browse files and directories on that
remote system.
3. Website: A website is simply a collection of interlinked web pages.
Classification: A. Corporate Website B. Individual website
A. Corporate Website:
i. In this, there is certain no. of persons, who develop their website for a particular organization.
ii. The corporate website are formed when group of people have common interest and objective.
iii. The purpose of this website is to convey the information of organization to all over the world.
B. Individual website: It is just like profile management system. In this type of website an
individual wants to develop website for h-projection, career growth etc.

4. Cyber Laws: Cyber law is a term used to describe the legal issues related to use of
communication technology, particularly “cyberspace” i.e. Internet.
Indian and International Cyber Law: Cyber Laws are formed by the government to prevent the
internet crime. These crimes could be hacking, threat on internet, denial of services etc.
Cyberspace includes computer, computer networks, internet data, software etc.
i. Data Protection and Privacy Law: This is due to the nature of the internet and amount of
information that may be accessed through it, such legislation is critical to protect the fundamental
rights of privacy of an individual.
ii. Electronic and Digital Signature Law: This is required so that uniform and standard
procedures are established for authentication of electronics records, EDI, E-Mail.
iii. Computer Crime Law: due to victim of internet threats.
iv. Telecommunication Law: Approve and supervise the application of fees and rates charged
for telecommunication services in accordance with the provision of the applicable law.
v. Intellectual Property Law: This includes copyright law, trademark law, semiconductor
law and patent law in relation to computer hardware and software.

IT Act 2000 (INDIA):

E-Governance
Authentication of E-Records
Digital Signatures
Controlled certifying authorities
Penalties for damage of computer and computer system.

5. Web Applications:
Simple office software (word processors, online spreadsheets, and presentation tools).
More advanced applications such as project management, computer-aided design, video editing
and point-of-sale.

6. Writing web Projects and Target Users:

A. Write a project mission statement: Write the specific mission statement that you want to do.
B. Identify Objectives:
i. Specific
ii. Measurable
iii. Attainable
iv. Realistic
v. Time limited

C. Identify your target users: The matter of a website will be determined by the users whom
you want to visit the site. This is totally depend upon
i. Market research
ii. Focus group
iii. Understanding intranet audiences

D. Determine the scope: By supporting documents and client’s approval.

E. Budget:
i. Assumption for budgets.
ii. Budget categories.
iii. Determine hidden costs and tools.
F. Planning issues:
i. Discuss client’s existing information system.
ii. Project team and developing infrastructure.
iii. Where the website will place.

8. Identification of objects:

Object identification: All the components which are visible in website are objects or in other
words, we can say that all visible components in the web browser are defined as objects. Ex. Text
box, command button etc.

Web development process:

Strategy:
 Goals and objectives
 Team building
 Research and review
 Project proposal
Design and Specification:
 Developing concept
 Content planning
 Rough design
 Final design
Produced desired Result:
 Build prototype
 Prototype testing
 Original design
 Satisfy the clients need
Testing and maintenance:
 Test the code
 Maintain the web server.
Register with ISP:
 Register domain name
 Get web space
Launch:
 Connect domain name with web server
 Finally host the web accordingly.

9. Web Team: Web team is a group of various technical experts in a developing site from coding
the page to maintain the web server.
Types:
A. Server Side: hired by a company to develop a website.
B. Client Side: part of the company putting together the website.
Assessment techniques used to comprise a web team:
a. Deciding roles and responsibilities: The composition of team varies to depend on the
audience, scope and complexity level of the web. There are key roles on each virtual project.
One should always decide for core, extended and special team members in a web and shares
responsibilities accordingly.

b. Common Team Compositions: It is possible to acknowledge specific type of teams and

determine to be based on the kind of project, who is likely to be part of the team though these are
all type of web project. As for example the team composition might be account manager, creative
lead, project manager, designer etc.
c. Putting together with right team: It meet out the needs with low price, more effectively in
reasonable time. So it is the team that fulfills the website requirements successfully.
d. Identifying Necessary Skills: The skill set in the base of web team. It must have in care to
plan, design, build and deploy a website.

Web Development Planning Process

1. Strategy:
· Decide Goals and objectives
· Team building
· Review your Strategy
· Create Final Project proposal
2. Design and Specification:

· Developing concept
· Content planning
· Rough design
· Final design

3. Produced desired Result:

· Build prototype
· Prototype testing
· Original design
· Satisfy the clients need

4. Testing and maintenance:

· Test the code

· Maintain the web server.

5. Register with ISP:

· Register domain name

· Get web space

6. Launch:
· Connect domain name with web server
· Finally host the web accordingly.
·

· Internet Services

• World Wide Web

• Telnet
• Electronic Mail
• FTP - File Transfer Protocol
• Chat
• Email
• Newsgroups
Client-Server Computing
Client-Server Computing
• Client/server computing is a software engineering technique
often used within distributed computing that allows two
independent processes to Exchange

information, through a Dedicated

connection.
• Client/Server computing is NOT concerned directly with
communications over the network.
The client's res pons ibility is us ually ot :

1. Handle the user interface.

2. Translate the user's request into the desired protocol.
3. Send the request to the server.
4. Wait for the server's response.
5. Translate the response into "human- readable" results.
6. Present the results to the user.
The s erver's functions include:

1. Listen for a client's query.

2. Process that query.
3. Return the results back to the client.

• The user runs client software to create a query.

• The client connects to the server.
• The client sends the query to the server.
• The server analyzes the query.
• The server computes the results of the query.
• The server sends the results to the client.
• The client presents the results to the user.
• Repeat as necessary.

HTML
Development Types

1. Application Development- The softwares which execute under an

operating system are known as application softwares.

Ex. Ms-Word, PageMaker, Photoshop etc Technologies are-

C,C++,VB,VB.NET,C#, Java(Swing,AWT,JDBC)
2. Web Development- The Applications which executes under a web
server are known as web applications. During development each technology
requires their own web server. These are-

Technology Web
Server Name Sun Java(JSP,Servlet)
Apache
Tomcat Microsoft(ASP,ASP.NET) IIS
PHP WAMP

Web Development

In Development Pont of View their are two categories of web development,

these are-
1. Client Side Development- Here we design the interface of
website, means it decides how a web page will look and the client
side technologies are-
HTML,DHTML,JavaScript etc

2. Server Side Developement- The Server Side Technology focus about

the functioning of a website.The Server Side Technologies are - ASP, JSP &
Servlet, PHP
HTML

1. HTML stands for HyperText Markup Language.

2. It is a client side programming languages.
3. The extension of HTML may be .htm or .html
4. It is not a case sensitive language
5. it is a Tag based language, & the tags could be classified into two types
a) single tag (<tag> or <tag/>) ex. <br>,<hr>
b) paired tag (<tag>.....</tag>) ex <html>,<body> etc
6. you can write html program on any editor like notepad, but some
specific IDEs are-
a) Dreamweaver
b) FrontPage
7. It executes on a web browser.
• <!DOCTYPE html>

• <html>

• <head>

• <title>My First Web Page</title>

• </head>

• <body bgcolor="pink">

• Hello Friends

• </body>

• </html>
Basic HTML Tags

• <html>- indicates starting of a html program

• <head>- it is container tag contains

<title>,<script>,<style> etc

• <title>- sets the title of a page

• <body>- specifies the contents of a page Attributes

1. bgcolor- sets the background color

2. background- sets the background image
HTML <!DOCTYPE>

• All HTML documents must start with a

<!DOCTYPE> declaration.

• The declaration is not an HTML tag. It is an "information" to the

browser about what document type to expect.

• In HTML5, the <!DOCTYPE> declaration is simple:

<!DOCTYPE html>
HTML Elements

• The HTML element is everything from the start tag to the end
tag:
<tagname>Content goes here...</tagname>

• Examples of some HTML elements:

<h1>My First Heading</h1>
<p>My first paragraph.</p>

HTML Attributes

• All HTML elements can have attributes

• Attributes provide additional information about elements

• Attributes are always specified in the start tag

• Attributes usually come in name/value pairs like:
name="value"
• Example
• <a href="https://www.w3schools.com">Visit W3Schools</a>

HTML Comment Tags

• You can add comments to your HTML source by using the following
syntax:

Notice that there is an exclamation point (!) in the start tag, but not in the
end tag.

• Example

<p>This is a paragraph.</p>

\ HTML Headings

• HTML headings are titles or subtitles that you want to display on a

webpage.
• HTML headings are defined with the <h1>
to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least
important heading.
• Example

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>
HTML Paragraphs

• A paragraph always starts on a new line, and is usually a block of text.

• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and after a
paragraph.
• Example

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Text Formatting Tags-

• <font> - sets the font color & style

• Attributes
• 1. face- sets the font name
• 2. color- sets the font color
• 3. size - sets the font size
• <hr>- draw the horizontal line, it is a single tag
• <br>- change a line, it is also a single tag
• <b>- Bold
• <i>- Italic
• <u>- Underline
Text Formatting Tags-

• <big>- Big Text

• <small>- Small Text
• <pre>- pre formatted Text
• <sup> - Superscript
• <sub>- Subscript
• <mark> - Marked text
• <del> - Deleted text
• <ins> - Inserted tex

HTML Quotation and Citation

Elements

• In this chapter we will go through

the <blockquote>,<q>, <abbr>, <address>,

Tag Description

<abbr> Defines an abbreviation or acronym

<address> Defines contact information for the author/owner of a document

<bdo> Defines the text direction

<blockquote> Defines a section that is quoted from another source

<cite> Defines the title of a work

<q> Defines a short inline quotation

HTML <blockquote> for Quotations

• The HTML <blockquote> element defines a section that is quoted from another
source.

• Browsers usually indent <blockquote> elements.

Example

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF
has been protecting the future of nature.
The world's leading conservation organization, WWF
works in 100 countries and is supported by
1.2 million members in the United States and close to
5 million globally.
</blockquote>

HTML <q> for Short Quotations

• The HTML <q> tag defines a short quotation.

• Browsers normally insert quotation marks around the quotation.

Example
<p>WWF's goal is to: <q>Build a future where people live in
harmony with nature.</q></p>
HTML <abbr> for Abbreviations

• The HTML <abbr> tag defines an abbreviation or an acronym, like

"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
• Marking abbreviations can give useful information to browsers,
translation systems and search-engines.
Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.
Example
<p>The <abbr title="World Health Organization">WHO</abbr>
was founded in 1948.</p>

HTML <address> for Contact Information

• The HTML <address> tag defines the contact information for the
author/owner of a document or an article.
• The contact information can be an email address, URL, physical
address, phone number, social media handle, etc.
• The text in the <address> element usually renders in italic, and
browsers will always add a line break before and after
the <address> element.
Example
• <address>
Written by
John Doe.<br>
Visit us
at:<br>
Example.com<
br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for Work Title

• The HTML <cite> tag defines the title of a creative work (e.g. a book, a
poem, a song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

• The text in the <cite> element usually renders in italic.

Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in

1893.</p>

HTML <bdo> for Bi-Directional

Override

• BDO stands for Bi-Directional Override.

• The HTML <bdo> tag is used to override the current text direction:

Example
<bdo dir="rtl">This text will be written from right to left</bdo

HTML Links - Hyperlinks

• HTML links are hyperlinks.

• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse arrow will turn
into a little hand.

Note: A link does not have to be text. A link can be an image or any other
HTML element!
• HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

• The most important attribute of the <a> element is

the href attribute, which indicates the link's destination.

• The link text is the part that will be visible to the reader.
• Clicking on the link text, will send the reader to the
specified URL address.

• Example

• This example shows how to create a link to google.com:

• <a href="https://www.google.com/">Visit google.com!</a>

• By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue

• A visited link is underlined and purple

HTML Links - The target Attribute

• By default, the linked page will be displayed in the current browser window.
To change this, you must specify another target for the link.
• The target attribute specifies where to open the linked document.
• The target attribute can have one of the following values:

– _self - Default. Opens the document in the same window/tab as it was

clicked

– _blank - Opens the document in a new window or tab

Example
Use target="_blank" to open the linked document in a new browser window or
tab:

<a href="https://www.w3schools.com/" target="_blank">Visit

W3Schools!</a>

to an Email Address

• Use mailto: inside the href attribute to create a link that opens the user's email
program (to let them send a new email):

Example

<a href="mailto:[email protected]">Send email</a>

HTML Images

• The HTML <img> tag is used to embed an image in a web page.

• Images are not technically inserted into a web page; images are linked to
web pages. The <img> tag creates a holding space for the referenced
image.
• The <img> tag is empty, it contains attributes only, and does not have a
closing tag.

• The <img> tag has two required attributes:

• src - Specifies the path to the image
• alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">

Example
• <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
HTML Image Maps

• The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

Example:-

Here is the HTML source code for the image map above:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

HTML Marquee Tag

• The <marquee> tag is a container tag of HTML is implemented for creating

scrollable text or images within a web page from either left to right or vice versa,
or top to bottom or vice versa. But this tag has been deprecated in the new
version of HTML, i.e., HTML 5.
• Attributes

1. behavior- it may be scroll or alternate

2. direction- sets the direction may be left, right, up, down.
Example

<marquee direction="right" behavior="alternate">

<h1>United College</h1>

</marquee>

HTML Lists

• HTML lists allow web developers to group a set of related items

in lists.

Example

An unordered HTML list:

 Item

An ordered HTML list:

1. First item

2. Second item

3. Third item

4. Fourth item
Attribute-
type- specifies the list type
for numbering use (A,a,I,i etc)
for bullets use (sqaure,circle)
Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

HTML Table

• The <table> tag defines an HTML table.

• Each table row is defined with a <tr> tag. Each table header is defined with
a <th> tag. Each table data/cell is defined with a <td> tag.

• By default, the text in <th> elements are bold and centered.

• By default, the text in <td> elements are regular and left-

aligned.
<table> creates a table
Attributes
1. border
2. align
3. width
4. bgcolor
5. background
6. height
<tr> Table Row
<td> Table Cell Value
Attributes
1. rowspan- merge the rows
2. colspan- merge the columns
<th> Table Cell Heading
<caption> element to define a table
caption
Example
A simple HTML table:

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML Forms

• An HTML form is used to collect user input. The user input is most
often sent to a server for processing.

• The <form> Element

• The HTML <form> element is used to create an HTML form for user
input:
• <form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements,

such as: text fields, checkboxes, radio buttons, submit buttons, etc

The <input> Element

• The HTML <input> element is the most used form element.

• An <input> element can be displayed in many ways,
depending on the type attribute.
• Here are some examples:
Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many

choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or

more of many choices)

<input type="submit"> Displays a submit button (for submitting

the form)

<input type="button"> Displays a clickable button

HTML Input Types

• <input type="button"> • <input type="number">

• <input type="checkbox"> • <input type="password">

• <input type="color"> • <input type="radio">

• <input type="date"> • <input type="range">

• <input type="datetime-
local"> • <input type="reset">

• <input type="email"> • <input type="search">

• <input type="file"> • <input type="submit">

• <input type="hidden"> • <input type="tel">

• <input type="image"> • <input type="text">

• <input type="month"> • <input type="time">

• <select > &<option> • <input type="url">

• <input type="week">
Block-level Elements (DIV)

• A block-level element always starts on a new line and takes up the full
width available (stretches out to the left and right as far as it can).
• The <div> element is a block-level element.

Example 1:-

<div>Hello World</div>
Here are the block-level elements in

HTML:

• <form>
• <address> • <h1>-<h6>
• <article> • <header>
• <aside> • <hr>
• <blockquote> • <li>
• <canvas> • <main>
• <dd> • <nav>
• <div> • <noscript>
• <dl> • <ol>
• <dt> • <p>
• <fieldset> • <pre>
• <figcaption> • <section>
• <figure> • <table>
• <footer> • <tfoot>
• <ul>
Inline Elements (SPAN)

• An inline element does not start on a new line and it only takes up as much
width as necessary.

• This is a <span> element inside a paragraph. Example

<span>Hello World</span>

Here are the inline elements in HTML:

• <a> • <label>
• <abbr> • <map>
• <acronym> • <object>
• <b> • <output>
• <bdo> • <q>
• <big> • <samp>
• <br> • <script>
• <button> • <select>
• <cite> • <small>
• <code> • <span>
• <dfn> • <strong>
• <em> • <sub>
• <i> • <sup>
• <img> • <textarea>
• <input> • <time>
• <kbd> • <tt>
Frame

• Frame- Frame is used for splitting the window into different individual
parts. and each part you can embed a new html page.

• Tags Meaning
<frameset> Creates a
frame
Attribute
s
1. rows - creates horizontal frame
2. cols- create vertical frame
<frame> creates individual window Attributes

1. src- sets the name of file which

will show in the
window
2. name- sets the name of window
Example
<frameset cols="40%,30%,30%">
<frame src="demo.html" name="f1">
<frame src="" name="f2">
<frame src="" name="f3">
</frameset>
HTML Iframes

• The HTML <iframe> tag specifies an inline frame.

• An inline frame is used to embed another document within the
current HTML document.
• Syntax
<iframe src="url" title="description">

Tip: It is a good practice to always include

a title attribute for the <iframe>. This is used by screen readers to read out what the
content of the iframe is.
• The HTML <iframe> tag specifies an inline frame
• The src attribute defines the URL of the page to embed
• Always include a title attribute (for screen readers)
• The height and width attributes specifies the size of the iframe
• Use border:none; to remove the border around the iframe

HTML Video

• The HTML <video> element is used to show a video on a web page.

Example

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg"> Your browser
does not support the video tag.

</video>

How it Works

• The controls attribute adds video controls, like play, pause, and volume.

• It is a good idea to always

include width and height attributes. If height and width are not set, the page
might flicker while the video loads.

• The <source> element allows you to specify alternative video files which
the browser may choose from. The browser will use the first recognized
format.
• The text between the <video> and </video> tags will only be displayed in
browsers that do not support
the <video> element.

HTML Audio

• The HTML <audio> element is used to play an audio file on a web page.

Example

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg"> Your browser does not
support the audio element.

</audio>

HTML Audio - How It Works

• The controls attribute adds audio controls, like play, pause, and volume.

• The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format.

• The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
HTML Entities

• Reserved characters in HTML must be replaced with

character entities.

• If you use the less than (<) or greater than (>) signs in your text, the
browser might mix them with tags.

• Character entities are used to display reserved characters in HTML.

• A character entity looks like this:

&entity_name;OR
&#entity_number;

• To display a less than sign (<) we must write: < or <

Some Useful HTML Character Entities

Result Description Entity Name Entity Number

non-breaking space    

< less than < <

> greater than > >

& ampersand & &

" double quotation mark " "

' single quotation mark ' '

(apostrophe)

¢ cent ¢ ¢

£ pound £ £

¥ yen ¥ ¥

€ euro € €

© copyright © ©

® registered trademark ® ®

HTML Symbol Entities

• Many mathematical, technical, and currency symbols, are not
present on a normal keyboard.

• To add such symbols to an HTML page, you can use the entity name or the
entity number (a decimal or a hexadecimal reference) for the symbol.

Example

Display the euro sign, €, with an entity name, a decimal, and a hexadecimal
value:
<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p>
UNIT-2

CSS
By:-Mr. Sachin Kumar
Sonker
What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are
to be displayed on screen, paper, or in
other media
• CSS saves a lot of work. It can
control the layout of multiple web
pages all at once
• External stylesheets are stored in CSS files
Why Use CSS?
• CSS is used to define styles for your web pages,
including the design, layout and variations in
display for different devices and screen sizes.

CSS Example:-
• body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family:
verdana; font-size:
20px;
}
CSS Syntax
CSS Syntax
• A CSS rule-set consists of a selector and a declaration
block:

• The selector points to the HTML element you want to style.

• The declaration block contains one or more
declarations separated by semicolons.
• Each declaration includes a CSS property name and a
value, separated by a colon.
• Multiple CSS declarations are separated with semicolons,
and declaration blocks are surrounded by curly braces.
Example:-

In this example all <p> elements will be center-aligned, with a red

text color: p {
color: red;
text-align: center;
}

• EXAMPLE EXPLAINED

P IS A SELECTOR IN CSS (IT POINTS TO THE HTML

ELEMENT YOU WANT TO STYLE: <P>).

COLOR IS A PROPERTY, AND RED IS THE PROPERTY VALUE

TEXT-ALIGN IS A PROPERTY, AND CENTER IS THE PROPERTY

VALUE
How To Add CSS
Three Ways to Insert CSS
• There are three ways of inserting a style
sheet:
• External CSS
• Internal CSS
• Inline CSS
External CSS
• With an external style sheet, you can change the look of an entire
website by changing just one file!
• Each HTML page must include a reference to the external style
sheet file inside the <link> element, inside the head section.

Example
• External styles are defined within the <link> element, inside the
<head> section of an HTML page:
• <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type=“text/css” href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
• An external style sheet can be written in any
text editor, and must be saved with a .css
extension.
• The external .css file should not contain
any HTML tags.
• Here is how the "mystyle.css" file looks:
• "mystyle.css"
• body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left:
20px;
}
Internal CSS
• An internal style sheet may be used if one single HTML page has a unique style.
• The internal style is defined inside the <style> element, inside the head section.
• Example
• Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: maroon;
margin-left:
40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
• An inline style may be used to apply a unique style for a
single element.
• To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
• Example
• Inline styles are defined within the "style" attribute of the
relevant element:
• <!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
CSS Selector
The CSS element Selector

• The element selector selects HTML

elements based on the element name.
Example
Here, all <p> elements on the page will be
center- aligned, with a red text color:

p{
text-align: center;
color: red;
}
The CSS id Selector
• The id selector uses the id attribute of an
HTML element to select a specific element.
• The id of an element is unique within a page, so
the id selector is used to select one unique
element!
• To select an element with a specific id, write a
hash (#) character, followed by the id of the
element.
Example
The CSS rule below will be applied to the HTML
element with id="para1":
#para1 {
text-align: center;
color: red;
}
The CSS class Selector
• The class selector selects HTML elements
with a specific class attribute.
• To select elements with a specific class,
write a period (.) character, followed by the
class name.

Example
In this example all HTML elements with
class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}
CSS Comments
CSS Comments

• Comments are used to explain the code, and may

help when you edit the source code at a later
date.
• Comments are ignored by browsers.
• A CSS comment is placed inside the <style>
element, and starts with /* and ends with */:
Example
/* This is a single-line comment
*/ p {
color: red;
}
CSS Color
CSS Colors

Colors are specified using

• predefined color names

• RGB(red, green, blue)
• RGBA (red, green, blue, alpha)
• HEX
• HSL (hue, saturation, lightness)
• HSLA (hue, saturation, lightness, alpha)
values.
CSS RGB Colors

• In CSS, a color can be specified as an RGB value,

using this formula:
• rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the
intensity of the color between 0 and 255.
• For example, rgb(255, 0, 0) is displayed as red,
because red is set to its highest value (255) and the
others are set to 0.
• To display black, set all color parameters to 0,
like this: rgb(0, 0, 0).
• To display white, set all color parameters to 255, like
this: rgb(255, 255, 255).
CSS HEX Colors

• In CSS, a color can be specified

using a hexadecimal value in the
form:
• #rrggbb
• Where rr (red), gg (green) and bb (blue)
are hexadecimal values between 00 and ff
(same as decimal 0-255).
• For example, #ff0000 is displayed as red,
because red is set to its highest value (ff)
and the others are set to the lowest value
(00).
CSS HSL Colors

• In CSS, a color can be specified using hue,

saturation, and lightness (HSL) in the form:
• hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to 360. 0
is red, 120 is green, and 240 is blue.
• Saturation is a percentage value, 0% means a shade
of gray, and 100% is the full color.
• Lightness is also a percentage, 0% is black, 50% is
neither light or dark, 100% is white
• Experiment by mixing the HSL values below:
CSS Background
CSS Backgrounds

• The CSS background properties are

used to define the background effects
for elements.
• In these chapters, you will learn about
the following CSS background
properties:
– background-color
– background-image
– background-repeat
– background-attachment
– background-position
CSS background-color

• The background-color property specifies

the background color of an element.
• Example
• The background color of a page is set like this:

• body {
background-color: lightblue;
}

• With CSS, a color is most often specified by:

– a valid color name - like "red"
– a HEX value - like "#ff0000"
– an RGB value - like "rgb(255,0,0)“
CSS Background Image

• The background-image property specifies

an image to use as the background of an
element.
• By default, the image is repeated so it
covers the entire element.
Example
• Set the background image for a page:
• body {
background-image: url("paper.gif");
}
CSS Background Repeat

• By default, the background-image property

repeats an image both horizontally and
vertically.
• Some images should be repeated only
horizontally or vertically, or they will look
strange, like this:
• If the image above is repeated only
horizontally (background-repeat: repeat-x;),
the background will look better:

Example
body {
background-image:
url("gradient_bg.png"); background-
repeat: repeat-x;
}
CSS background-repeat:no-repeat

• Showing the background image only

once is also specified by the
background-
repeat property:
• Example
• Show the background image only once:
• body {
background-image:
url("img_tree.png"); background-
repeat: no-repeat;
}
CSSbackground-position

• The background-position property is used

to specify the position of the background
image.
• Example
• Position the background image in the top-
right corner:
• body {
background-image:
url("img_tree.png"); background-
repeat: no-repeat; background-
position: right top;
}
CSSbackground-attachment

• The background-attachment property

specifies whether the background image
should scroll or be fixed (will not scroll with
the rest of the page):
• Example
• Specify that the background image should be fixed:
• body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
CSS Borders
CSS Borders
CSS Border Style
• The border-style property specifies what kind of border to display.
• The following values are allowed:
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends
on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-
color value
• inset - Defines a 3D inset border. The effect depends on the
border-color value
• outset - Defines a 3D outset border. The effect depends on the
border- color value
• none - Defines no border
• hidden - Defines a hidden border
• The border-style property can have from one to four values (for
the top border, right border, bottom border, and the left border).
CSS Border Width

• The border-width property specifies the width of

the four borders.
• The width can be set as a specific size (in px,
pt, cm, em, etc) or by using one of the three
pre-defined values: thin, medium, or thick:

Example
• Demonstration of the different border widths:
p.one {
border-style:
solid; border-
width: 5px;
}
p.two {
border-style: solid;
border-width:
medium;
}
CSS Border Color

• The border-color property is used to set the color of the four borders.
• The color can be set by:
• name - specify a color name, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• transparent
• Note: If border-color is not set, it inherits the color of the element.
• Example
• Demonstration of the different border colors:
• p.one {
border-style:
solid; border-
color: red;
}
p.two {
border-style: solid;
border-color:
green;
}
CSS Border - Individual Sides

• From the examples on the previous pages,

you have seen that it is possible to specify a
different border for each side.
• In CSS, there are also properties for
specifying each of the borders (top, right,
bottom, and left):
• Example
• p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style:
dotted; border-left-style:
solid;
}
CSS Border - Shorthand Property

• Like you saw in the previous page, there are

many properties to consider when dealing
with borders.
• To shorten the code, it is also possible to specify
all the individual border properties in one
property.
• The border property is a shorthand property for
the following individual border properties:
• border-width
• border-style (required)
• border-
color
Example
p{
border-left: 6px solid red;
background-color:
lightgrey;
}
CSS Margins
CSS Margins

• The CSS margin properties are used to create

space around elements, outside of any defined
borders.
• With CSS, you have full control over the margins.
There are properties for setting the margin for
each side of an element (top, right, bottom, and
left).
Margin - Individual Sides
• CSS has properties for specifying the margin for
each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
All the margin properties can have the following values:
• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the
parent element
Example
• Set different margins for all four sides of a <p> element:
• p{
margin-top: 100px;
margin-bottom:
100px; margin-right:
150px; margin-left:
80px;
}
CSS Padding
CSS Padding

• The CSS padding properties are used to generate

space around an element's content, inside of any
defined borders.
• With CSS, you have full control over the padding.
There are properties for setting the padding for each
side of an element (top, right, bottom, and left).
• Padding - Individual Sides
• CSS has properties for specifying the padding for each
side of an element:
– padding-top
– padding-right
– padding-bottom
– padding-left
All the padding properties can have the following values:
• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the
parent element

Example
• Set different padding for all four sides of a <div> element:
• div {
padding-top: 50px;
padding-right: 30px;
padding-bottom:
50px; padding-left:
80px;
}
CSS Height & Width
CSS Setting height and width

• The height and width properties are

used to set the height and width of an
element.
• The height and width properties do not
include padding, borders, or margins. It
sets the height/width of the area inside
the padding, border, and margin of the
element.
CSS height and width Values

The height and width properties may have the following values:
• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value
Example
Set the height and width of a <div> element:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
All CSS Dimension Properties

Property Description
height Sets the height of an element

max-height Sets the maximum height of an element

max-width Sets the maximum width of an element

min-height Sets the minimum height of an element

min-width Sets the minimum width of an element

width Sets the width of an element

CSS Overflow
CSS Overflow

• The overflow property specifies whether to clip

the content or to add scrollbars when the
content of an element is too big to fit in the
specified area.
The overflow property has the following values:
• visible - Default. The overflow is not clipped.
The content renders outside the element's
box
• hidden - The overflow is clipped, and the rest of
the content will be invisible
• scroll - The overflow is clipped, and a scrollbar is
added to see the rest of the content
• auto - Similar to scroll, but it adds scrollbars only
when necessary
CSS Text
CSS Text

Text
Color
• The color property is used to set the color of the text. The color is specified by:
• a color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• The default text color for a page is defined in the body selector.

Example
• body {
background-color:
lightgrey; color: blue;
}
h1 {
background-color:
black; color: white;
}
TextAlignment

The text-align property is used to set the horizontal alignment of a text.

• A text can be left or right aligned, centered, or justified.
• The following example shows center aligned, and left and right aligned text
(left alignment is default if text direction is left-to-right, and right alignment is
default if text direction is right-to-left):

Example
• h1 {
text-align: center;
}

h2 {
text-align: left;
}
TextDecoration

• The text-decoration property is used to set or remove decorations

from text.
• The value text-decoration: none; is often used to remove underlines from
links:
Example
• h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}
TextTransformation

The text-transform property is used to specify uppercase and

lowercase letters in a text.
• It can be used to turn everything into uppercase or lowercase letters, or
capitalize the first letter of each word:
Example
• p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
TextShadow

• The text-shadow property adds shadow to text.

• In its simplest use, you only specify the horizontal shadow
(2px) and the vertical shadow (2px):
• Text shadow effect!

Example
• h1 {
text-shadow: 2px 2px;
}
Add a color (red) to the shadow:
• Text shadow effect!
Example
• h1 {
text-shadow: 2px 2px red;
}

Add a blur effect (5px) to the shadow:

• Text shadow effect!
Example
• h1 {
text-shadow: 2px 2px 5px red;
}
CSS Links
CSS Links

In addition, links can be styled differently

depending on what state they are in.
The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
Example

• /* unvisited link */
a:link {
/* selected link */ a:active {
color: red;
color: blue;
}
}
/* visited link */ • When setting the style
a:visited { for several link states,
color: green; there are some order
} rules:
• a:hover MUST come after
/* mouse over link */ a:link and a:visited
a:hover { • a:active MUST come
color: hotpink; after a:hover
}
CSS List
HTML Lists and CSS List Properties

• In HTML, there are two main types of lists:

• unordered lists (<ul>) - the list items are
marked with bullets
• ordered lists (<ol>) - the list items are
marked with numbers or letters
• The CSS list properties allow you to:
– Set different list item markers for ordered lists
– Set different list item markers for unordered lists
– Set an image as the list item marker
– Add background colors to lists and list items
Different ListItemMarkers

• The list-style-type property specifies the

type of list item marker.
• The following example shows some of
the available list item markers:
ul.a {
list-style-type: circle;
}
An Image as The List Item Marker

• The list-style-image property

specifies an image as the list item
marker:
• exampl
e ul {
list-style-image: url('sqpurple.gif');
}
Position The List Item Markers

• The list-style-position property specifies

the position of the list-item markers (bullet
points).
• "list-style-position: outside;" means that
the bullet points will be outside the list
item. The start of each line of a list item
will be aligned vertically. This is default:
• "list-style-position: inside;" means that the
bullet points will be inside the list item. As it
is part of the list item, it will be part of the
text and push the text at the start:
Styling List With Colors

• We can also style lists with colors, to

make them look a little more
interesting.
• Anything added to the <ol> or <ul> tag,
affects the entire list, while properties
added to the
<li> tag will affect the individual list items:
Example

• Example
• ol {
background: #ff9999;
padding: 20px;
}
ul {
background:
#3399ff; padding:
20px;
}
ol li {
background:
#ffe5e5; color:
darkred; padding:
5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff; color:
darkblue; margin:
5px;
}
CSS Table
CSS Tables

Table Borders
• To specify table borders in
CSS, use the border property.
• The example below specifies a solid border
for
<table>, <th>, and <td> elements:
table, th, td {
border: 1px
solid;
}
Full-WidthTable

• The table above might seem small in

some cases. If you need a table that
should span the entire screen (full-width),
add width: 100% to the <table> element:
– table {
width: 100%;
}
Collapse TableBorders

• The border-collapse property sets

whether the table borders should be
collapsed into a single border:
– table {
border-collapse: collapse;
}
CSSTable Size

Table Width and Height

• The width and height of a table are
defined by the width and height
properties.
• The example below sets the width of the table
to 100%, and the height of the <th> elements
to 70px:
table {
width: 100%;
}
th {
height: 70px;
}
CSSTableAlignment

• Horizontal Alignment
• The text-align property sets the horizontal
alignment (like left, right, or center) of the
content in <th> or
<td>.
• By default, the content of <th> elements are
center- aligned and the content of <td>
elements are left- aligned.
• To center-align the content of <td> elements as
well, use text-align: center:
– td {
text-align: center;
}
CSSTableStyle

• Table Padding
• To control the space between the border
and the content in a table, use
the padding property on <td> and <th>
elements:
– th, td {
padding:
15px; text-
align: left;
}
Horizontal Dividers

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Add the border-bottom property to <th> and <td> for horizontal

dividers:
Example
th, td {
border-bottom: 1px solid #ddd;
}
Hoverable Table

• Use the :hover selector on <tr> to

highlight table rows on mouse over:
– tr:hover {background-color: coral;}
Striped Tables

• For zebra-striped tables, use the nth-

child() selector and add a background-color
to all even (or odd) table rows:
– Example
– tr:nth-child(even) {background-color: #f2f2f2;}
First Name Last Name Savings
Peter Griffin $100

Lois Griffin $150

Joe Swanson $300
CSS Display
CSS Layout - The display Property

• The display property is the most important

CSS property for controlling layout.
• The display Property
– The display property is used to specify
how an element is shown on a web page.
– Every HTML element has a default display
value, depending on what type of element it is.
The default display value for most elements is
block or inline.
– The display property is used to change the
default display behavior of HTML elements.
The display Property Values

Value Description

inline Displays an element as an inline element

block Displays an element as a block element

inline-block Displays an element as an inline-level block container. The

element itself is formatted as an inline element, but you can
apply height and width values

none The element is completely removed

Hide an Element - display:none or
visibility:hidden?
• Hiding an element can be done by setting
the display property to none. The element will be
hidden, and the page will be displayed as if the
element is not there:
– h1.hidden {
display:
none;
}
• Visibility : hidden; also hides an element.
• However, the element will still take up the same
space as before. The element will be hidden, but
still affect the layout:
– h1.hidden {
visibility: hidden;
}
CSS Layout:Position
Layout - The position Property

• The position property specifies the type of

positioning method used for an element (static,
relative, fixed, absolute or sticky).
• The position Property
• The position property specifies the type of
positioning method used for an element.
There are five different position values:
 static
 relative
 fixed
 absolute
 sticky
position: static;

• HTML elements are positioned static by default.

• Static positioned elements are not affected by
the top, bottom, left, and right properties.
• An element with position: static; is not
positioned in any special way; it is always
positioned according to the normal flow of the
page:
– div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;

• An element with position: relative; is

positioned relative to its normal position.
• Setting the top, right, bottom, and left
properties of a relatively-positioned element
will cause it to be adjusted away from its
normal position. Other content will not be
adjusted to fit into any gap left by the
element.
– div.relative {
position:
relative; left:
30px;
border: 3px solid #73AD21;
}
position: absolute;

• An element with position: absolute; is positioned

relative to the nearest positioned ancestor
(instead of positioned relative to the viewport,
like fixed).
• However; if an absolute positioned element has
no positioned ancestors, it uses the document
body, and moves along with page scrolling.
– div.absolute {
position:
absolute; top:
80px;
right: 0;
width:
200px;
height:
100px;
border: 3px solid #73AD21;
}
position: fixed;

• An element with position: fixed; is

positioned relative to the viewport, which
means it always stays in the same place
even if the page is scrolled. The top, right,
bottom, and left properties are used to
position the element.
• A fixed element does not leave a gap in the
page where it would normally have been
located.
– div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: sticky;

• An element with position: sticky; is positioned

based on the user's scroll position.
• A sticky element toggles between relative and
fixed, depending on the scroll position. It is
positioned relative until a given offset position is
met in the viewport - then it "sticks" in place (like
position:fixed).
• Note: You must specify at least one
of top, right, bottom or left for sticky positioning to
work.
– div.sticky {
position:
sticky; top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
CSS Layout - float
The float Property

The float property is used for positioning and formatting

content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

• left - The element floats to the left of its container

• right - The element floats to the right of its container
• none - The element does not float (will be displayed
just where it occurs in the text). This is default
• inherit - The element inherits the float value of its parent

In its simplest use, the float property can be used to wrap text
around images.
CSS Layout
CSS Navigation Bar
Navigation Bar

• Having easy-to-use navigation is important for

any web site.
• With CSS you can transform boring HTML
menus into good-looking navigation bars.
Navigation Bar = List of Links

• Example • Example
<ul>
<li><a ul {
href="default.asp">Home list-style-type: none;
</a></li> margin: 0;
<li><a padding: 0;
href="news.asp">News Overflow:auto;
</a></li>
}
<li><a href="contact.asp">
Contact</a></li> li a {
<li><a float:left;
href="about.asp">About }
</a></li>
</ul>
CSS Transforms
CSS 2D Transforms

• CSS transforms allow you to move,

rotate, scale, and skew elements.
• In this chapter you will learn about
the following CSS property:
• Transform

– Applies a 2D or 3D transformation to an element

CSS2DTransformsMethods

• With the CSS transform property you can

use the following 2D transformation
methods:
• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
CSS 2D Transform Methods

Function Description
translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-
axis

translateX(n) Defines a 2D translation, moving the element along the X-axis

translateY(n) Defines a 2D translation, moving the element along the Y-axis

scale(x,y) Defines a 2D scale transformation, changing the elements width and
height

scaleX(n) Defines a 2D scale transformation, changing the element's width

scaleY(n) Defines a 2D scale transformation, changing the element's height

rotate(angle) Defines a 2D rotation, the angle is specified in the parameter

skew(x- Defines a 2D skew transformation along the X- and the Y-axis
angle,y-
angle)
skewX(angle) Defines a 2D skew transformation along the X-axis

skewY(angle) Defines a 2D skew transformation along the Y-axis

The translate() Method

• The translate() method moves an

element from its current position
(according to the parameters given for
the X-axis and the Y- axis).
– div {
transform: translate(50px, 100px);
}
The rotate()Method

• The rotate() method rotates an element

clockwise or counter-clockwise according
to a given degree.
– div {
transform: rotate(20deg);
}
– div {
transform: rotate(-20deg);
}
The scale() Method

• The scale() method increases or

decreases the size of an element
(according to the parameters given for the
width and height).
– div {
transform: scale(2, 3);
}
– div {
transform: scale(0.5, 0.5);
}
The skew() Method

• The skew() method skews an element

along the X and Y-axis by the given
angles.
– div {
transform: skew(20deg, 10deg);
}
CSS Transitions
CSS Transitions

• CSS transitions allows you to change

property values smoothly, over a given
duration.
In this chapter you will learn about the following
properties:
– transition
– transition-delay
– transition-duration
– transition-property
– transition-timing-function
How to Use CSS Transitions?

• To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to
• the duration of the effect
• Note: If the duration part is not specified, the transition
will have no effect, because the default value is 0.

– div {
width: 100px;
height: 100px;
background: red;
transition: width
2s;
}
– div:hover {
width:
300px;
}
Property Description

transition A shorthand property for setting the four

transition properties into a single property

transition-delay Specifies a delay (in seconds) for the

transition effect

transition-duration Specifies how many seconds or

milliseconds a transition effect takes to
complete

transition-property Specifies the name of the CSS property

the transition effect is for

transition-timing-function Specifies the speed curve of the

transition
effect
Specify the Speed Curve of the

Transition
• The transition-timing-function property specifies
the speed curve of the transition effect.
• The transition-timing-function property can have
the following values:
– ease - specifies a transition effect with a slow start,
then fast, then end slowly (this is default)
– linear - specifies a transition effect with the same
speed from start to end
– ease-in - specifies a transition effect with a slow start
– ease-out - specifies a transition effect with a slow end
– ease-in-out - specifies a transition effect with a slow start
and end
TransitionExamples

• div {
transition-property:
width; transition-
duration: 2s;
transition-timing-function:
linear; transition-delay: 1s;
}
• or by using the shorthand property transition:
DelaytheTransitionEffect

• The transition-delay property specifies a

delay (in seconds) for the transition effect.
• The following example has a 1 second
delay before starting:
Example
div {
transition-delay: 1s;
}
Transition + Transformation

• div
{ width: 100px;
height: 100px;
background:
red;
transition: width 2s, height 2s, transform
2s;
• }

div:hover {
width:
300px;
height:
300px;
transform: rotate(180deg);
}
CSS Flex
CSS Flexbox Layout Module

• The Flexible Box Layout Module, makes it

easier to design flexible responsive layout
structure without using float or positioning.
• Flexbox Elements
• To start using the Flexbox model, you need to
first define a flex container.
– <div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
ParentElement (Container)

• Like we specified in the previous chapter,

this is a flex container (the blue area)
with three flex items:
• Like we specified in the previous chapter,
this is a flex container (the blue area)
with three flex items:
– .flex-container
{ display:
flex;
}
The flex container properties are:

Property Description

align-content Modifies the behavior of the flex-wrap property. It is

similar to align-items, but instead of aligning flex items, it
aligns flex lines
align-items Vertically aligns the flex items when the items do not use all
available space on the cross-axis

display Specifies the type of box used for an HTML element

flex-direction Specifies the direction of the flexible items inside a flex

container

flex-flow A shorthand property for flex-direction and flex-wrap

flex-wrap Specifies whether the flex items should wrap or not, if there is
not enough room for them on one flex line

justify-content Horizontally aligns the flex items when the items do not use all
available space on the main-axis
The flex-direction Property

• The flex-direction property defines in

which direction the container wants to
stack the flex items.
• Example
• The column value stacks the flex items
vertically (from top to bottom):
– .flex-container
{ display:
flex;
flex-direction: column;
}
The flex-wrap Property

• The flex-wrap property specifies whether

the flex items should wrap or not.
• Example
• The wrap value specifies that the flex
items will wrap if necessary:
– .flex-container {
display: flex;
flex-wrap:
wrap;
}
The justify-content Property

• The justify-content property is used to

align the flex items:
• Example
• The center value aligns the flex items at
the center of the container:
– .flex-container
{ display:
flex;
justify-content: center;
}
The align-items Property

• The align-items property is used to align the

flex items.
• Example
• The center value aligns the flex items in
the middle of the container:
– .flex-container {
display: flex;
height: 200px;
align-items:
center;
}
CSS Flex Items

Property Description

align-self Specifies the alignment for a flex item (overrides the flex
container's align-items property)

flex A shorthand property for the flex-grow, flex-shrink, and

the flex-basis properties

flex-basis Specifies the initial length of a flex item

flex-grow Specifies how much a flex item will grow relative to the
rest of the flex items inside the same container

flex-shrink Specifies how much a flex item will shrink relative to the
rest
of the flex items inside the same container
order Specifies the order of the flex items inside the same
container
The order Property
• The order property specifies the order of the
flex items.
• The first flex item in the code does not
have to appear as the first item in the
layout.
• The order value must be a number, default
value is 0.
– <div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
The flex-grow Property

• The flex-grow property specifies how

much a flex item will grow relative to the
rest of the flex items.
• The value must be a number, default
value is 0.
– <div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
The flex-shrink Property

• The flex-shrink property specifies how much

a flex item will shrink relative to the rest of
the flex items.
• The value must be a number, default value is 1.
– <div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
</div>
Perfect Centering

• SOLUTION: Set both the justify-content and

align- items properties to center, and the flex
item will be perfectly centered:
• Example
• .flex-container
{ display:
flex; height:
300px;
justify-content:
center; align-items:
center;
}
CSS Image Sprites

• An image sprite is a collection of images

put into a single image.
• A web page with many images can take a
long time to load and generates multiple
server requests.
• Using image sprites will reduce the
number of server requests and save
bandwidth.
•
Image Sprites - Simple Example

• Instead of using three separate images, we

use this single image ("img_navsprites.gif"):

• With CSS, we can show just the part of the

image we need.
• In the following example the CSS specifies
which part of the "img_navsprites.gif" image to
show:
• Example
– #home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
CSS Attribute Selectors

• Style HTML Elements With Specific Attributes

• It is possible to style HTML elements that
have specific attributes or attribute values.
All CSS Attribute Selectors
Selector Example Example description
[attribute] [target] Selects all elements with a target
attribute
[attribute=value] [target="_blank"] Selects all elements with
target="_blank"

[attribute~=value] [title~="flower"] Selects all elements with a title

attribute that contains a space-
separated list of words, one of
which is "flower"
[attribute|=value] [lang|="en"] Selects all elements with a lang
attribute value starting with "en"

[attribute^=value] a[href^="https"] Selects all <a> elements with a href

attribute value starting with "https"

[attribute$=value] a[href$=".pdf"] Selects all <a> elements with a href

attribute value
ending with ".pdf"
[attribute*=value] a[href*="w3scho Selects all <a> elements with a href
ols"] attribute value
containing the substring
"w3schools"
Web Technology
(BCS-502)
Unit 3
Prepared By
Mr. Sachin Kumar Sonker
Assistant Professor,UCER Naini,Allahabad
JavaScript Introduction
• JavaScript was designed to add
interactivity to HTML pages
• JavaScript is a scripting language
• A scripting language is a lightweight
programming language
• JavaScript is usually embedded directly
into HTML pages
• JavaScript is an interpreted language
(means that scripts execute without
preliminary compilation)
What can a JavaScript do?

• JavaScript gives HTML designers a

programming tool -
• JavaScript can put dynamic text into an HTML
page
• JavaScript can react to events -
• JavaScript can read and write HTML elements
-
• JavaScript can be used to validate data -
• JavaScript can be used to detect the visitor's
browser
• JavaScript can be used to create cookies
Limitations with JavaScript
• Client-side JavaScript does not allow the
reading or writing of files. This has been kept
for security reason.
• JavaScript can not be used for Networking
applications because there is no such support
available.
• JavaScript doesn't have any multithreading or
multiprocess capabilities.
JavaScript Vs Java

• Java is purely an object-oriented language,

JavaScript is just a scripting tool
• JavaScript is not compiled and executed; the
client directly interprets it
• Object references must exist at compile-time
in Java (static binding) whereas they are
checked only at runtime in JavaScript
(dynamic binding)
Advantages of JavaScript
Less server interaction:
Immediate feedback to the visitors:
Increased interactivity:
Richer interfaces:
Form validation in the client’s place
itself, thereby reducing the burden on
the server
Javascript timer on the client to check
how much time he/she takes to fill a
form.
JavaScript Syntax
JavaScript in <head>
• JavaScript function is placed in the <head>
section of an HTML page.
JavaScript in <body>
• JavaScript function is placed in the <body>
section of an HTML page.
External JavaScript
• Scripts can also be placed in external files.External
scripts are practical when the same code is used in
many different web pages.
• JavaScript files have the file extension .js.
JavaScript in <head></head> section
<html>
<head>
<script type="text/javascript">
function sayHello()
{
alert("Hello World")
}</script>
</head>
<body><input type="button" onclick="sayHello()"
value="Say Hello“ > </body> </html>
JavaScript in <body></body> section:

<html>
<head> </head>
<body>
<script type="text/javascript“>
document.write("Hello World“)
</script> <p>This is web page body </p>
</body>
</html>
JavaScript in External File

<html> <head>
<script type="text/javascript" src="filename.js”>
</script>
</head>
<body> ....... </body>
</html>
JavaScript Variable
A JavaScript variable is simply a name of storage
location.
There are two types of variables in JavaScript : local
variable and global variable.
There are some rules while declaring a JavaScript
variable (also known as identifiers).
• Name must start with a letter (a to z or A to Z),
underscore( _ ), or dollar( $ ) sign.
• After first letter we can use digits (0 to 9), for
example value1.
• JavaScript variables are case sensitive
<html>
<body>
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>
</body>
</html>
JavaScript local variable
A JavaScript local variable is declared inside
block or function. It is accessible within the
function or block only.
For example:
<script>
function abc(){
var x=10;//local variable
}
</script>
JavaScript global variable
A JavaScript global variable is accessible from any function. A variable i.e.
declared outside the function or declared with window object is
known as global variable.
For example:
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();
</script>
JavaScript Data Types
There are two types of data types in
JavaScript.
• Primitive data type
• Non-primitive (reference) data type
JavaScript is a dynamic type language,
means you don't need to specify type of
the variable.
You need to use var here to specify the data
type. For example:
var a=40;//holding number
var b="Rahul";//holding string
JavaScript Numbers
JavaScript has only one type of numbers. Numbers can
be written with, or without decimals:
var x1=34.00; //Written with decimals
var x2=34; //Written without decimals
Extra large or extra small numbers can be written with scientific
(exponential) notation.
var y=123e5; // 12300000
var z=123e-5; // 0.00123
JavaScript Booleans
Booleans can only have two values: true or false. Booleans are
often used in conditional testing. You will learn more about
conditional testing in a later chapter of this tutorial.
var x=true
var y=false
JavaScript Arrays
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
or (condensed array):
var cars=new Array("Saab","Volvo","BMW");

JavaScript Objects
An object is delimited by curly braces. Inside the braces the
object's properties are defined as name and value pairs
(name : value). The properties are separated by commas:
var person={firstname:"John", lastname:"Doe", id:5566};
name=person.lastname;
name=person["lastname"];
Undefined and Null
• Undefined is the value of a variable with no value.
• Variables can be emptied by setting the value to null.
cars=null;
person=null;
Declaring Variable Types
When you declare a new variable, you can declare its type using
the "new" keyword:
JavaScript variables are all objects. When you declare a variable
you create a new object.
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
Operators
• Addition (+)
• Subtraction (-)
• Multiplication (*)
• Division (/)
• Modulus (%)
• String concatenation operator is “+”
• Pre-increment operator and post-increment operators
(++)
• Pre-decrement and post-decrement operators (--)
• NOT ( ! )
• AND ( && )
• OR ( || )
• Non identity (!= )
JavaScript Arithmetic Operators
JavaScript Array
JavaScript array is an object that represents a
collection of similar type of elements.
• By array literal
• By creating instance of Array directly (using
new keyword)
1) JavaScript array literal
The syntax of creating array using array literal is
given below:
var arrayname=[value1,value2.....valueN];
As you can see, values are contained inside [ ] and
separated by , (comma).
<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
2) JavaScript Array directly (new keyword)
The syntax of creating array directly is given below:
var arrayname=new Array();
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";

for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
JavaScript String
The JavaScript string is an object that represents
a sequence of characters.
There are 2 ways to create string in JavaScript
• By string literal
• By string object (using new keyword)
1) By string literal
The string literal is created using double quotes.
syntax
var stringname="string value";

Absolute value of -4 is: <span id="p8"></span>

</body>
</html>
Document Object Model
• The document object represents the whole html
document.
• When html document is loaded in the browser, it
becomes a document object.
• It is the root element that represents the html
document.
• it has properties and methods. By the help of
document object, we can add dynamic content to
our web page.
window.document
Is same as
document
DOM
• According to W3C - "The W3C Document
Object Model (DOM) is a platform and
language-neutral interface that allows
programs and scripts to dynamically access
and update the content, structure, and style of
a document."
Properties of document object
Methods of document object
Example
<script type="text/javascript">
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name);
}
</script>

<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print
name"/>
</form>
document.getElementById() method
The document.getElementById() method returns the
element of specified id.
<script type="text/javascript">
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/>
<br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
document.getElementsByName() method
<script type="text/javascript">
function totalelements()
{
var allgenders=document.getElementsByName("gender");
alert("Total Genders:"+allgenders.length);
}
</script>
<form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">

<input type="button" onclick="totalelements()" value="Total

Genders">
</form>
Javascript - innerHTML
• The innerHTML property can be used to write
the dynamic html on the html document.
• It is used mostly in the web pages to generate
the dynamic html such as registration form,
comment form, links etc.
<html>
<body>
<script type="text/javascript" >
function showcommentform() {
var data="Name:<br><input type='text'
name='name'><br>Comment:<br><textarea rows='5'
cols='50'></textarea><br><input type='submit'
value='comment'>";
document.getElementById('mylocation').innerHTML=data;
}
</script>
<form name="myForm">
<input type="button" value="comment"
onclick="showcommentform()">
<div id="mylocation"></div>
</form>
</body>
</html>
Javascript - innerText
• The innerText property can be used to write
the dynamic text on the html document. Here,
text will not be interpreted as html text but a
normal text.
• It is used mostly in the web pages to generate
the dynamic content such as writing the
validation message, password strength etc.
<script type="text/javascript" >
function validate() {
var msg;
if(document.myForm.userPass.value.length>5){
msg="good";
}
else{
msg="poor";
}
document.getElementById('mylocation').innerText=msg;
}

</script>
<form name="myForm">
<input type="password" value="" name="userPass" onkeyup=
"validate()">
Strength:<span id="mylocation">no strength</span>
</form>
JavaScript Form Validation
 JavaScript can be used to validate data in HTML forms before
sending off the content to a server.
 Form data that typically are checked by a JavaScript could be:
 has the user left required fields empty?
 has the user entered a valid e-mail address?
 has the user entered a valid date?
 has the user entered text in a numeric field?

E-mail Validation
 The function below checks if the content has the general
syntax of an email.
 This means that the input data must contain an @ sign and at
least one dot (.). Also, the @ must not be the first character
of the email address, and the last dot must be present after
the @ sign, and minimum 2 characters before the end.
JavaScript form validation example
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;

if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
JavaScript email validation
<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-
mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
} </script>
<body>
<form name="myform" method="post" action="#" onsubmit="return validat
eemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
Browser Object Model
The Browser Object Model (BOM) is used to
interact with the browser.
The default object of browser is window means
you can call all the functions of window by
specifying window or directly. For example:
window.alert("hello javatpoint");
is same as:
alert("hello javatpoint");
Browser Object Model
Window Object
• The window object represents a window in
browser. An object of window is created
automatically by the browser.
• Window is the object of browser, it is not the
object of javascript. The javascript objects are
string, array, date etc.
Window Object
JavaScript Popup Boxes
• In JavaScript we can create three kinds of popup boxes: Alert box,
Confirm box, and Prompt box.
Alert Box
An alert box is often used if you want to make sure information comes
through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax:
alert("sometext")
Confirm Box
A confirm box is often used if you want the user to verify or accept
something.
When a confirm box pops up, the user will have to click either "OK" or
"Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the
box returns false.
Syntax:
confirm("sometext")
Prompt Box
A prompt box is often used if you want the user to input a value before
entering a page.
When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks
"Cancel" the box returns null.
Syntax:
prompt("sometext","defaultvalue“)
setTimeout
<script type="text/javascript">
function msg(){
setTimeout(
function(){
alert("Welcome to Javatpoint after 2 seconds")
},2000);

}
</script>

<input type="button" value="click" onclick="msg()"

/>
JavaScript History Object
• The JavaScript history object represents an
array of URLs visited by the user. By using this
object, you can load previous, forward or any
particular page.
• The history object is the window property, so
it can be accessed by:
window.history
Or,
history
Example
• history.back();//for previous page
• history.forward();//for next page
• history.go(2);//for next 2nd page
• history.go(-2);//for previous 2nd page
JavaScript Navigator Object
• The JavaScript navigator object is used for browser
detection. It can be used to get browser information
such as appName, appCodeName, userAgent etc.
• The navigator object is the window property, so it
can be accessed by:
window.navigator
Or,
navigator
Example
<script>
document.writeln("<br/>navigator.appCodeName: "+navigator.appCodeName
);
document.writeln("<br/>navigator.appName: "+navigator.appName);
document.writeln("<br/>navigator.appVersion: "+navigator.appVersion);
document.writeln("<br/>navigator.cookieEnabled: "+navigator.cookieEnabled
);
document.writeln("<br/>navigator.language: "+navigator.language);
document.writeln("<br/>navigator.userAgent: "+navigator.userAgent);
document.writeln("<br/>navigator.platform: "+navigator.platform);
document.writeln("<br/>navigator.onLine: "+navigator.onLine);
</script>
JavaScript Functions
• A function is a reusable code-block that will be
executed by an event, or when the function is called.
• To keep the browser from executing a script when
the page loads, you can put your script into a
function.
• A function contains code that will be executed by an
event or by a call to that function.
• You may call a function from anywhere within the
page (or even from other pages if the function is
embedded in an external .js file).
JavaScript Function Syntax

function functionname()
{
some code to be executed
}
JavaScript Functions
A function is a block of code that will be executed when
"someone" calls it.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>
Functions With a Return Value
• Sometimes you want your function to return a value
back to where the call was made.
• This is possible by using the return statement.
• When using the return statement, the function will
stop executing, and return the specified value.
Calling a Function with Arguments
• When you call a function, you can pass along some
values to it, these values are called arguments or
parameters.
• These arguments can be used inside the function.
<button onclick="myFunction(‘Abhishek
',’Professor')">click here</button>

• Blur - Button, Checkbox, File Upload, Frame, Layer,

Password, Radio, Reset, Select, Submit, Text, Text area,
Window
• Focus - Button, Checkbox, File Upload, Frame, Layer,
Password, Radio, Reset, Select, Submit, Text, Text area,
Window
• Change - FileUpload, Select, Text, Text area
• Click - Button, Checkbox, Document, Links, Radio, Reset,
Submit
• Double Click - Area, Document, Links
• Key Down - Document, Image, Links, Text area
• Key Up - Document, Image, Links, Text area
• Load - Document, Image, Layer, Window
• UnLoad - Document, Window
• Error - Window, Image
• Mouse Down - Button, Document, Link
• Mouse Up - Button, Document, Link
• Mouse Over - Area, Layer, Link
• Mouse Out - Area, Layer, Link
• Submit, Reset - This is for a page
• Select - Text, Text Area
• Resize - Frame, Window
Web Technology
(BCS-502)
Unit 3
Networking: Internet Addressing, InetAddress,
Factory Methods, Instance Methods
Prepared By
SACHIN KUMAR SONKER
Assistant Professor,UCER Naini,Allahabad
Java Socket Programming
• Java Socket programming is used for
communication between the applications
running on different JRE.
• Java Socket programming can be connection-
oriented or connection-less.
• Socket and ServerSocket classes are used for
connection-oriented socket programming.
• DatagramSocket and DatagramPacket classes
are used for connection-less socket
programming.
The client in socket programming must
know two information:
• IP Address of Server, and
• Port number.
Socket class
A socket is simply an endpoint for
communications between the machines.
The Socket class can be used to create a socket.

ServerSocket class
The ServerSocket class can be used to create a
server socket. This object is used to establish
communication with the clients.
Socket
Method Description

1) public InputStream returns the InputStream

getInputStream() attached with this socket.

2) public OutputStream returns the OutputStream

getOutputStream() attached with this socket.

3) public synchronized void closes this socket

close()
ServerSocket class
Method Description

1) public Socket accept() returns the socket and

establish a connection
between server and client.

2) public synchronized void closes the server socket.

close()
Web Technology
(BCS-502)
Unit 3
URL, URL Connection
Prepared By
SACHIN KUMAR SONKER
Assistant Professor,UCER Naini,Allahabad
Java URL
• The Java URL class represents an URL.
• URL is an acronym for Uniform Resource
Locator.
• It points to a resource on the World Wide
Web.
For example:
http://www.united.ac.in/index.jsp
A URL contains many information
• Protocol: In this case, http is the protocol.
• Server name or IP Address: In this case,
www.united.ac.in is the server name.
• Port Number: It is an optional attribute. If we
write .If port number is not mentioned in the
URL, it returns -1.
• File Name or directory name: In this case,
index.jsp is the file name.
Commonly used methods of Java URL class
Java InetAddress class

• Java InetAddress class represents an IP

address. The java.net.InetAddress class
provides methods to get the IP of any host
name for example www.united.ac.in,
www.google.com, www.facebook.com, etc.
Java InetAddress Class Methods
Method Description

Public static InetAddress It returns the instance of InetAddress

getByName(String host) throws containing LocalHost IP and name.
UnknownHostException

public static InetAddress getLocalHost() It returns the instance of InetAdddress

throws UnknownHostException containing local host name and
address.

public String getHostName() It returns the host name of the IP

address.

public String getHostAddress() It returns the IP address in string

format.
Java URLConnection class
• The Java URLConnection class represents a
communication link between the URL and the
application.
• This class can be used to read and write data
to the specified resource referred by the URL.
• The openConnection() method of URL class
returns the object of URLConnection class.
• The getInputStream() method returns all the
data of the specified URL in the stream that
can be read and displayed.
Packages Required for URL
import java.io.*;
import java.net.*;
try{
URL url = new
URL("https://united.ac.in/index.html");
URLConnection urlcon = url.openConnection();
InputStream stream = urlcon.getInputStream();
int i;
while((i=stream.read())!=-1){
System.out.print((char)i);
}
}catch(Exception e){
System.out.println(e);
}
Web Technology
(BCS-502)
Unit 3

Prepared By
Sachin Kumar Sonker
Assistant Professor,UCER Naini,Allahabad
Java Socket Programming
• Java Socket programming is used for
communication between the applications
running on different JRE.
• Java Socket programming can be connection-
oriented or connection-less.
• Socket and ServerSocket classes are used for
connection-oriented socket programming.
• DatagramSocket and DatagramPacket classes
are used for connection-less socket
programming.
The client in socket programming must
know two information:
• IP Address of Server, and
• Port number.
Socket class
A socket is simply an endpoint for
communications between the machines.
The Socket class can be used to create a socket.

ServerSocket class
The ServerSocket class can be used to create a
server socket. This object is used to establish
communication with the clients.
Socket
Method Description

1) public InputStream returns the InputStream

getInputStream() attached with this socket.

2) public OutputStream returns the OutputStream

getOutputStream() attached with this socket.

3) public synchronized void closes this socket

close()
ServerSocket class
Method Description

1) public Socket accept() returns the socket and

establish a connection
between server and client.

2) public synchronized void closes the server socket.

close()
Datagrams
• Datagrams are collection of information sent
from one device to another device via the
established network.
• When the datagram is sent to the targeted
device, there is no assurance that it will reach to
the target device safely and completely.
• It may get damaged or lost in between. Likewise,
the receiving device also never know if the
datagram received is damaged or not.
Java DatagramSocket and DatagramPacket
• Java DatagramSocket and DatagramPacket
classes are used for connection-less socket
programming.
• Java DatagramSocket class represents a
connection-less socket for sending and
receiving datagram packets.
• A datagram is basically an information but
there is no guarantee of its content, arrival or
arrival time.
• Java DatagramPacket is a message that can be
sent or received. If you send multiple packet,
it may arrive in any order. Additionally, packet
delivery is not guaranteed.
Constructors of DatagramSocket class
• DatagramSocket() throws SocketException: it creates
a datagram socket and binds it with the available
Port Number on the localhost machine.
• DatagramSocket(int port) throws SocketException: it
creates a datagram socket and binds it with the given
Port Number.
• DatagramSocket(int port, InetAddress address)
throws SocketException: it creates a datagram socket
and binds it with the specified port number and host
address.
Java DatagramPacket Class Methods
Method Description

1) InetAddress It returns the IP address of the machine

getAddress() to which the datagram is being sent or
from which the datagram was received.

2) byte[] getData() It returns the data buffer.

3) int getLength() It returns the length of the data to be sent
or the length of the data received.

4) int getPort() It returns the port number on the remote

host to which the datagram is being sent
or from which the datagram was
received.
AJAX

Introduction

1. AJAX stands for Asynchronous JavaScript and XML.

2. AJAX is not a new programming language, but a new way to use
existing standards.
3. AJAX is the art of exchanging data with a server, and updating parts
of a web page - without reloading the whole page.
4. AJAX applications are browser- and platform-independent!

How AJAX Works

AJAX is Based on Internet Standards

AJAX is based on internet standards, and uses a combination of:

 XMLHttpRequest object (to exchange data asynchronously with a

server)
 JavaScript/DOM (to display/interact with the information)
 CSS (to style the data)
 XML (often used as the format for transferring data)

Steps for Using AJAX

Step-1

Create an XMLHttpRequest Object

All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a
built-in XMLHttpRequest object.

Syntax for creating an XMLHttpRequest object:

variable=new XMLHttpRequest();

Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:

variable=new ActiveXObject("Microsoft.XMLHTTP");

Example

Var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Step-2

Send a Request To a Server

To send a request to a server, we use the open() and send() methods of

the XMLHttpRequest object:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Method Description

Specifies the type of request, the URL, and if the

request should be handled asynchronously or not.
open(method,url,async)
method: the type of request: GET or POST
url: the location of the file on the server
async: true (asynchronous) or false (synchronous)

Sends the request off to the server.

send(string)
string: Only used for POST requests

Step-3

Server Response

To get the response from a server, use the responseText or

ResponseXMLproperty of the XMLHttpRequest object.

Property Description

responseText get the response data as a string

responseXML get the response data as XML data

Example

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Step-4

The onreadystatechange event

When a request to a server is sent, we want to perform some actions

based on the response.
The onreadystatechange event is triggered every time the readyState
changes.
The readyState property holds the status of the XMLHttpRequest.
Three important properties of the XMLHttpRequest object:
Property Description

Stores a function (or the name of a function) to be

onreadystatechange called automatically each time the readyState property
changes

Holds the status of the XMLHttpRequest. Changes

from 0 to 4:
0: request not initialized
readyState 1: server connection established
2: request received
3: processing request
4: request finished and response is ready

200: "OK"
status
404: Page not found

In the onreadystatechange event, we specify what will happen when the

server response is ready to be processed.

When readyState is 4 and status is 200, the response is ready:

Example
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 &&xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
Enterprise Java Bean(EJB)
Node.js
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

Node.js is an
1 open source
Node.js is free 2
server
environment

Node.js runs on Node.js uses

various platforms
4 JavaScript on the 3
(Windows, Linux, server
Unix, Mac OS X, etc.)
What is NodeJS
• JavaScript Runtime: Node.js is an open-source, cross-platform
runtime environment for executing JavaScript code outside of a
browser.
• NodeJS: is a JS in a different environment means Running JS on the
Server or any computer.
• Built on Chrome’s V8 Engine: It runs on the V8 engine, which
compiles JS directly to native machine code, enhancing performance.
• V8 is written in C++ for speed.
• V8 + Backend Features = NodeJS
Installation of Node JS on Windows
Downloading the Node.js ‘.msi’ installer the first step to install
Step 1: Download the NodeJS Node.js on Windows is to download the installer. Visit the
official Node.js website i.e) https://nodejs.org/en/download/

Step 1: Download the NodeJS

Installation of Node JS on Windows

Step 2: Download the NodeJS

Key features of Node.js

• Non-blocking I/O: Node.js is asynchronous, enabling efficient handling of concurrent

requests.

• Event-driven architecture: Developers can create event-driven applications using

callbacks and event emitters.

• Extensive module ecosystem: npm (Node Package Manager) provides access to thousands

of reusable packages.
Core Modules
Node.js includes several core modules for essential functionality. Some commonly used ones are:

• fs (File System): Read/write files and directories.

• http: Create HTTP servers and clients.

• path: Manipulate file paths.

• events: Implement custom event handling.

Data type in Node.js
Datatypes in Node.js Loose Typing: Node.js supports loose
Node.js contains various types of data types similar to typing, which means you don’t need to
JavaScript.
specify what type of information will be
•Boolean
stored in a variable in advance. We use the
•Undefined
var and let keywords in Node.js declare any
•Null
type of variable. Examples are given below:
•String

•Number
Example Loose Type
// Variable store number data type
let a = 35;
console.log(typeof a);
Output
// Variable store string data type number
a = “United College";
string
console.log(typeof a);
boolean
// Variable store Boolean data type
a = true; undefined
console.log(typeof a);
// Variable store undefined (no value) data type
a = undefined;
console.log(typeof a);
Object and Function
Node.js objects are the same as let company = {

JavaScript objects i.e. the objects are Name: “United College”,

Address: “Prayagraj”,
similar to variables and it contains
Contact: "+9335833415",
many values which are written Email: “[email protected]”
};
as name: value pairs. Name and
// Display the object information
value are separated by a colon and console.log("Information of variable company:",
company); // Display the type of variable
every pair is separated by a comma.
console.log("Type of variable company:", typeof
company);
How to run first program in Node.js

Step Step
 1Create a Folder
Such as WT
2 file java
Create
script file such as 
Index.js
index.js


Step 3 Step

D:\WT>

Go to Command 4 index.js
D:\WT>node
Prompt
User input in run time
REPL
The full form of REPL is “Read Eval Print Loop”. It is an interactive console (similar to the
windows command prompt) for node.js where we can write node.js commands and the system will
provide its corresponding output.
In this REPL terminal of Nodejs, you can perform various mathematical operations.
The repl terminal is also known as a node shell.
Nodejs REPL Environment:
The Repl terminal comes automatically with the node.js installation. So if you have installed
node.js then you can use this terminal.
The four parts of Repl are as follows:
1) Read: It takes the user input, parses it into javascript, and then stores it in memory.
2) Eval: It evaluates the parsed javascript.
3) Print: The result of the evaluation is shown as an output.
4) Loop: It again starts reading. To break out of this loop you have to press ctrl+c twice.
Starting REPL Terminal:
• Open a terminal or command prompt.
• Type Node
• Press enter

To quit from the prompt, press ctrl+c twice.

Examples of REPL:
1. Mathematical operation:
You can see that the repl terminal is able to solve simple mathematics.
2. Using libraries:
We can also use the node modules in the repl terminal. In the below image
you can see that we have used the Math module of node to perform some
mathematical operations.
3. Variables:
We can store the values in a variable to use it again. There are
two ways to store variables
1) directly assigning to a variable Eg: a=20.Or
2) Var a=20.
4. MultiLine expressions and Loops:
We can write multiline code in the repl terminal and then execute it in the repl terminal.
All the loops that are present in javascript can also be used in the repl terminal.
5. The Underscore Variable:
This variable holds the value of the last performed operation.
Stopping/Exiting the REPL terminal:
To quit the terminal press ctrl+c twice
REPL Commands:
Below is a list of most popular commands for repl terminal
1) Using ctrl+c once: It terminates the current command.
2) Using ctrl+c twice: It quits the repl terminal.
3) Using ctrl+d: It quits the repl terminal.
4) up/down key: Shows previously used commands.
5) Tab key: View current commands
6) .help: Gives a list of all commands that it supports
7) .clear: To exit from the multiline expression.
8) .break: For exiting from multiline command
9) .save “filename”: To save the current repl as a file.
10) .load “filename”: Load a file into repl terminal
Node.js File System Module
• The Node.js file system module allows you to work with the file
system on your computer.
• To include the File System module, use the require() method:
• var fs = require('fs');
• Common use for the File System module:
• Read files
• Create files
• Update files
• Delete files
• Rename files
In Node.js, callbacks are a fundamental part
of handling asynchronous operations,
including when using the Node Package
Manager (NPM) or working with packages
that involve asynchronous behavior.
What are Callbacks?
A callback is a function passed as an argument to another
function, which is then invoked after the completion of a task.
This allows Node.js to perform non-blocking I/O operations.
How Callbacks Work in NPM
When you install packages or use certain functions from those packages, you often encounter
asynchronous operations. Here’s how callbacks typically come into play:
1.Installation of Packages: When you use commands like npm install, the package manager
runs various scripts that may use callbacks internally to handle tasks like downloading,
extracting, and installing the packages.
2.Using Packages: Many Node.js packages use callbacks to handle results from asynchronous
operations. For example, when reading a file using the fs module:
Node JS fs.readFile() Method
• In Node, the fs (File System) module provides a collection
of methods for interacting with the file system. Among these
methods, fs.readFile() stands out as a fundamental tool for reading
data from files asynchronously. This article will delve into the
fs.readFile() method, exploring its syntax, parameters, usage, and
error handling.
• NodeJS readfile method
• The readfile method is used to asynchronously read the data from a
file. It is a method of node js file system module. Asynchronously
reading file content enables the non-blocking operation in Node.
• Syntax:
• fs.readFile( file_path, encoding, callback_function )
• Parameters:
• The method accepts three parameters as mentioned above and
described below:
• file_path: It holds the file’s name to read or the entire path if stored
at another location.
• encoding: It holds the encoding of the file. Its default value is ‘utf8’.
• callback_function: A callback function is called after reading the file.
It takes two parameters:
• err: If any error occurred.
• data: Contents of the file.
const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {

if (err) {
console.error('Error reading file:', err);
return;
}
console.log('File content:', data);
});

In this example:
• fs.readFile is asynchronous.
• The last parameter is a callback function that will
be called once the file read operation completes.
Node fs.mkdir() Method
• The fs.mkdir() method in Node.js is used to create a directory
asynchronously.
• Syntax
• fs.mkdir(path, mode, callback)
• Parameters: This method accepts three parameters as mentioned above
and described below:
• path: This parameter holds the path of the directory that has to be created.
• mode: This parameter holds the recursive boolean value. The mode option
is used to set the directory permission, by default it is 0777.
• callback: This parameter holds the callback function that contains an error.
The recursive option if set to true will not give an error message if the
directory to be created already exists.
Node.js fs.rmdir() Method

• The fs.rmdir() method is used to delete a directory at the given path.

It can also be used recursively to remove nested directories.
• Syntax:
• fs.rmdir( path, options, callback )
Node.js HTTP Module

• Node.js has a built-in module called HTTP, which allows Node.js to

transfer data over the Hyper Text Transfer Protocol (HTTP).
• To include the HTTP module, use the require() method:
• var http = require('http');
Node.js as a Web Server
• The HTTP module can create an HTTP server that listens to server
ports and gives a response back to the client.
• Use the createServer() method to create an HTTP server:
• var http = require('http');

//create a server object:

http.createServer(function (req, res) {
res.write('Hello World!'); //write a response to the client
res.end(); //end the response
}).listen(8080); //the server object listens on port 8080

The function passed into the http.createServer() method, will be executed

when someone tries to access the computer on port 8080.
Node.js OS

• The os module in Node.js provides operating system-related utility

methods and properties. It helps retrieve system information such as
CPU details, memory usage, and network interfaces, enabling you to
write system-aware applications.
• It provides functions to interact with the operating system. It provides
the hostname of the operating system and returns the amount of free
system memory in bytes.
• os.arch(): Returns the CPU architecture of the operating system (e.g., ‘x64’,
‘arm’).
• os.cpus(): Provides an array of objects describing each CPU/core installed.
• os.freemem(): Returns the amount of free system memory in bytes.
• os.homedir(): Returns the path to the current user’s home directory.
• os.hostname(): Returns the hostname of the operating system.
• os.networkInterfaces(): Returns a list of network interfaces and their
details.
• os.platform(): Returns the operating system platform (e.g., ‘linux’,
‘darwin’).
• os.release(): Returns the operating system release.
• os.totalmem(): Returns the total amount of system memory in bytes.
• os.uptime(): Returns the system uptime in seconds.
Node.js path.basename() Method
• The path.basename() method is used to get the filename portion of a path
to the file. The trailing directory separators are ignored when using this
method.
• Syntax:
• path.basename( path, extension )
• Parameters: This method accepts two parameters as mentioned above and
described below:
• path: It is the file path that would be used to extract the filename.
• extension: It is an optional file extension that would be removed from the
returned string.
• Return Value: It returns a string with the filename portion of the path. It
throws an error if the path or the extension parameters are not string
values.
Node.js path.dirname() Method

• The path.dirname() method is used to get the directory name of the given
path. It ignores the respective platform’s trailing directory separators.
• Syntax:
• path.dirname( path )
• Parameters: This function accepts one parameter as mentioned above and
described below:
• path: It is the file path that would be used to extract the directory name. It
throws a TypeError if this parameter is not a string value.
• Return Value: It returns a string with the directory of the path.
• Below programs illustrate the path.dirname() method in Node.js:
Node.js path.extname() Method

• The path.extname() method is used to get the extension portion of a

file path. The extension string returned from the last occurrence of a
period (.) in the path to the end of the path string. If there are no
periods in the file path, then an empty string is returned.
• Syntax:
• path.extname( path )
• Parameters: This method accepts single parameter path which holds
the file path that would be used to extract the extension.
• Return Value: It returns a string with the extension portion of the
path. It throws a TypeError if this parameter is not a string value.
Node.js path.parse() Method
• The path.parse() method is used to return an object whose
properties represent the given path. This method returns the
following properties:
• root (root name)
• dir (directory name)
• base (filename with extension)
• ext (only extension)
• name (only filename)
• The values of these properties may be different for every platform. It
ignores the platform’s trailing directory separators during parsing.
Events
Node.js Events

• Every action on a computer is an event. Like when a connection is

made or a file is opened.
• Node.js has a built-in module, called "Events", where you can create-,
fire-, and listen for- your own events.
• To include the built-in Events module use the require() method. In
addition, all event properties and methods are an instance of an
EventEmitter object. To be able to access these properties and
methods, create an EventEmitter object:
• var events = require('events');
var eventEmitter = new events.EventEmitter();
In Node.js, "events" typically refers to "EventEmitter" events, which are a fundamental part of
the event-driven architecture in Node.js. The EventEmitter class allows you to create and
handle events, enabling you to build asynchronous applications easily.
Key Concepts:
1.EventEmitter Class:
•It's part of the events module.
•You can create an instance of EventEmitter and use it to emit events and listen for them.
2.Emitting Events:
•You can trigger an event using the .emit() method.
3.Listening to Events:
•Use the .on() method to register a callback function that gets called whenever the event
is emitted.
How to Use
Const EventEmitter=require(“events”)
const EventEmitter = require('events');
Or
// Create an instance of EventEmitter
Import EventEmitter from ‘events’ //es6
const myEmitter = new EventEmitter();
// Register a listener for the 'event'
event
myEmitter.on('event', () => {
console.log('An event occurred!');
});
// Emit the 'event' event
myEmitter.emit('event');
NPM(Node.js Package Manager)

• Node Package Manager provides two main functionalities:

• It provides online repositories for node.js packages/modules which
are searchable on search.nodejs.org
• It also provides command line utility to install Node.js packages, do
version management and dependency management of Node.js
packages.
Installing Modules using npm

• Following is the syntax to install any Node.js module:

• npm install <Module Name>
• Let's install a famous Node.js web framework called express:
• Open the Node.js command prompt and execute the following
command:
• npm install express
Install Package Locally
• There is a simple syntax to install any Node.js module −
• npm install <Module Name>
• For example, following is the command to install a famous Node.js web
framework module called express −
• npm install express
• Now you can use this module in your js file as following −
• var express = require('express');
• The local mode installation of a package refers to the package installation in
node_modules directory lying in the folder where Node application is
present. Locally deployed packages are accessible via require() method. Use --
save at the end of the install command to add dependency entry into
package.json of your application.
• The package.json file is a JSON file that is used to manage
dependencies in Node.js projects. It contains information about the
project, such as its name, version, and dependencies. The
package.json file is used by the npm package manager to install and
manage dependencies.
• The package.json file is typically located in the root directory of a
Node.js project. It can be created by running the npm init command.
• Create a new folder for a new Node.js project, and run pnm init
command inside it −
• PS D:\nodejs\newnodeapp> npm init
• This utility will walk you through creating a package.json file.
Global vs Local Installation

• By default, npm installs dependency in local mode. Here local mode

specifies the folder where Node application is present. For example if
you installed express module, it created node_modules directory in
the current directory where it installed express module.
• Globally installed packages/dependencies are stored in system
directory. Let's install express module using global installation.
Although it will also produce the same result but modules will be
installed globally.
• Open Node.js command prompt and execute the following code:
• npm install express -g
Uninstalling a Module

• To uninstall a Node.js module, use the following command:

• npm uninstall express
• The Node.js module is uninstalled. You can verify by using the
following command:
• npm ls
Express Js Freamwork
Express.js

• Express.js is a fast, flexible and minimalist web framework

for Node.js. It's effectively a tool that simplifies building web
applications and APIs using JavaScript on the server side. Express is an
open-source that is developed and maintained by the Node.js
foundation.
• Express.js offers a robust set of features that enhance your
productivity and streamline your web application. It makes it easier to
organize your application’s functionality with middleware and routing.
It adds helpful utilities to Node HTTP objects and facilitates the
rendering of dynamic HTTP objects.
Express.js is a minimal and flexible web application

framework for Node.js that provides a robust set of

features for building web and mobile applications.

Web Application

Creating Web-based Node Application

A web-based Node application consists of the following three important components:

• Import required module

• Create server

• Read Request and return response

Key Features of Express
1. Middleware and Routing: Define clear pathways (routes) within your application to
handle incoming HTTP requests (GET, POST, PUT, DELETE) with ease. Implement
reusable functions (middleware) to intercept requests and create responses, adding
functionalities like authentication, logging, and data parsing.
2. Minimalistic Design: Express.js follows a simple and minimalistic design philosophy.
This simplicity allows you to quickly set up a server, define routes, and handle HTTP
requests efficiently. It’s an excellent choice for building web applications without
unnecessary complexity.
3. Flexibility and Customization: Express.js doesn’t impose a strict application
architecture. You can structure your code according to your preferences. Whether
you’re building a RESTful API or a full-fledged web app, Express.js adapts to your
needs.
4. Templating Power: Incorporate templating engines like Jade or EJS to generate
dynamic HTML content, enhancing user experience.
5. Static File Serving: Effortlessly serve static files like images, CSS, and JavaScript from a
designated directory within your application.
6. Node.js Integration: Express.js seamlessly integrates with the core functionalities of
Node.js, allowing you to harness the power of asynchronous programming and event-
driven architecture.
Applications of Express
Express.js empowers you to construct a wide array of web applications.
Here are some captivating examples:
• RESTful APIs: Develop robust APIs that adhere to the REST
architectural style, enabling communication with other applications
and front-end interfaces.
• Real-time Applications: Leverage Express.js's event-driven nature to
create real-time applications like chat or collaborative editing tools.
• Single-Page Applications (SPAs): Craft SPAs that fetch and update
content dynamically on the client-side, offering a seamless user
experience.
1. Core Features
• Routing: Express allows you to define routes to handle different HTTP
methods and URLs. You can create modular routes, making it easy to
manage and organize your application.
• Middleware: Middleware functions can process requests, modify the
request and response objects, end requests, and call the next middleware
function in the stack. This provides great flexibility in how you handle
requests.
• Static Files: You can easily serve static files, such as images, CSS, and
JavaScript, using the built-in middleware.
2. Setting Up an Express Application

Install Express:

npm install express

Create an Application:
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {

res.send('Hello, World!');
});

app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
3. Middleware Usage
4. Error Handling
You can use middleware for various purposes,
such as logging, authentication, or parsing Express has a built-in error handling
mechanism. You can define custom error-
request bodies. For example, to use the body-
handling middleware
parser middleware:

app.use((err, req, res, next) => {

const bodyParser = require('body-parser');
console.error(err.stack);
app.use(bodyParser.json());
res.status(500).send('Something broke!');
app.use(bodyParser.urlencoded({ extended: true }));
});
5. Connecting to Databases
Express can easily integrate with databases such as MongoDB, PostgreSQL, or MySQL. Using an
ORM like Mongoose or Sequelize simplifies database interactions.

6. Best Practices
• Organize Your Code: Structure your app using separate files for routes, controllers, and
middleware to maintain readability.
• Use Environment Variables: Manage configuration settings using environment variables with
libraries like dotenv.
• Error Handling: Implement comprehensive error handling to improve user experience and
facilitate debugging.
Express express.static() Function

• The express.static() function is a built-in middleware function in

Express. It serves static files and is based on serve-static.
• Syntax:
• express.static(root, [options])
• Parameters: The root parameter describes the root directory from
which to serve static assets.
• Return Value: It returns an Object.
<!DOCTYPE html> const express = require('express');
<html> const app = express();
const path = require('path');
<head>
<title>express.static() Demo</title> // Static Middleware
</head> console.log(app.use(express.static(
path.join(__dirname, 'public'))))
<body>
<h2>Hello this demo page..</h2>
<img src="Demo.jpg" width="150"
height="100" />
</body>

</html>
Restful API
REpresentational State Transfer (REST) is an architectural style that defines a set of
constraints to be used for creating web services. REST API is a way of accessing web services
in a simple and flexible way without having any processing.

REST technology is generally preferred to the more robust Simple Object Access Protocol
(SOAP) technology because REST uses less bandwidth, simple and flexible making it more
suitable for internet usage. It’s used to fetch or give some information from a web service.
All communication done via REST API uses only HTTP request.
Key Principles of REST
4.Use of Standard HTTP Methods:
1.Statelessness:
•GET: Retrieve resource(s).
•Each request from a client to the server must contain
•POST: Create a new resource.
all the information needed to understand and process
•PUT: Update an existing resource.
the request. The server does not store client context.
•DELETE: Remove a resource.
2.Client-Server Architecture:
5.Representations:
•The client and server are separate, allowing for
•Resources can have multiple
independent development and scaling. Clients
representations (e.g., JSON, XML).
interact with the API without knowing the server's
JSON is commonly used in RESTful
internal workings.
APIs for data interchange.
3.Resource Identification:
6.Stateless Communication:
•Resources (data entities) are identified by URIs
•Each request is independent, with no
(Uniform Resource Identifiers). For example, /users
session state stored on the server.
might represent a collection of user resources.
MongoDB is an open-source, cross-platform, and distributed document-

based database designed for ease of application development and scaling. It

is a NoSQL database developed by MongoDB Inc.

MongoDB name is derived from the word "Humongous" which means huge,
enormous. MongoDB database is built to store a huge amount of data and
also perform fast.

MongoDB is a document database. It stores data in a type of JSON

format called BSON.
MongoDB is not a Relational Database Management System (RDBMS). It's
called a "NoSQL" database. It is opposite to SQL based databases where it does
not normalize data under schemas and tables where every table has a fixed
structure. Instead, it stores data in the collections as JSON based documents
and does not enforce schemas. It does not have tables, rows, and columns as
other SQL (RDBMS) databases.

MongoDB (NoSQL Database) RDBMS (SQL Server, Oracle, etc.)

Database Database

Collection Table

Document Row (Record)

Field Column
Advantages of MongoDB
1. MongoDB stores data as JSON based document that does not enforce the schema. It allows us to
store hierarchical data in a document. This makes it easy to store and retrieve data in an efficient
manner.
2. It is easy to scale up or down as per the requirement since it is a document based database.
MongoDB also allows us to split data across multiple servers.
3. MongoDB provides rich features like indexing, aggregation, file store, etc.
4. MongoDB performs fast with huge data.
5. MongoDB provides drivers to store and fetch data from different applications developed in different
technologies such as C#, Java, Python, Node.js, etc.
6. MongoDB provides tools to manage MongoDB databases.
Collection
A collection in MongoDB is similar to a table in RDBMS. MongoDB collections do not enforce schemas.
Each MongoDB collection can have multiple documents. A document is equilant to row in a table in
RDBMS.
To create a collection, use the db.createCollection() command.

MongoDB Documents: Document, Array, Embedded Document

In the RDBMS database, a table can have multiple rows and columns. Similarly in MongoDB, a collection can have

multiple documents which are equivalent to the rows. Each document has multiple "fields" which are equivalent to

the columns. So in simple terms, each MongoDB document is a record and a collection is a table that can store

multiple documents.
MongoDB - Insert Single Document in a Collection using insertOne()
In MongoDB, a collection represents a table in RDBMS and a document is like a record in a table.
MongoDB provides the following methods to insert documents into a collection:
1.insertOne() - Inserts a single document into a collection.
2.insert() - Inserts one or more documents into a collection.
3.insertMany() - Insert multiple documents into a collection.
insertOne()
Use the db.<collection>.insertOne() method to insert a single document in a collection. db points to the
current database, <collection> is existing or a new collection name.
Syntax:
db.collection.insertOne(document, [writeConcern])
MongoDB Command
Command Syntax Example

1. Create Database Use <Database Name> Use collage

2. Show all Database show dbs

3. Delete Database db.dropDatabase()
4. Create Collection db.createCollection(“Collection Name”) db.createCollection(“Student”)
5. Show All Collection show collections
6. Delete Collection db.<collectionname>.drop() Db.Student.drop()
7. Insert One Document db.<collectionname>.insertOne(document, db.student.insertOne({
[writeConcern]) Firstname:”sachin”,
Lastname:”sonker”,
Email:”[email protected]”
})
MongoDB Command
Command Syntax Example

8. Show Record Db.<collecionname>.find() Db.Student.find()

‘Or’ findOne()
Db.<collecionname>.find().pretty() Db.Student.find().pretty()
Db.find(filter,Projection)
9. Exit Quit()
10. updateOne() or db. <collecionname>.updateOne( { Filter }, { db.Student.updateOne( { id: 123 }, { $set: {
updateMany() $set: { likes: 2 } } ) age: 21 } } )
11. deleteOne() or db. <collecionname>.deleteOne({ filter }) db.posts.deleteOne({ title: "Post Title 5" })
deleteMany()
MongoDB Node.js Database Interaction

• To use MongoDB with Node.js, you will need to install

the mongodb package in your Node.js project.
• npm install mongodb

Create an index.js file in your project directory.

const { MongoClient } = require('mongodb');
const { MongoClient } = require('mongodb');
const uri = "<Your Connection String>";
const client = new MongoClient(uri);
async function run()
{
try { await client.connect();
const db = client.db('sample_mflix');
const collection = db.collection('movies');
// Find the first document in the collection
const first = await collection.findOne();
console.log(first);
}
finally {
// Close the database connection when finished or an error occurs await
client.close();
}
}
run().catch(console.error);
Mongoose
• Mongoose is a MongoDB object modeling tool designed to work in an
asynchronous environment. Mongoose supports Node.js and Deno (alpha).
• Mongoose provides a straight-forward, schema-based solution to model
your application data. It includes built-in type casting, validation, query
building, business logic hooks and more, out of the box.

• npm install mongoose

• example
const mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/test');
const Cat = mongoose.model('Cat', { name: String });
const kitty = new Cat({ name: 'Zildjian' });
kitty.save().then(() => console.log('meow'));
const mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/college').then(()=>
{console.log("establishe successfully");}).catch((err)=>
{console.log("establishe successfully");});
const main=async ()=>
{
try{
const st_schema=mongoose.Schema({
name:String, age:Number});
const std = mongoose.model('stdData', st_schema);

const sdata = new std({ name: 'rahul',age:53 });

let res=sdata.save();
console.log(res);
}
catch(err){console.log(err);}
}
main();
Servlets
Servlet technology is used to create a web application (resides at server side and
generates a dynamic web page).

Servlet technology is robust and scalable because of java language. Before Servlet,
CGI (Common Gateway Interface) scripting language was common as a server-side
programming language. However, there were many disadvantages to this technology.
We have discussed these disadvantages below.

There are many interfaces and classes in the Servlet API such as Servlet,
GenericServlet, HttpServlet, ServletRequest, ServletResponse, etc.

What is a Servlet?
Servlet can be described in many ways, depending on the context.

o Servlet is a technology which is used to create a web application.

o Servlet is an API that provides many interfaces and classes including

documentation.

o Servlet is an interface that must be implemented for creating any Servlet.

o Servlet is a class that extends the capabilities of the servers and responds to the
incoming requests. It can respond to any requests.

o Servlet is a web component that is deployed on the server to create a dynamic

web page.
What is a web application?
A web application is an application accessible from the web. A web application is
composed of web components like Servlet, JSP, Filter, etc. and other elements such as
HTML, CSS, and JavaScript. The web components typically execute in Web Server and
respond to the HTTP request.

CGI (Common Gateway Interface)

CGI technology enables the web server to call an external program and pass HTTP
request information to the external program to process the request. For each request, it
starts a new process.

Disadvantages of CGI
There are many problems in CGI technology:

1. If the number of clients increases, it takes more time for sending the response.

2. For each request, it starts a process, and the web server is limited to start
processes.

3. It uses platform dependent language e.g. C, C++, perl.

Advantages of Servlet

There are many advantages of Servlet over CGI. The web container creates threads for
handling the multiple requests to the Servlet. Threads have many benefits over the
Processes such as they share a common memory area, lightweight, cost of
communication between the threads are low. The advantages of Servlet are as follows:

1. Better performance: because it creates a thread for each request, not process.

2. Portability: because it uses Java language.

3. Robust: JVM manages Servlets, so we don't need to worry about the memory
leak, garbage collection, etc.

4. Secure: because it uses java language.

Servlets - Life Cycle

A servlet life cycle can be defined as the entire process from its creation till the
destruction. The following are the paths followed by a servlet.
 The servlet is initialized by calling the init() method.
 The servlet calls service() method to process a client's request.
 The servlet is terminated by calling the destroy() method.
 Finally, servlet is garbage collected by the garbage collector of the JVM.
Now let us discuss the life cycle methods in detail.
The init() Method
The init method is called only once. It is called only when the servlet is created, and not
called for any user requests afterwards. So, it is used for one-time initializations, just as
with the init method of applets.
The servlet is normally created when a user first invokes a URL corresponding to the
servlet, but you can also specify that the servlet be loaded when the server is first
started.
When a user invokes a servlet, a single instance of each servlet gets created, with
each user request resulting in a new thread that is handed off to doGet or doPost as
appropriate. The init() method simply creates or loads some data that will be used
throughout the life of the servlet.
The init method definition looks like this −
public void init() throws ServletException {
// Initialization code...
}
The service() Method
The service() method is the main method to perform the actual task. The servlet
container (i.e. web server) calls the service() method to handle requests coming from
the client( browsers) and to write the formatted response back to the client.
Each time the server receives a request for a servlet, the server spawns a new thread
and calls service. The service() method checks the HTTP request type (GET, POST,
PUT, DELETE, etc.) and calls doGet, doPost, doPut, doDelete, etc. methods as
appropriate.
Here is the signature of this method −
public void service(ServletRequest request, ServletResponse
response)
throws ServletException, IOException {
}
The service () method is called by the container and service method invokes doGet,
doPost, doPut, doDelete, etc. methods as appropriate. So you have nothing to do with
service() method but you override either doGet() or doPost() depending on what type of
request you receive from the client.
The doGet() and doPost() are most frequently used methods with in each service
request. Here is the signature of these two methods.

The doGet() Method

A GET request results from a normal request for a URL or from an HTML form that has
no METHOD specified and it should be handled by doGet() method.
public void doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
// Servlet code
}

The doPost() Method

A POST request results from an HTML form that specifically lists POST as the
METHOD and it should be handled by doPost() method.
public void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
// Servlet code
}
The destroy() Method
The destroy() method is called only once at the end of the life cycle of a servlet. This
method gives your servlet a chance to close database connections, halt background
threads, write cookie lists or hit counts to disk, and perform other such cleanup
activities.
After the destroy() method is called, the servlet object is marked for garbage collection.
The destroy method definition looks like this −
public void destroy() {
// Finalization code...
}

Architecture Diagram
The following figure depicts a typical servlet life-cycle scenario.
 First the HTTP requests coming to the server are delegated to the servlet
container.
 The servlet container loads the servlet before invoking the service() method.
 Then the servlet container handles multiple requests by spawning multiple
threads, each thread executing the service() method of a single instance of the
servlet.
Servlets Tasks
Servlets perform the following major tasks −
 Read the explicit data sent by the clients (browsers). This includes an HTML
form on a Web page or it could also come from an applet or a custom HTTP
client program.
 Read the implicit HTTP request data sent by the clients (browsers). This includes
cookies, media types and compression schemes the browser understands, and
so forth.
 Process the data and generate the results. This process may require talking to a
database, executing an RMI or CORBA call, invoking a Web service, or
computing the response directly.
 Send the explicit data (i.e., the document) to the clients (browsers). This
document can be sent in a variety of formats, including text (HTML or XML),
binary (GIF images), Excel, etc.
 Send the implicit HTTP response to the clients (browsers). This includes telling
the browsers or other clients what type of document is being returned (e.g.,
HTML), setting cookies and caching parameters, and other such tasks.
Web Terminology
Servlet Description
Terminology

Website: static vs It is a collection of related web pages that may contain text, images, audio
dynamic and video.

HTTP It is the data communication protocol used to establish communication

between client and server.

HTTP Requests It is the request send by the computer to a web server that contains all
sorts of potentially interesting information.

Get vs Post It gives the difference between GET and POST request.

Container It is used in java for dynamically generating the web pages on the server
side.

Server: Web vs It is used to manage the network resources and for running the program or
Application software that provides services.

Content Type It is HTTP header that provides the description about what are you sending
to the browser.

Website
Website is a collection of related web pages that may contain text, images, audio and
video. The first page of a website is called home page. Each website has specific internet
address (URL) that you need to enter in your browser to access a website.

Website is hosted on one or more servers and can be accessed by visiting its homepage
using a computer network. A website is managed by its owner that can be an individual,
company or an organization.
A website can be of two types:

o Static Website
o Dynamic Website

Static website
Static website is the basic type of website that is easy to create. You don't need the
knowledge of web programming and database design to create a static website. Its web
pages are coded in HTML.

The codes are fixed for each page so the information contained in the page does not
change and it looks like a printed page.

Dynamic website
Dynamic website is a collection of dynamic web pages whose content changes
dynamically. It accesses content from a database or Content Management System
(CMS). Therefore, when you alter or update the content of the database, the content of
the website is also altered or updated.

Hello Java Program for Beginners

Dynamic website uses client-side scripting or server-side scripting, or both to generate

dynamic content.
Client side scripting generates content at the client computer on the basis of user input.
The web browser downloads the web page from the server and processes the code
within the page to render information to the user.

In server side scripting, the software runs on the server and processing is completed in
the server then plain pages are sent to the user.

Static vs Dynamic website

Static Website Dynamic Website

Prebuilt content is same every time the page is Content is generated quickly and changes regularly.
loaded.

It uses the HTML code for developing a It uses the server side languages such as PHP,SERVLET,
website. JSP, and ASP.NET etc. for developing a website.

It sends exactly the same response for every It may generate different HTML for each of the request.
request.

The content is only changed when someone The page contains "server-side" code which allows the
publishes and updates the file (sends it to the server to generate the unique content when the page is
web server). loaded.

Flexibility is the main advantage of static Content Management System (CMS) is the main
website. advantage of dynamic website.

HTTP Requests
The request sent by the computer to a web server, contains all sorts of potentially
interesting information; it is known as HTTP requests.

The HTTP client sends the request to the server in the form of request message which
includes following information:

o The Request-line
o The analysis of source IP address, proxy and port
o The analysis of destination IP address, protocol, port and host
o The Requested URI (Uniform Resource Identifier)
o The Request method and Content
o The User-Agent header
o The Connection control header
o The Cache control header
The HTTP request method indicates the method to be performed on the resource
identified by the Requested URI (Uniform Resource Identifier). This method is case-
sensitive and should be used in uppercase.

The HTTP request methods are:

HTTP Description
Request

GET Asks to get the resource at the requested URL.

POST Asks the server to accept the body info attached. It is like GET request with extra info
sent with the request.

HEAD Asks for only the header part of whatever a GET would return. Just like GET but with no
body.

TRACE Asks for the loopback of the request message, for testing or troubleshooting.

PUT Says to put the enclosed info (the body) at the requested URL.

DELETE Says to delete the resource at the requested URL.

OPTIONS Asks for a list of the HTTP methods to which the thing at the request URL can respond

Get vs. Post

There are many differences between the Get and Post request. Let's see these
differences:
GET POST

1) In case of Get request, only limited amount of In case of post request, large amount of
data can be sent because data is sent in header. data can be sent because data is sent in body.

2) Get request is not secured because data is exposed in Post request is secured because data is not
URL bar. exposed in URL bar.

3) Get request can be bookmarked. Post request cannot be bookmarked.

4) Get request is idempotent . It means second request Post request is non-idempotent.

will be ignored until response of first request is delivered

5) Get request is more efficient and used more than Post. Post request is less efficient and used less
than get.

Servlet Container
It provides the runtime environment for JavaEE (j2ee) applications. The client/user can
request only a static WebPages from the server. If the user wants to read the web pages
as per input then the servlet container is used in java.

The servlet container is the part of web server which can be run in a separate process.
We can classify the servlet container states in three types:
Servlet Container States

The servlet container is the part of web server which can be run in a separate process.
We can classify the servlet container states in three types:

o Standalone: It is typical Java-based servers in which the servlet container and the
web servers are the integral part of a single program. For example:- Tomcat
running by itself
o In-process: It is separated from the web server, because a different program runs
within the address space of the main server as a plug-in. For example:- Tomcat
running inside the JBoss.
o Out-of-process: The web server and servlet container are different programs
which are run in a different process. For performing the communications between
them, web server uses the plug-in provided by the servlet container.

The Servlet Container performs many operations that are given below:

o Life Cycle Management

o Multithreaded support
o Object Pooling
o Security etc.

Server: Web vs. Application

Server is a device or a computer program that accepts and responds to the request
made by other program, known as client. It is used to manage the network resources
and for running the program or software that provides services.

There are two types of servers:

1. Web Server
2. Application Server

Web Server

Web server contains only web or servlet container. It can be used for servlet, jsp, struts,
jsf etc. It can't be used for EJB.
It is a computer where the web content can be stored. In general web server can be
used to host the web sites but there also used some other web servers also such as FTP,
email, storage, gaming etc.

Examples of Web Servers are: Apache Tomcat and Resin.

Web Server Working

It can respond to the client request in either of the following two possible ways:

o Generating response by using the script and communicating with database.

o Sending file to the client associated with the requested URL.

The block diagram representation of Web Server is shown below:

Important points

o If the requested web page at the client side is not found, then web server will sends the
HTTP response: Error 404 Not found.
o When the web server searching the requested page if requested page is found then it
will send to the client with an HTTP response.
o If the client requests some other resources then web server will contact to application
server and data is store for constructing the HTTP response.

Application Server

Application server contains Web and EJB containers. It can be used for servlet, jsp, struts,
jsf, ejb etc. It is a component based product that lies in the middle-tier of a server
centric architecture.

It provides the middleware services for state maintenance and security, along with
persistence and data access. It is a type of server designed to install, operate and host
associated services and applications for the IT services, end users and organizations.

The block diagram representation of Application Server is shown below:

The Example of Application Servers are:

1. JBoss: Open-source server from JBoss community.

2. Glassfish: Provided by Sun Microsystem. Now acquired by Oracle.
3. Weblogic: Provided by Oracle. It more secured.
4. Websphere: Provided by IBM.
Servlet API
The javax.servlet and javax.servlet.http packages represent interfaces and classes for
servlet api.

The javax.servlet package contains many interfaces and classes that are used by the
servlet or web container. These are not specific to any protocol.

The javax.servlet.http package contains interfaces and classes that are responsible for
http requests only.

Let's see what are the interfaces of javax.servlet package.

Interfaces in javax.servlet package

There are many interfaces in javax.servlet package. They are as follows:

1. Servlet
2. ServletRequest
3. ServletResponse
4. RequestDispatcher
5. ServletConfig
6. ServletContext
7. SingleThreadModel
8. Filter
9. FilterConfig
10. FilterChain
11. ServletRequestListener
12. ServletRequestAttributeListener
13. ServletContextListener
14. ServletContextAttributeListener

Classes in javax.servlet package

There are many classes in javax.servlet package. They are as follows:

1. GenericServlet
2. ServletInputStream
3. ServletOutputStream
4. ServletRequestWrapper
5. ServletResponseWrapper
6. ServletRequestEvent
7. ServletContextEvent
8. ServletRequestAttributeEvent
9. ServletContextAttributeEvent
10. ServletException
11. UnavailableException

Interfaces in javax.servlet.http package

There are many interfaces in javax.servlet.http package. They are as follows:

1. HttpServletRequest
2. HttpServletResponse
3. HttpSession
4. HttpSessionListener
5. HttpSessionAttributeListener
6. HttpSessionBindingListener
7. HttpSessionActivationListener
8. HttpSessionContext (deprecated now)

Classes in javax.servlet.http package

There are many classes in javax.servlet.http package. They are as follows:

1. HttpServlet
2. Cookie
3. HttpServletRequestWrapper
4. HttpServletResponseWrapper
5. HttpSessionEvent
6. HttpSessionBindingEvent
7. HttpUtils (deprecated now)

Servlet Interface
Servlet interface provides commonbehaviorto all the servlets.Servlet interface defines
methods that all servlets must implement.

Servlet interface needs to be implemented for creating any servlet (either directly or
indirectly). It provides 3 life cycle methods that are used to initialize the servlet, to
service the requests, and to destroy the servlet and 2 non-life cycle methods.

Methods of Servlet interface

There are 5 methods in Servlet interface. The init, service and destroy are the life cycle
methods of servlet. These are invoked by the web container.

Method Description

public void init(ServletConfig config) initializes the servlet. It is the life cycle method of
servlet and invoked by the web container only once.

public void service(ServletRequest provides response for the incoming request. It is

request,ServletResponse response) invoked at each request by the web container.

public void destroy() is invoked only once and indicates that servlet is being
destroyed.

public ServletConfig getServletConfig() returns the object of ServletConfig.

public String getServletInfo() returns information about servlet such as writer,

There are given 6 steps to create a servlet example. These steps are required for all the
servers.

The servlet example can be created by three ways:

1. By implementing Servlet interface,

2. By inheriting GenericServlet class, (or)
3. By inheriting HttpServlet class

The mostly used approach is by extending HttpServlet because it provides http request
specific method such as doGet(), doPost(), doHead() etc.

Here, we are going to use apache tomcat server in this example. The steps are as
follows:

1. Create a directory structure

2. Create a Servlet
3. Compile the Servlet
4. Create a deployment descriptor
5. Start the server and deploy the project
6. Access the servlet
Servlet Example by implementing Servlet interface

// Import required java libraries

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

// Extend HttpServlet class

public class HelloWorld extends HttpServlet {

private String message;

public void init() throws ServletException {

// Do required initialization
message = "Hello World";
}

public void doGet(HttpServletRequest request,

HttpServletResponse response)
throws ServletException, IOException {

// Set response content type

response.setContentType("text/html");

// Actual logic goes here.

PrintWriter out = response.getWriter();
out.println("<h1>" + message + "</h1>");
}

public void destroy() {

// do nothing.
}
}

Compiling a Servlet
Let us create a file with name HelloWorld.java with the code shown above. Place this
file at C:\ServletDevel (in Windows) or at /usr/ServletDevel (in Unix). This path location
must be added to CLASSPATH before proceeding further.
Assuming your environment is setup properly, go in ServletDevel directory and
compile HelloWorld.java as follows −
$ javac HelloWorld.java
If the servlet depends on any other libraries, you have to include those JAR files on
your CLASSPATH as well. I have included only servlet-api.jar JAR file because I'm not
using any other library in Hello World program.
This command line uses the built-in javac compiler that comes with the Sun
Microsystems Java Software Development Kit (JDK). For this command to work
properly, you have to include the location of the Java SDK that you are using in the
PATH environment variable.
If everything goes fine, above compilation would produce HelloWorld.class file in the
same directory. Next section would explain how a compiled servlet would be deployed
in production.

Servlet Deployment
By default, a servlet application is located at the path <Tomcat-
installationdirectory>/webapps/ROOT and the class file would reside in <Tomcat-
installationdirectory>/webapps/ROOT/WEB-INF/classes.
If you have a fully qualified class name of com.myorg.MyServlet, then this servlet
class must be located in WEB-INF/classes/com/myorg/MyServlet.class.
For now, let us copy HelloWorld.class into <Tomcat-
installationdirectory>/webapps/ROOT/WEB-INF/classes and create following entries
in web.xml file located in <Tomcat-installation-directory>/webapps/ROOT/WEB-INF/
<servlet>
<servlet-name>HelloWorld</servlet-name>
<servlet-class>HelloWorld</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>HelloWorld</servlet-name>
<url-pattern>/HelloWorld</url-pattern>
</servlet-mapping>
Above entries to be created inside <web-app>...</web-app> tags available in web.xml
file. There could be various entries in this table already available, but never mind.
You are almost done, now let us start tomcat server using <Tomcat-
installationdirectory>\bin\startup.bat (on Windows) or <Tomcat-
installationdirectory>/bin/startup.sh (on Linux/Solaris etc.) and finally
type http://localhost:8080/HelloWorld in the browser's address box. If everything
goes fine, you would get the following result
Java Server Pages
(JSP)

What is JSP

JSP simply puts Java inside HTML

pages. You can take any existing HTML
page and change its extension to ".jsp"
instead of ".html".

Scripting elements are used to provide

dynamic pages
JSP and Servlets
Each JSP page is turned into a Java
servlet, compiled and loaded. This
compilation happens on the first request.
After the first request, the file doesn't take
long to load anymore.
Every time you change the JSP file, it will
be re-compiled again.

Java translator compiler

Java servlet Java Servlet
Server
source code class file
Page

Generated servlets
You can examine the source code
produced by the JSP translation process.

There is a directory called generated in

Sun Java J2EE Application Server where
you can find the source code.

Note that the _jspService method

corresponds to the servlet service method
(which is called by doGet or doPost)
JSP elements (overview)
Directives of the form <%@ ... %>
Scripting elements
Expressions of the form <%= expr %>
Scriptlets of the form <% code %>
Declarations of the form <%! code %>
JSP Comments <%-- ... --%>
Standard actions
Example: <jsp:useBean> ... </jsp:useBean>
Implicit variables like request, response,
out

JSP Directives

They have the form

<%@ name attribute1="...", attribute2="..." ... %>

Specify page properties

page
include Include a file at translation time

taglib
Specify custom tags
JSP Directive Examples
Import java packages
<%@ page import="java.util.*,java.sql.*" %>

Multiple import statements

<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>

Including file at translation time

<%@ include file="header.html" %>

For include the path is relative to the JSP file

JSP Scripting Elements: Expressions

For an expression scripting element like

<%= expr %>, expr is evaluated and the
result is converted to a string and placed
into the JSP's servlet output stream. In a
Java servlet this would be equivalent to
PrintWriter out = response.getWriter();
...
out.print(expr);
JSP Expression Examples

Displaying request parameters (request is

an implicit object available in a JSP)
Your name is <%= request.getParameter("name") %>
and your age is <%= request.getParameter("age") %>

Doing calculations
The value of pi is <%= Math.PI %> and the square root
of two is <%= Math.sqrt(2.0) %> and today's date is
<%= new java.util.Date() %>.

JSP Scripting Elements: Scriptlet

For a scriplet <% statements %> the Java
statements are placed in the translated servlet's
_jspService method body (which is called by
either doGet or doPost)

public void _jspService(HttpServletRequest

request, HttpServletResponse response)
throws java.io.IOException, ServletException
{...
statements
...
}
JSP Scriplet Examples
Check a request parameter
<% String name = request.getParameter("name");
if (name == null)
{ %>
<h3>Please supply a name</h3>
<% }
else
{ %>
<h3>Hello <%= name %></h3>
<% } %>

In this example, there are 3 scriptlets elements and one expression element

JSP Scripting Elements: Declaration

For a declaration <%! declarations
%> the Java statements are placed in the
class outside the _jspService method.
Declarations can be Java instance
variable declarations or Java methods

// declarations would go here

public void _jspService(...)
{
...
}
JSP Declaration examples
Declaring instance variables
<%! private int count = 0; %>
...
The count is <%= count++ %>.

Declaring methods
<%!
private int toInt(String s)
{
return Integer.parseInt(s);
}
%>

Including Files

Including files at translation time (when

JSP is translated to a servlet)
<%@ include file="filename" %>

Including files at request time

<jsp:include page="filename" flush = "true" />
A simple JSP

The expression scripting

element <%= ... %> is
equivalent to the scriptlet
<% out.print(...); %>

The Implicit out Object

In a scriptlet <% ... %> you can use the

out object to write to the output stream.
Example:
<%
out.print("The sum is ");
out.print("1 + 2 = " + (1+2));
%>
The Implicit request Object

In a scriptlet <% ... %> you can use the

request object to access GET/POST
parameters.

Example:
<html>
<head><title>...</title></head>
<body>
<h1>...</h1>
<p><%= request.getParameter("greeting") %></p>
</body></html>

Example: HTML Form Submission Using GET

<html>
<head><title>JSP Processing ...</title></head>
<body>
<h1>JSP Processing form with GET</h1>
<form action=“processForm.jsp" method="GET">
First name: <input type="text" name="firstName"><br />
Last name: <input type="text" name="lastName">
<p><input type="submit" name="button"
value="SubmitName"></p>
</form>
</body>
</html>
Example: HTML Form Submission Using POST

<html>
<head><title>JSP Processing ...</title></head>
<body>
<h1>JSP Processing form with POST</h1>
<form action=“processForm.jsp" method="POST">
First name: <input type="text" name="firstName"><br />
Last name: <input type="text" name="lastName">
<p><input type="submit" name="button"
value="SubmitName"></p>
</form>
</body>
</html>

Processing Submitted HTML Forms

ProcessForm.jsp:
<html>
<head>
<title>JSP Form Results</title>
</head>
<body>
<h1>JSP Form Results</h1>
Hello <%= request.getParameter("firstName") %>
<%= request.getParameter("lastName") %>
</body>
</html>
Temperature Conversion Example
<%@ page import="java.text.DecimalFormat" %>
<html>
<head><title>Fahrenheit ... Conversion</title></head>
<body>
<h1>Fahrenheit to Celsius Conversion</h1>
<% String self = request.getRequestURI();
if (request.getParameter("convert") == null)
{
%>
<form action="<%= self %>" method="POST">
Fahrenheit temperature:
<input type="text" name="fahrenheit" />
<p><input type="submit" name="convert"
value="Convert to Celsius" /></p>
</form>

Temperature Conversion Example (Contd.)

<%
}
else
{
double fahr = 0.0;
try
{
fahr = Double.parseDouble(
request.getParameter("fahrenheit"));
}
catch (NumberFormatException e)
{
// do nothing, accept default value
}
Temperature Conversion Example (Contd.)

double celsius = (fahr - 32.0) * (5.0/9.0);

DecimalFormat f2 = new DecimalFormat("0.00");
%>
<%= f2.format(fahr) %>F is
<%= f2.format(celsius) %>C
<p><a href="<%= self %>">Another conversion</a>
</p>
<%
}
%>
</body>
</html>

Java Beans
Special classes that encapsulate some
data
They have a default constructor
get and set methods for data fields
(properties)
A bean can be constructed in JSP using
<jsp:useBean id = "..." class = "..." />
If the bean already exists this statement
does nothing
Setting properties
To set a property of a bean use

<jsp:setProperty name="..."
property="..." value="..."
/>
To set a property using the value of a
request parameter use

<jsp:setProperty name="..."
property="..." param="..."
/>

Getting properties

To get a property of a bean use

<jsp:getProperty name="..."
property="..." />
A Greeting Bean
package beans;
public class Greeting
{
private String greeting; // the property

public Greeting()
{ greeting = "Hello World"; }

public String getGreeting()

{ return greeting; }

public void setGreeting(String g)

{ greeting = (g == null) ? "Hello World" : g;
}
}

Java Beans Naming convention

If the property name is greeting

The get method must have the name
getGreeting
The set method must have the name
setGreeting
Creating a Bean
Create a bean and use default property
<jsp:useBean id="hello" class="beans.Greeting" />

Create a bean and set its property when it

is constructed
<jsp:useBean id="hello" class="beans.Greeting" >
<jsp:setProperty name="hello" property="greeting"
value="Hello JSP World" />
</jsp:useBean>

Here <jsp:setProperty> is in the body

of the <jsp:useBean> element.

Creating a Bean (Contd.)

Create a bean and set its property after it

has been constructed
<jsp:useBean id="hello" class="beans.Greeting" />
<jsp:setProperty name="hello" property="greeting"
value="Hello JSP World" />

The <jsp:setProperty> tag is now

outside the <jsp:useBean> tag so it will
always set the property, not just when the
bean is constructed
Example 1: Using Java Beans in JSP Files

<jsp:useBean id="hello" class="beans.Greeting" />

<jsp:setProperty name="hello" property="greeting"
value="Hello JSP World" />
<html>
<head>
<title>Greeting JSP that uses a Greeting bean</title>
</head>
<body>
<h1>Greeting JSP that uses a Greeting bean</h1>
<p><jsp.getProperty name="hello" property="greeting" />
</p>
</body>
</html>

Example 2: Using Java Beans in JSP Files

Two Beans: One initialized explicitly and the
other is initialized using a request parameter
<jsp:useBean id="greet1" class="beans.Greeting" />
<jsp:useBean id="greet2" class="beans.Greeting" />
<jsp:setProperty name="greet1" property="greeting"
value="Hello JSP World" />
<jsp:setProperty name="greet2" property="greeting"
param="greeting" />
<html><head><title>Greeting JSP using two Greeting
beans</title></head><body>
<h1>Greeting JSP using two Greeting beans</h1>
<p>1st bean: <jsp:getProperty name="greet1"
property="greeting" /></p>
<p>2nd bean: <jsp:getProperty name="greet2"
property="greeting" /></p></body></html>
Example 3: Using Java Beans in JSP Files
Three Beans: One initialized explicitly, one is
initialized using a request parameter, and one
is initialized using getParameter
<jsp:useBean id="greet1" class="beans.Greeting" />
<jsp:useBean id="greet2" class="beans.Greeting" />
<jsp:useBean id="greet3" class="beans.Greeting" />
<jsp:setProperty name="greet1" property="greeting"
value="Hello JSP World" />
<jsp:setProperty name="greet2" property="greeting"
param="greeting" />

<%-- Following works but param method is better --%>

<jsp:setProperty name="greet3" property="greeting"

value="<%= request.getParameter(\"greeting\") %>" />

Reference
COS 2206 JSP, Barry G. Adams, Department of Mathematics and
Computer Science, Laurentain University.
,QWURGXFWLRQ WR-63
-DYD6HUYHU3DJHV -63 LVDWHFKQRORJ\EDVHGRQWKH-DYDODQJXDJHDQGHQDEOHV
WKHGHYHORSPHQWRIG\QDPLFZHEVLWHV-63ZDVGHYHORSHGE\6XQ0LFURV\VWHPV
WRDOORZVHUYHUVLGHGHYHORSPHQW-63ILOHVDUH+70/ILOHVZLWKVSHFLDO7DJV
FRQWDLQLQJ-DYDVRXUFHFRGHWKDWSURYLGHWKHG\QDPLFFRQWHQW

7KHIROORZLQJVKRZVWKH7\SLFDO:HEVHUYHUGLIIHUHQWFOLHQWVFRQQHFWLQJYLDWKH
,QWHUQHWWRD:HEVHUYHU,QWKLVH[DPSOHWKH:HEVHUYHULVUXQQLQJRQ8QL[DQG
LVWKHYHU\SRSXODU$SDFKH:HEVHUYHU

7\SLFDO:HE :HE
&OLHQW
VHUYHU VHUYHU

0DF26

,17(51(7

/LQX[

8QL[
$SDFKH:HEVHUYHU
:LQGRZV

)LUVWVWDWLFZHESDJHVZHUHGLVSOD\HG7\SLFDOO\WKHVHZHUHSHRSOH¶VILUVW
H[SHULHQFHZLWKPDNLQJZHESDJHVVRFRQVLVWHGRI0\+RPH3DJHVLWHVDQG
FRPSDQ\PDUNHWLQJLQIRUPDWLRQ$IWHUZDUGV3HUODQG&ZHUHODQJXDJHVXVHGRQ
WKHZHEVHUYHUWRSURYLGHG\QDPLFFRQWHQW6RRQPRVWODQJXDJHVLQFOXGLQJ
9LVXDOEDVLF'HOSKL&DQG-DYDFRXOGEHXVHGWRZULWHDSSOLFDWLRQVWKDW
SURYLGHGG\QDPLFFRQWHQWXVLQJGDWDIURPWH[WILOHVRUGDWDEDVHUHTXHVWV7KHVH
ZHUHNQRZQDV&*,VHUYHUVLGHDSSOLFDWLRQV$63ZDVGHYHORSHGE\0LFURVRIWWR
DOORZ+70/GHYHORSHUVWRHDVLO\SURYLGHG\QDPLFFRQWHQWVXSSRUWHGDVVWDQGDUG
E\0LFURVRIW¶VIUHH:HE6HUYHU,QWHUQHW,QIRUPDWLRQ6HUYHU ,,6 -63LVWKH
HTXLYDOHQWIURP6XQ0LFURV\VWHPVDFRPSDULVRQRI$63DQG-63ZLOOEH
SUHVHQWHGLQWKHIROORZLQJVHFWLRQ

9LVXDOEXLOGHUFRP
7KHIROORZLQJGLDJUDPVKRZVDZHEVHUYHUWKDWVXSSRUWV-63ILOHV1RWLFHWKDWWKH
ZHEVHUYHUDOVRLVFRQQHFWHGWRDGDWDEDVH

7\SLFDO:HEVHUYHU :HE
&OLHQW
VXSSRUWLQJ-63 VHUYHU

0DF26

,17(51(7
'$7$%$6(

/LQX[ -63
6HUYOHW
(QJLQH 2UDFOH
-63ILOHV 'DWDEDVH
VWRUHGKHUH 8QL[
$SDFKH:HEVHUYHU
:LQGRZV

-63VRXUFHFRGHUXQVRQWKHZHEVHUYHULQWKH-636HUYOHW(QJLQH7KH-63
6HUYOHWHQJLQHG\QDPLFDOO\JHQHUDWHVWKH+70/DQGVHQGVWKH+70/RXWSXWWRWKH
FOLHQW¶VZHEEURZVHU

9LVXDOEXLOGHUFRP
:K\XVH-63"

-63LVHDV\WROHDUQDQGDOORZVGHYHORSHUVWRTXLFNO\SURGXFHZHEVLWHVDQG
DSSOLFDWLRQVLQDQRSHQDQGVWDQGDUGZD\-63LVEDVHGRQ-DYDDQREMHFW
RULHQWHGODQJXDJH-63RIIHUVDUREXVWSODWIRUPIRUZHEGHYHORSPHQW

0DLQUHDVRQVWRXVH-63

0XOWLSODWIRUP
&RPSRQHQWUHXVHE\XVLQJ-DYDEHDQVDQG(-%
$GYDQWDJHVRI-DYD

<RXFDQWDNHRQH-63ILOHDQGPRYHLWWRDQRWKHUSODWIRUPZHEVHUYHURU-63
6HUYOHWHQJLQH

0RYLQJ-63ILOHIURPRQH
SODWIRUPWRDQRWKHU

:HEVHUYHU :HEVHUYHU
0LFURVRIW,,6 $SDFKH

0RYLQJ-63ILOHV
-63 -63
6HUYOHW 6HUYOHW
(QJLQH (QJLQH

0LFURVRIW17
7KLVPHDQV\RXDUHQHYHUORFNHGLQWRRQHYHQGRURUSODWIRUP 8QL[
-636HUYOHW(QJLQH-581 -636HUYOHW(QJLQH7RPFDW

+70/DQGJUDSKLFVGLVSOD\HGRQWKHZHEEURZVHUDUHFODVVHGDVWKHSUHVHQWDWLRQ
OD\HU7KH-DYDFRGH -63 RQWKHVHUYHULVFODVVHGDVWKHLPSOHPHQWDWLRQ
%\KDYLQJDVHSDUDWLRQRISUHVHQWDWLRQDQGLPSOHPHQWDWLRQZHEGHVLJQHUVZRUN
RQO\RQWKHSUHVHQWDWLRQDQG-DYDGHYHORSHUVFRQFHQWUDWHRQLPSOHPHQWLQJWKH
DSSOLFDWLRQ

9LVXDOEXLOGHUFRP
-63FRPSDUHGWR$63

-63DQG$63DUHIDLUO\VLPLODULQWKHIXQFWLRQDOLW\WKDWWKH\SURYLGH-63PD\KDYH
VOLJKWO\KLJKHUOHDUQLQJFXUYH%RWKDOORZHPEHGGHGFRGHLQDQ+70/SDJH
VHVVLRQYDULDEOHVDQGGDWDEDVHDFFHVVDQGPDQLSXODWLRQ:KHUHDV$63LVPRVWO\
IRXQGRQ0LFURVRIWSODWIRUPVLH17-63FDQRSHUDWHRQDQ\SODWIRUPWKDW
FRQIRUPVWRWKH-((VSHFLILFDWLRQ-63DOORZFRPSRQHQWUHXVHE\XVLQJ
-DYDEHDQVDQG(-%V$63SURYLGHVWKHXVHRI&20$FWLYH;FRQWUROV

-63FRPSDUHGWR6HUYOHWV
$6HUYOHWLVD-DYDFODVVWKDWSURYLGHVVSHFLDOVHUYHUVLGHVHUYLFH,WLVKDUGZRUN
WRZULWH+70/FRGHLQ6HUYOHWV,Q6HUYOHWV\RXQHHGWRKDYHORWVRISULQWOQ
VWDWHPHQWVWRJHQHUDWH+70/

9LVXDOEXLOGHUFRP
-63DUFKLWHFWXUH
-63VDUHEXLOWRQWRSRI681¶VVHUYOHWWHFKQRORJ\-63VDUHHVVHQWLDODQ+70/
SDJHZLWKVSHFLDO-63WDJVHPEHGGHG7KHVH-63WDJVFDQFRQWDLQ-DYDFRGH7KH
-63ILOHH[WHQVLRQLVMVSUDWKHUWKDQKWPRUKWPO7KH-63HQJLQHSDUVHVWKHMVS
DQGFUHDWHVD-DYDVHUYOHWVRXUFHILOH,WWKHQFRPSLOHVWKHVRXUFHILOHLQWRDFODVV
ILOHWKLVLVGRQHWKHILUVWWLPHDQGWKLVZK\WKH-63LVSUREDEO\VORZHUWKHILUVW
WLPHLWLVDFFHVVHG$Q\WLPHDIWHUWKLVWKHVSHFLDOFRPSLOHGVHUYOHWLVH[HFXWHG
DQGLVWKHUHIRUHUHWXUQVIDVWHU

:HE6HUYHU

:HE%URZVHU -63
:HEEURZVHU5HTXHVW -63UHTXHVWVHQWWR:HEVHUYHU )LOH

6HQGWR-636HUYOHW(QJLQH

+70/VHQWWREURZVHU
-636HUYOHW(QJLQH

3DUVH-63ILOH

,17(51(7 *HQHUDWH6HUYOHW
VRXUFHFRGH

&RPSLOH6HUYOHW
VRXUFHFRGHLQWR
FODVV

,QVWDQWLDWH6HUYOHW
+70/ 6HUYOHWRXWSXW

6WHSVUHTXLUHGIRUD-63UHTXHVW

7KHXVHUJRHVWRDZHEVLWHPDGHXVLQJ-637KHXVHUJRHVWRD-63SDJH
HQGLQJZLWKMVS 7KHZHEEURZVHUPDNHVWKHUHTXHVWYLDWKH,QWHUQHW
7KH-63UHTXHVWJHWVVHQWWRWKH:HEVHUYHU
7KH:HEVHUYHUUHFRJQLVHVWKDWWKHILOHUHTXLUHGLVVSHFLDO MVS WKHUHIRUH
SDVVHVWKH-63ILOHWRWKH-636HUYOHW(QJLQH
,IWKH-63ILOHKDVEHHQFDOOHGWKHILUVWWLPHWKH-63ILOHLVSDUVHG
RWKHUZLVHJRWRVWHS
7KHQH[WVWHSLVWRJHQHUDWHDVSHFLDO6HUYOHWIURPWKH-63ILOH$OOWKH
+70/UHTXLUHGLVFRQYHUWHGWRSULQWOQVWDWHPHQWV
7KH6HUYOHWVRXUFHFRGHLVFRPSLOHGLQWRDFODVV
7KH6HUYOHWLVLQVWDQWLDWHGFDOOLQJWKHLQLW DQGVHUYLFH PHWKRGV
+70/IURPWKH6HUYOHWRXWSXWLVVHQWYLDWKH,QWHUQHW
+70/UHVXOWVDUHGLVSOD\HGRQWKHXVHU¶VZHEEURZVHU

9LVXDOEXLOGHUFRP
6HWWLQJXSD-63HQYLURQPHQW
%HIRUHVHWWLQJXSWKH-63HQYLURQPHQW\RXPXVWPDNHVXUH\RXKDYHWKH-'.

'RZQORDG-'.IURPWKHIROORZLQJ85/
KWWSMDYDVXQFRPMVH

)RU:LQGRZVWKHFRPSOHWHGRZQORDGLVDERXW0%

5XQWKURXJKWKHVHWXS

2QHRIWKHPDLQSUREOHPVQHZ-DYDGHYHORSHUVKDYHLVVHWWLQJWKH3$7+DQG
&/$663$7+
)RU:LQGRZV0(\RXHGLWWKH$872(;(&%$7ILOHZLWKWKHQHZ3$7+DQG
&/$663$7+VHWWLQJVDQGUHERRW\RXUPDFKLQH
)RU:LQGRZV17\RXHGLWWKHHQYLURQPHQWVHWWLQJV

%RWKRIWKHVHFKDQJHVDUHGHVFULEHGLQWKH-DYDLQVWDOODWLRQLQVWUXFWLRQV

'RZQORDGWKH-63HQYLURQPHQW
<RXFDQGRZQORDG-63HQYLURQPHQWVIURPWKHZHE
KWWSMDYDVXQFRPSURGXFWVMVSGRZQORDGKWPO

7KHSUHIHUUHGRSWLRQLVWRGRZQORDGWKH-((5HIHUHQFH,PSOHPHQWDWLRQ7RPFDW
DSSUR[LPDWHO\0% 7RPFDWLVDIUHHRSHQVRXUFH-63DQG6HUYOHWHQJLQH
GHYHORSHGE\$SDFKH,QVWUXFWLRQVWRGRZQORDG7RPFDWDUHJLYHQEHORZ

)RU7RPFDWVHWXS
7RGRZQORDG7RPFDW FXUUHQWYHUVLRQ JRWRWKHIROORZLQJ85/
KWWSMDNDUWDDSDFKHRUJEXLOGVMDNDUWDWRPFDWUHOHDVHYELQ

'RZQORDG\RXUFKRVHQFRPSUHVVHGILOHIRUH[DPSOHRQ:LQGRZV\RXZRXOG
GRZQORDGWKH]LSILOH± 0%
KWWSMDNDUWDDSDFKHRUJEXLOGVMDNDUWDWRPFDWUHOHDVHYELQMDNDUWD
WRPFDW]LS

8Q]LSWKHILOHLQWRDGLUHFWRU\DQGVHWDQHQYLURQPHQWYDULDEOH720&$7B+20(WR
\RXUPDLQ7RPFDWGLUHFWRU\

)RUH[DPSOH

VHW720&$7B+20( F?WRPFDW

7RVWDUWWKHVHUYHUFKDQJHWRWKHWRPFDW?ELQGLUHFWRU\DQGW\SH
VWDUWXS

2SHQDZHEEURZVHUDQGLQWKHDGGUHVVER[W\SH
KWWSORFDOKRVW WKLVGLVSOD\VWKHH[DPSOHSDJH

9LVXDOEXLOGHUFRP
3ODFHDQ\QHZ-63ILOHVLQWKH³ZHEDSSV´GLUHFWRU\XQGHU\RXULQVWDOOHG7RPFDW
GLUHFWRU\

)RUH[DPSOHWRUXQ³P\ILUVWMVS´ILOHFRS\WKHILOHLQWRWKH³ZHEDSSV5227´
GLUHFWRU\DQGWKHQRSHQDEURZVHUWRWKHDGGUHVV

KWWSORFDOKRVWP\ILUVWMVS

7KLVZLOOVKRZ\RXWKHH[HFXWHG-63ILOH

&21*5$78/$7,216 <285-63DQG6(59/(7(19,5210(17,612:
6(783

9LVXDOEXLOGHUFRP
&UHDWLQJ\RXUILUVW-63SDJH
KWPO!
KHDG!
WLWOH!0\ILUVW-63SDJH
WLWOH!
KHDG!
ERG\!
#SDJHODQJXDJH ´MDYD´!

6\VWHPRXWSULQWOQ ³+HOOR:RUOG´ !

ERG\!
KWPO!

7\SHWKHFRGHDERYHLQWRDWH[WILOH1DPHWKHILOHKHOORZRUOGMVS
3ODFHWKLVLQWKHFRUUHFWGLUHFWRU\RQ\RXU-63ZHEVHUYHUDQGFDOOLWYLD\RXU
EURZVHU

9LVXDOEXLOGHUFRP
8VLQJ-63WDJV
7KHUHDUHILYHPDLQWDJV

'HFODUDWLRQWDJ
([SUHVVLRQWDJ
'LUHFWLYH7DJ
6FULSWOHWWDJ
$FWLRQWDJ

9LVXDOEXLOGHUFRP
'HFODUDWLRQWDJ !
7KLVWDJDOORZVWKHGHYHORSHUWRGHFODUHYDULDEOHVRUPHWKRGV

%HIRUHWKHGHFODUDWLRQ\RXPXVWKDYH
$WWKHHQGRIWKHGHFODUDWLRQWKHGHYHORSHUPXVWKDYH!

&RGHSODFHGLQWKLVWDJPXVWHQGLQDVHPLFRORQ

'HFODUDWLRQVGRQRWJHQHUDWH RXWSXWVRDUHXVHGZLWK-63H[SUHVVLRQVRU
VFULSWOHWV

)RU([DPSOH

SULYDWHLQWFRXQWHU
SULYDWH6WULQJJHW$FFRXQW LQWDFFRXQW1R
!

9LVXDOEXLOGHUFRP
([SUHVVLRQWDJ !
7KLVWDJDOORZVWKHGHYHORSHUWRHPEHGDQ\-DYDH[SUHVVLRQDQGLVVKRUWIRU
RXWSULQWOQ

$VHPLFRORQ GRHVQRWDSSHDUDWWKHHQGRIWKHFRGHLQVLGHWKHWDJ

)RUH[DPSOHWRVKRZWKHFXUUHQWGDWHDQGWLPH

'DWH QHZMDYDXWLO'DWH !

9LVXDOEXLOGHUFRP
'LUHFWLYHWDJ #GLUHFWLYH«!
$-63GLUHFWLYHJLYHVVSHFLDOLQIRUPDWLRQDERXWWKHSDJHWRWKH-63(QJLQH

7KHUHDUHWKUHHPDLQW\SHVRIGLUHFWLYHV

SDJH± SURFHVVLQJLQIRUPDWLRQIRUWKLVSDJH
,QFOXGH± ILOHVWREHLQFOXGHG
7DJOLEUDU\± WDJOLEUDU\WREHXVHGLQWKLVSDJH

'LUHFWLYHVGRQRWSURGXFHDQ\YLVLEOHRXWSXWZKHQWKHSDJHLVUHTXHVWHGEXW
FKDQJHWKHZD\WKH-63(QJLQHSURFHVVHVWKHSDJH

)RUH[DPSOH\RXFDQPDNHVHVVLRQGDWDXQDYDLODEOHWRDSDJHE\VHWWLQJDSDJH
GLUHFWLYH VHVVLRQ WRIDOVH

3DJHGLUHFWLYH

7KLVGLUHFWLYHKDVRSWLRQDODWWULEXWHVWKDWSURYLGHWKH-63(QJLQHZLWKVSHFLDO
SURFHVVLQJLQIRUPDWLRQ7KHIROORZLQJWDEOHOLVWVWKHGLIIHUHQWDWWULEXWHVZLWKD
EULHIGHVFULSWLRQ

ODQJXDJH :KLFKODQJXDJHWKHILOHXVHV #SDJHODQJXDJH ³MDYD´!

H[WHQGV 6XSHUFODVVXVHGE\WKH-63 #SDJHH[WHQGV
HQJLQHIRUWKHWUDQVODWHG6HUYOHW ³FRPWDJOLE«´!
LPSRUW ,PSRUWDOOWKHFODVVHVLQDMDYD #SDJHLPSRUW ³MDYDXWLO ´
SDFNDJHLQWRWKHFXUUHQW-63 !
SDJH7KLVDOORZVWKH-63SDJHWR
XVHRWKHUMDYDFODVVHV

7KHIROORZLQJSDFNDJHVDUH
LPSOLFLWO\LPSRUWHG
MDYDODQJ
MDYD[VHUYOHW
MDYD[VHUYOHWMVS
MDYD[VHUYOHWKWWS
VHVVLRQ 'RHVWKHSDJHPDNHXVHRI 'HIDXOWLVVHWWRWUXH
VHVVLRQV%\GHIDXOWDOO-63SDJHV
KDYHVHVVLRQGDWDDYDLODEOH
7KHUHDUHSHUIRUPDQFHEHQHILWV
WRVZLWFKLQJVHVVLRQWRIDOVH
EXIIHU &RQWUROVWKHXVHRIEXIIHUHG #SDJHEXIIHU ³QRQH´!
RXWSXWIRUD-63SDJH'HIDXOWLV
NE
DXWR)OXVK )OXVKRXWSXWEXIIHUZKHQIXOO #SDJHDXWR)OXVK ³WUXH´!
LV7KUHDG6DIH &DQWKHJHQHUDWHG6HUYOHWGHDO
ZLWKPXOWLSOH UHTXHVWV",IWUXHD
QHZWKUHDGLVVWDUWHGVRUHTXHVWV
DUHKDQGOHGVLPXOWDQHRXVO\
LQIR 'HYHORSHUXVHVLQIRDWWULEXWHWR #SDJHLQIR
DGGLQIRUPDWLRQGRFXPHQWIRUD ³YLVXDOEXLOGHUFRPWHVWSDJH
SDJH7\SLFDOO\XVHGWRDGG FRS\ULJKW³!
DXWKRUYHUVLRQFRS\ULJKWDQG
GDWHLQIR
HUURU3DJH 'LIIHUHQWSDJHWRGHDOZLWK #SDJHHUURU3DJH
´

9LVXDOEXLOGHUFRP
HUURUV0XVWEH85/WRHUURU ³HUURUHUURUMVS´!
SDJH
,V(UURU3DJH 7KLVIODJLVVHWWRWUXHWRPDNHD
-63SDJHDVSHFLDO(UURU3DJH
7KLVSDJHKDVDFFHVVWRWKH
LPSOLFLWREMHFWH[FHSWLRQ VHH
ODWHU
FRQWHQW7\SH 6HWWKHPLPHW\SHDQGFKDUDFWHU
VHWRIWKH-63

,QFOXGHGLUHFWLYH

$OORZVD-63GHYHORSHUWRLQFOXGHFRQWHQWVRIDILOHLQVLGHDQRWKHU7\SLFDOO\
LQFOXGHILOHVDUHXVHGIRUQDYLJDWLRQWDEOHVKHDGHUVDQGIRRWHUVWKDWDUHFRPPRQ
WRPXOWLSOHSDJHV

7ZRH[DPSOHVRIXVLQJLQFOXGHILOHV

7KLVLQFOXGHVWKHKWPOIURPSULYDF\KWPOIRXQGLQWKHLQFOXGHGLUHFWRU\LQWRWKH
FXUUHQWMVSSDJH

#LQFOXGHILOH ³LQFOXGHSULYDF\KWPO!

RUWRLQFOXGH DQDYLDJDWLRQPHQX MVSILOH IRXQGLQWKHFXUUHQWGLUHFWRU\

#LQFOXGHILOH ³QDYLJDWLRQMVS!

,QFOXGHILOHVDUHGLVFXVVHGLQPRUHGHWDLOLQWKHODWHUVHFWLRQVRIWKLVWXWRULDO

7DJ/LEGLUHFWLYH

$WDJOLELVDFROOHFWLRQRIFXVWRPWDJVWKDWFDQEHXVHGE\WKHSDJH

#WDJOLEXUL ³WDJOLEUDU\85,´SUHIL[ ³WDJ3UHIL[´!

&XVWRPWDJVZHUHLQWURGXFHGLQ-63DQGDOORZ-63GHYHORSHUVWRKLGHFRPSOH[
VHUYHUVLGHFRGHIURPZHEGHVLJQHUV

7KLVWRSLFZLOOEHFRYHUHGLQWKH$GYDQFHG-63WXWRULDODWYLVXDOEXLOGHUFRP

9LVXDOEXLOGHUFRP
6FULSWOHWWDJ «!
%HWZHHQDQG!WDJVDQ\YDOLG-DYDFRGHLVFDOOHGD6FULSWOHW7KLVFRGHFDQ
DFFHVVDQ\YDULDEOHRUEHDQGHFODUHG

)RUH[DPSOHWRSULQWDYDULDEOH

6WULQJXVHUQDPH ³YLVXDOEXLOGHU´
RXWSULQWOQ XVHUQDPH

9LVXDOEXLOGHUFRP
$FWLRQWDJ

7KHUHDUHWKUHHPDLQUROHVRIDFWLRQWDJV

HQDEOHWKHXVHRIVHUYHUVLGH-DYDEHDQV
WUDQVIHUFRQWUROEHWZHHQSDJHV
EURZVHULQGHSHQGHQWVXSSRUWIRUDSSOHWV

-DYDEHDQV
$-DYDEHDQLVDVSHFLDOW\SHRIFODVVWKDWKDVDQXPEHURIPHWKRGV7KH-63SDJH
FDQFDOOWKHVHPHWKRGVVRFDQOHDYHPRVWRIWKHFRGHLQWKHVH-DYDEHDQV)RU
H[DPSOHLI\RXZDQWHGWRPDNHDIHHGEDFNIRUPWKDWDXWRPDWLFDOO\VHQWRXWDQ
HPDLO%\KDYLQJD-63SDJHZLWKDIRUPZKHQWKHYLVLWRUSUHVVHVWKHVXEPLW
EXWWRQWKLVVHQGVWKHGHWDLOVWRD-DYDEHDQWKDWVHQGVRXWWKHHPDLO7KLVZD\
WKHUHZRXOGEHQRFRGHLQWKH-63SDJHGHDOLQJZLWKVHQGLQJHPDLOV -DYD0DLO
$3, DQG\RXU-DYDEHDQFRXOGEHXVHGLQDQRWKHUSDJH SURPRWLQJUHXVH

7RXVHD-DYDEHDQLQD-63SDJHXVHWKHIROORZLQJV\QWD[

MVSXVHEHDQLG ³«³VFRSH ³DSSOLFDWLRQ´FODVV ³FRP«´!

7KHIROORZLQJLVDOLVWRI-DYDEHDQVFRSHV

SDJH± YDOLGXQWLOSDJHFRPSOHWHV
UHTXHVW± EHDQLQVWDQFHODVWVIRUWKHFOLHQWUHTXHVW
VHVVLRQ± EHDQODVWVIRUWKHFOLHQWVHVVLRQ
DSSOLFDWLRQ± EHDQLQVWDQFHFUHDWHGDQGODVWVXQWLODSSOLFDWLRQHQGV

-DYDEHDQVDUHGLVFXVVHGLQGHWDLOODWHULQWKLVWXWRULDO

'\QDPLF-63,QFOXGH
<RXKDYHVHHQKRZDILOHFDQEHLQFOXGHGLQWRD-63XVLQJDQ ,QFOXGH'LUHFWLYH

#LQFOXGHILOH ³LQFOXGHSULYDF\KWPO!

7KLVLVXVHIXOIRULQFOXGLQJFRPPRQSDJHVWKDWDUHVKDUHGDQGLVLQFOXGHGDW
FRPSLOHWLPH

7RLQFOXGHDSDJHDWUXQWLPH\RXVKRXOGXVHG\QDPLF-63LQFOXGHV

MVSLQFOXGHSDJH 85/IOXVK WUXH!

9LVXDOEXLOGHUFRP
&UHDWLQJ\RXUVHFRQG-63SDJH

)RUWKHVHFRQGH[DPSOHZHZLOOPDNHXVHRIWKHGLIIHUHQWWDJVZHKDYHOHDUQW
7KLVH[DPSOHZLOOGHFODUHWZRYDULDEOHVRQHVWULQJXVHGWRVWRUHGWKHQDPHRID
ZHEVLWHDQGDQLQWHJHUFDOOHGFRXQWHUWKDWGLVSOD\VWKHQXPEHURIWLPHVWKHSDJH
KDVEHHQDFFHVVHG7KHUHLVDOVRDSULYDWHPHWKRGGHFODUHGWRLQFUHPHQWWKH
FRXQWHU7KHZHEVLWHQDPHDQGFRXQWHUYDOXHDUHGLVSOD\HG

+70/!
+($'!
7,7/(!-63([DPSOH7,7/(!
+($'!
%2'<!-63([DPSOH
%5!

6WULQJVLWHQDPH ³YLVXDOEXLOGHUFRP´
LQWFRXQWHU

SULYDWHYRLGLQFUHPHQW&RXQWHU
^
FRXQWHU
`
!

:HEVLWHRIWKHGD\LV
VLWHQDPH!
%5!
SDJHDFFHVVHG
FRXQWHU!
%2'<!
+70/!

9LVXDOEXLOGHUFRP
,PSOLFLW2EMHFWV

6RIDUZHNQRZWKDWWKHGHYHORSHUFDQFUHDWH-DYDEHDQVDQGLQWHUDFWZLWK-DYD
REMHFWV7KHUHDUHVHYHUDOREMHFWVWKDWDUHDXWRPDWLFDOO\DYDLODEOHLQ-63FDOOHG
LPSOLFLWREMHFWV

7KHLPSOLFLWREMHFWVDUH

9DULDEOH 2IW\SH
UHTXHVW MDYD[VHUYOHWKWWSKWWSVHUYOHWUHTXHVW
UHVSRQVH MDYD[VHUYOHWKWWSKWWSVHUYOHWUHVSRQVH
RXW MDYD[VHUYOHWMVSMVSZULWHU
VHVVLRQ MDYD[VHUYOHWKWWSKWWSVHVVLRQ
SDJHFRQWHQW MDYD[VHUYOHWMVSSDJHFRQWH[W
DSSOLFDWLRQ MDYD[VHUYOHWKWWSVHUYOHWFRQWH[W
FRQILJ MDYD[VHUYOHWKWWSVHUYOHWFRQILJ
SDJH MDYDODQJREMHFW
H[FHSWLRQ MDYDODQJWKURZDEOH

SDJHREMHFW

5HSUHVHQWVWKH-63SDJHDQGLVXVHGWRFDOODQ\PHWKRGVGHILQHGE\WKHVHUYOHW
FODVV

FRQILJREMHFW

6WRUHVWKH6HUYOHWFRQILJXUDWLRQGDWD

UHTXHVWREMHFW

$FFHVVWRLQIRUPDWLRQDVVRFLDWHGZLWKDUHTXHVW7KLVREMHFWLVQRUPDOO\XVHGLQ
ORRNLQJXSSDUDPHWHUYDOXHVDQGFRRNLHV

6WULQJGHY6WU UHTXHVWJHW3DUDPHWHU ³GHY´ !

'HYHORSPHQWODQJXDJH GHY6WU!

7KLVFRGHVQLSSHWLVVWRULQJWKHSDUDPHWHU³GHY´LQWKH VWULQJGHY6WU7KHUHVXOWLV
GLVSOD\HGXQGHUQHDWK

7KHVHVVLRQREMHFWLVFRYHUHGLQGHWDLOLQWKHQH[WVHFWLRQ

9LVXDOEXLOGHUFRP
6HVVLRQ7UDFNLQJLQ-63 6HVVLRQ2EMHFW
6D\IRUH[DPSOH\RXZRXOGOLNHWRLPSOHPHQWDVKRSSLQJFDUWXVLQJ-637KHUH
DUHVHYHUDORSWLRQV\RXFRXOGFRQVLGHU

x &RRNLHV ± DVPDOOWH[WILOHVWRUHGRQWKHFOLHQW¶VPDFKLQH&RRNLHVFDQEH
GLVDEOHGLQWKHEURZVHUVHWWLQJVVRDUHQRWDOZD\VDYDLODEOH
x 85/UHZULWLQJ ± VWRUHVHVVLRQLQIRUPDWLRQLQWKH85/:RUNVZKHQ
FRRNLHVDUHQRWVXSSRUWHGEXWFDQPDNHERRNPDUNLQJRIZHESDJHVD
SUREOHPEHFDXVHWKH\KDYHVHVVLRQVSHFLILFLQIRUPDWLRQDWWKHHQGRID
85/
x +LGGHQIRUPILHOGV ± +70/KLGGHQHGLWER[HVVXFKDV,1387
7<3( ´+,''(1´1$0( ´86(51$0(´9$/8( ´«³!(YHU\SDJHKDVWR
EHG\QDPLFDOO\SURGXFHGZLWKWKHYDOXHVLQWKHKLGGHQILHOG
x 6HVVLRQREMHFWV ± -63,PSOLFLWREMHFW

$VHVVLRQREMHFWXVHVDNH\YDOXHFRPELQDWLRQWRVWRUHLQIRUPDWLRQ

7RUHWULHYHLQIRUPDWLRQIURPDVHVVLRQ

VHVVLRQJHW9DOXH ³YLVLWFRXQWHU´

7KHUHWXUQW\SHRIWKHPHWKRG JHW9DOXHLV2EMHFWVR\RXZLOOQHHGWRW\SHFDVWWR
JHWWKHUHTXLUHGYDOXH,IWKHUHLVQRWDVHVVLRQNH\ZLWKWKDWQDPHDQXOOLV
UHWXUQHG

7RVHWDVHVVLRQNH\ZLWKDYDOXH

VHVVLRQSXW9DOXH ³YLVLWFRXQWHU´WRWDOYLVLWV

7KHWKLUG-63H[DPSOHLQ WKLVWXWRULDOGHPRQVWUDWHVWKHXVHRIWKHVHVVLRQREMHFW

9LVXDOEXLOGHUFRP
-63&RPPHQWV -63FRPPHQW!

-63FRPPHQWVDUHVLPLODUWR+70/FRPPHQWV +70/&RPPHQW!H[FHSW
-63FRPPHQWVDUHQHYHUVHQWWRWKHXVHU¶VEURZVHU+70/FRPPHQWVDUHYLVLEOH
LQWKHSDJHVRXUFH

KWPO!
KHDG!
WLWOH!
+70/DQG-63&RPPHQWV
WLWOH!
KHDG!
ERG\!
K!
FRPPHQWV
K!

7KLV+70/&RPPHQW YLVLEOHLQWKHSDJHVRXUFH!

7KLV-63FRPPHQW QRWYLVLEOHLQ WKHSDJHVRXUFH!

ERG\!
KWPO!

9LVXDOEXLOGHUFRP
&UHDWLQJ\RXUWKLUG-63SDJH

7KLVWKLUGH[DPSOHFRXQWVKRZPDQ\WLPHVDSDUWLFXODUXVHUYLVLWVDSDJH,WXVHV
WKH6HVVLRQREMHFWWKDWZDVSUHVHQWHGLQWKH,PSOLFLWREMHFWVHFWLRQRIWKLV
WXWRULDO

7KHIROORZLQJDUHWKHPDLQVWHSVLQYROYHG

JHWWKHYDOXHRIWKHVHVVLRQYDULDEOH YLVLWFRXQWHU
LIWKHVHVVLRQYDULDEOH YLVLWFRXQWHU LVQXOO
VHWWKHVHVVLRQYDULDEOHWRDQGZHOFRPHWKHYLVLWRU
LIWKHVHVVLRQYDULDEOHLVQRWQXOO DIWHUVWHS
LQFUHPHQWWKHVHVVLRQYDUDLEOHDQGGLVSOD\WKHQXPEHURI
YLVLWV

VHVVLRQMVS
FKHFNVWRVHHLI\RXKDYHYLVLWHGDSDJHDQGNHHSVDFRXQWHU
YLVXDOEXLOGHUFRP
!
KWPO!
KHDG!
KHDG!

ERG\!

JHWWKHYDOXHRIWKHVHVVLRQYDULDEOH YLVLWFRXQWHU
,QWHJHUWRWDOYLVLWV ,QWHJHU VHVVLRQJHW9DOXH YLVLWFRXQWHU

LIWKHVHVVLRQYDULDEOH YLVLWFRXQWHU LVQXOO

LI WRWDOYLVLWV QXOO
^
VHWVHVVLRQYDULDEOHWR
WRWDOYLVLWV QHZ,QWHJHU
VHVVLRQSXW9DOXH YLVLWFRXQWHUWRWDOYLVLWV

SULQWDPHVVDJHWRRXWYLVLWRU
RXWSULQWOQ :HOFRPHYLVLWRU
`
HOVH
^
LI\RXKDYHYLVLWHGWKHSDJHEHIRUHWKHQDGGWRWKHYLVLWFRXQWHU
WRWDOYLVLWV QHZ,QWHJHU WRWDOYLVLWVLQW9DOXH
VHVVLRQSXW9DOXH YLVLWFRXQWHUWRWDOYLVLWV
RXWSULQWOQ <RXKDYHYLVLWHGWKLVSDJHWRWDOYLVLWVWLPH V
`
!

ERG\!
KWPO!

9LVXDOEXLOGHUFRP
(UURUSDJHV

(YHQWXDOO\WKHUHZLOOFRPHDWLPHZKHQVRPHWLPHXQH[SHFWHGKDSSHQV,Q-DYD
WHUPVWKLVLVZKHQDQH[FHSWLRQJHWVWKURZQ-63FDQKDQGOHWKHVHVLWXDWLRQVVR
ZKHQDQH[FHSWLRQLVWKURZQDGHIDXOWHUURUSDJHLVVHQWWRWKHEURZVHU

6RZKDWPDNHVDQHUURUSDJHGLIIHUHQWIURPRWKHU-63SDJHV"

:HOORQHRIWKHILUVWOLQHVLQDQHUURUSDJHPXVWEHWKHSDJHGLUHFWLYH
LV(UURU3DJH ´WUXH´

,QVLGH\RXUGHIDXOWHUURUSDJH HUURU3DJHMVS DERYHWKH+70/!WDJW\SH

#SDJHLV(UURU3DJH WUXHLPSRUW ´MDYDXWLO ´!

+70/!
%2'<!
(UURU2FFXUUHG
H[FHSWLRQWR6WULQJ !
%2'<!
+70/!

2XUHUURUSDJHDOVRXVHVWKHH[FHSWLRQREMHFWDQGWKHWR6WULQJ PHWKRGWR
GLVSOD\DEULHIGHVFULSWLRQRIWKHHUURU

7RXVHDVSHFLILFHUURUSDJHLQ\RXU-63SDJHVDJDLQDERYHWKH+70/!WDJ
W\SH

#SDJHHUURU3DJH HUURU3DJHMVS!
+70/!
«

7KLVFRGHZLOOJRWRHUURU3DJHMVSLIDQHUURURFFXUV(YHQDIWHUDQHUURUWKH+773
VHVVLRQUHPDLQVDYDLODEOH

<RXVKRXOGQRZXQGHUVWDQGKRZWRFUHDWHDQHUURUSDJHIRU\RXU-63DSSOLFDWLRQV

9LVXDOEXLOGHUFRP
8VLQJ-DYD%HDQVZLWK-63

:HKDYHDOUHDG\PHQWLRQHG-DYD%HDQVLQWKH$FWLRQ7DJVHFWLRQ7KLVVHFWLRQZLOO
SURYLGHDGHWDLOHGORRNLQWRKRZWRXVH-DYD%HDQVZLWK-63

:KDWLVD-DYD%HDQ"

$-DYD%HDQLVD-DYDFODVVZLWKDIHZFRQVWUDLQWV
x 0XVWKDYHDQRDUJXPHQWFRQVWUXFWRU
x 0XVWIROORZDQDPLQJFRQYHQWLRQIRUJHWVHWPHWKRGV
x 0XVWLPSOHPHQWWKH6HULDOL]DEOHLQWHUIDFH QRWUHTXLUHGIRU-63

/HW¶VFUHDWHDVLPSOH-DYD%HDQWKDWVWRUHV(PSOR\HHGDWD

SDFNDJHFRPYLVXDOEXLOGHUEHDQV

SXEOLFFODVV(PSOR\HH
^
SULYDWH6WULQJBQDPH

SXEOLF6WULQJJHW1DPH
^
UHWXUQBQDPH
`

SXEOLFYRLGVHW1DPH 6WULQJQDPH
^
BQDPH QDPH
`
`

1H[WZHZLOODFFHVVWKHSURSHUWLHVRIWKH-DYD%HDQIURPD-63

KWPO!
KHDG!
WLWOH!
8VLQJ-DYD%HDQVIURP-63
WLWOH!
KHDG!
ERG\!

MVSXVH%HDQLG ´VWDII´FODVV ´FRPYLVXDOEXLOGHUEHDQV(PSOR\HH´!

MVSVHW3URSHUW\QDPH ´VWDII´SURSHUW\ ´QDPH´YDOXH ´-DPHV%URZQ´!

:HOFRPHWRWKHFRPSDQ\MVSJHW3URSHUW\QDPH ´VWDII´SURSHUW\ ´QDPH´!

VWDIIJHW1DPH !SOHDVHYLVLW9LVXDO%XLOGHUFRPWRJHWPRUHRXWRIOLIH

ERG\!
KWPO!

9LVXDOEXLOGHUFRP
7KHEHQHILWRIXVLQJ-DYD%HDQVLVWKDW\RXFDQHDVLO\UHXVHWKHFRGHLQRWKHU
DSSOLFDWLRQV,WDOVRPLQLPLVHVWKHDPRXQWRIFRGHLQWKH-63DOORZLQJGHVLJQHUV
WRXVHWKHLUIDYRULWHZHEGHVLJQHGLWRUZLWKRXWGHVWUR\LQJWKH-DYDFRGH7KLV
IROORZVDFRPSRQHQWFHQWULFDSSURDFKWRGHYHORSLQJDSSOLFDWLRQV

1DPLQJFRQYHQWLRQ
$FRPPRQFRQYHQWLRQLVWKDWSURSHUW\QDPHVDUHPL[HGFDVHEHJLQQLQJZLWK
DORZHUFDVHOHWWHUDQGXSSHUFDVLQJWKHILUVWOHWWHURIHDFKZRUGLQWKH
SURSHUW\QDPH

JHW1DPH
VHW1DPH 6WULQJQDPH

7KHGDWDIURPDQ+70/IRUPFDQEHSDVVHGVWUDLJKWLQWRD-DYD%HDQ,QRUGHUWR
GRWKLVXVHMVSVHW3URSHUW\!WRGHILQHSURSHUWLHVLQWKH-DYD%HDQZLWKQDPHV
WKDWPDWFKWKHQDPHVRIWKH+70/IRUPHOHPHQWV<RXZRXOGDOVRGHILQH
FRUUHVSRQGLQJVHWPHWKRGVIRUHDFKSURSHUW\

,QRXUH[DPSOHLIWKHIRUPHOHPHQWZHUHFDOOHGQDPH\RXZRXOGGHILQHD
SURSHUW\FDOOHGXVHUDQGPHWKRGVJHW1DPHDQGVHW1DPHLQWKH-DYD%HDQ7KLV
DOORZV\RXWRJHWGDWDIURPWKHIRUPLQWRWKH-DYD%HDQ

<RXVKRXOGQRZXQGHUVWDQGKRZWRXVH-DYD%HDQVZLWK-63

9LVXDOEXLOGHUFRP
)HHGEDFN
,I\RXKDYHDQ\FRPPHQWVRUVXJJHVWLRQVUHJDUGLQJWKLVGRFXPHQW
SOHDVHXVHWKH-63IRUXPDWYLVXDOEXLOGHUFRPRUVHQGXVDQHPDLO
DWVXSSRUW#YLVXDOEXLOGHUFRP

7KDQN\RX

9LVXDOEXLOGHUWHDP

KWWSZZZYLVXDOEXLOGHUFRP

9LVXDOEXLOGHUFRP

WT Unit1
No ratings yet
WT Unit1
79 pages
Web Technology Notes
No ratings yet
Web Technology Notes
128 pages
Barkatullah University Online Migration Form
67% (6)
Barkatullah University Online Migration Form
34 pages
Introduction and Web Development Strategies
No ratings yet
Introduction and Web Development Strategies
12 pages
Basic Web Designing PPT (PDF Ver)
No ratings yet
Basic Web Designing PPT (PDF Ver)
199 pages
Web Tech Unit I
No ratings yet
Web Tech Unit I
220 pages
Fundamentals of IP
No ratings yet
Fundamentals of IP
90 pages
WT Unit 1
No ratings yet
WT Unit 1
24 pages
Web Technology-1
No ratings yet
Web Technology-1
145 pages
Core Web Technology
No ratings yet
Core Web Technology
42 pages
Web Technology
No ratings yet
Web Technology
225 pages
Unit 1
No ratings yet
Unit 1
277 pages
2-Web Project and Protocol (Unit-1)
No ratings yet
2-Web Project and Protocol (Unit-1)
18 pages
Lec 1&2
No ratings yet
Lec 1&2
28 pages
Iwt Unit-1
No ratings yet
Iwt Unit-1
31 pages
Web Technology Complete Notes
No ratings yet
Web Technology Complete Notes
228 pages
AFSIM
No ratings yet
AFSIM
60 pages
2-Web Project and Protocol (Unit-1)
No ratings yet
2-Web Project and Protocol (Unit-1)
18 pages
Bhajan
No ratings yet
Bhajan
74 pages
03 01 24 - 19 02 59 - DebugLog
No ratings yet
03 01 24 - 19 02 59 - DebugLog
81 pages
Web Technology Unit - 1 Notes
No ratings yet
Web Technology Unit - 1 Notes
20 pages
Computer Science Distilled
No ratings yet
Computer Science Distilled
110 pages
Web Design Notes
No ratings yet
Web Design Notes
71 pages
Boucherit Oussama F1
No ratings yet
Boucherit Oussama F1
55 pages
WT Notes Unit I
No ratings yet
WT Notes Unit I
52 pages
Web Technology
No ratings yet
Web Technology
64 pages
Unit 1
No ratings yet
Unit 1
201 pages
Web Engineering One Shot
No ratings yet
Web Engineering One Shot
22 pages
R12 Employee Suppliers
No ratings yet
R12 Employee Suppliers
24 pages
WT Unit1
No ratings yet
WT Unit1
28 pages
WIT-Course Material-UNIT-1
No ratings yet
WIT-Course Material-UNIT-1
88 pages
2-Web Project and Protocol (Unit-1)
No ratings yet
2-Web Project and Protocol (Unit-1)
17 pages
History of Internet and Web Protocols Governing Web Writing Web Projects Web Development Strategies
No ratings yet
History of Internet and Web Protocols Governing Web Writing Web Projects Web Development Strategies
14 pages
Unit 1
No ratings yet
Unit 1
11 pages
Smart Spaces - Mar11Eve
No ratings yet
Smart Spaces - Mar11Eve
39 pages
Thiet Bi PassiveComponents
No ratings yet
Thiet Bi PassiveComponents
56 pages
COM 225 Web-Tech
No ratings yet
COM 225 Web-Tech
48 pages
Artificial Intelligence - AL3391 2021 Regulation - Question Paper 2023 Nov Dec
No ratings yet
Artificial Intelligence - AL3391 2021 Regulation - Question Paper 2023 Nov Dec
4 pages
Lesson 10 - Web Development
No ratings yet
Lesson 10 - Web Development
45 pages
Systems Analysis and Design: Chapter 12. Moving Into Implementation
No ratings yet
Systems Analysis and Design: Chapter 12. Moving Into Implementation
31 pages
Unit-1 Webtech
No ratings yet
Unit-1 Webtech
8 pages
Aleph 20 Syslib Guide - Search
No ratings yet
Aleph 20 Syslib Guide - Search
21 pages
Unit - 1 - Part1 Basic Intro
No ratings yet
Unit - 1 - Part1 Basic Intro
47 pages
Unit 1 (KCS602)
No ratings yet
Unit 1 (KCS602)
39 pages
Introduction To Internet It's Protocols
No ratings yet
Introduction To Internet It's Protocols
26 pages
Fundamental Data Structures
No ratings yet
Fundamental Data Structures
160 pages
DBMS Unit-2
No ratings yet
DBMS Unit-2
62 pages
4020 Week 1
No ratings yet
4020 Week 1
56 pages
Unit 1web Design
No ratings yet
Unit 1web Design
15 pages
1.1lect 01 Introduction
No ratings yet
1.1lect 01 Introduction
14 pages
15-Web Development Shiva Riderrr
No ratings yet
15-Web Development Shiva Riderrr
20 pages
Unit 1
No ratings yet
Unit 1
27 pages
Modulador Digital IP To RF User's Manual - V1.0
No ratings yet
Modulador Digital IP To RF User's Manual - V1.0
12 pages
Storage Class
No ratings yet
Storage Class
2 pages
Cyber-Enabled Crimes vs. Cyber-Dependent Crimes
No ratings yet
Cyber-Enabled Crimes vs. Cyber-Dependent Crimes
8 pages
Fseekftellrewind
No ratings yet
Fseekftellrewind
1 page
Comp 10 Q1 Reviewer
No ratings yet
Comp 10 Q1 Reviewer
9 pages
Internet Programming
No ratings yet
Internet Programming
49 pages
Twinkle
No ratings yet
Twinkle
2 pages
Web Design and Development Lecture 1
No ratings yet
Web Design and Development Lecture 1
20 pages
CH 1 Web - Programming
No ratings yet
CH 1 Web - Programming
34 pages
Presentation Impress Shortcut Keys
No ratings yet
Presentation Impress Shortcut Keys
3 pages
Iot (Internet of Things) : Connect The Things, Shrink The World
No ratings yet
Iot (Internet of Things) : Connect The Things, Shrink The World
26 pages
Chapter 1 The World Wide Web
No ratings yet
Chapter 1 The World Wide Web
23 pages
VectoScalar Campus Drive 2022 Notice
No ratings yet
VectoScalar Campus Drive 2022 Notice
4 pages
Embedded Ethernet and Internet Complete
From Everand
Embedded Ethernet and Internet Complete
Jan Axelson
4/5 (1)
RRB JE COMPUTER SCIENCE INFORMATION TECHNOLOGY Chapter Wise Solved - Cutter
No ratings yet
RRB JE COMPUTER SCIENCE INFORMATION TECHNOLOGY Chapter Wise Solved - Cutter
1 page
OU2 Difference Between ML DL AI
No ratings yet
OU2 Difference Between ML DL AI
3 pages
WD Unit1
No ratings yet
WD Unit1
44 pages
WT Unit-1 Theory
No ratings yet
WT Unit-1 Theory
5 pages
Unit - I Introduction and Web Development Strategies
No ratings yet
Unit - I Introduction and Web Development Strategies
12 pages
Introduction and Web Development Strategies - PDF
No ratings yet
Introduction and Web Development Strategies - PDF
10 pages
Network Powershell Commands
No ratings yet
Network Powershell Commands
2 pages
Cit853 Internet Concept
No ratings yet
Cit853 Internet Concept
25 pages
Sneha Report
No ratings yet
Sneha Report
28 pages
Computer Knowledge Guide For All Competitive Exams
From Everand
Computer Knowledge Guide For All Competitive Exams
Mohmmad Khaja Shareef
3/5 (4)
WebDev Module-1
No ratings yet
WebDev Module-1
4 pages
Logic Family Moris Mano
No ratings yet
Logic Family Moris Mano
8 pages
Unit 1 Intro
No ratings yet
Unit 1 Intro
12 pages
Web System Reviewer
No ratings yet
Web System Reviewer
5 pages
Introduction To Internet and Web
No ratings yet
Introduction To Internet and Web
6 pages
Rikansha Ria Kumar Year 13
No ratings yet
Rikansha Ria Kumar Year 13
20 pages
Unit 1
No ratings yet
Unit 1
10 pages
Networking Programming with C++: Build Efficient Communication Systems
From Everand
Networking Programming with C++: Build Efficient Communication Systems
Robert Johnson
No ratings yet
Basic Computer Concepts
100% (12)
Basic Computer Concepts
9 pages
What's New in SAP Extended Warehouse Management 9.5: Document Version: 1.0 - 2017-12-07
No ratings yet
What's New in SAP Extended Warehouse Management 9.5: Document Version: 1.0 - 2017-12-07
22 pages
Introduction To Web Technology
No ratings yet
Introduction To Web Technology
14 pages
MT8121XE3 Datasheet ENG
No ratings yet
MT8121XE3 Datasheet ENG
2 pages
Java Theory (9th Class)
No ratings yet
Java Theory (9th Class)
13 pages
Hookup Format-1 PDF
No ratings yet
Hookup Format-1 PDF
1 page
Adobe Photoshop 7 Keyboard Shortcuts
81% (27)
Adobe Photoshop 7 Keyboard Shortcuts
2 pages
B.Sc. (Data Science)
No ratings yet
B.Sc. (Data Science)
9 pages
2022-2023-1st-Quarter-Exam-Computer Programming Grade 12-1920
No ratings yet
2022-2023-1st-Quarter-Exam-Computer Programming Grade 12-1920
6 pages
Ti 28335 DSK
No ratings yet
Ti 28335 DSK
1 page