S.S.O.S.P COLLEGE OF S.S.O.S.

ENGINEERING NAGOTHANE
DEPARTMENT OF COMPUTER ENGINEERING
Academic year 2023 – 2024
Industrial Training (22057)
“Web Development using HTML, CSS and JavaScript”
What is Web Development
Web development refers to the creating, building, and maintaining of
websites. It includes aspects such as web design, web publishing, web
programming, and database management. It is the creation of an application
that works over the internet i.e. websites.
Web Development can be classified into two ways:
 Frontend Development
 Backend Development
What is Front End Development?
Everything you see on a website, like buttons, links, animations, and more,
were created by a front end web developer. It is the front end developer's job to
take the vision and design concept from the client and implement it through
code.

What Skills Do You Need to Become a Front End Developer?

The three main languages you need to know well are HTML, CSS, and
JavaScript. From there you can focus on frameworks, libraries, and other useful
tools.
What Is Back-End Development?
 Back-end Development refers to the server-side development. It focuses on
databases, scripting, website architecture.
 It contains behind-the-scene activities that occur when performing any action
on a website.

What Skills Do You Need to Become a Back End Developer?

In general, the popular backend languages are Python, Java, JavaScript, Ruby,
C#, and PHP.
WEB-SITE
 A website is a collection of related web pages, including multimedia content,
typically identified with a common domain name, and published on at least
one web server.
 Websites have many functions and can be used in various fashions; a website
can be a personal website, a commercial website for a company, a government
website or a non-profit organization website.
 Websites are typically dedicated to a particular topic or purpose, ranging from
entertainment and social networking to providing news and education.
 Web pages, which are the building blocks of websites, are documents, typically
composed in plain text interspersed with formatting instruction of Hypertext
Markup Language (HTML, XHTML).
What is Web Page & website
 A webpage is defined as the smaller part of the website that include contents
like text, media, ect.
 A website is a collection of several webpages linked toghether using hyperlinks.
 All the webpages are linked under a single domain to identify the website.
 Websites are the main source of connecting hyperlinks to different section, and
these section may further include other relevant webpages.
 Like a webpage, people can easily navigate any website using a web browser and
entering the domain addres.
 Websites are usually divided into two main categories, such as interactive.
Static websites are design to share information and resources without the
involvement and interactive with visitors.
What is URL
 A URL is a type of uniform resource identifier and is address of a resource on
the World Wide Web and the protocol used to access it.
What is Domain
 A domain name is the indetity of one or more IP addresses; for example, the
domain name google.com points to the IP address “74.125.127.147”. Domain
names are invented as it is easy to remember a name rather than a long string
of number. It would be easy to enter a domain name in the search bar than a
long sequence of number.

How Domain Name Works:

 When the domain name is entered in your web browser, a request is sent to the
global network of servers that form the Domain Name System (DNS), which is
like a phone book of the internet.
What is World Wide Web
 World Wide Web, which is aslo known as a web, is a collection of websites or
web pages stored in web servers and connected to local computers through the
internet

Now, let us
understand how it works

Web server

Web browser Web server

Request the Serves the
Web server Web page

Web Browser
Brief Introduction of HTML
 HTML is an acronym which stands for Hyper Text Markup Language which is
used for creating web pages and web application. Let’s see what is meant by
Hypertext Markup Language, and Web page
 Hyper Text: Hyper Text simply means “Text within text”. A text has a link
within it, is a hypertext. Whenever you click on a link which brings you to a
new webpage, you have clicked on a hypertext. Hypertext is a way to link two or
more web pages (HTML documents) with each other
 Markup Language: A markup language is a computer language that is used to
apply layout and formatting conventions to a text document. Markup language
makes text more interactive and dynamic. It can turn text into images, tables,
links, etc.
Features of HTML
 It is a very easy and simple language. It can be easily understood and modified.
 It is very easy to make an effective presentation with HTML because it has a lot
of formatting tags.
 It is a markup language, so it provides a flexible way to design web pages along
with the text.
 It facilitates programmers to add a link on the web pages (by html anchor tag),
so it enhances the internet of browsing of the user
 It is platform-independent because it can be displayed on any platform like
Windows, Linux, Macintosh, etc.
 HTML is a case-insensitive language, which means we can use tags either in
lower-case or upper-case.
HTML
 HTML tags are like keywords which defines that how web browser will format
and display the content.
Syntax
HTML Text Tags
<tag>content</tag>
<p>, <h1>, <h2>, <h4>, <h5>, <h6>, <strong>,
HTML Tag Examples
<em>, <abbr>, <acronym>, <address>,<bdo>,
<p>Paragraph Tag</p> <blockquote>, <cite>, <q>, <samp>, <var>
<h2>Heading Tag</h2> <code>, <ins>, <del>, <kbd>, <pre>
<b>Bold Tag</b>
<i>Italic Tag</i>
<u>Underline Tag</u>
Unclosed HTML Tags
Some HTML tags are not closed, for example br and hr.
<br>Tag: br stands for break line.
<hr>Tag: hr stands for Horizontal Rule. This tag is used to put a line across the
webpage
Brief Introduction of HTML
<!DOCTYPE html>
<html>
<head>
<title>
Web page title
</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
Introduction to elements of HTML
Block-level element
 These are the element, which structure main part of web page, by diving a page
into coherent block.
 A block-level element always start with new line and takes the full width of web
page, from left to right.
 Following are the block-level element in HTML
<address>,, <dd>, <div>, <dl>, <footer>, <form>, <h1>, <h6>, <header>, <li>,
<main>, <nav>, <ol>, <output>, <p>, <pre>, <section>, <table>, <ul>, <video>.
Inline element
 Inline elements are those element, which differentiate the part of a given text
and provide it a particular function.
 These element does not start with new line and take width as per requirement.
 The inline element are mostly used with other element.
<a>, <b>, <br>, <button>, <code>, <i>, <img>, <input>, <label>, <select>,
<small>, <strong>, <sub>, <sup>, <var>.
Example of block-level element tag
<DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:lightblue">This is first div</div>
<div style="background-color:lightgreen">This is second div</div>
<p style="background-color:pink">This is a block level element</p>
</body>
</html>
o/p :
Example of Inline elemment
<DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.google.com">Click on link</a>
<span style="background-color:lightgreen">This is inline element</span>
<p>This will take width of text only</p>
</body>
</html>
o/p :
Working with list
 HTML list are used to specify list of information.

 All lists may contain one or more list element.

 There are three different types of html lists:

1. Ordered list or Numbered list (ol)

2. Unordered list or Bulleted list (ul)
3. Description list or Defination list (dl)
Working with lists
 HTML Ordered list or Numbered list

In the ordered HTML lists, all the list items are marked with numbers by default.

Is also know numbered list.

He ordered list starts with <ol> tag and the list items start with <li> tag.
1. <ol>
2. <li>Aries</li> Output:
3. <li>Apple</li> 1.Areis
4. <li>Mango</li> 2.Apple
5. <li>Pine apple</li> 3.Mango
4.Pine apple
6. </ol>
Working with lists
 HTML Unordered list or Bulleted List

in HTML Unordered list, all the list items are marked with bullets.

It is also known as bulleted list also.

The Unordered list start with <ul> tag and list items start with the <li>tag
1. <ul>
2. <li>Harry</li> Output :
3. <li>Potter</li> 1.Harry
4. <li>Carry</li> 2.Potter
3.Carry
5. <li>Minnati</li> 4.Minnati
6. </ul>
Working with Table
 HTML Table

 HTML table tag is used to display data in tabular form (row*column). There

can be many column in a row.

 We can create a table to display data in tabular form, using <table> element,

with the help of <tr>, <td>, and <th> elements.

 In Each table, table row is difine by <tr tag, table header is define by <th>, and

table data is defined by <td>tags.

 HTML tables are used to mange the layout of the page e.g header section,

navigation bar, body content, footer section ect. But it is recommended to ues
div tag over table to mange the layout of the page
Working with table
Emxaple of table tags
<DOCTYPE html> <td>Evelyn</td>
<html> <td>32</td>
<head> <td>Ohio</td>
</head> </tr>
<body> </table>
<table border="1" cellpadding="5"> </body>
<tr> </html>
<th>Name</th>
<th>Age</th> Output :
<th>Country</th>
</tr>
<tr>
<td>Michael</td>
<td>27</td>
<td>Alaska</td>
</tr>
<tr>
Working with Frame
 HTML <frame> tag define the particular area within an HTML file where
another HTML web page can be displayed.
 A <frame> tag is used with <frameset>, and it divided a webpage into multiple
sections or frames, and each frame can contain different web pages.
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>
Working with image
 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.
1) src
It is a necessary attribute that describes the source or path of the image. It
instructs the browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed.
The value of the alt attribute describe the image in words. The alt attribute is
considered good for SEO prospective.

 Syntax
<img src="url" alt="alternatetext">
Example of Image Tag
<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="image/shirtC.jpg" alt="Flowers in Chania" width="460" height="345">

</body>
</html>
O/P :
Working with Video
HTML Video tag
 HTML 5 supports <video> tag also. The HTML video tag is used for streaming

video files such as a movie clip, song clip on the web page.
 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.
Example of Video tag
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <video src="Wildlife.wmv" width="480" height="320" controls
muted></video>
5. </body>
6. </html>
 O/P :
Working with Marquee
 The Marquee HTML tag is a non-standard HTML element which is used to
scroll a image or text horizontally or vertically.
 In simple words, you can say that it scroll the image or text up, left or right
automatically.
 Marquee tag was first introduced in early version of Microsoft’s Internet
Explorer. It is compared with Netscape’s blink element.
Working with Marquee
 HTML Scroll Marquee

It is a by default property. It is used to scroll the text from right to left, and
restart at the right side of the marquee when it is reached to the end of left side.
After the completion of loop text disappears.

<marquee width=“100%” behavior=“scroll” bgcolor=“pink”>

This is an example of a scroll marquee…
</marquee>
Example of Marquee
 <!DOCTYPE html>
 <html>
 <body>
 <marquee width=“100%” behavior=“scroll” >
 This is an example of a scroll marquee…
 </marquee>
 </body>
 </html>
O/p :
Working with Form
 An HTML form is used to collect user input. The user input is most often sent

to a server for processing.

 The HTML <form> element is used to create an HTML form for user input

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

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

 Syntax of Form :

<form action=“server url” method=“get|post”>

//input control e.g textfield, textarea , radiobutton, button

</form>
Working with Form
HTML Form Tags
Working with Form
HTML <form> element

The HTML <form> element provide a document section to take input from
user. It provides various interactive controls for submitting information to web
server such as text field, text area, password field, etc.

HTML <input> element

The HTML <input> element is fundamental form element. It is used to create

form fields, to take input from user. We can apply different input filed to gather
different information form user. Following is the example to show the simple
text input.
Working with Form
Label Tag in Form

It is considered better to have label in form. As it makes the code

parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To do so, you need
to have for attribute in label tag that must be same as id attribute of input tag.

1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>
Working with Form
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <form>
5. <label for="firstname">First Name: </label> <br/>
6. <input type="text" id="firstname" name="firstname"/> <br/>
7. <label for="lastname">Last Name: </label> </br>
8. <input type="text" id="lastname" name="lastname"/> <br/>
9. </form>
10. </body>
11. </html>
O/P :
Working with Form
HTML Password Field Control

The password is not visible to the user in password field control.

<form>
<label for="password">Password: </label>
<input type="password" id="password" na
me="password"/> <br/>
</form>

O/P:
Working with Form
HTML Email Field Control

The email field in new in HTML 5. It validates the text for correct email
address. You must use @ and . in this field.

<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/
> <br/>
</form>
Working with Form
Radio Button Control

The radio button is used to select one option from multiple options. It is used
for selection of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be
selected at a time.

Using radio buttons for multiple options, you can only choose a single option at
a time.
Working with Form
 Example of Radio button :

<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" val
ue="male"/>Male
<input type="radio" id="gender" name="gender" val
ue="female"/>Female <br/>
</form>

O/P :
Working with form
Submit button control
HTML <input type="submit"> are used to add a submit button on web page.
When user clicks on submit button, then form get submit to the server.

<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name">
<br>
<label for="pass">Enter Password</
label><br>
<input type="Password" id="pass" name="pass
"><br>
<input type="submit" value="submit">
</form>
Introduction To CSS
 CSS stands for Cascading Style Sheet.

 CSS is used to design HTML tags.

 CSS is a widely used language on the web.

 HTML, CSS and JavaScript are used for web designing. It helps the web

designers to apply style on HTML tags.

 Creating Style Sheet
CSS Syntax

A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to

style. It could be any tag like <h1>, <title> etc.

Declaration Block: The declaration block can contain one

or more declarations separated by a semicolon. For the
above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;
Property: A Property is a type of attribute of HTML
element. It could be color, border etc.

Value: Values are assigned to CSS properties. In the above

example, value "yellow" is assigned to color property
CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the
part of CSS rule set. CSS selectors select HTML elements according to its id,
class, type, attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector
 The element selector selects the HTML element by name.
Example :
p{
text-align: center;
color: blue;
}
2) CSS Id Selector
 The id selector selects the id attribute of an HTML element to select a specific
element. An id is always unique within the page so it is chosen to select a single,
unique element.
 It is written with the hash character (#), followed by the id of the element.
Example :
#para1 {
text-align: center;
color: blue;
}
<body>
<p id="para1">Hello Javatpoint.com</p>
</body>
3) CSS Class Selector
 The class selector selects HTML elements with a specific class attribute. It is used
with a period character . (full stop symbol) followed by the class name.
Example :
.center {
text-align: center;
color: blue;
}
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
</body>
4) CSS Universal Selector
 The universal selector is used as a wildcard character. It selects all the elements on
the pages.
Example : <body>
*{ <h2>This is heading</h2>
<p id="para1">Me too!</p>
color: green;
<p>And me!</p>
font-size: 20px; </body>
}
How to add CSS
 CSS is added to HTML pages to format the document according to information
in the style sheet. There are three ways to insert CSS in HTML documents.

1. Inline CSS

2. Internal CSS

3. External CSS
1) Inline CSS
Inline CSS is used to apply CSS on a single line or element.
For example :

<p style="color:blue">Hello CSS</p>

How to add CSS
2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all
the elements of the page. It is written inside the style tag within head section of
html.
For Example :
<style>
p{color:blue}
</style>

3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write
all the CSS code in a css file. Its extension must be .css for example style.css.
For Example :
 p{color:blue}
CSS Comments
CSS comments are generally written to explain your code. It is very helpful for
the users who reads your code so that they can easily understand the code.

Comments are ignored by browsers.

Comments are single or multiple lines statement and written within /*............*/
.
For Example :
p{
color: blue;
/* This is a single-line comment */
text-align: center;
}
CSS Background
CSS background property is used to define the background effects on element.
There are 5 CSS background properties that affects the HTML elements:

1. background-color

2. background-image

3. background-repeat

4. background-attachment

5. background-position
CSS Background
1) CSS background-color

The background-color property is used to specify the background color of the

element. O/P :
For Example :
1. <style>
2. h2,p{
3. background-color: #b0d4de;
4. }
5. </style>
6. <body>
7. <h2>My first CSS page.</h2>
8. </body>
CSS Background
2) CSS background-image

The background-image property is used to set an image as a background of an

element. By default the image covers the entire element. You can set the
background image for a page like this.
For Example :
1. <style>
2. body {
3. background-image: url("image/nature.jpg");
4. margin: left 50px;
5. }
6. </style>
7. </head>
8. <body>
9. <h1 style="color: white;">Hello Javatpoint.com</h1>
10. </body>
CSS Background
3) CSS background-repeat
By default, the background-image property repeats the background image
horizontally and vertically. Some images are repeated only horizontally or
vertically.
The background looks better if the image repeated horizontally only.
For Example :
<style>
body {
background-image: url("image/nature.jpg");
background-repeat: repeat-x;
background-size: 10%;
}
</style>
CSS Background
4) CSS background-attachment
The background-attachment property is used to specify if the background
image is fixed or scroll with the rest of the page in browser window. If you set
fixed the background image then the image will not move during scrolling in
the browser. Let?s take an example with fixed background image.
For Example :

background: white url('bbb.gif');

background-repeat: no-repeat;
background-attachment: fixed;
CSS Background
5) CSS background-position
The background-position property is used to define the initial position of the
background image. By default, the background image is placed on the top-left
of the webpage.

You can set the following positions:

 center
 top
 bottom
 left
 right
For Example:

background: white url('good-morning.jpg');

background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
CSS Border
CSS Border
The CSS border is a shorthand property used to set the border on an element.

The CSS border properties are use to specify the style, color and size of the
border of an element. The CSS border properties are given below

 border-style

 border-color

 border-width

 border-radius
CSS Border
1) CSS border-style
The Border style property is used to specify the border type which you want to display on
the web page.
There are some border style values which are used with border-style property to define a
border.
For Example :
 <style>
 p.none {border-style: none;}
 p.dotted {border-style: dotted;}
 p.dashed {border-style: dashed;}
 p.solid {border-style: solid;}
 p.double {border-style: double;}
 p.groove {border-style: groove;}
 p.ridge {border-style: ridge;}
 p.inset {border-style: inset;}
 p.outset {border-style: outset;}
 p.hidden {border-style: hidden;}
 </style>
CSS Border
2) CSS border-width

The border-width property is used to set the border's width. It is set in pixels. You can also use the
one of the three pre-defined values, thin, medium or thick to set the width of the border.
1. <style>
2. p.one {
3. border-style: solid;
4. border-width: 5px;
5. }
6. p.two {
7. border-style: solid;
8. border-width: medium;
9. }
10. p.three {
11. border-style: solid;
12. border-width: 1px;
13. }
14. </style>
15. </head>
16. <body>
17. <p class="one">Write your text here.</p>
18. <p class="two">Write your text here.</p>
19. <p class="three">Write your text here.</p>
20. </body>
CSS Border
3) CSS border-color

There are three methods to set the color of the border.

 Name: It specifies the color name. For example: "red".

 RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".

 Hex: It specifies the hex value of the color. For example: "#ff0000".
CSS Border
For Example :
1. p.one {
2. border-style: solid;
3. border-color: red;
4. }
5. p.two {
6. border-style: solid;
7. border-color: #98bf21;
8. }
9. </style>
10. </head>
11. <body>
12. <p class="one">This is a solid red border</p>
13. <p class="two">This is a solid green border</p>
CSS Border
CSS border-radius property

This CSS property sets the rounded borders and provides the rounded corners
around an element, tags, or div. It defines the radius of the corners of an
element.

It is shorthand for border top-left-radius, border-top-right-radius, border-

bottom-right-radius and border-bottom-left-radius. It gives the rounded
shape to the corners of the border of an element. We can specify the border for
all four corners of the box in a single declaration using the border-radius. The
values of this property can be defined in percentage or length units.
 For Example
1. <style>
2. .hg {
3. border-radius: 20px 40px 60px;
4. background: #009900;
5. padding: 30px;
6. text-align: center;
7. width: 300px;
8. height: 120px;
9. }
10. </style>
11. </head>
12.
13. <body>
14. <div class="hg">
15. <h2>Example Of Border Radius</h2>
16. <p>border-radius: 20px 40px 60px;</p>
17. </div>
18. </body>
CSS Hover
The :hover selector is for selecting the elements when we move the mouse on
them. It is not only limited to the links.

We can use it on almost every HTML element. To style the link to unvisited
pages, we can use the :link selector.

To style the link for visited pages, we can use the :visited selector and to style
the active links we can use the :active selector.
CSS Hover
The hover feature includes the following effects:

 Change the color of the background and font.

 Modify the opacity of the image.
 Text embedding.
 Create image rollover effects.
 Swapping of images.
Syntax :

hover{
css declarations;
}
CSS Hover
 Example of hover effect : O/p :
1. <html>
2. <head>
3. <style>
4. body{
5. text-align:left;
6. }
7. h1:hover{
8. background-color: yellow;
9. }
10. </style>
11. </head>
12. <body>
13. <h1>Hello World</h1>
14. </body>
15. </html>
CSS Navigation
 A Navigation bar or navigation system comes under GUI that helps the visitors
in accessing information. It is the UI element on a webpage that includes links
for the other sections of the website.

 A navigation bar is mostly displayed on the top of the page in the form of a
horizontal list of links. It can be placed below the logo or the header, but it
should always be placed before the main content of the webpage.
CSS Navigation
Horizontal Navigation Bar
 The horizontal navigation bar is the horizontal list of links, which is generally
on the top of the page.
 Let's see how to create a horizontal navigation bar by using an example.
Example
 In this example, we are adding the overflow: hidden property that prevents
the li elements from going outside of the list, display: block property displays
the links as the block elements and makes the entire link area clickable.
 We are also adding the float: left property, which uses float for getting the
block elements to slide them next to each other.
 If we want the full-width background color then we have to add
the background-color property to <ul> rather than the <a> element.
Example Of Horizontal Navigation bar text-decoration: none;
}
<!DOCTYPE html> .active{
<html> background-color: gray;
<head> color: white;
<style> }
ul { li a:hover {
list-style-type: none; background-color: orange;
margin: 0; color: white;
padding: 0px; }
overflow: hidden; </style>
background-color: lightgray; </head>
} <body>
li { <ul>
float: left; <li><a class="active"
} href="#home">Home</a></li>
li a { <li><a href="#">Java</a></li>
display: block; <li><a href="#">HTML</a></li>
color: blue; <li><a href="#">CSS</a></li>
font-size:20px; </ul>
text-align: center; </body>
padding: 10px 20px; </html>
CSS Transitions
The CSS transitions are effects that are added to change the element gradually
from one style to another, without using flash or JavaScript.

You should specify two things to create CSS transition.

 The CSS property on which you want to add an effect.

 The time duration of the effect.

Syntax:
transition-duration: time;
1. Example of CSS Transition

2. <!DOCTYPE html>
3. <html>
4. <head>
5. <style>
6. div {
7. width: 100px;
8. height: 100px;
9. background: red;
10. transition: width 2s;
11. }
12. div:hover {
13. width: 300px;
14. }
15. </style>
16. </head>
17. <body>
18. <h1>The transition Property</h1>
19. <p>Hover over the div element below, to see the transition effect:</p>
20. <div></div>
21. </body>
22. </html>
What is JavaScript
 JavaScript is the world's most popular programming language.

 JavaScript (js) is a light-weight object-oriented programming language which is

used by several websites for scripting the webpages.

 It was introduced in the year 1995 for adding programs to the webpages in the

Netscape Navigator browser.

 With JavaScript, users can build modern web applications to interact directly

without reloading the page every time.

Features of JavaScript
 All popular web browsers support JavaScript as they provide built-in execution

environments.
 JavaScript follows the syntax and structure of the C programming language. Thus,

it is a structured programming language.

 JavaScript is an object-oriented programming language that uses prototypes

rather than using classes for inheritance.

 It is a light-weighted and interpreted language.

 It is a case-sensitive language.

 It provides good control to the users over the web browsers.

Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
 Client-side validation,

 Dynamic drop-down menus,

 Displaying date and time,

 Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm

dialog box and prompt dialog box),

 Displaying clocks etc.
JavaScript Example
<script>
document.write("Hello JavaScript by JavaScript");
</script>
Javascript Data Types
JavaScript provides different data types to hold different types of values. There
are two types of data types in JavaScript.

1. Primitive data type

2. Non-primitive (reference) data type

JavaScript is a dynamic type language, means you don't need to specify type
of the variable because it is dynamically used by JavaScript engine.

You need to use var here to specify the data type. It can hold any type of values
such as numbers, strings etc.
For Example :
var a=40;//holding number
var b="Rahul";//holding string
Javascript Data Types
JavaScript primitive data types JavaScript non-primitive data types
JavaScript Operators
 JavaScript operators are symbols that are used to perform operations on
operands.

For example:
var sum=10+20;

There are following types of operators in JavaScript.

1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators
JavaScript Arithmetic Operators
 Arithmetic operators are used to perform arithmetic operations on the
operands. The following operators are known as JavaScript arithmetic
operators.
JavaScript Comparison Operators
 The JavaScript comparison operator compares the two operands. The
comparison operators are as follows:
JavaScript Bitwise Operators
 The bitwise operators perform bitwise operations on operands. The bitwise
operators are as follows
JavaScript Logical Operators
 The following operators are known as JavaScript logical operators.
JavaScript Assignment Operators
 he following operators are known as JavaScript assignment operators.
JavaScript Decision Making
JavaScript If statement

It evaluates the content only if expression is true. The signature of JavaScript if

statement is given below.

if(expression){
//content to be evaluated
}
Exmple :
<script>
var a=20;
if(a>10){
document.write("value of a is greater than 10");
}
</script>
JavaScript Decision Making
JavaScript If...else Statement
It evaluates the content whether condition is true of false. The syntax of
JavaScript if-else statement is given below.
Syntax :

if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}
JavaScript Decision Making
JavaScript If...else if statement
It evaluates the content only if expression is true from several expressions. The
signature of JavaScript if else if statement is given below.
 Syntax :

if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2){
//content to be evaluated if expression2 is true
}
else if(expression3){
//content to be evaluated if expression3 is true
}
else{
//content to be evaluated if no expression is true
}
JavaScript Decision Making
 Example of if….else if Statement

1. <script>
2. var a=20;
3. if(a==10){
4. document.write("a is equal to 10");
5. }
6. else if(a==15){
7. document.write("a is equal to 15");
8. }
9. else if(a==20){
10. document.write("a is equal to 20");
11. }
12. else{
13. document.write("a is not equal to 10, 15 or 20");
14. }
15. </script>
JavaScript Switch
 The JavaScript switch statement is used to execute one code from multiple
expressions. It is just like else if statement that we have learned in previous page. But
it is convenient than if..else..if because it can be used with numbers, characters etc.
Syntax :
switch(expression){
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......

default:
code to be executed if above values are not matched;
}
1. Example Of Switch :
2. <script> O/P :
3. var grade='B';
4. var result;
5. switch(grade){
6. case 'A':
7. result="A Grade";
8. break;
9. case 'B':
10. result="B Grade";
11. break;
12. case 'C':
13. result="C Grade";
14. break;
15. default:
16. result="No Grade";
17. }
18. document.write(result);
19. </script>
JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while, do
while or for-in loops. It makes the code compact. It is mostly used in array.

There are four types of loops in JavaScript.

1. for loop

2. while loop

3. do-while loop

4. for-in loop
JavaScript Loops
1) JavaScript For loop
The JavaScript for loop iterates the elements for the fixed number of times. It
should be used if number of iteration is known. The syntax of for loop is given
below.
Syntax :
for (initialization; condition; increment)
{
code to be executed
}
 Example : O/P :
 <script>
 for (i=1; i<=5; i++)
{
 document.write(i + "<br/>")
}
 </script>
JavaScript Loops
2) JavaScript while loop
The JavaScript while loop iterates the elements for the infinite number of times. It
should be used if number of iteration is not known. The syntax of while loop is given
below.
Syntax :
while (condition)
{
code to be executed
}
Example : O/P :
1. <script>
2. var i=11;
3. while (i<=15)
4. {
5. document.write(i + "<br/>");
6. i++;
7. }
8. </script>
JavaScript Loops
3) JavaScript do while loop
The JavaScript do while loop iterates the elements for the infinite number of
times like while loop. But, code is executed at least once whether condition is true
or false. The syntax of do while loop is given below.
Syntax :
do{
code to be executed
}while (condition);

Example : O/P :
1. <script>
2. var i=21;
3. do{
4. document.write(i + "<br/>");
5. i++;
6. }while (i<=25);
7. </script>
 CONCLUSION
 This industrial training gave use the knowledge about the web
development.
 We came to know about the important of web site and web pages.
 Overall, industrial training has been taking by student during semester
5 was very useful for me.
 I gain a lot of knowledge from this industrial training
 Well explained by the our mentor about Web development languages.
1. HTML
2. CSS
3. Javascript
THANK YOU