Introduction of Web Technology

Web Technology refers to the various tools and techniques that are utilized in the process of
communication between different types of devices over the Internet. A web browser is used to
access web pages. Web browsers can be defined as programs that display text, data, pictures,
animation, and video on the Internet. Hyperlinked resources on the World Wide Web can be
accessed using software interfaces provided by Web browsers.

Web Technology can be classified into the following sections:

• World Wide Web (WWW): The World Wide Web is based on several different
technologies: Web browsers, Hypertext Markup Language (HTML), and
Hypertext Transfer Protocol (HTTP).
• Web Browser: The web browser is an application software to explore www
(World Wide Web). It provides an interface between the server and the client and
requests to the server for web documents and services.
• Web Server: Web server is a program which processes the network requests of
the users and serves them with files that create web pages. This exchange takes
place using Hypertext Transfer Protocol (HTTP).
• Web Pages: A webpage is a digital document that is linked to the World Wide
Web and viewable by anyone connected to the internet has a web browser.
• Web Development: Web development refers to the building, creating, 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: The part of a website that the user interacts directly is
termed as front end. It is also referred to as the ‘client side’ of the application.
 • Backend Development: Backend is the server side of a website. It is the part of
the website that users cannot see and interact. It is the portion of software that
does not come in direct contact with the users. It is used to store and arrange
data.

Frontend Languages: The front-end portion is built by using some languages which are
discussed below:
• HTML: HTML stands for Hypertext Markup Language. It is used to design the
front-end portion of web pages using a markup language. HTML is the
combination of Hypertext and Markup language. Hypertext defines the link
between the web pages. The markup language is used to define the text
documentation within the tag which defines the structure of web pages.
• CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed
language intended to simplify the process of making web pages presentable.
CSS allows you to apply styles to web pages. More importantly, CSS enables
you to do this independent of the HTML that makes up each web page.
• JavaScript: JavaScript is a famous scripting language used to create magic on
the sites to make the site interactive for the user. It is used to enhancing the
functionality of a website to running cool games and web-based software.
• AJAX: Ajax is an acronym for Asynchronous Javascript and XML. It is used to
communicate with the server without refreshing the web page and thus
increasing the user experience and better performance.
There are many other languages through which one can do front-end development depending
upon the framework for
example Flutter user Dart, react uses JavaScript and Django uses Python, and much more.
A "Brief" History of the Web

While working for CERN in 1989 a British scientist of the name Tim
Berners-Lee invented the World Wide Web. The idea was to create a
world-wide network of computers to form a global information
system.
It wouldn't be until late 1990 where Berners-Lee deployed
the world's first web page. A web page is a text document written in
a special formatting language called the Hypertext Mark-up
Language (HTML).

Web servers are simply computers connected to a network that

exposes a portion of its filesystem to any web browser that
connects to the web server's IP address.

The Start of the Dynamic Web

The Common Gateway Interface
There was a demand for webpages to be 'smarter'. Since web
servers are just computers why not execute programs on it? Hence
the Common Gateway Interface (CGI) was created in 1993. The CGI
lets us configure our webservers to execute a program/script on the
server as opposed to returning an html page from the filesystem
when responding to a request.
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>
Test it Now

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)

<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
Since the time HTML was invented there are lots of HTML versions in market, the brief
introduction about the HTML version is given below:

HTML 1.0: The first version of HTML was 1.0, which was the barebones version of
HTML language, and it was released in1991.
HTML 2.0: This was the next version which was released in 1995, and it was standard
language version for website design. HTML 2.0 was able to support extra features such
as form-based file upload, form elements such as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was
capable of creating tables and providing support for extra options for form elements.
It can also support a web page with complex mathematical equations. It became an
official standard for any browser till January 1997. Today it is practically supported by
most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable
version of HTML language. This version is the current official standard, and it provides
added support for stylesheets (CSS) and scripting ability for various multimedia
elements.

HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft
of this version was announced in January 2008. There are two major organizations one
is W3C (World Wide Web Consortium), and another one is WHATWG( Web Hypertext
Application Technology Working Group) which are involved in the development of
HTML 5 version, and still, it is under development.

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
HTML Comments
Comments are some text or code written in your code to give an explanation about
the code, and not visible to the user. Comments which are used for HTML file are
known as HTML comments. Anything written between these tags will be ignored by
the browser, so comments will not be visible on the webpage.

Comments of any code make code easy to understand and increase readability of
code.

Comments are also part of the code, which gives an explanation of the code.

How to add comment In HTML

You can add comments in your HTML file using <! -- ... --> tag. So if you will write
anything between theses comment tag that will be treated as comment and browser
will not read it.

Syntax
1. <! -- Write commented text here -->

Such as:

1. <!-- <p>There is some text</p>

2. <p>There is second text</p> -->
Example:
1. <!DOCTYPE html>
2. <html>
3. <!-- This is Header section -->
4. <head>
5. <!-- Internal CSS -->
6. <style>
7. body{
8. text-align: center;
9. background-color: #f0f8ff;
10. font-size: 30px;
11. color: red;
12. }
13. </style>
14. </head>
 15.
16. <!-- This is body section, write code here which you want to display on web-page --
>
17. <body>
18. <!-- heading tag -->
19. <h2>First WebPage</h2>
20.
21. <!-- Paragraph tag -->
22. <p>Write your Content here!!!</p>
23. </body>
24. </html>
Test it Now

Multiline Comment
In HTML code, we can also comments multiple lines at a time. In multiline comment
we can use any description about code or multiple line code to debug, etc.

Syntax
1. <!---
2. Your code is commented.
3. Write description of code.
4. It will not display at webpage.
5. -->
Example:
1. <h2>Cake Gallery</h2>
2. <!-- This is image for a yummy cake
3. you can see it on your web-page
4. of your favorite browser -->
5. <img src="[Link] alt="cak
e image" height="300px"
6. width="300px">
HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .

Why use HTML Form

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the
form such as shipping address and credit/debit card details so that item can be sent
to the given address.

HTML Form Syntax

1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>

HTML Form Tags

Let's see the list of HTML 5 form tags.

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

 <select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML 5 Form Tags

Let's see the list of HTML 5 form tags.

Tag Description

<datalist> It specifies a list of pre-defined options for input control.

<keygen> It defines a key-pair generator field for forms.

<output> It defines the result of a calculation.

HTML Form Example

Let's see a simple example of creating HTML form.

1. <form action="#">
2. <table>
3. <tr>
4. <td class="tdLabel"><label for="register_name" class="label">Enter name:
</label></td>
5. <td><input type="text" name="name" value="" id="register_name" style=
"width:160px"/></td>
6. </tr>
7. <tr>
8. <td class="tdLabel"><label for="register_password" class="label">Enter p
assword:</label></td>
9. <td><input type="password" name="password" id="register_password" st
yle="width:160px"/></td>
10. </tr>
11. <tr>
12. <td class="tdLabel"><label for="register_email" class="label">Enter Email:
</label></td>
13. <td
14. ><input type="email" name="email" value="" id="register_email" style="widt
h:160px"/></td>
15. </tr>
16. <tr>
17. <td class="tdLabel"><label for="register_gender" class="label">Enter Gen
der:</label></td>
18. <td>
19. <input type="radio" name="gender" id="register_gendermale" value="male"
/>
20. <label for="register_gendermale">male</label>
21. <input type="radio" name="gender" id="register_genderfemale" value="fem
ale"/>
22. <label for="register_genderfemale">female</label>
23. </td>
24. </tr>
25. <tr>
26. <td class="tdLabel"><label for="register_country" class="label">Select Co
untry:</label></td>
27. <td><select name="country" id="register_country" style="width:160px">
28. <option value="india">india</option>
29. <option value="pakistan">pakistan</option>
30. <option value="africa">africa</option>
31. <option value="china">china</option>
32. <option value="other">other</option>
33. </select>
34. </td>
35. </tr>
36. <tr>
37. <td colspan="2"><div align="right"><input type="submit" id="register_0
" value="register"/>
38. </div></td>
39. </tr>
40. </table>
41. </form>
HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML
provides us ability to format text without using CSS. There are many formatting tags
in HTML. These tags are used to make text bold, italicized, or underlined. There are
almost 14 options available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the text.

NOTE: There are some physical and logical tags which may give same visual
appearance, but they will be different in semantics.

Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML
formatting text.

Element Description
name

<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<tt> This tag is used to appear a text in teletype. (not supported in HTML5)

<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in
HTML5)
 <sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.

1) Bold Text
HTML<b> and <strong> formatting elements

The HTML <b> element is a physical tag which display text in bold font, without any
logical importance. If you write anything within <b>............</b> element, is shown in
bold letters.

See this example:

1. <p> <b>Write Your First Paragraph in bold text.</b></p>

Output:

Write Your First Paragraph in bold text.

The HTML <strong> tag is a logical tag, which displays the content in bold font and
informs the browser about its logical importance. If you write anything between
<strong>???????. </strong>, is shown important text.

See this example:

1. <p><strong>This is an important content</strong>, and this is normal cont

ent</p>

Output:

This is an important content, and this is normal content

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of formatting element</h1>
8. <p><strong>This is an important content</strong>, and this is normal content</p
>
9. </body>
10. </html>

2) Italic Text
HTML <i> and <em> formatting elements

The HTML <i> element is physical element, which display the enclosed content in italic
font, without any added importance. If you write anything within <i>............</i>
element, is shown in italic letters.

See this example:

1. <p> <i>Write Your First Paragraph in italic text.</i></p>

Output:

Write Your First Paragraph in italic text.

The HTML <em> tag is a logical element, which will display the enclosed content in
italic font, with added semantics importance.

See this example:

1. <p><em>This is an important content</em>, which displayed in italic font.<

/p>

Output:

This is an important content, which displayed in italic font.

 1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of italic formatting element</h1>
8. <p><em>This is an important content</em>, which displayed in italic font.</p>
9. </body>
10. </html>

3) HTML Marked formatting

If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.

See this example:

1. <h2> I want to put a <mark> Mark</mark> on your face</h2>

Output:

I want to put a Mark on your face

4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.

See this example:

1. <p> <u>Write Your First Paragraph in underlined text.</u></p>

Output:

Write Your First Paragraph in underlined text.

5) Strike Text
Anything written within <strike>.......................</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.

See this example:

1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Output:

Write Your First Paragraph with strikethrough.

6) Monospaced Font
If you want that each letter has the same width then you should write the content
within <tt>.............</tt> element.

Note: We know that most of the fonts are known as variable-width fonts because
different letters have different width. (for example: 'w' is wider than 'i'). Monospaced
Font provides similar space among every letter.

See this example:

1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Output:

Hello Write Your First Paragraph in monospaced font.

7) Superscript Text
If you put the content within ^{..............} element, is shown in superscript;
means it is displayed half a character's height above the other characters.

See this example:

1. <p>Hello ^{Write Your First Paragraph in superscript.}</p>

Output:

Hello Write Your First Paragraph in superscript.

8) Subscript Text
If you put the content within _{..............} element, is shown in subscript ;
means it is displayed half a character's height below the other characters.

See this example:

1. <p>Hello _{Write Your First Paragraph in subscript.}</p>

Output:

Hello Write Your First Paragraph in subscript.

9) Deleted Text
Anything that puts within <del>..........</del> is displayed as deleted text.

See this example:

1. <p>Hello <del>Delete your first paragraph.</del></p>

Output:

Hello

10) Inserted Text

Anything that puts within <ins>..........</ins> is displayed as inserted text.

See this example:

1. <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.

</ins></p>

Output:
Delete your first [Link] another paragraph.

11) Larger Text

If you want to put your font size larger than the rest of the text then put the content
within <big>.........</big>. It increase one font size larger than the previous one.

See this example:

1. <p>Hello <big>Write the paragraph in larger font.</big></p>

Output:

Hello Write the paragraph in larger font.

12) Smaller Text

If you want to put your font size smaller than the rest of the text then put the content
within <small>.........</small>tag. It reduces one font size than the previous one.

See this example:

1. <p>Hello <small>Write the paragraph in smaller font.</small></p

HTML <frame> tag (Not supported in HTML5)
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 divides a webpage into multiple
sections or frames, and each frame can contain different web pages.

Syntax
1. < frame src = "URL" >

Following are some specifications about the HTML <frame> tag

Display Block

Start tag/End tag Start tag(required), End tag(forbidden)

Usage Frames

Example 1
Create Vertical frames:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset cols="25%,50%,25%">
7. <frame src="[Link]" >
8. <frame src="[Link]">
9. <frame src="[Link]">
10. </frameset>
11. </html>

Example 2:
Create Horizontal frames:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset rows="30%, 40%, 30%">
7. <frame name="top" src="[Link]" >
8. <frame name="main" src="[Link]">
9. <frame name="bottom" src="[Link]">
10. </frameset>
11. </html>
HTML Links
What is a link?
It is a connection from one web resource to another. A link has two ends, An
anchor and direction. The link starts at the “source” anchor and points to the
“destination” anchor, which may be any Web resource such as an image, a
video clip, a sound bite, a program, an HTML document or an element
within an HTML document. You will find many websites or social media
platforms ( Like YouTube, and Instagram ) which link an image to a URL or a
text to a URL etc.
This basically means that by using the ‘a’ tag, you can link 1 element of the
code to another element that may/may not be in your code.
HTML Link Syntax
Links are specified in HTML using the “a” tag.

Syntax Explanation:
href : The href attribute is used to specify the destination
address
of the link used. "href" stands for Hypertext reference.
Text link : The text link is the visible part of the link.
It is what the viewer clicks on.
Input :
• html

<!DOCTYPE html>
<html>
<h3>Example Of Adding a link</h3>

<body>
<p>Click on the following link</p>
<a href="[Link]
</body>

</html>

Output :
Internal Links
An internal link is a type of hyperlink whose target or destination is a
resource, such as an image or document, on the same website or domain.
Input:
• html

<!DOCTYPE html>
<html>
<h3>Internal Link And External Link Example</h3>

<body>
<!--internal link-->
<p>
<a href="html_contribute.asp/">
GeeksforGeeks Contribute
</a>
It is a link to the contribute page on GeeksforGeeks' website.
</p>

<!--external link-->
<p>
<a href="[Link]
GeeksforGeeks
</a>
It is a link to the GeeksforGeeks website on the World Wide Web.
</p>
</body>

</html>

Output :

Changing Link Colours in HTML

Different types of links appear in different formats such as:
1. An unvisited link appears underlined and blue in colour by default.
2. A visited link appears underlined and purple in colour by default.
3. An active link appears underlined and red in colour by default.
The appearance of links can be changed by using CSS.
Input :
• html

<!DOCTYPE html>
<html>

<head>
<style>
a:link {
color: red;
background-color: transparent;
}

a:visited {
color: green;
background-color: transparent;
}

a:hover {
color: blue;
background-color: transparent;
}

a:active {
color: yellow;
background-color: transparent;
}
</style>
</head>

<body>
<p>Changing the default colors of links</p>
<p>Visited Link</p>
<a href="[Link]
GeeksforGeeks
</a>
<p>Link</p>
<a href="[Link]
facebook
</a>
<p>hovering effect</p>
<a href="[Link]
GeeksforGeeks
</a>
</body>
 </html>

Output:

The Target Attribute in Links

The target attribute is used to specify the location where the linked
document is opened. The various options that can be used in the target
attribute are listed below in the table:

Input:
• html

<!DOCTYPE html>
<html>

<body>
 <h3>Various options available in the Target Attribute</h3>

<p>If you set the target attribute to "_blank",

the link will open in a new browser window or tab.
</p>
<a href=
"[Link]
target="_blank">
GeeksforGeeks
</a>

<p>If you set the target attribute to "_self",

the link will open in the same window or tab.
</p>
<a href=
"[Link]
target="_self">
GeeksforGeeks
</a>

<p>If you set the target attribute to "_top",

the link will open in the full body of the window.
</p>
<a href=
"[Link]
target="_top">
GeeksforGeeks
</a>

<p>If you set the target attribute to "_parent",

the link will open in the parent frame.
</p>
<a href=
"[Link]
target="_parent">
GeeksforGeeks
</a>
</body>

</html>

Output:

Using Image as a Link in HTML

An image can be used to create a link to a specified URL. When the viewer
clicks on the link, it redirects them to another page.
The code is <a href=”url”>
<img src=”file address (on device or on web)” alt=”_”
style=”width:__ ; height:__ ; border:__”>
</a>
Note: img src stands for image source ( i.e URL or file address )
Input:
• html

<!DOCTYPE html>
<html>

<body>
<h3>Using Image as a link</h3>
<p>Click on the image to visit GeeksforGeeks homepage.</p>
<a href="[Link]
<img src="[Link]
alt="GeeksforGeeks"
style="width:80px;height:80px;border:0">
</a>
</body>

</html>

Output:

Creating a Bookmark Link for a Webpage

A bookmark is a link that can be used to jump to specified portion of a
[Link] are very useful if a webpage is quite long.
Steps to create a bookmark are:
1. Using the id attribute, create a bookmark.

2. Add the specified portion of the webpage to the bookmark.

Input :
• html

<!DOCTYPE html>
<html>
<body>

<p><a href="#T11">Jump to Topic 11</a></p>

<p><a href="#T17">Jump to Topic 17</a></p>
<p><a href="#T20">Jump to Topic 20</a></p>

<h2>Topic 1</h2>
<p>paragraph 1
.....</p>

<h2>Topic 2</h2>
<p>paragraph 1
.....</p>

<h2>Topic 3</h2>
<p>paragraph 1
.....</p>

<h2>Topic 4</h2>
<p>paragraph 1
.....</p>

<h2>Topic 5</h2>
<p>paragraph 1
.....</p>

<h2>Topic 6</h2>
<p>paragraph 1
.....</p>

<h2>Topic 7</h2>
<p>paragraph 1
.....</p>

<h2>Topic 8</h2>
<p>paragraph 1
.....</p>

<h2>Topic 9</h2>
<p>paragraph 1
.....</p>

<h2>Topic 10</h2>
<p>paragraph 1
.....</p>
 <h2 id="T11">Topic 11</h2>
<p>paragraph 1
.....</p>

<h2>Topic 12</h2>
<p>paragraph 1
.....</p>

<h2>Topic 13</h2>
<p>paragraph 1
.....</p>

<h2>Topic 14</h2>
<p>paragraph 1
.....</p>

<h2>Topic 15</h2>
<p>paragraph 1
.....</p>

<h2>Topic 16</h2>
<p>paragraph 1
.....</p>

<h2 id="T17">Topic 17</h2>

<p>paragraph 1
.....</p>

<h2>Topic 18</h2>
<p>paragraph 1
.....</p>

<h2>Topic 19</h2>
<p>paragraph 1
.....</p>

<h2 id="T20">Topic 20</h2>

<p>paragraph 1
.....</p>
</body>

</html>

Output:
Creating a download link in HTML
A text link of a pdf, doc or zip file can be created to make it downloadable.
Input :
• html

<!DOCTYPE html>
<html>

<h3>Creating a download link</h3>

<body>
<a href="[Link]">
Download PDF File
</a>
</body>

</html>
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more
list elements. 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 Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is
known as numbered list also. The ordered list starts with <ol> tag and the list items
start with <li> tag.

1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>

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 starts with <ul> tag and list items start with the
<li> tag.

1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is
also known as definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms
or other name-value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10. </dl>

HTML Nested List

A list within another list is termed as nested list. If you want a bullet list inside a
numbered list then such type of list will called as nested list.

Code:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Nested list</title>
5. </head>
6. <body>
7. <p>List of Indian States with thier capital</p>
8. <ol>
9. <li>Delhi
10. <ul>
11. <li>NewDelhi</li>
12. </ul>
13. </li>
14. <li>Haryana
15. <ul>
16. <li>Chandigarh</li>
17. </ul>
18. </li>
19. <li>Gujarat
20. <ul>
21. <li>Gandhinagar</li>
22. </ul>
23. </li>
24. <li>Rajasthan
25. <ul>
26. <li>Jaipur</li>
27. </ul>
28. </li>
29. <li>Maharashtra
30. <ul>
31. <li>Mumbai</li>
32. </ul>
33. </li>
34. <li>Uttarpradesh
35. <ul>
36. <li>Lucknow</li></ul>
37. </li>
38. </ol>
39. </body>
40. </html>
HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be
many columns 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 defined by <tr> tag, table header is defined by <th>, and
table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section, navigation
bar, body content, footer section etc. But it is recommended to use div tag over table
to manage the layout of the page .

HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each
column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

HTML Table Example

Let's see the example of HTML table tag. It output is shown above.

1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
Introduction of JavaScript

Our JavaScript Tutorial is designed for beginners and professionals both. JavaScript
is used to create client-side dynamic pages.

JavaScript is an object-based scripting language which is lightweight and cross-

platform.

JavaScript is not a compiled language, but it is a translated language. The JavaScript

Translator (embedded in the browser) is responsible for translating the JavaScript code
for the web browser.

What is JavaScript
JavaScript (js) is a light-weight object-oriented programming language which is used
by several websites for scripting the webpages. It is an interpreted, full-fledged
programming language that enables dynamic interactivity on websites when applied
to an HTML document. It was introduced in the year 1995 for adding programs to the
webpages in the Netscape Navigator browser. Since then, it has been adopted by all
other graphical web browsers. With JavaScript, users can build modern web
applications to interact directly without reloading the page every time. The traditional
website uses js to provide several forms of interactivity and simplicity.

Although, JavaScript has no connectivity with Java programming language. The name
was suggested and provided in the times when Java was gaining popularity in the
market. In addition to web browsers, databases such as CouchDB and MongoDB uses
JavaScript as their scripting and query language.

Features of JavaScript
There are following features of JavaScript:
 1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language.
Thus, it is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
4. JavaScript is an object-oriented programming language that uses prototypes
rather than using classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows,
macOS, etc.
8. It provides good control to the users over the web browsers.

History of JavaScript
In 1993, Mosaic, the first popular web browser, came into existence. In the year
1994, Netscape was founded by Marc Andreessen. He realized that the web needed
to become more dynamic. Thus, a 'glue language' was believed to be provided to
HTML to make web designing easy for designers and part-time programmers.
Consequently, in 1995, the company recruited Brendan Eich intending to implement
and embed Scheme programming language to the browser. But, before Brendan could
start, the company merged with Sun Microsystems for adding Java into its Navigator
so that it could compete with Microsoft over the web technologies and platforms.
Now, two languages were there: Java and the scripting language. Further, Netscape
decided to give a similar name to the scripting language as Java's. It led to 'Javascript'.
Finally, in May 1995, Marc Andreessen coined the first code of Javascript named
'Mocha'. Later, the marketing team replaced the name with 'LiveScript'. But, due to
trademark reasons and certain other reasons, in December 1995, the language was
finally renamed to 'JavaScript'. From then, JavaScript came into existence.

Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:

o Client-side validation,
o Dynamic drop-down menus,
o Displaying date and time,
 o Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm
dialog box and prompt dialog box),
o Displaying clocks etc.

JavaScript Example
1. <script>
2. [Link]("Hello JavaScript by JavaScript");
3. </script>
JavaScript addEventListener()
The addEventListener() method is used to attach an event handler to a particular
element. It does not override the existing event handlers. Events are said to be an
essential part of the JavaScript. A web page responds according to the event that
occurred. Events can be user-generated or generated by API's. An event listener is a
JavaScript's procedure that waits for the occurrence of an event.

The addEventListener() method is an inbuilt function of JavaScript. We can add

multiple event handlers to a particular element without overwriting the existing event
handlers.

Syntax

1. [Link](event, function, useCapture);

Although it has three parameters, the parameters event and function are widely used.
The third parameter is optional to define. The values of this function are defined as
follows.

Parameter Values
event: It is a required parameter. It can be defined as a string that specifies the event's
name.

Note: Do not use any prefix such as "on" with the parameter value. For example,
Use "click" instead of using "onclick".

function: It is also a required parameter. It is a JavaScript function which responds to

the event occur.

useCapture: It is an optional parameter. It is a Boolean type value that specifies

whether the event is executed in the bubbling or capturing phase. Its possible values
are true and false. When it is set to true, the event handler executes in the capturing
phase. When it is set to false, the handler executes in the bubbling phase. Its default
value is false.

Let's see some of the illustrations of using the addEventListener() method.

Example
It is a simple example of using the addEventListener() method. We have to click the
given HTML button to see the effect.
 1. <!DOCTYPE html>
2. <html>
3. <body>
4. <p> Example of the addEventListener() method. </p>
5. <p> Click the following button to see the effect. </p>
6. <button id = "btn"> Click me </button>
7. <p id = "para"></p>
8. <script>
9. [Link]("btn").addEventListener("click", fun);
10. function fun() {
11. [Link]("para").innerHTML = "Hello World" + "<br>" + "W
elcome to the [Link]";
12. }
13. </script>
14. </body>
15. </html>
Test it Now

Output

After clicking the given HTML button, the output will be -

Now, in the next example we will see how to add many events to the same element
without overwriting the existing events.
Example
In this example, we are adding multiple events to the same element.

1. <!DOCTYPE html>
2. <html>
3. <body>
4. <p> This is an example of adding multiple events to the same element. </p>
5. <p> Click the following button to see the effect. </p>
6. <button id = "btn"> Click me </button>
7. <p id = "para"></p>
8. <p id = "para1"></p>
9. <script>
10. function fun() {
11. alert("Welcome to the [Link]");
12. }
13.
14. function fun1() {
15. [Link]("para").innerHTML = "This is second function";
16.
17. }
18. function fun2() {
19. [Link]("para1").innerHTML = "This is third function";
20. }
21. var mybtn = [Link]("btn");
22. [Link]("click", fun);
23. [Link]("click", fun1);
24. [Link]("click", fun2);
25. </script>
26. </body>
27. </html>
Test it Now

Output
Now, when we click the button, an alert will be displayed. After clicking the given HTML
button, the output will be -

When we exit the alert, the output is -

Example
In this example, we are adding multiple events of a different type to the same element.

1. <!DOCTYPE html>
2. <html>
3. <body>
 4. <p> This is an example of adding multiple events of different type to the same eleme
nt. </p>
5. <p> Click the following button to see the effect. </p>
6. <button id = "btn"> Click me </button>
7. <p id = "para"></p>
8. <script>
9. function fun() {
10. [Link] = "50px";
11. [Link] = "50px";
12. [Link] = "yellow";
13. [Link] = "blue";
14. }
15.
16. function fun1() {
17. [Link]("para").innerHTML = "This is second function";
18.
19. }
20. function fun2() {
21. [Link] = "";
22. [Link] = "";
23. [Link] = "";
24. [Link] = "";
25. }
26. var mybtn = [Link]("btn");
27. [Link]("mouseover", fun);
28. [Link]("click", fun1);
29. [Link]("mouseout", fun2);
30. </script>
31. </body>
32. </html>
Test it Now

Output
When we move the cursor over the button, the output will be -

After clicking the button and leave the cursor, the output will be -

Event Bubbling or Event Capturing

Now, we understand the use of the third parameter of JavaScript's addEventListener(),
i.e., useCapture.

In HTML DOM, Bubbling and Capturing are the two ways of event propagation. We
can understand these ways by taking an example.
Suppose we have a div element and a paragraph element inside it, and we are applying
the "click" event to both of them using the addEventListener() method. Now the
question is on clicking the paragraph element, which element's click event is handled
first.

So, in Bubbling, the event of paragraph element is handled first, and then the div
element's event is handled. It means that in bubbling, the inner element's event is
handled first, and then the outermost element's event will be handled.

In Capturing the event of div element is handled first, and then the paragraph
element's event is handled. It means that in capturing the outer element's event is
handled first, and then the innermost element's event will be handled.

1. addEventListener(event, function, useCapture);

We can specify the propagation using the useCapture parameter. When it is set to
false (which is its default value), then the event uses bubbling propagation, and when
it is set to true, there is the capturing propagation.

We can understand the bubbling and capturing using an illustration.

Example
In this example, there are two div elements. We can see the bubbling effect on the first
div element and the capturing effect on the second div element.

When we double click the span element of the first div element, then the span
element's event is handled first than the div element. It is called bubbling.

But when we double click the span element of the second div element, then the div
element's event is handled first than the span element. It is called capturing.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: lightblue;
7. border: 2px solid red;
8. font-size: 25px;
9. text-align: center;
10. }
 11. span{
12. border: 2px solid blue;
13. }
14. </style>
15. </head>
16. <body>
17. <h1> Bubbling </h1>
18. <div id = "d1">
19. This is a div element.
20. <br><br>
21. <span id = "s1"> This is a span element. </span>
22. </div>
23. <h1> Capturing </h1>
24. <div id = "d2"> This is a div element.
25. <br><br>
26. <span id = "s2"> This is a span element. </span>
27. </div>
28.
29. <script>
30. [Link]("d1").addEventListener("dblclick", function() {alert('You hav
e double clicked on div element')}, false);
31. [Link]("s1").addEventListener("dblclick", function() {alert('Y
ou have double clicked on span element')}, false);
32. [Link]("d2").addEventListener("dblclick", function() {alert('You hav
e double clicked on div element')}, true);
33. [Link]("s2").addEventListener("dblclick", function() {alert('Y
ou have double clicked on span element')}, true);
34. </script>
35. </body>
36. </html>
Test it Now

Output
We have to double click the specific elements to see the effect.
JavaScript Array
JavaScript array is an object that represents a collection of similar type of elements.

There are 3 ways to construct array in JavaScript

1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)

1) JavaScript array literal

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

1. var arrayname=[value1,value2.....valueN];

As you can see, values are contained inside [ ] and separated by , (comma).

Let's see the simple example of creating and using array in JavaScript.

1. <script>
2. var emp=["Sonoo","Vimal","Ratan"];
3. for (i=0;i<[Link];i++){
4. [Link](emp[i] + "<br/>");
5. }
6. </script>

The .length property returns the length of an array.

Output of the above example

Sonoo
Vimal
Ratan

2) JavaScript Array directly (new keyword)

The syntax of creating array directly is given below:

1. var arrayname=new Array();

Here, new keyword is used to create instance of array.

Let's see the example of creating array directly.

1. <script>
2. var i;
3. var emp = new Array();
4. emp[0] = "Arun";
5. emp[1] = "Varun";
6. emp[2] = "John";
7.
8. for (i=0;i<[Link];i++){
9. [Link](emp[i] + "<br>");
10. }
11. </script>

Output of the above example

Arun
Varun
John

3) JavaScript array constructor (new keyword)

Here, you need to create instance of array by passing arguments in constructor so that
we don't have to provide value explicitly.

The example of creating object by array constructor is given below.

1. <script>
2. var emp=new Array("Jai","Vijay","Smith");
3. for (i=0;i<[Link];i++){
4. [Link](emp[i] + "<br>");
5. }
6. </script>

Output of the above example

Jai
Vijay
Smith
JavaScript Array Methods
Let's see the list of JavaScript array methods with their description.

Methods Description

concat() It returns a new array object that contains two or more merged
arrays.

copywithin() It copies the part of the given array with its own elements and
returns the modified array.

entries() It creates an iterator object and a loop that iterates over each
key/value pair.

every() It determines whether all the elements of an array are satisfying

the provided function conditions.

flat() It creates a new array carrying sub-array elements concatenated

recursively till the specified depth.

flatMap() It maps all array elements via mapping function, then flattens
the result into a new array.

fill() It fills elements into an array with static values.

from() It creates a new array carrying the exact copy of another array
element.

filter() It returns the new array containing the elements that pass the
provided function conditions.

find() It returns the value of the first element in the given array that
satisfies the specified condition.

findIndex() It returns the index value of the first element in the given array
that satisfies the specified condition.

forEach() It invokes the provided function once for each element of an

array.

includes() It checks whether the given array contains the specified

element.
indexOf() It searches the specified element in the given array and returns
the index of the first match.

isArray() It tests if the passed value ia an array.

join() It joins the elements of an array as a string.

keys() It creates an iterator object that contains only the keys of the
array, then loops through these keys.

lastIndexOf() It searches the specified element in the given array and returns
the index of the last match.

map() It calls the specified function for every array element and returns
the new array

of() It creates a new array from a variable number of arguments,

holding any type of argument.

pop() It removes and returns the last element of an array.

push() It adds one or more elements to the end of an array.

reverse() It reverses the elements of given array.

reduce(function, It executes a provided function for each value from left to right
initial) and reduces the array to a single value.

reduceRight() It executes a provided function for each value from right to left
and reduces the array to a single value.

some() It determines if any element of the array passes the test of the
implemented function.

shift() It removes and returns the first element of an array.

slice() It returns a new array containing the copy of the part of the
given array.

sort() It returns the element of the given array in a sorted order.

splice() It add/remove elements to/from the given array.

toLocaleString() It returns a string containing all the elements of a specified

array.
toString() It converts the elements of a specified array into string form,
without affecting the original array.

unshift() It adds one or more elements in the beginning of the given

array.

values() It creates a new iterator object carrying values for each index in
the array.
JavaScript Events
The change in the state of an object is known as an Event. In html, there are various
events which represents that some activity is performed by the user or by the browser.
When javascript code is included in HTML, js react over these events and allow the
execution. This process of reacting over the events is called Event Handling. Thus, js
handles the HTML events via Event Handlers.

For example, when a user clicks over the browser, add js code, which will execute the
task to be performed on the event.

Some of the HTML events and their event handlers are:

Mouse events:

Event Event Description

Performed Handler

click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over the
element

mouseout onmouseout When the cursor of the mouse leaves an element

mousedown onmousedown When the mouse button is pressed over the

element

mouseup onmouseup When the mouse button is released over the

element

mousemove onmousemove When the mouse movement takes place.

Keyboard events:

Event Event Handler Description

Performed

Keydown & onkeydown & When the user press and then release
Keyup onkeyup the key

Form events:
 Event Performed Event Handler Description

focus onfocus When the user focuses on an element

submit onsubmit When the user submits the form

blur onblur When the focus is away from a form element

change onchange When the user modifies or changes the value of a fo

Window/Document events

Event Event Description

Performed Handler

load onload When the browser finishes the loading of the page

unload onunload When the visitor leaves the current webpage, the
browser unloads it

resize onresize When the visitor resizes the window of the browser

Let's discuss some examples over events and their handlers.

Click Event

1. <html>
2. <head> Javascript Events </head>
3. <body>
4. <script language="Javascript" type="text/Javascript">
5. <!--
6. function clickevent()
7. {
8. [Link]("This is JavaTpoint");
9. }
10. //-->
11. </script>
12. <form>
13. <input type="button" onclick="clickevent()" value="Who's this?"/>
14. </form>
 15. </body>
16. </html>

MouseOver Event

1. <html>
2. <head>
3. <h1> Javascript Events </h1>
4. </head>
5. <body>
6. <script language="Javascript" type="text/Javascript">
7. <!--
8. function mouseoverevent()
9. {
10. alert("This is JavaTpoint");
11. }
12. //-->
13. </script>
14. <p onmouseover="mouseoverevent()"> Keep cursor over me</p>
15. </body>
16. </html>

Focus Event

1. <html>
2. <head> Javascript Events</head>
3. <body>
4. <h2> Enter something here</h2>
5. <input type="text" id="input1" onfocus="focusevent()"/>
6. <script>
7. <!--
8. function focusevent()
9. {
10. [Link]("input1").[Link]=" aqua";
11. }
12. //-->
13. </script>
14. </body>
Keydown Event

1. <html>
2. <head> Javascript Events</head>
3. <body>
4. <h2> Enter something here</h2>
5. <input type="text" id="input1" onkeydown="keydownevent()"/>
6. <script>
7. <!--
8. function keydownevent()
9. {
10. [Link]("input1");
11. alert("Pressed a key");
12. }
13. //-->
14. </script>
15. </body>
16. </html>

Load event

1. <html>
2. <head>Javascript Events</head>
3. </br>
4. <body onload="[Link]('Page successfully loaded');">
5. <script>
6. <!--
7. [Link]("The page is loaded successfully");
8. //-->
9. </script>
10. </body>
11. </html>
JavaScript Form
Forms are the basics of HTML. We use HTML form element in order to create
the JavaScript form. For creating a form, we can use the following sample code:

1. <html>
2. <head>
3. <title> Login Form</title>
4. </head>
5. <body>
6. <h3> LOGIN </h3>
7. <formform ="Login_form" onsubmit="submit_form()">
8. <h4> USERNAME</h4>
9. <input type="text" placeholder="Enter your email id"/>
10. <h4> PASSWORD</h4>
11. <input type="password" placeholder="Enter your password"/></br></br>
12. <input type="submit" value="Login"/>
13. <input type="button" value="SignUp" onClick="create()"/>
14. </form>
15. </html>

In the code:

o Form name tag is used to define the name of the form. The name of the form
here is "Login_form". This name will be referenced in the JavaScript form.
o The action tag defines the action, and the browser will take to tackle the form
when it is submitted. Here, we have taken no action.
o The method to take action can be either post or get, which is used when the
form is to be submitted to the server. Both types of methods have their own
properties and rules.
o The input type tag defines the type of inputs we want to create in our form.
Here, we have used input type as 'text', which means we will input values as text
in the textbox.
o Net, we have taken input type as 'password' and the input value will be
password.
o Next, we have taken input type as 'button' where on clicking, we get the value
of the form and get displayed.
Other than action and methods, there are the following useful methods also which are
provided by the HTML Form Element

o submit (): The method is used to submit the form.

o reset (): The method is used to reset the form values.

Referencing forms
Now, we have created the form element using HTML, but we also need to make its
connectivity to JavaScript. For this, we use the getElementById () method that
references the html form element to the JavaScript code.

The syntax of using the getElementById() method is as follows:

1. let form = [Link]('subscribe');

Using the Id, we can make the reference.

Submitting the form

Next, we need to submit the form by submitting its value, for which we use
the onSubmit() method. Generally, to submit, we use a submit button that submits
the value entered in the form.

The syntax of the submit() method is as follows:

1. <input type="submit" value="Subscribe">

When we submit the form, the action is taken just before the request is sent to the
server. It allows us to add an event listener that enables us to place various validations
on the form. Finally, the form gets ready with a combination of HTML and JavaScript
code.

Let's collect and use all these to create a Login form and SignUp form and use both.

Login Form

1. <html>
2. <head>
3. <title> Login Form</title>
4. </head>
5. <body>
 6. <h3> LOGIN </h3>
7. <formform ="Login_form" onsubmit="submit_form()">
8. <h4> USERNAME</h4>
9. <input type="text" placeholder="Enter your email id"/>
10. <h4> PASSWORD</h4>
11. <input type="password" placeholder="Enter your password"/></br></br>
12. <input type="submit" value="Login"/>
13. <input type="button" value="SignUp" onClick="create()"/>
14. </form>
15. <script type="text/javascript">
16. function submit_form(){
17. alert("Login successfully");
18. }
19. function create(){
20. [Link]="[Link]";
21. }
22. </script>
23. </body>
24. </html>

The output of the above code on clicking on Login button is shown below:

SignUp Form
1. <html>
2. <head>
3. <title> SignUp Page</title>
4. </head>
5. <body align="center" >
6. <h1> CREATE YOUR ACCOUNT</h1>
7. <table cellspacing="2" align="center" cellpadding="8" border="0">
8. <tr><td> Name</td>
9. <td><input type="text" placeholder="Enter your name" id="n1"></td></tr
>
10. <tr><td>Email </td>
11. <td><input type="text" placeholder="Enter your email id" id="e1"></td></
tr>
12. <tr><td> Set Password</td>
13. <td><input type="password" placeholder="Set a password" id="p1"></td>
</tr>
14. <tr><td>Confirm Password</td>
15. <td><input type="password" placeholder="Confirm your password" id="p2"
></td></tr>
16. <tr><td>
17. <input type="submit" value="Create" onClick="create_account()"/>
18. </table>
19. <script type="text/javascript">
20. function create_account(){
21. var n=[Link]("n1").value;
22. var e=[Link]("e1").value;
23. var p=[Link]("p1").value;
24. var cp=[Link]("p2").value;
25. //Code for password validation
26. var letters = /^[A-Za-z]+$/;
27. var email_val = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-
9]{2,4})+$/;
28. //other validations required code
29. if(n==''||e==''||p==''||cp==''){
30. alert("Enter each details correctly");
31. }
32. else if()
 33. {
34. alert('Name is incorrect must contain alphabets only');
35. }
36. else if (!email_val.test(e))
37. {
38. alert('Invalid email format please enter valid email id');
39. }
40. else if(p!=cp)
41. {
42. alert("Passwords not matching");
43. }
44. else if([Link]("p1").[Link] > 12)
45. {
46. alert("Password maximum length is 12");
47. }
48. else if([Link]("p1").[Link] < 6)
49. {
50. alert("Password minimum length is 6");
51. }
52. else{
53. alert("Your account has been created successfully... Redirecting to JavaTpoint.c
om");
54. [Link]="[Link]
55. }
56. }
57. </script>
58. </body>
59. </html>

The output of the above code is shown below:

In this way, we can create forms in JavaScript with proper validations.
javaScript Functions
JavaScript functions are used to perform operations. We can call JavaScript function
many times to reuse the code.

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.

1. Code reusability: We can call a function several times so it save coding.

2. Less coding: It makes our program compact. We don’t need to write many lines of
code each time to perform a common task.

JavaScript Function Syntax

The syntax of declaring function is given below.

1. function functionName([arg1, arg2, ...argN]){

2. //code to be executed
3. }

JavaScript Functions can have 0 or more arguments.

JavaScript Function Example

Let’s see the simple example of function in JavaScript that does not has arguments.

1. <script>
2. function msg(){
3. alert("hello! this is message");
4. }
5. </script>
6. <input type="button" onclick="msg()" value="call function"/>
Output of the above example

JavaScript Function Arguments

We can call function by passing arguments. Let’s see the example of function that has
one argument.
 1. <script>
2. function getcube(number){
3. alert(number*number*number);
4. }
5. </script>
6. <form>
7. <input type="button" value="click" onclick="getcube(4)"/>
8. </form>
Output of the above example

Function with Return Value

We can call function that returns a value and use it in our program. Let’s see the
example of function that returns value.

1. <script>
2. function getInfo(){
3. return "hello javatpoint! How r u?";
4. }
5. </script>
6. <script>
7. [Link](getInfo());
8. </script>
Output of the above example
hello javatpoint! How r u?

JavaScript Function Object

In JavaScript, the purpose of Function constructor is to create a new Function object.
It executes the code globally. However, if we call the constructor directly, a function is
created dynamically but in an unsecured way.

Syntax
1. new Function ([arg1[, arg2[, ....argn]],] functionBody)

Parameter
arg1, arg2, .... , argn - It represents the argument used by function.

functionBody - It represents the function definition.

JavaScript Function Methods

Let's see function methods with description.

Method Description

apply() It is used to call a function contains this value and a single array of arguments.

bind() It is used to create a new function.

call() It is used to call a function contains this value and an argument list.

toString() It returns the result in a form of a string.

JavaScript Function Object Examples

Example 1
Let's see an example to display the sum of given numbers.

1. <script>
2. var add=new Function("num1","num2","return num1+num2");
3. [Link](add(2,5));
4. </script>

Output:

Example 2
Let's see an example to display the power of provided value.

1. <script>
2. var pow=new Function("num1","num2","return [Link](num1,num2)");
 3. [Link](pow(2,3));
4. </script>

Output:

8
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.

Creating Objects in JavaScript

There are 3 ways to 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.

1. <script>
2. emp={id:102,name:"Shyam Kumar",salary:40000}
3. [Link]([Link]+" "+[Link]+" "+[Link]);
4. </script>
Output of the above example
102 Shyam Kumar 40000

2) By creating instance of Object

The syntax of creating object directly is given below:

1. var objectname=new Object();

Here, new keyword is used to create object.

Let’s see the example of creating object directly.

1. <script>
2. var emp=new Object();
3. [Link]=101;
4. [Link]="Ravi Malik";
5. [Link]=50000;
6. [Link]([Link]+" "+[Link]+" "+[Link]);
7. </script>
Output of the above example
101 Ravi 50000

3) By using an Object constructor

Here, you need to create function with arguments. Each argument value can be
assigned in the current object by using this keyword.

The this keyword refers to the current object.

The example of creating object by object constructor is given below.

1. <script>
2. function emp(id,name,salary){
3. [Link]=id;
4. [Link]=name;
5. [Link]=salary;
6. }
7. e=new emp(103,"Vimal Jaiswal",30000);
8.
9. [Link]([Link]+" "+[Link]+" "+[Link]);
10. </script>
Output of the above example
103 Vimal Jaiswal 30000
Defining method in JavaScript Object
We can define method in JavaScript object. But before defining method, we need to
add property in the function with same name as method.

The example of defining method in object is given below.

1. <script>
2. function emp(id,name,salary){
3. [Link]=id;
4. [Link]=name;
5. [Link]=salary;
6.
7. [Link]=changeSalary;
8. function changeSalary(otherSalary){
9. [Link]=otherSalary;
10. }
11. }
12. e=new emp(103,"Sonoo Jaiswal",30000);
13. [Link]([Link]+" "+[Link]+" "+[Link]);
14. [Link](45000);
15. [Link]("<br>"+[Link]+" "+[Link]+" "+[Link]);
16. </script>
Output of the above example
103 Sonoo Jaiswal 30000
103 Sonoo Jaiswal 45000

JavaScript Object Methods

The various methods of Object are as follows:

[Link] Methods Description

1 [Link]() This method is used to copy enumerable and

own properties from a source object to a target
object
2 [Link]() This method is used to create a new object with
the specified prototype object and properties.

3 [Link]() This method is used to describe some behavioral

attributes of the property.

4 [Link]() This method is used to create or configure

multiple object properties.

5 [Link]() This method returns an array with arrays of the

key, value pairs.

6 [Link]() This method prevents existing properties from

being removed.

7 [Link]() This method returns a property descriptor for

the specified property of the specified object.

8 [Link]() This method returns all own property

descriptors of a given object.

9 [Link]() This method returns an array of all properties

(enumerable or not) found.

10 [Link]() This method returns an array of all own symbol

key properties.

11 [Link]() This method returns the prototype of the

specified object.

12 [Link]() This method determines whether two values are

the same value.

13 [Link]() This method determines if an object is

extensible

14 [Link]() This method determines if an object was frozen.

15 [Link]() This method determines if an object is sealed.

16 [Link]() This method returns an array of a given object's

own property names.

17 [Link]() This method is used to prevent any extensions

of an object.

18 [Link]() This method prevents new properties from

being added and marks all existing properties as
non-configurable.

19 [Link]() This method sets the prototype of a specified

object to another object.

20 [Link]() This method returns an array of values.

JavaScript Statements
•
The•• programming instructions written in a program in a programming language
are known as statements. The order of execution of Statements is the same as
they are written.
1. Semicolons:
• Semicolons separate JavaScript statements.
• A semicolon marks the end of a statement in javascript.
Example:
• Javascript

let a, b, c;
a = 2;
b = 3;
c = a + b;
[Link]("The value of c is " + c + ".");

Output
The value of c is 5.
Multiple statements on one line are allowed if they are separated with a
semicolon.
a=2;b=3;z=a+b;
2. Code Blocks: JavaScript statements can be grouped together inside curly
brackets. Such groups are known as code blocks. The purpose of grouping is to
define statements to be executed together.
Example: JavaScript function
• Javascript

function myFunction() {
[Link]("Hello");
[Link]("How are you?");
}
myFunction()

Output
Hello
How are you?
3. White Space: Javascript ignores multiple white spaces.
Example:
• Javascript
 [Link](10 * 2);
[Link](10 * 2);

Output
20
20
Both the result will be the same
4. Line Length and Line Breaks: Javascript code’s preferred line length by most
programmers is up to 80 characters. The best place to break a code line in
Javascript, if it doesn’t fit, is after an operator.
Example:
[Link]("geek1").innerHTML =
"Hello Geek!";
5. Keywords: Keywords are reserved words and cannot be used as a variable
name. A Javascript keyword tells about what kind of operation it will perform.
Some commonly used keywords are:
• break and continue: break keyword is used to terminate a loop and
continue is used to skip a particular iteration in a loop and move to the
next iteration.
• do…. while: In this, the statements written within the do block are
executed till the condition in while is true.
• for: It helps in executing a block of statements till the condition is true.
• function: This keyword is used to declare a function.
• return: This keyword is used to exit a function.
• switch: This helps in executing a block of codes depending on different
cases.
• var, let, and const: These keywords are used to declare a variable in js.