0% found this document useful (0 votes)

40 views78 pages

Unit-I WP Notes

The document discusses HTML, including what it is, its history and versions. It provides examples of basic HTML tags and their purposes. It also includes lists of common HTML tags and their descriptions.

Uploaded by

Sowmya Lakshmi

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)

40 views78 pages

Unit-I WP Notes

Uploaded by

Sowmya Lakshmi

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/ 78

UNIT I

What is HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.
Hyper Text: HyperText 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.
Web Page: A web page is a document which is commonly written in HTML and translated by a
web browser. A web page can be identified by entering an URL. A Web page can be of the static
or dynamic type. With the help of HTML only, we can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with the
help of styling, and which looks in a nice format on a web browser. An HTML document is
made of many HTML tags and each HTML tag contains different content
Let's see a simple example of HTML.
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>

OUT PUT:
Write Your First Heading
Write Your First Paragraph.
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the browser about the version of
HTML.
<html > :This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the top
of the browser window. It must be placed inside the head tag and should close immediately.
(Optional)

1
<body> : Text between body tag describes the body content of the page that is visible to the end
user. This tag contains the main content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.

Brief History of HTML

In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a
system for CERN researchers. In 1989, he wrote a memo proposing an internet based hypertext
system.
Tim Berners-Lee is known as the father of HTML. The first available description of HTML was
a document called "HTML Tags" proposed by Tim in late 1991. The latest version of HTML is
HTML5, which we will learn later in this tutorial.

HTML Versions
HTML Versions
HTML Version Year

HTML 1.0 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

HTML 5.0 2014

Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along with the
text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances
the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows, Linux,
and Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.
NOTE: It is recommended to write all tags in lower-case for consistency, readability, etc.

2
HTML Tag List With Description
NEW - New tag introduce in HTML5
REMOVE - Not Support in HTML5
NEW/REMOVE - New Tag introduce in HTML5, But now yet support in HTML5
Tag Description In HTML5?

Describe a comment text in the source code

<!doctype> Defines a document type

<a> Specific a anchor (Hyperlink)

Use for link in internal/external web documents.

<abbr> Describes an abbreviation (acronyms)

<acronym> Describes an acronyms REMOVE

<address> Describes an address information

<applet> Embedding an applet in HTML document REMOVE

<area> Defines an area in an image map

<article> Defines an article NEW

<aside> Describes contain set(or write) on aside place in page NEW

contain

<audio> Specific audio content NEW

<b> Specific text weight bold

<base> Define a base URL for all the links with in a web page

<basefont> Describes a default font color, size, face in a document REMOVE

<bb> Define browser command, that command invoke as per NEW/ REMOVE
client action

<bdo> Specific direction of text display

<big> Defines a big text REMOVE

<blockquote> Specifies a long quotation

<body> Defines a main section(body) part in HTML document

3
<br /> Specific a single line break

<button> Specifies a press/push button

<canvas> Specifies the display graphics on HTML web documment NEW

<caption> Define a table caption

<center> Specifies a text is display in center align REMOVE

<cite> Specifies a text citation

<code> Specifies computer code text

<col> Specifies a each column within a <colgroup> element in

table

<colgroup> Defines a group of one or more columns inside table

<command> Define a command button, invoke as per user action NEW

<datagrid> Define a represent data in datagrid either list wise or tree NEW/ REMOVE
wise

<datalist> Define a list of pre-defined options surrounding <input> tag NEW

<dd> Defines a definition description in a definition list

<del> Specific text deleted in web document

<details> Define a additional details hide or show as per user action NEW

<dfn> Define a definition team

<dialog> Define a chat conversation between one or more person NEW/ REMOVE

<dir> Define a directory list REMOVE

<div> Define a division part

<dl> Define a definition list

<dt> Define a definition team

<em> Define a text is emphasize format

<embed> Define a embedding external application using a relative NEW

4
plug-in

<eventsource> Defines a source of event generates to remote server NEW/ REMOVE

<fieldset> Defines a grouping of related form elements

<figcaption> Represents a caption text corresponding with a figure NEW

element

<figure> Represents self-contained content corresponding with a NEW

<figcaption> element

<font> Defines a font size, font face and font color for its text REMOVE

<footer> Defines a footer section containing details about the author, NEW
copyright, contact us, sitemap, or links to related
documents.

<form> Defines a form section that having interactive input controls

to submit form information to a server.

<frame> Defines frame window. REMOVE

<frameset> Used to holds one or more <frame> elements. REMOVE

<h1> to <h6> Defines a Headings level from 1 to 6 different sizes.

<head> Defines header section of HTML document.

<header> Defines as a container that hold introductory content or NEW

navigation links.

<hgroup> Defines the heading of a section that hold the h1 to h6 tags. NEW/ REMOVE

<hr /> Represent a thematic break between paragraph-level tags. It

is typically draw horizontal line.

<html> Define a document is a HTML markup language

<i> Defines a italic format text

<iframe> Defines a inline frame that embedded external content into

current web document.

<img> Used to insert image into a web document.

5
<input> Define a get information in selected input

<ins> Used to indicate text that is inserted into a page and

indicates changes to a document.

<isindex> Used to create a single line search prompt for querying the REMOVE
contents of the document.

<kbd> Used to identify text that are represents keyboard input.

<keygen> Used to generate signed certificate, which is used to NEW/ REMOVE

authenticate to services.

<label> Used to caption a text label with a form <input> element.

<legend> Used to add a caption (title) to a group of related form

elements that are grouped together into the <fieldset> tag.

<li> Define a list item either ordered list or unordered list.

<link> Used to load an external stylesheets into HTML document.

<map> Defines an clickable image map.

<mark> Used to highlighted (marked) specific text. NEW

<menu> Used to display a unordered list of items/menu of

commands.

<meta> Used to provide structured metadata about a web page.

<meter> Used to measure data within a given range. NEW

<nav> Used to defines group of navigation links. NEW

<noframes> Used to provide a fallback content to the browser that does REMOVE
not support the <frame> element.

<noscript> Used to provide an fall-back content to the browser that

does not support the JavaScript.

<object> Used to embedded objects such as images, audio, videos,

Java applets, and Flash animations.

<ol> Defines an ordered list of items.

6
<optgroup> Used to create a grouping of options, the related options are
grouped under specific headings.

<option> Represents option items within

a <select>, <optgroup> or <datalist> element.

<output> Used for representing the result of a calculation. NEW

<p> Used to represents a paragraph text.

<param> Provides parameters for embedded object element.

<pre> Used to represents preformatted text.

<progress> Represents the progress of a task. NEW

<q> Represents the short quotation.

<rp> Used to provide parentheses around fall-back content to the NEW

browser that does not support the ruby annotations.

<rt> Specifies the ruby text of ruby annotation. NEW

<ruby> Used to represents a ruby annotation. NEW

<s> Text display in strikethrough style.

<samp> Represents text that should be interpreted as sample output

from a computer program.

<script> Defines client-side JavaScript.

<section> Used to divide a document into number of different generic NEW

section.

<select> Used to create a drop-down list.

<small> Used to makes the text one size smaller.

<source> Used to specifies multiple media resources. NEW

<span> Used to grouping and applying styles to inline elements.

<strike> Represents strikethrough text. REMOVE

<strong> Represents strong emphasis greater important text.

7
<style> Used to add CSS style to an HTML document.

<sub> Represents inline subscript text.

<sup> Represents inline superscript text.

<table> Used to defines a table in an HTML document.

<tbody> Used for grouping table rows.

<td> Used for creates standard data cell in HTML table.

<textarea> Create multi-line text input.

<tfoot> Used to adding a footer to a table that containing summary

of the table data.

<th> Used for creates header of a group of cell in HTML table.

<thead> Used to adding a header to a table that containing header

information of the table.

<time> Represents the date and/or time in an HTML document. NEW

<title> Represents title to an HTML document.

<tr> Defines a row of cells in a table.

<track> Represents text tracks for both NEW

the <audio> and <video> tags.

<tt> Represents teletype text. REMOVE

<u> Represents underlined text.

<ul> Defines an unordered list of items.

<var> Represents a variable in a computer program or

mathematical equation.

<video> Used to embed video content. NEW

<wbr> Defines a word break opportunity in a long string of text. NEW

Example programs

8
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Scroll Marquee
It is a by default property. It is used to scroll the text from right to left, and restarts at the right
side of the marquee when it is reached to the end of left side. After the completion of loop text
disappears.
<!DOCTYPE html>
<html>
<body>
<marquee width="100%" behavior="slide" bgcolor="pink">
This is an example of a slide marquee...
</marquee>
</body>
</html>
OUTPUT:
This is an example of a slide marquee...

HTML Styles
❮ PreviousNext ❯

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

HTML Links
HTML links are defined with the <a> tag:
Example

<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>

9
<a href="https://www.w3schools.com">This is a link</a>

</body>
</html>
Out put:
HTML Links
HTML links are defined with the a tag:
This is a link
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.

HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Example
<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

</body>
</html>

Out put:
HTML Images
HTML images are defined with the img tag:

HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

10
Example
Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Define an HTML Table
A table in HTML consists of table cells inside rows and columns
Example
A simple HTML table:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>

11
<td>Mexico</td>
</tr>
</table>

<p>To undestand the example better, we have added borders to the table.</p>

</body>
</html>

Out put:
A basic HTML table
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
To undestand the example better, we have added borders to the table.
HTML Lists
HTML lists allow web developers to group a set of related items in lists.

Example
An unordered HTML list:
• Item
• Item
• Item
• Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>

12
</ul>

</body>
</html>

Out put:
An unordered HTML list
• Coffee
• Tea
• Milk
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

OUT PUT:

An ordered HTML list

1. Coffee
2. Tea
3. Milk

Radio button: It is generally used in HTML forms. HTML forms are required when you need
to collect some data from the site visitors. A radio button is used when you want to select only
one option out of several available options.
Example:
<html>
<head>
<title>

13
Radio Button
<title>
</head>
<body>
<form>
Do you agree this statement?
<br>
<input type="radio"
name="agree"
value="yes">Yes
<br>
<input type="radio"
name="agree"
value="no">No
<br>
<input type="Submit">
</form>
</body>
</html>
Output:

Checkbox: Checkboxes are also mostly used in HTML forms. A checkbox allows you to
choose one or many options to be selected from a list of options.
Example:
<html>

<head>
<title>
HTML Checkbox
<title>
</head>

<body>
<form>
Choose languages you know:
<br>
<input type="checkbox"
name="C"
value="yes">C

14
<br>
<input type="checkbox"
name="C++"
value="yes">C++
<br>
<input type="checkbox"
name="Java"
value="yes">Java
<br>
<input type="checkbox"
name="Python"
value="yes">Python
<br>
<input type="Submit">
</form>
</body>

</html>
Output:

Difference between radio button and checkbox

Radio button Checkbox
It is used when only one option to be selected Checkbox allows one or many options to
out of several available options. be selected.

It is created by using HTML <input> tag but It is also created using HTML <input> tag
type attribute is set to radio. but type attribute is set to checkbox.

It is a single control unit. It is a multiple control unit.

Radio button is presented as a small circle on Checkbox is presented as a small square

the screen. box on the screen.

Radio button have only 2 states namely- True Checkbox have 3 states namely- Checked,
& False. unchecked & indeterminate.

15
It is used when you want to limit the users
choice to just one option from the range It is used when you want to allow user to
provided. select multiple choices.

Html Login Form

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <title> Login Page </title>
6. <style>
7. Body {
8. font-family: Calibri, Helvetica, sans-serif;
9. background-color: pink;
10. }
11. button {
12. background-color: #4CAF50;
13. width: 100%;
14. color: orange;
15. padding: 15px;
16. margin: 10px 0px;
17. border: none;
18. cursor: pointer;
19. }
20. form {
21. border: 3px solid #f1f1f1;
22. }
23. input[type=text], input[type=password] {
24. width: 100%;
25. margin: 8px 0;
26. padding: 12px 20px;
27. display: inline-block;
28. border: 2px solid green;

16
29. box-sizing: border-box;
30. }
31. button:hover {
32. opacity: 0.7;
33. }
34. .cancelbtn {
35. width: auto;
36. padding: 10px 18px;
37. margin: 10px 5px;
38. }
39.
40.
41. .container {
42. padding: 25px;
43. background-color: lightblue;
44. }
45. </style>
46. </head>
47. <body>
48. <center> <h1> Student Login Form </h1> </center>
49. <form>
50. <div class="container">
51. <label>Username : </label>
52. <input type="text" placeholder="Enter Username" name="username" required>
53. <label>Password : </label>
54. <input type="password" placeholder="Enter Password" name="password" required>
55. <button type="submit">Login</button>
56. <input type="checkbox" checked="checked"> Remember me
57. <button type="button" class="cancelbtn"> Cancel</button>
58. Forgot <a href="#"> password? </a>
59. </div>
60. </form>
61. </body>
62. </html>
Student Login Form
Username : Password :
Login Remember me Cancel Forgot password?

17
scripting
A scripting language is a programming language that employs a high-level construct to interpret
and execute one command at a time. In general, scripting languages are easier to learn and faster
to code in than more structured and compiled languages such as C and C++.
Difference between Server Side Scripting and Client Side Scripting
1. Client-side scripting :
Web browsers execute client-side scripting. It is used when browsers have all code. Source
code is used to transfer from webserver to user’s computer over the internet and run directly on
browsers. It is also used for validations and functionality for user events.
It allows for more interactivity. It usually performs several actions without going to the user. It
cannot be basically used to connect to databases on a web server. These scripts cannot access
the file system that resides in the web browser. Pages are altered on basis of the user’s choice.
It can also be used to create “cookies” that store data on the user’s computer.
2. Server-side scripting :
Web servers are used to execute server-side scripting. They are basically used to create
dynamic pages. It can also access the file system residing at the webserver. A server-side
environment that runs on a scripting language is a web server.
Scripts can be written in any of a number of server-side scripting languages available. It is
used to retrieve and generate content for dynamic pages. It is used to require to download
plugins. In this load times are generally faster than client-side scripting. When you need to
store and retrieve information a database will be used to contain data. It can use huge resources
of the server. It reduces client-side computation overhead. The server sends pages to the
request of the user/client.
Difference between client-side scripting and server-side scripting :
Client-side scripting Server-side scripting

Source code is not visible to the user because its

output
of server-sideside is an HTML page.
Source code is visible to the user.

Its main function is to provide the Its primary function is to manipulate and provide
requested output to the end user. access to the respective database as per the request.

In this any server-side technology can be used and it

does not
It usually depends on the browser and its depend on the client.
version.

It runs on the user’s computer. It runs on the webserver.

There are many advantages linked with The primary advantage is its ability to highly
this like faster. customize, response
response times, a more interactive requirements, access rights based on user.
application.

18
Client-side scripting Server-side scripting

It does not provide security for data. It provides more security for data.

It is a technique used in web It is a technique that uses scripts on the webserver to

development in which scripts run on the produce a response that is customized for each
client’s browser. client’s request.

HTML, CSS, and javascript are used. PHP, Python, Java, Ruby are used.

No need of interaction with the server. It is all about interacting with the servers.

It reduces load on processing unit of the

server. It surge the processing load on the server.

JavaScript Objects
A javaScript object is an entity having state and behavior (properties and method). For example:
car, pen, bike, chair, glass, keyboard, monitor etc.
JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based not class based. Here, we don't create class to get the object. But, we
direct create objects.
1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)

1) JavaScript Object by object literal

The syntax of creating object using object literal is given below:

1. object={property1:value1,property2:value2.....propertyN:valueN}
As you can see, property and value is separated by : (colon).
Let’s see the simple example of creating object in JavaScript.
<html>
<body>
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);

19
</script>
</body>
</html>
Output:
102 Shyam Kumar 40000
2) By creating instance of Object
The syntax of creating object directly is given below:
var objectname=new Object();
Here, new keyword is used to create object.
Let’s see the example of creating object directly.
<html>
<body>
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>

Output:
101 Ravi Malik 50000

Introduction to JavaScript Literals

JavaScript Literals are constant values that can be assigned to the variables that are called literals

or constants. JavaScript Literals are syntactic representations for different types of data like

numeric, string, Boolean, array, etc data. Literals in JavaScript provide a means of representing

particular or some specific values in our program. Consider an example, var name = “john”, a

string variable named name is declared and assigned a string value “john”. The

literal “john” represents, the value john for the variable name. There are different types of

literals that are supported by JavaScript.

What are the Types of JavaScript Literals?

Javascript literals hold different types of values. Examples of JavaScript Literals are given

below:

20
1. Integer Literals
Integer literals are numbers, must have minimum one digit (0-9). No blank or comma is allowed

within an integer. It can store positive numbers or negative numbers. In integers, literals in

JavaScript can be supported in three different bases. The base 10 that is Decimal (Decimal

numbers contain digits (0,9) ) examples for Decimal numbers are 234, -56, 10060. Second is

base 8 that is Octal (Octal numbers contains digits (0,7) and leading 0 indicates the number is

octal), 0X 073, -089, 02003. Third is base 16 that is Hexadecimal numbers (Hexadecimal

numbers contains (0,9) digits and (A,F) or (a, f) letters and leading 0x or 0X indicates the

number is hexadecimal), examples for hexadecimal numbers are 0X8b, – 0X89, 0X2003.

Let us understand with example code.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for numeric literals </title>
</head>
<body>
<h1>JavaScript Numbers </h1>
<p> Number can be written of any base.</p>
Decimal number : <b id="no1"></b><br>
Octal number : <b id="no2"></b><br>
Hexadecimal number : <b id="no3"></b><br>
<script>
document.getElementById("no1").innerHTML = 100.25;
</script>
<script>
document.getElementById("no2").innerHTML = 073;
</script>
<script>
document.getElementById("no3").innerHTML = 0X8b;
</script>
</body>
</html>
Output:

JavaScript Numbers

Number can be written of any base

21
Decimal number : 100.25
Octal number :59
Hexadecimal number :139
2. Floating Number Literals
Floating numbers are decimal numbers or fraction numbers or even can have an exponent part as

well. Examples for hexadecimal numbers are 78.90, -234.90, 78.6e4 etc.

Let us understand with example code.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for float literals </title>
</head>
<body>
<h1>JavaScript Float </h1>
<p> Float Examples are : </p>
1. <b id="no1"></b><br>
2. <b id="no2"></b><br>
3. <b id="no3"></b><br>
<script>
document.getElementById("no1").innerHTML = 100.25;
</script>
<script>
document.getElementById("no2").innerHTML = -78.34;
</script>
<script>
document.getElementById("no3").innerHTML = 56e4;
</script>
</body>
</html>

Output:

JavaScript Float

Float Examples are :

22
1. 100.25

2. -78.34

3. 56000

3. String Literals
A string literals are a sequence of zero or more characters. A string literals are either enclosed in

the single quotation or double quotation as ( ‘ ) and ( “ ) respectively and to concatenate two or

more string we can use + operator. Examples for string are “hello”, “hello world”, “123”, “hello”

+ “world” etc.

List of special characters that can be used in JavaScript string are.

• \b: Backspace.

• \n: New Line

• \t: Tab

• \f: Form Feed

• \r: Carriage Return

• \\: Backslash Character (\)

• \’ : Single Quote

• \”: Double Quote

Let us understand with an example code –

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for float literals </title>
</head>

23
<body>
<h1>JavaScript String </h1>
<p> String Examples are : </p>
1. <b id="no1"></b><br>
2. <b id="no2"></b><br>
3. <b id="no3"></b><br>
4. <b id="no4"></b><br>
<script>
var str = "This is first string";
document.getElementById("no1").innerHTML = str;
</script>
<script>
var strobj = new String("This is string store as object");
document.getElementById("no2").innerHTML = strobj;
</script>
<script>
var str = "This is first string";
document.getElementById("no3").innerHTML = str.length;
</script>
<script>
var str = "This is first string";
document.getElementById("no4").innerHTML = str+" This is second string";
</script>
</body>
</html>

Output:

JavaScript String
String Examples are :
1. "This is first string
2. This is string store as object
3. 20
4. This is first string This is second string

4. Array Literals
Array literals are a list of expressions or other constant values, each of which expression known
as an array element. An array literal contains a list of element s within square brackets ‘ [ ] ‘ . If
no value is a pass when it creates an empty array with zero length. If elements are passed then its

24
length is set to the number of elements passed. Examples for string are var color = [ ], var fruits
= [“Apple”, “Orange”, “Mango”, “Banana”] (an array of four elements).
Let us understand with example code.
Example:

<!DOCTYPE html>

<html>

<head>

<meta charset= "utf-8" >

<title> This is an example for float literals </title>

</head>

<body>

<h1>JavaScript Array </h1>

<p> Array Examples are : </p>

1. <b id="no1"></b><br>

2. <b id="no2"></b><br>

3. <b id="no3"></b><br>

4. <b id="no4"></b><br>

var fruits = ["Apple", "Orange", "Mango", "Banana"];

document.getElementById("no1").innerHTML = fruits;

</script>

document.getElementById("no2").innerHTML = fruits[0];

</script>

25
document.getElementById("no3").innerHTML = fruits[fruits.length - 1];

</script>

document.getElementById("no4").innerHTML = fruits.length;

</script>

</body>
</html>
Output:
JavaScript Array
Array Examples are
1. Apple,Orange,Mango,Banana
2. Apple
3. Banana
4. 4

5. Boolean Literals
Boolean literals in JavaScript have only two literal values that are true and false.

Let us understand with an example code.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for Boolean literals </title>
</head>
<body>
<h1>JavaScript Boolean </h1>
<p> Boolean Examples are : </p>
<script>
document.write('Boolean(12) is ' + Boolean(12));
document.write('<br>');
document.write('Boolean("Hello") is ' + Boolean("Hello"));
document.write('<br>');

26
document.write('Boolean(2 > 3) is ' + Boolean(2 > 3));
document.write('<br>');
document.write('Boolean(3 > 2) is ' + Boolean(3 > 2));
document.write('<br>');
document.write('Boolean(-12) is ' + Boolean(-12));
document.write('<br>');
document.write("Boolean('true') is " + Boolean('true'));
document.write('<br>');
document.write("Boolean('false') is " + Boolean('false'));
document.write('<br>');
document.write('Boolean(0) is ' + Boolean(0));
</script>
</body>
</html>
Output:
JavaScript Boolean
Boolean Examples are :
Boolean(12)true
Boolean("Hello")is true
Boolean(2 > 3)is flase
Boolean(3 > 2) is true
Boolean(-12) is true
Boolean('true') is true
Boolean('false') is true
Boolean(0) is flase

6. Object Literals
Object literals are collection zero or more key-value pairs of a comma-separated list, which are

enclosed by a pair of curly braces ‘ { } ‘.Examples for object literal with declaration are var

userObject = { }, var student = { f-name : “John”, l-name : “D”, “rno” : 23, “marks” : 60}

Let understand with an example code –

Example:

<!DOCTYPE html>
<html>

27
<head>
<meta charset= "utf-8" >
<title> This is an example for Object literals </title>
</head>
<body>
<h1>JavaScript Object </h1>
<p> Object Examples are : </p>
<p id= "no1"> </p>
<script>
// Create an object:
var student = {firstName:"John", lastName:"D", "rno" : 23, "marks" : 60 };
// Displaying some data from the object:
document.getElementById("no1").innerHTML =
student.firstName + " got " + student.marks + " marks.";
</script>
</body>
</html>

Output:

JavaScript Object
Object Examples are :
John got 60 marks

Javascript Operators

JavaScript includes operators same as other languages. An operator performs some operation
on single or multiple operands (data value) and produces a result. For example, in 1 + 2,
the + sign is an operator and 1 is left side operand and 2 is right side operand. The + operator
performs the addition of two numeric values and returns a result.

SySyntax:ntax:
<Left operand> operator <right operand>

<Left operand> operator

javaScript includes following categories of operators.

1. Arithmetic Operators
2. Comparison Operators

28
3. Logical Operators
4. Assignment Operators
5. Conditional Operators
6. Ternary Operator

Arithmetic Operators

Arithmetic operators are used to perform mathematical operations between numeric operands.

Operator Description

+ Adds two numeric operands.

- Subtract right operand from left operand

* Multiply two numeric operands.

/ Divide left operand by right operand.

% Modulus operator. Returns remainder of two operands.

++ Increment operator. Increase operand value by one.

-- Decrement operator. Decrease value by one.

The following example demonstrates how arithmetic operators perform different tasks on
operands.

Example: Arithmetic Operation

<!DOCTYPE html>
<html>
<body>
<h1>Demo: JavaScript Arithmatic Operators</h1>
<p>x = 5, y = 10, z;</p>
<p id="p1">x+y=</p>
<p id="p2">y-x=</p>
<p id="p3">x*y=</p>
<p id="p4">y/x=</p>
<p id="p5">x%2=</p>

29
<script>
var x = 5, y = 10;
var z = x + y
document.getElementById("p1").innerHTML += z; //returns 15

z = y - x;
document.getElementById("p2").innerHTML += z; //returns 5

z = x * y;
document.getElementById("p3").innerHTML += z; //returns 50

z = y / x;
document.getElementById("p4").innerHTML += z; //returns 2

z = x % 2;
document.getElementById("p5").innerHTML += z; //returns 1
</script>
</body>
</html>
Result:

Demo: JavaScript Arithmatic Operators

x = 5, y = 10, z;

x+y=15

y-x=5

x*y=50

y/x=2

x%2=1

The ++ and -- operators are unary operators. It works with either left or right operand only.
When used with the left operand, e.g., x++, it will increase the value of x when the program
control goes to the next statement. In the same way, when it is used with the right operand,
e.g., ++x, it will increase the value of x there only. Therefore, x++ is called post-increment,
and ++x is called pre-increment.
<!DOCTYPE html>
<html>
<body>

30
<h1>Demo: JavaScript ++ and -- Operators</h1>
<p>x = 5;</p>
<p id="p1">x++=</p>
<p id="p2">x=</p>
<p id="p3">++x=</p>
<p id="p4">x--=</p>
<p id="p5">x=</p>
<p id="p6">--x=</p>

<script>
var x = 5;

document.getElementById("p1").innerHTML += x++; //post increment

document.getElementById("p2").innerHTML += x; // value changes here

document.getElementById("p3").innerHTML += ++x; //pre increment & value

changes here

document.getElementById("p4").innerHTML += x--; //post decrement

document.getElementById("p5").innerHTML += x; //value changes here

document.getElementById("p6").innerHTML += --x; //pre decrement and value

changes here

</script>
</body>
</html>
Output:

Demo: JavaScript ++ and -- Operators

x = 5;

x++=5

x=6

++x=7

x--=7

x=6

31
--x=5

Comparison Operators

JavaScript provides comparison operators that compare two operands and return a boolean
value true or false.

Operators Description

== Compares the equality of two operands without considering type.

=== Compares equality of two operands with type.

!= Compares inequality of two operands.

> Returns a boolean value true if the left-side value is greater than the right-side value; otherwise, returns false.

< Returns a boolean value true if the left-side value is less than the right-side value; otherwise, returns false.

>= Returns a boolean value true if the left-side value is greater than or equal to the right-side value; otherwise,
returns false.

<= Returns a boolean value true if the left-side value is less than or equal to the right-side value; otherwise,
returns false.

The following example demonstrates the comparison operators.

Example: JavaScript Comparison Operators

<!DOCTYPE html>
<html>
<body>
<h1>Demo: JavaScript Comparison Operators</h1>
<p>
var a = 5, b = 10, c = "5", x = a;
</p>

<p id="p1">a == c returns </p>

<p id="p2">a === c returns </p>
<p id="p3">a == x returns </p>
<p id="p4">a != b returns </p>
<p id="p5">a > b returns </p>
<p id="p6">a < b returns </p>

32
<p id="p7">a >= b returns </p>
<p id="p8">a <= b returns </p>

document.getElementById("p1").innerHTML += a == c;

document.getElementById("p2").innerHTML += a === c;

document.getElementById("p3").innerHTML += a == x;

document.getElementById("p4").innerHTML += a != b;

document.getElementById("p5").innerHTML += a > b;

document.getElementById("p6").innerHTML += a < b;

document.getElementById("p7").innerHTML += a >= b;

document.getElementById("p8").innerHTML += a <= b;
</script>
</body>
</html>
Output:

Demo: JavaScript Comparison Operators

var a = 5, b = 10, c = "5", x = a;

a == c returns true

a === c returns false

a == x returns true

a != b returns true

a > b returns false

a < b returns true

a >= b returns false

33
a <= b returns true

Logical Operators

In JavaScript, the logical operators are used to combine two or more conditions. JavaScript
provides the following logical operators.

Operator Description

&& && is known as AND operator. It checks whether two operands are non-zero or not (0, false, undefined, null
or "" are considered as zero). It returns 1 if they are non-zero; otherwise, returns 0.

|| || is known as OR operator. It checks whether any one of the two operands is non-zero or not (0, false,
undefined, null or "" is considered as zero). It returns 1 if any one of of them is non-zero; otherwise, returns 0.

! ! is known as NOT operator. It reverses the boolean result of the operand (or condition). !false returns true,
and !true returns false.

Example: Logical Operators

<!DOCTYPE html>
<html>
<body>
<h1>Demo: JavaScript Logical Operators</h1>

document.getElementById("p1").innerHTML = (a != b) && (a < b);

document.getElementById("p2").innerHTML = (a > b) || (a == b);

document.getElementById("p3").innerHTML = (a < b) || (a == b);

document.getElementById("p4").innerHTML = !(a < b);

document.getElementById("p5").innerHTML = !(a > b);

34
</script>
</body>
</html>
Output:

Demo: JavaScript Logical Operators

true

false

true

false

true

Assignment Operators

JavaScript provides the assignment operators to assign values to variables with less key
strokes.

Assignment
operators Description

= Assigns right operand value to the left operand.

+= Sums up left and right operand values and assigns the result to the left operand.

-= Subtract right operand value from the left operand value and assigns the result to the left operand.

*= Multiply left and right operand values and assigns the result to the left operand.

/= Divide left operand value by right operand value and assign the result to the left operand.

%= Get the modulus of left operand divide by right operand and assign resulted modulus to the left
operand.

Example: Assignment operators

<!DOCTYPE html>
<html>
<body>
<h1>Example: JavaScript Assignment Operators</h1>

35
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<p id="p6"></p>

x = y;
document.getElementById("p1").innerHTML = x;
x += 1;
document.getElementById("p2").innerHTML = x;
x -= 1;
document.getElementById("p3").innerHTML = x;
x *= 5;
document.getElementById("p4").innerHTML = x;

x /= 5;
document.getElementById("p5").innerHTML = x;

x %= 2;
document.getElementById("p6").innerHTML = x;

</script>
</body>
</html>
Output:

Example: JavaScript Assignment Operators

36
0

Ternary Operator

JavaScript provides a special operator called ternary operator :? that assigns a value to a
variable based on some condition. This is the short form of the if else condition.

Syntax: Syntax:

<condition> ? <value1> : <value2>;

The ternary operator starts with conditional expression followed by the ? operator. The second
part (after ? and before :) will be executed if the condition turns out to be true. Suppose, the
condition returns false, then the third part (after :) will be executed.

Example: Ternary operator

<!DOCTYPE html>
<html>
<body>
<h1>Demo: JavaScript Ternary Operators</h1>

Demo: JavaScript Ternary Operators

JavaScript Statements
A computer program is a list of "instructions" to be "executed" by a computer.

37
In a programming language, these programming instructions are called statements.
A JavaScript program is a list of programming statements.
In HTML, JavaScript programs are executed by the web browser.
JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
This statement tells the browser to write "Hello Dolly." inside an HTML element with
id="demo":
Example
<!DOCTYPE html>
<html>
<body>