UNIT 1 WEB PROGRAMMING

Web Scripting and its Types

The process of creating and embedding scripts in a web page is known as web-scripting. A script
or a computer-script is a list of commands that are embedded in a web-page normally and are
interpreted and executed by a certain program or scripting engine.
 Scripts may be written for a variety of purposes such as for automating processes on a local-
computer or to generate web pages.
 The programming languages in which scripts are written are called scripting language, there
are many scripting languages available today.
 Common scripting languages are VBScript, JavaScript, ASP, PHP, PERL, JSP etc.
Types of Script :
Scripts are broadly of following two type :

Web Scripting

Client-Side Scripts :

1. Client-side scripting is responsible for interaction within a web page. The client-side scripts are
firstly downloaded at the client-end and then interpreted and executed by the browser (default
browser of the system).
2. The client-side scripting is browser-dependent. i.e., the client-side browser must be scripting
enables in order to run scripts
3. Client-side scripting is used when the client-side interaction is used. Some example uses of
client-side scripting may be :
 To get the data from user’s screen or browser.
 For playing online games.
 Customizing the display of page in browser without reloading or reopening the page.
4. Here are some popular client-side scripting languages VBScript, JavaScript, Hypertext
Processor(PHP).
5. ient-side scripting languages run off the user’s browser.

6. It is usually performed at the front end, which makes it visible to visitors and makes it less
vulnerable to exploits and leaks. As such, it is often used to build user interfaces and lighter
functionality such as that.

7. Since it runs locally, they usually provide better performance and, therefore, do not strain your
server.

8. Examples: HTML, CSS, jQuery, and JavaScript.

 Server-Side Scripts :
1. Server-side scripting is responsible for the completion or carrying out a task at the server-end
and then sending the result to the client-end.
2. In server-side script, it doesn’t matter which browser is being used at client-end, because the
server does all the work.
3. Server-side scripting is mainly used when the information is sent to a server and to be
processed at the server-end. Some sample uses of server-scripting can be :
 Password Protection.
 Browser Customization (sending information as per the requirements of client-end browser)
 Form Processing
 Building/Creating and displaying pages created from a database.
 Dynamically editing changing or adding content to a web-page.
4. Here are some popular server-side scripting languages PHP, Perl, ASP (Active Server Pages),
JSP ( Java Server Pages).
5. the term server-side scripting language refers to those that run off a web server. Since it performs
from the back-end side, the script is not visible to the visitor. Because of that, it is a more secure
approach.

6. They are often used to create dynamic websites and platforms, handle user queries, and generate
and provide data and others. A famous example of server-side scripting is the use of PHP in
WordPress.

7. Examples: PHP, Python, Node.js, Perl, and Ruby.

Client-Side Scripting Server-Side Scripting

Script code is downloaded and executed at The script is executed at the server end, and the result is
the client end. sent to the client end.

Response to interaction is more immediate Complex processes are more efficient as the program
once the program code has been and associated resources are not downloaded to the
downloaded. browser.

Services are secure as they do not have Have access to files and databases, but have security
access to files or databases. considerations when sending sensitive information.

Browser dependent Does not depend on browsers

Influenced by the user's computer's Affected by the processing speed of the host server
processing speed
Introduction to Design Web Pages in HTML
HTML, known as HyperText Markup Language, is one of the most popular languages used for

designing web pages and structuring content. HTML uses tags, elements, images, and some latest

components to make Web Pages more attractive and user-friendly.

By combining HTML with CSS, the appearance of a web page can be easily customized. HTML

plays a crucial role in properly structuring web pages on the World Wide Web. It can be edited

using simple text editors, allowing users to make changes whenever needed.

How to Design a Web Page in HTML? (Step-by-Step)

Step 1: Set up Your Project
 Create a new folder on your computer to store the files for your web page.

 Open a text editor like Notepad, Sublime Text, or Visual Studio Code in order to write your

HTML code.

Step 2: Start with the HTML Structure

 Begin your HTML file by adding the <!DOCTYPE html> declaration at the top. This tells

the browser that you’re using HTML5.

 Create the opening and closing HTML tags: <html></html>.

 Inside the HTML tags, create the opening and closing head tags: <head></head>.

 Within the head tags, add the opening and closing title tags: <title></title>. This is where

you’ll write the title of your web page.

Step 3: Add Content to the Body
 After the closing head tag, create the opening and closing body tags: <body></body>. This

is where you’ll put all the visible content of your web page.

 Inside the body tags, you can start adding elements such as headings, paragraphs, images,

and links.

 To add a heading, use the <h1></h1> tags for the main heading

and <h2></h2>, <h3></h3>, and so on for subheadings.

 To add a paragraph, use the <p></p>

 To add an image, use the <img> Within the <img> tag, you need to specify the src attribute,

which should contain the file path or URL pointing to the location of the image file.

 To add a link, use the <a></a> tags with the href attribute specifying the URL.

For a better understanding, here is the code:

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Unlock the Power of Online Learning</h1>
<p>Master 1000+ Tools & Technologies.</p>
<img src="C:\Users\Demo2\Desktop\HTML\webimage.PNG">
<ul>
<li>Python</li>
<li>Artificial Intelligence</li>
<li>Java</li>
</ul>
<a href="https://www.educba.com">View All 1000 Skills</a>
</body>
</html>

Step 4: Save your HTML File

 Save your file with a .html extension in the folder you created earlier.
  Choose a descriptive name for your file, such as my web page.html (which is commonly

used as the main page of a website).

Step 5: View your Web Page

 Open the HTML file in a web browser such as Chrome, Firefox, or Safari.

 You should see the below web page displayed in the browser, showing the content we

added.

Step 6: Continue Enhancing your Web Page

 Explore additional HTML tags and attributes to further enhance the structure and design of

your web page.

 Learn CSS (Cascading Style Sheets) to style your web page and make it visually appealing.

 Experiment with more advanced HTML features like forms, tables, and multimedia

elements.

HTML Common tags:-

HTML is the building block for web pages. HTML is a format that tells a computer
how to display a web page. The documents themselves are plain text files with
special "tags" or codes that a web browser uses to interpret and display information
on your computer screen.

 HTML stands for Hyper Text MarkupLanguage

 An HTML file is a text file containing small markuptags
 The markup tags tell the Web browser how to display thepage
 An HTML file must have an htm or html fileextension.

HTML Tags:- HTML tags are used to mark-up HTML elements .HTML tags are
surrounded by the two characters < and >. The surrounding characters are called
angle brackets. HTML tags normally come in pairs like and The first tag in a pair is
the start tag, the second tag is the end tag . The text between the start and end tags is
the element content . HTML tags are not case sensitive, <B>means the same as<b>.
The most important tags in HTML are tags that define headings, paragraphs and line breaks.
Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document and mainly comprises of
document header which is represented by <head>...</head> and document
body which is represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep other HTML tags
like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention the document title.
<body> This tag represents the document's body which keeps other HTML tags like
<h1>, <div>, <p> etc.
<p> This tag represents a paragraph.
<h1> to <h6> Defines header 1 to header 6

<br> Inserts a single line break

<hr> Defines a horizontal rule

<!--> Defines a comment

Headings:-
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading
while <h6> defines the smallest.
<h1>This is a heading</h1>
<h2>This is aheading</h2>
<h3>This is aheading</h3>
<h4>This is aheading</h4>
<h5>This is aheading</h5>
<h6>This is aheading</h6>
Paragraphs:-
Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the align attribute
with a paragraph tag as well.
<p align="left">This is a paragraph</p>
<p align="center">this is another paragraph</p>
Line Breaks:-
The <br> tag is used when you want to start a new line, but don't want to start a new paragraph. The <br> tag
forces a line break wherever you place it. It is similar to single spacing in a document.
This Code output
<p>This <br> is a para<br> graph with

line breaks</p> This

is a para
graph with line breaks

Horizontal Rule The element is used for horizontal rules that act as dividers between sections like this:

The horizontal rule does not have a closing tag. It takes attributes such as align and width
Code Output
<hr width="50%" align="center">
Sample html program
<!DOCTYPE html>
<html>
<head>
<title>This is document title
</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document contentgoeshere </p>
</body>
</html>

•Type the above program in notepad and save with some file nameeg:sample.html
•Open the file with browser and the webpage looks likethis
Lists
HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list
elements. Lists are of three types

1) Un ordered list 2)Ordered List 3)Definitionlist

HTML Unordered Lists:An unordered list is a collection of related items that
have no special order or sequence. This list is created by using HTML <ul> tag.
Each item in the list is marked with a bullet.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul> <li>Beetroot</li>
<li>Ginger</li><li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

HTML Ordered Lists:- items are numbered list instead of bulleted, This list is created by using

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>
 </body>
</html>
HTML Definition Lists:- HTML and XHTML supports a list style which is called definition lists where
entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary,
list of terms, or other name/value list. Definition List makes use of following three tags.

1). <dl> - Defines the start of the list

2). <dt> - A term
3). <dd> - Termdefinition
4). </dl> - Defines the end of thelist
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt><dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt><dd>This stands for Hyper Text Transfer Protocol</dd>
<dl>
</html>

HTML Tables:
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into
rows and columns of cells. The HTML tables are created using the <table>tag inwhich the <tr>tag
is used to create table rows and <td>tag is used to create data cells.
Table Heading: Table heading can be defined using <th>tag. This tag will be put to replace <td>
tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown
below, otherwise you can use <th> element in any row.

Tables Backgrounds: set table background using one of the following two ways: 1)bgcolor attribute - You
can set background color for whole table or just for one cell.

background attribute - You can set background image for whole table or just for one cell. You can
also set border color also using border color attribute

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>
<head>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th,td{
border: 2px solid green;
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
 <th>1 header</th>
<th>1 header</th>
<th>1 header</th>
</tr>
<tr>
<td>1data</td>
<td>1data</td>
<td>1data</td>
</tr>
<tr>
<td>2 data</td>
<td>2 data</td>
<td>2 data</td>
</tr>
<tr>
<td>3 data</td>
<td>3 data</td>
<td>3 data</td>
</tr>
</table>
</body> </html>
HTML FORMS:
HTML Forms are required to collect some data from the site visitor. For example, during user registration
you would like to collect information such as name, email address, credit card, etc. A form will take input
from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc.
The back-end application will perform required processing on the passed data based on defined business
logic inside the application. There are various form elements available like text fields, text area fields, drop-
down menus, radio buttons, checkboxes, etc.

<form action="Script URL" method="GET|POST"> form elements like input, text area etc.
</form>
There are different types of form controls that you can use to collect data using HTML form:
 Text InputControls
 Checkboxes Controls
 Radio BoxControls
 Select BoxControls
 File Selectboxes
 Hidden Controls
 ClickableButtons
 Submit and ResetButton
Text Input Controls:-
There are three types of text input used on forms:
Single-line text input controls - This control is used for items that require only one line of user
input, such as search boxes or names. They are created usingHTML

<input type="text">defines a one-line input field for text input:

<input>tag.
Example:
<form> Firstname:<br>
<input type="text"name="firstname"><br> Lastname:<br>
<input type="text" name="lastname">
</form>
Password input controls - This is also a single-line text input but it masks the character as soon as
a user enters it. They are also created using HTML <input>tag
<input type="password">defines a password field:
<form>

User name:<br>

<input type="text" name="username"><br> User password:<br>

<input type="password" name="psw">

</form>

Multi-line text input controls - This is used when the user is required to give details that may be
longer than a single sentence. Multi-line input controls are created using HTML

<textarea> tag.
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form> Description: <br />
<textarea rows="5" cols="50" name="description"> Enter description here... </textarea>
</form>
</body>
</html>

Checkboxes Controls:-
Checkboxes are used when more than one option is required to be selected. They are
also created using HTML <input> tag but type attribute is set to checkbox.
Here is an example HTML code for a form with two checkboxes:
<html><head><title>Checkbox Control</title></head>
<body>
<form>
<input type="checkbox" name="C++" value="on"> C++
 <br>
<input type="checkbox" name="C#" value="on"> C#
<br>
<input type="checkbox" name="JAVA" value="on"> JAVA

</form>

</body>

</html>

Radio Button Control:-

Radio buttons are used when out of many options, just one option is required to be selected. They are also

created using HTML <input> tag but type attribute is set toradio

<html><head><title>Radio Box Control</title></head>

<body><p>Select a Course</p>
<form>
<input type="radio" name="subject" value="C++"> C++
<br>
<input type="radio" name="subject" value="JAVA"> JAVA
<br>

<input type="radio" name="subject" value="HTML"> HTML

</form> </body></html>

Select Box Controls :- A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more options.

<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">

<option value="C++" selected>C++</option>

<option value="JAVA">JAVA</option>

<option value="HTML">HTML</option>

</select></form>

</body></html>

File Select boxes:- If you want to allow a user to upload a file to your web site, you will need to use a file
upload box, also known as a file select box. This is also created using the <input> element but type attribute
is set to file.

<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
 <input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form> </body> </html>

Button Controls:-
There are various ways in HTML to create clickable buttons. You can also create a clickable
button using <input> tag by setting its type attribute to button. The type attribute can take the
following values:

<DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="test1.png" />
</form>
</body></html>

HTML frames:
These are used to divide your browser window into multiple sections where each section can load a separate
HTML document. A collection of frames in the browser window is known as a frameset. The window is
divided into frames in a similar way the tables areorganized: into rows andcolumns.To use frames on a page
we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the window into
frames. The rows attribute of <frameset> tag defineszontal frames and cols attribute defines vertical frames.
Each frame is indicated by <frame> tag

Attributes of Frameset tag:

 cols: The cols attribute is used to create vertical frames in web browser. This attribute is
basically used to define the no of columns and its size inside the frameset tag.
The size or width of the column is set in the frameset in the following ways:
 Use absolute value in pixel
Example:
<frameset cols = "300, 400, 300">
 Use percentage value
Example:
<frameset cols = "30%, 40%, 30%">
 Use wild card values:
Example:
<frameset cols = "30%, *, 30%">
In the above example * will take the remaining percentage for creating vertical
frame.
 rows: The rows attribute is used to create horizontal frames in web browser. This attribute is
used to define no of rows and its size inside the frameset tag.
The size of rows or height of each row use the following ways:
  Use absolute value in pixel
Example:
<frameset rows = "300, 400, 300">
 Use percentage value
Example:
<frameset rows = "30%, 40%, 30%">
 Use wild card values
Example:
<frameset rows = "30%, *, 30%">
In the above example * will take the remaining percentage for creating horizontal
frame.
 border: This attribute of frameset tag defines the width of border of each frames in pixels.
Zero value is used for no border.
Example:
<frameset border="4" frameset>
 frameborder: This attribute of frameset tag is used to specify whether the three-dimensional
border should be displayed between the frames or not for this use two values 0 and 1, where 0
defines for no border and value 1 signifies for yes there will be border.
 framespacing: This attribute of frameset tag is used to specify the amount of spacing between
the frames in a frameset. This can take any integer value as an parameter which basically
denotes the value in pixel.
Example:
 <framespacing="20">
 It means there will be 20 pixel spacing between the frames
Attributes of Frame Tag:
 name: This attribute is used to give names to the frame. It differentiate one frame from
another. It is also used to indicate which frame a document should loaded into.
Example:
 <frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />
 <frame name = "main" src = "C:/Users/dharam/Desktop/gradient3.png" />
 <frame name = "bottom" src = "C:/Users/dharam/Desktop/col_last.png" />
Here we use three frames with names as left center and right.
 src: This attribute in frame tag is basically used to define the source file that should be loaded
into the frame.The value of src can be any url.
Example:
<frame name = "left" src = "/html/left.htm" />
In the above example name of frame is left and source file will be loaded from
“/html/left.htm” in frame.
 marginwidth: This attribute in frame tag is used to specify width of the spaces in pixels
between the border and contents of left and right frame.
Example:
 <frame marginwidth="20">
 marginheight: This attribute in frame tag is used to specify height of the spaces in pixels
between the border and contents of top and bottom frame.
Example:
 <frame marginheight="20">
 scrollbar: To control the appearance of scroll bar in frame use scrollbar attribute in frame
tag. This is basically used to control the appearance of scrollbar. The value of this attribute
can be yes, no, auto. Where the value no denotes there will be no appearance of scroll bar.
Example:
 <frame scrollbar="no">
Advantages:
 It allows the user to view multiple documents within a single Web page.
 It load pages from different servers in a single frameset.
 The older browsers that do not support frames can be addressed using the tag.
Disadvantages: Due to some of its disadvantage it is rarely used in web browser.
 Frames can make the production of website complicated.
 A user is unable to bookmark any of the Web pages viewed within a frame.
 The browser’s back button might not work as the user hopes.
 The use of too many frames can put a high workload on the server.
 Many old web browser doesn’t support frames.
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
Example 1

<html>
<head>
<title>Page Title</title>
</head>
<body>
<iframe src="sample1.html" height="400" width="400"frameborder="1">
<h1>This is aHeading</h1>
<p>This is aparagraph.</p>
</iframe>
</body>
</html>
Example 2

<html>
<head>
<title>Example of HTML Frames Using col Attribute</title>
</head>
<frameset cols = "30%, 40%, 30%">
<frame name = "top" src =
"C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src =
"C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src =
"C:/Users/dharam/Desktop/col_last.png" />
 <noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>

JavaScript:
Javascript is a lightweight programming language commonly used by web developers to
add dynamic interactions to web pages, applications, servers, and even games.
Today, JavaScript has plenty of frameworks and libraries to simplify complex projects,
such as AngularJS, jQuery, and ReactJS.
JavaScripts enclosed in <script>...</script> runs during loading of the page. Some
JavaScripts, called event handlers, run as a result of the user's or browser's action (or event). For
example, clicking a button (onclick) or loaded a page (onload).
There are, therefore, two places to put your JavaScript:
between <script> and </script> container tags;
and inside the HTML tags as the event handlers (such as onclick, onmouseover, onload),
e.g.,
onclick="JavaScriptStatements".

The <script> Element

The <script>...</script> element contains the JavaScript programming statements. For example,
<script>
... Your JavaScript statements here ...
</script>

Java Script is one popular scripting language over internet. Scripting means a small sneak
(piece). It is always independent on otherlanguages.
JavaScript is most commonly used as a client side scripting language. This means that
JavaScript code is written into an HTML page. When a user requests an HTML page with JavaScript
in it, the script is sent to the browser and it's up to the browser to do something with it.
Difference between JavaScript and Java
JavaScript Java
Cannot live outside a Web page Can build stand-alone applications or live in a Web
page as an applet.
Doesn‘t need a compiler Requires a compiler
Knows all about your page Applets are dimly aware of your Web page.
Untyped Strongly typed
Somewhat object-oriented Object-oriented
There are no relationship between in java & java script. Java Script is a scripting language
that always dependent in HTML language. It used to css commands. It is mainly used to creating
DHTML pages & validating the data. This is called client side validations.
Comments
 Comments are ignored by the JavaScript runtime but greatly useful in explaining your codes
to others (and also to yourself three days later). You should use comments liberally to explain or
document your codes.

An end-of-line comment begins with // and lasts till the end of the current line. A multi-line
comment begins with /* and lasts till */.
Take note that:
 HTML comments are enclosed inside <!-- ... -->.
 CSS supports multi-line comment /* ... */, but NOT end-of-line comment //.
 JavaScript supports both /* ... */ and //, like Java/C/C++/C#.

Features of JavaScript
1. JavaScript is a client side technology, it is mainly used for gives client side validation, but it have lot
of features which are given below;
2. Java script is object based oriented language.
3. Inheritance is does not support in JavaScript, so it is called object based oriented language.
4. JavaScript was developed by Netscape (company name) & initially called live script. Later
Microsoft developed & adds some features live script then it is called “Jscript”. Jscript is nothing
but Java script. We cannot create own classes in java script.
5. Java script is designed to add interactivity to HTML pages. It is usually embedded directly
into html pages.
6. Java script is mainly useful to improve designs of WebPages, validate form data at client side,
detects (find) visitor‘s browsers, create and use to cookies, and much more.
7. Java script is also called light weight programming language, because Java script is return
with very simple syntax. Java script is containing executable code.
8. Java script is also called interpreted language, because script code can be executed without
preliminary compilation.
9. It Handling dates, time, onSubmit, onLoad, onClick, onMouseOver & etc.
10. JavaScript is case sensitive.
11. Most of the javascript control statements syntax is same as syntax of controlstatements in C
language.
12. An important part of JavaScript is the ability to create new functions within scripts.
13. Declare a function in JavaScript using function keyword.
Creating a java script: - html script tag is used to script code inside the html page.

<script> </script>

The script is containing 2 attributes. They are

1) Language attribute:-

It represents name of scripting language such as JavaScript, VbScript.

<script language=―JavaScript‖>

Type attribute: - It indicates MIME (multi purpose internet mail extension) type of scripting code.
It sets to an alpha-numeric MIME type of code.

<script type=―text / JavaScript‖>

Location of script or placing the script: - Script code can be placed in both head & body section
of html page.

Script inhead section Script in body section

<html> <html>
<head> <head>
<script type=―text/JavaScript‖>
</head>
Scriptcodehere
<body>
</script> <script type= ―text /JavaScript‖>
</head> Script codehere
<body> </script>
</body> </body>
</html> </html>
Scripting in both head & body section: - we can create unlimited number of scripts inside the
same page. So we can locate multiple scripts in both head & body section of page.

Ex: - <html>
<head>
<script type=―text / JavaScript‖>
Script code here
Program: -
<html>
<head>
<script language="JavaScript">
document.write("hai my name is yz")
</script>
</head>
<body text="red">
<marquee>
<script language="JavaScript">

document.write("hai my name is Sr")

</script></marquee>
</body>
</html>
Reacts to events: - JavaScript can be set to execute when something happens. When the page is
finished loading in browser window (or) when the user clicks on html element dynamically.

Ex: -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN">
<HTML>
 <HEAD>
<script
language="JavaScri
pt"> function myf(
)
{
document.write("Hai Kalpana")
}
</script>
</HEAD>
<BODY>
to execute script code:
<input type="button" value="click me" onclick="myf( )"> To execute script code:
<input type="button" value="touch me" onmouseover="myf( )">
</BODY>
</HTML>
JavaScript functions: - in java script functions are created with the keyword
‗function‘ as shownbelow

Syntax: - function funname( )

{

--------
}

Generally we can place script containing function head section of web page. There
are 2 ways to call the function.
1) direct callfunction
2) Events handlers to call the functiondynamically.
We can pass data to function as argument but that data will be available inside
the function.

Ex: -

<HTML>
<HEAD>
<TITLE> Function direct call</TITLE>
<script language="JavaScript">
function add(x,y)
{
z=x+y return z
}
</script>

</HEAD>
<BODY>
<script>
var r=add(30,60) document.write("addition is :"+r);
</script>
</BODY>
</HTML>
Objects
An object in JavaScript is a data type that is composed of a collection of names or keys and values,
represented in name:value pairs. The name:value pairs can consist of properties that may contain
any data type — including strings, numbers, and Booleans — as well as methods, which are
functions contained within an object.

Objects in JavaScript are standalone entities that can be likened to objects in real life. For example,
a book might be an object which you would describe by the title, author, number of pages, and
genre. Similarly, a car might be an object that you would describe by the color, make, model, and
horsepower. JavaScript arrays are also a type of object.

Objects are an integral and foundational aspect of most JavaScript programs. For example, a user
account object may contain such data as usernames, passwords, and e-mail addresses. Another
common use case is a web shopping platform’s shopping cart that could consist of an array of many
objects containing all the pertinent information for each item, such as name, price, and weight for
shipping information. A to-do list is another common application that might consist of objects.

In this tutorial, we will review how to create an object, what object properties and methods are, and
how to access, add, delete, modify, and loop through object properties.

Creating an Object
An object is a JavaScript data type, just as a number or a string is also a data type. As a data type, an
object can be contained in a variable.

There are two ways to construct an object in JavaScript:

The object literal, which uses curly brackets: {}

The object constructor, which uses the new keyword
We can make an empty object example using both methods for demonstration purposes.

First, the object literal.

// Initialize object literal with curly brackets

const objectLiteral = {};
The object literal initializes the object with curly brackets.

In this next example, we’ll use the object constructor.

// Initialize object constructor with new Object

const objectConstructor = new Object();
The same data was created using the object constructor method that is initialized with new Object().

Both of these approaches will create an empty object. Using object literals is the more common and
preferred method, as it has less potential for inconsistencies and unexpected results.

We can create an example object, contained in the variable gimli, to describe a character.
// Initialize gimli object
const gimli = {
name: "Gimli",
race: "dwarf",
weapon: "axe",
greet: function() {
return `Hi, my name is ${this.name}!`;
},
};
Our new object is gimli, which has three properties. Each property consists of a name:value pair,
also known as key:value pair. weapon is one of the property names, which is linked to the property
value "axe", a string. It has one method, with a method name of greet and the method value
consisting of the contents of the function.

Within greet, you may notice the this keyword. When using this inside of an object, it refers to the
current object, in this case gimli.

Sending gimli to the console will print out the entire object.

gimli;
Output
{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}
This output may render differently depending on what console you are using, but you should notice
that all of the values passed to the object are shown in the output.

Next, we will review a JavaScript object’s properties and methods.

Properties and Methods

Objects can have properties and methods.

A property is the association between a name (key) and value within an object, and it can contain
any datatype. A property generally refers to the characteristic of an object.

A method is a function that is the value of an object property, and therefore a task that an object can
perform.

An easy way to remember the difference between object properties and methods is to think of a
property as a noun, and a method as a verb. name, race and weapon are all nouns associated with an
object, and are properties. fight() or talk() are verbs that might be used as a method function
definition.

Accessing Object Properties

There are two ways to access an object’s properties.

Dot notation: .
Bracket notation: []
Let’s revisit our original example object, gimli.
const gimli = {
name: "Gimli",
race: "dwarf",
weapon: "axe",
greet: function() {
return `Hi, my name is ${this.name}!`;
},
};
If we want to retrieve the property value of weapon, we can do so with object dot notation by typing
the variable name of the object, followed by a dot (.) and the property or method name.

// Retrieve the value of the weapon property

gimli.weapon;
Output
"axe"
gimli.weapon outputs the property value, which is "axe". We can also retrieve the same data with
object bracket notation. Similar to how you might index and access a string, the syntax for bracket
notation is two square brackets ([]) encasing the property name.

// Retrieve the value of the weapon property

gimli["weapon"];
Output
"axe"
Both dot notation and bracket notation are used regularly. Dot notation is faster and more readable,
but has more limitations. Bracket notation allows access to property names stored in a variable, and
must be used if an object’s property contains any sort of special character.
In order to retrieve an object method, you would call it much in the same way you would call a
regular function, just attached to the object variable.
gimli.greet();
Output
"Hi, my name is Gimli!"

JavaScript Literals and Keywords

JavaScript Literals are the fixed value that cannot be changed, you do not need to specify any type
of keyword to write literals. Literals are often used to initialize variables in programming, names of
variables are string literals.

A JavaScript Literal can be a numeric, string, floating-point value, a boolean value or even an object.
In simple words, any value is literal

JavaScript supports various types of literals which are listed below:

 Numeric Literal

 Floating-Point Literal

 Boolean Literal

 String Literal

 Array Literal
  Regular Expression Literal

 Object Literal

JavaScript Numeric Literal

It can be expressed in the decimal(base 10), hexadecimal(base 16) or octal(base 8) format.
Decimal numeric literals consist of a sequence of digits (0-9) without a leading 0(zero).
Hexadecimal numeric literals include digits(0-9), letters (a-f) or (A-F).
Octal numeric literals include digits (0-7). A leading 0(zero) in a numeric literal indicates octal
format.
JavaScript Numeric Literals Example
120 // decimal literal
021434 // octal literal
0x4567 // hexadecimal literal
JavaScript Floating-Point Literal
It contains a decimal point(.)
A fraction is a floating-point literal
It may contain an Exponent.
JavaScript Floating-Point Literal Example
6.99689 // floating-point literal
-167.39894 // negative floating-point literal
JavaScript Boolean Literal
Boolean literal supports two values only either true or false.

JavaScript Boolean Literal Example

true // Boolean literal

false // Boolean literal

JavaScript String Literal
A string literal is a combination of zero or more characters enclosed within a single(') or double
quotation marks (").

JavaScript String Literal Example

"Study" // String literal

'tonight' // String literal

String literals can have some special characters too which are tabled below.

String Special Characters:

Character Description
\b

It represents a backspace.
\f It represents a Form Feed.
\n It represents a new line.
\r It represents a carriage return.
\t It represents a tab.
\v It represents a vertical tab.
\' It represents an apostrophe or single quote.
\" It represents a double quote.
\\ It represents a backslash character.
\u It represents a Unicode character specified by a four-digit hexadecimal number.
JavaScript Array Literal
An array literal is a list of zero or more expressions representing array elements that are enclosed in
a square bracket([]).
Whenever you create an array using an array literal, it is initialized with the elements specified in
the square bracket.
JavaScript Array Literal Example
var emp = ["aman","anu","charita"]; // Array literal

JavaScript Regular Expression Literal

Regular Expression is a pattern, used to match a character or string in some text. It is created by
enclosing the regular expression string between forward slashes.
JavaScript Regular Expression Example
var myregexp = /ab+c/; // Regular Expression literal
var myregexp = new RegExp("abc"); // Regular Expression literal
JavaScript Object Literal
It is a collection of key-value pairs enclosed in curly braces({}). The key-value pair is separated by
a comma.

JavaScript Object Literal Example

var games = {cricket :11, chess :2, carom: 4} // Object literal
JavaScript Keywords
Every programming language has its own keywords and reserved words. Every keyword is created
to perform a specific task and the compiler or interpreter already knows about the built-in keywords
and reserved words. JavaScript supports a rich set of keywords that are listed in the below table.

Keyword ` Description
for The for keyword is used to create a for-loop.
do/while The do and while both keywords are used to create loops in JavaScript.
if/else The if and else keywords are used to create conditional statements.
continue The continue keyword is used to resume the loop.
break It is used to break the loop.
Function The function keyword is used to declare a function.
debugger It is used to call the debugger function
class The class keyword is used to declare the class.
Return Return keyword is used to return function from the function.
Float It is used to declare float type variable.
int It is used to declare int type variable.
private It is an access modifier.
public Public is an access modifier that gives the class public access.
var Var is used to declare a variable.
switch The switch creates various statement blocks and executes only on block
depending on the condition or the case.
try/catch It creates a block for error handling of the statements.
JavaScript Data Types
JavaScript Data types are used to identify the type of data that is stored inside a variable during the
script execution. As we have already specified about the Dynamic Typed JavaScript feature so we
do not have to specify the data type of the variable while declaring it.

So JavaScript data types are basically for identification purposes to know what is being stored in the
variable, when it's stored, not before that.
Dynamically typed language is a language that infers data types at runtime. It allows storing
different types of values to a variable during programming.

Below we have a basic example, where we have defined a variable with a numeric value and then
updated it to store a string value. So JavaScript allows this.

var x = 5; // x is a number
x = "studytonight"; // x is string here.
JavaScript broadly supports three types of Data types, they are:

Primitive Type
Reference Type
Special Data Type

Let's cover each one of this one by one while seeing which category has all data types.

JavaScript Primitive Data Type

JavaScript Primitive data types can be classified further into the following types:

String Data Type

Boolean Data Type
Number Data Type

These are the most common data types, used for storing sequences of characters, true/false and
numeric values respectively. Let's cover them one by one with examples.

1. JavaScript String Data type

Whenever we write a character or sequence of characters inside single or double quotes then it
becomes String. For example "StudyTonight".

We can use both single or double-quotes to create string type values.

var str = "Ferari F60"; // string using double quotes

var str1 = 'Volvo S60'; // string using single quotes.

To have a single quote as part of the string we should use the double quote to enclose the string
value and vice versa. And if you want to include a single quote in the string which is defined by
enclosing it within single quotes only, in that case, we must use a backslash \ to escape the single
quote, and similarly, we can escape the double quote too in a string value.

Let's see an example of this:

var str1 = "Ferari's F60"; // Output: Ferari's F60

var str2 = 'Volvo "S60"'; // Output: Volvo "S60"

var str3 = 'Ferari\'s F60'; // Output: Ferari's F60

We have covered JavaScript String in details and also covered various String methods in JavaScript.

2. JavaScript Boolean Data type

JavaScript Boolean Data type is used in conditional based programming. It can have two values,
either true or false.

var isOn = true; // bulb is on

var isOn = false; // bulb is off

We get Boolean values while comparing two numbers, for example:

doument.write(4 < 2) // false

doument.write(4 > 2) // true
We will see this in the JavaScript If else Flow Control tutorial.

3. JavaScript Number Data type

JavaScript Number Data type can be with or without decimal points and can have negative and
positive values.

var x = 45; // Number without decimal point

var y = 45.90; // Number with decimal point - floating point

var z = -10; // Number with negative value

The JavaScript Number data type also represents some special values like Infinity, -Infinity and
Nan. When a positive number is divided by zero (it's a popular case of runtime error), in JavaScript
it's represented as Infinity. Similarly, when a negative number is divided by zero we will get -
Infinity.

var a = 100;
var b = -100;
var c = 0;

alert(a/c); // Infinity
alert(b/c); // -Infinity
And Nan means Not a number, if we try to perform any operation between a numeric value and a
non-numeric value like a string we will get this as output.

var a = "Studytonight";
var b = 7;

alert(a/b); // Nan
JavaScript Composite Data types
These data types can hold collections of values and more complex entities. It is further divided into
Object, Array and Function.
Object data type
Array data type
Function data type

1. JavaScript Object Data Type

In JavaScript, an object data type is used to store the collection of data. Object's properties are
written as key:value pairs, which are separated by commas and enclosed within curly braces {}.

The key (name) must always be a string, but the value can be of any data type. This is pretty similar
to a map data structure in many programming languages which also stores key-value pairs like this.

var name = { }; // It will create an empty object.

var emp = {firstname="ram", lastname="singh", salary=20000};

We have covered JavaScript Objects in a separate tutorial with examples.

2. JavaScript Array Type

JavaScript Array data type is written inside a pair of square brackets [] and is used to store multiple
values of the same datatype be it strings, numbers etc. The items in a JavaScript array are also
written in a comma-separated manner.

Each element in the array gets a numeric position, known as its index. The array index starts from 0
or we can say that array indexes are zero-based, so that the first array element is arr[0] and not
arr[1].

Let's take an example for JavaScript array:

// Creating an Array
var cars = ["Ferrari", "Volvo", "BMW", "Maseratti"];
We have covered JavaScript Arrays in a separate tutorial with examples.

3. JavaScript Function Type

You must be thinking, how a function can be a datatype. But in JavaScript functions act as a data
type which can be assigned to a variable. JavaScript Function is nothing but a set of statement inside
a code block which is used to perform a specific operation and this datatype is of callable in nature.
So, you can call it anywhere in the program whenever needed.

Since functions are objects, so it is possible to assign them to a variable.

Functions can be stored in variables, objects, and arrays. Functions can be passed as arguments to
other functions too and can be returned from other functions as well.

var welcome = function() {

return "Welcome to StudyTonight!";
}
We have covered JavaScript Functions in a separate tutorial with examples.

JavaScript Special Data types

JavaScript also has some special data types, although seeing function called as a data type would
have already been special for you. But there are two more.

Undefined Data type

Null Data type

Let's cover each of them one by one.

1. JavaScript Undefined Data Type
When a variable is just declared and is not assigned any value, it has undefined as its value. Yes,
undefined is a valid data type in JavaScript and it can have only one value which is undefined.

We can even use this value while doing some comparison. Let's take an example:

var a; // Undefined

alert(a == undefined); // returns true

2. JavaScript Null Data Type
JavaScript Null data type is used to represent no value. It is not similar to undefined, and neither it is
similar to empty value or zero value. The Null datatype means, the variable has been defined but it
contains no value.

The Null data type can have only one value, which is null. Let's take an example for this:

var a = null;

alert(a); // Output will be null

JavaScript typeOf Operator
The typeOf operator in JavaScript can be used to check the data type of any variable. Although its
an operator but we are mentioning it here, because it's oftenly used to check the data type of any
variable.

Let's take a few examples to see how this works:

// Function datatype
var welcome = function() {
return "Welcome to StudyTonight!";
}

typeOf welcome; // function

var a = null;

typeOf a; // null

// Array datatype
var cars = ["Ferrari", "Volvo", "BMW", "Maseratti"];

typeOf cars; // array

JavaScript Operators
In this tutorial, we will learn about JavaScript Operators, various different types of operators in
JavaScript and will have a few examples to see their working.

What is an Operator?

An operator is a symbol that is reserved for special tasks or operations. Operators are used to
performing operations on the operands. The operands can be variables or numeric literals or string

literals. An operator can work on one or more than one operand.

Operators are useful to modify or change data by manipulating the respective variables. For
example, there are two variables a and b and we want to add the values of both of these variables,
to do so we can use arithmetic operator + to perform addition of these two variables.

JavaScript supports a rich set of operators. These operators perform a specific task and every
operator has different properties. The list of operators is given below:

 Arithmetic Operators

 Relational Operators

 Bitwise Operators

 Logical Operators

 Assignment Operators

 String Operators

Let's cover each one of the above-mentioned operator types one by one and see the different
operators that are supported in JavaScript.

JavaScript Arithmetic Operators

JavaScript Arithmetic operators are used to perform arithmetic operations

like addition, subtraction, multiplication, etc. All the arithmetic operators have been listed in the
below table.

Operator Description Example

+ Adds two numbers 45+20 // output 65
Joins two strings
"My"+"Name" // MyName
- Subtracts two numbers 45-20 // output 25
Represents a negative number
* Multiplies two numbers 20*5 // output 100
/ Divides two numbers 45/10 // output 4.5
% Divides two numbers and returns the remainder 45%10 // output 5
++ Increments the value by one a = 10
 a++; // output will be 11
-- Decrements the value by one x=9
x--; // output will be 8
JavaScript Relational Operators
Operato Description Example
r
== It returns true if both operands are equal, otherwise returns false. 45==10 //
output false
!= It returns true if both are not equal, otherwise returns false. 45!=10 //
output true
=== It is a strict equality operator. 3===3 //
If operands are strictly equal(same value and same data type) with type output true
conversion then it returns true otherwise false.
!== It returns true if operands on both sides of this operator are not equal/not 3!=='3' //
of the same type. output false
> It returns true if left-hand side operand is greater than right-hand side 45>10 //
operand, otherwise returns false. output true
>= It returns true if left-hand side operand is greater than or equal to right- 45>=10 //
hand side operand otherwise returns false. output true
< It returns true if left-hand side operand is less than right-hand side operand, 10<45 //
otherwise returns false. output tru
<= It returns true if left-hand side operand is less than or equal to right-hand 45<=10 //
side otherwise returns false. output false
These operators are used to perform comparisons between two operands. We will use these
operators when we will cover JavaScript if else Flow Control.

JavaScript Bitwise Operators

JavaScript supports the following bitwise operators that perform bitwise operations on operands.

Operator Description Example

& (AND) Sets each bit to 1 if both bits are 1 5&1 // returns 1

0101&0001 // returns 1
| (OR) Sets each bit to 1 if one of two bits are 1 5|1 // returns 5

0101 | 0001 // returns 5 in

decimal or 65 in octal
^ (XOR) sets each bit to 1 if only one of two bits is 1. 5^1 // returns 4

0101^0001 // returns 4 in
decimal or 64 in octal
~ (NOT) inverts all the bits ~5 // output 6

~0101 // output 66 in octal

<< (Zero Fill Left shift left by pushing zeros in from the right and let the 5<<1 // returns 10
Shift) leftmost bit falls off
0101<<1 // returns 10 in
 decimal and 130 in octal
>> (Signed fill shifts right by pushing copies of leftmost bit in from 5>>1 // returns 2
right shift) the left, and let rightmost bit falls off.
0101>>1 // returns 2
>>> (Zero fill right shifts right by pushing zeros in from the left, and let 5>>>1 // returns 2
shift) rightmost bit falls off
0101>>>1 // returns 2
JavaScript Logical Operators
The logical gate's functions are used as logical operators in JavaScript. These operators are also used
in Flow control.
Operator Description Example
&& It returns true only if both the operands are true otherwise true&&false // returns
returns false false
|| It returns true if either of the operands is true. It returns false when true||false // returns
both operands are false true
! negates the operand, returns true if an operand is false and vice-versa !true // returns false
JavaScript Assignment Operators
These are the operators used while assigning the values to the variables.
Operator Description Example
= It assigns the value to left-hand side variable. x = 90;
+= It adds the right-hand side operand to left-hand side operand and then assigns x = 45;
the result to left-hand side operand. = += 20; // x =
65
-= It subtracts the right-hand side operand from the left-hand side operand and x = 45;
then assigns the result to left-hand side operand. x -= 10; // x =
35
*= It multiplies the right-hand side operand with the left-hand side operand and x = 45;
then assigns the result to left-hand side operand. x *= 10; // x =
450
/= It divides the left-hand side operand by right-hand side operand and assigns the x = 45;
result to left-hand side operand. x /= 10; // x
= 4.5
%= It divides left-hand side operand by right-hand side operand and then assigns the x = 45;
remainder to left-hand side operand. x% = 10; // x
=5

Conditional Operator

It is also called ternary operator, since it has three operands .

Operat
Description Example
or

Conditional If Condition is true? Then value X : Otherwise

?:
Expression value Y
Statements in Javascript
In any program, a typical statement aims to execute a command or, in simple words, do something. Control
Statements are similar to other statements. But they are different at a certain angle. They have the ability
to determine which of the other statements should be executed and at what time it should be executed.
Control statements are intended to allow users to write scripts that determine which lines of code get
evaluated and how many times they get evaluated. Control statements are classified into two types.
Types of Control Statements in JS
There are basically two types of control statements in Javascript. Namely, Conditional Statements and
Iterative Statements (in simple words, Loops).
Conditional Statements: These are the ones that make a decision. There is an expression that gets passed,
and then the conditional statement decides on it. It is either YES or NO.
Iterative Statements (Loop): This is a type of statement that keeps repeating itself till a condition is
satisfied. In simple words, if we have an expression, until and unless it gets satisfied, the statement will
keep repeating itself.
Examples of Control Statements
Now let us take a look at some examples and try to understand more about control statements.

Conditional Statements
This is where we decide the flow of a program's execution. Based on the outcome, Conditional Statements
determine the next step. The outcome of a conditional assertion can be True, or it can be false. If the
condition comes out to be true, the programme goes to the next step. On the other hand, if the condition
comes out to be false, the programme goes out to a different. Unlike Loop statements, these statements
get executed only once.
Below we can see the different types of Conditional Statements.

If Statment
As the name suggests, we use the If Statement if we want to check for a specific condition. When we are
using the IF condition, the inner code block gets executed only when the given condition is satisfied.
Syntax:
if (condition_is_given_here) {
// If the condition is met, the code block will get executed.
}

If-Else Statement
The If-Else Statement is an extended version of the If statement. We use this one when we want to check a
condition we want and another one if the evaluation turns out otherwise.
Syntax:
if (condition_is_given_here) {
// If the condition is met, this code block will get executed.
}
else {
/*If the condition is not met and turns out to be false, this code block will get executed. */
}
As we can see, the first block of code gets executed when the condition in IF-ELSE is satisfied. The second
block of code gets executed when the condition does not get satisfied.
Switch Statement
A switch statement is similar to an IF statement. It is used when the user needs to execute one code block
execution from their own choices out of several code block execution options. It is based on the outcome of
the expression given. Switch statements hold an expression that is compared to the values of the following
cases. If a match is found, the code associated with that case is executed.
Syntax:
switch (expression) {
case first:
// Here, we add the code block that is to be executed
Break;
// Break creates a separation between each case
case second:
// Here, we add the code block that is to be executed
Break;
case third:
// Here, we add the code block that is to be executed
Break;
default:
// Here, we add the default code block that is to be executed. It happens if none of the above cases is
executed.
}
At the beginning of the code, an expression gets checked and compared with the cases given. If the given
expression matches the first case, the code block present within the case gets executed. The same is true
for the second case and the third case. However, when the expression passed matches none of the cases
given, the code enters the default case and executes the code that is under the default case.
Iterative Statement
Looping is a strong feature in any programming language. This is for repeatedly executing a sequence of
instructions while the expression passed is met. A simple example would be to print "Hello Ninjas" ten
times. Now, typing the same print statement with "Hello Ninjas" ten times in a row will take time. As an
influence, it will also affect the execution time. This is the place where looping comes to play.

We should know that iterative statements are divided into three types: WHILE, DO-WHILE, and FOR. Let's
break each down with syntax and take a look at them.
While Statement
One of the control flow statements is the. When the condition is met, they run a code block. However,
unlike the IF statement, while keeps repeating itself until the condition is met. The difference between IF
and while is that IF executes code when the condition is met. Whereas while statement keeps repeating
itself till the condition is met.
Syntax:
while (the_condition_is_put_here)
{
// The code block is executed when the conditions are met
}
Do-While Statement
We can call the Do-While Statement a sibling of the While Statement. Similar to a while loop, but with the
addition of a condition at the end of the loop. DO-WHILE, also known as an Exit Control Loop, performs the
code and then checks for the condition.

Syntax:
while
{
// Code block gets executed till the condition is satisfied
} (we_add_the_conditon_here)
The loop will get repeated if the condition at the end is met.
For Statement
Now let us take a look at the For Loop. A for loop will run a code block several times. The FOR statement is
shorter and easier to debug than other loops. This is because it contains initialization, condition, and
increment or decrement on a single line.
Syntax:

for (here_we_put initialize; condition; increment/decrement)

{
// Here_we_put_the_code_block_that_we_need_to_execute
}

The loop is started using initialize. It uses a declared variable. The exit condition for the loop then gets
tested in the condition section. The code block inside is run when this condition returns true.

JavaScript Events
JavaScript Events are the building blocks of an interactive webpage. In JavaScript, events refer
to the actions that are detected by a web browser whenever it detects any user movement on the
browser screen. So everything starting from the movement of the mouse, keyboard click, hover over
any particular HTML element, form submission, click on any input field, selection of a value from a
dropdown, and everything else you do on a webpage, the browser generates an event for it which
can be handled using JavaScript.

JavaScript enables us to write scripts to be executed when any of these events occur. For example,
the onclick event is detected by the browser whenever you click the mouse button and using
JavaScript we can perform any action on mouse click

JavaScript mouse events

Several mouse events are available in JavaScript that can be used to react to user
interaction with a web page. The following are a few of the most typical mouse events :

Mouse Description
event
click When the mouse button is clicked (pressed and released) on an element, this event is
triggered.
mouseover When the mouse pointer enters an element, the mouseover event is triggered.
 mouseout This event is triggered when the mouse pointer leaves an element.
mousedown When the mouse button is pressed down on an element, this event is triggered.
mouseup Fires when the mouse button on an element is released.
mousemove This event is triggered when the mouse pointer moves over an element.

JavaScript keyboard events

There are several keyboard events in JavaScript that you can use to detect when a user
interacts with the keyboard on a web page. The following table lists and describes the
keyboard events in JavaScript:

Keyboard Description
event
keydown When a key on the keyboard is pressed, this event occurs. You can use it to determine which
key was pressed by accessing the event object's "keyCode" or "which" property.
keyup When a key on the keyboard is released, this event occurs. You can use it to determine which
key was released by accessing the event object's "keyCode" or "which" property.
keypress When a key on the keyboard is pressed and a character is generated, this event is triggered.
You can use it to determine which character was generated by accessing the event object's
"keyCode" or "charCode" property.
input Typing or pasting text in an input field triggers this event. It detects text entered into input
fields.

JavaScript form events

Several events in JavaScript can be used to monitor changes and interactions with HTML
forms. The following table lists and describes the form events in JavaScript:

Form Description
event
submit When a form is submitted, either by clicking the submit button or by pressing the Enter key
while a form element is in focus, this event is started.
reset When a user clicks the Reset button on a form, this event is started.
input When the value of a form input field changes, as happens when a user types into a text input
or chooses an option in a select element, this event is triggered.
change When a form element's value changes and it loses focus, such as when a user selects a new
option in a select element or unchecks a checkbox, this event is triggered.
focus When an element receives focus, such as when a user clicks on a form element or uses the
keyboard to move to it, this event is triggered.
blur When an element loses focus, such as when a user clicks outside of a form element or uses
the keyboard to navigate away from it, this event is launched.
JavaScript window events

To recognize and react to window-related events, JavaScript offers a variety of events,

which are listed and described in the following table:

Window Description
event
load This event is triggered when the window's entire content, including images, scripts, and
stylesheets, has been loaded.
resize When the size of the window changes, either by resizing the browser window or switching
between portrait and landscape modes on a mobile device, this event occurs.
scroll This event occurs when the user scrolls the window's content using the scrollbar or touch
gestures.
unload This event occurs just before the window is closed or navigated away from, giving you the
opportunity to perform cleanup tasks or prompt the user to confirm their action.
beforeunload This event occurs before the unload event, allowing you to prompt the user to confirm their
action or prevent the window from closing.
error This event is triggered when an error occurs while the window or its content is being loaded,
such as a missing image or a syntax error in a script.

onclick Event Type

<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>

<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say
Hello" />
</form>
</body>
</html>

onmouseover and onmouseout

<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
 function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>

<body>
<p>Bring your mouse inside the division to see the
result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

Onclick Event
<html>
<head>
<script type = "text/JavaScript"
function submit() {
alert("click performed")
}
</script>
</head>
<body>
<form>
<input type = "button" onclick = "submit()" value = "click performed" />
</form>
</body>
</html>

JavaScript Popup Boxes

JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
Alert Box
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax
window.alert("sometext");
The window.alert() method can be written without the window prefix.
Example
alert("I am an alert box!");
Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
 Syntax
window.confirm("sometext");
The window.confirm() method can be written without the window prefix.
Example
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after
entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns
null.
Syntax
window.prompt("sometext","defaultText");
The window.prompt() method can be written without the window prefix.
Example
let person = prompt("Please enter your name", "Harry Potter");
let text;
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}

Javascript Window
The Window object represents the browser window. It is the topmost object in the browser's
window hierarchy. It is supported by all browsers.

The window object represents the frame or window in which the webpage is contained in the
browser. It is a Global object, its properties and functions can be accessed without referring
to it.

Example: window.alert() is used to alert something but we can directly use alert() without
referring to the window object.

The window is the root object, even the document is the property of the window object. You can
use it to find out screen height, screen width, history, localStorage, location, events, etc.
Everything that is visible and non-visible on a webpage all are part of the windowcrip
window.alert("Page Loaded!");
alert("Page Loaded!");
 // Both are the same
window.console.log("Hello World!");
console.log("Hello World!");

// Both are the same

window.document.getElementById("id1");
document.getElementById("id1"); t

Window Properties
The window object has lots of properties that can be used to get information about the window.
Some of the most commonly used properties are listed below.

Property Description

window.innerHeight Returns the height of the window in pixels.

window.innerWidth Returns the width of the window in pixels.

window.outerHeight Returns the height of the browser window in pixels.

window.outerWidth Returns the width of the browser window in pixels.

window.screenX Returns the horizontal coordinate of the window relative to the screen.

window.screenY Returns the vertical coordinate of the window relative to the screen.

window.screenLeft Returns the horizontal coordinate of the window relative to the screen.

window.screenTop Returns the vertical coordinate of the window relative to the screen.

window.screen.height Returns the height of the screen in pixels.

window.screen.width Returns the width of the screen in pixels.

window.screen.availHeigh Returns the height of the screen in pixels, fewer interface features like the
t Windows Taskbar.

window.screen.availWidth Returns the width of the screen in pixels, fewer interface features like the
Windows Taskbar.

window.screen.colorDepth Returns the color depth of the screen in bits per pixel.

window.screen.pixelDepth Returns the color depth of the screen in bits per pixel.

window.location Returns the Location object for the window that contains information about the
URL of the document and provides methods for changing that URL and loading
another URL.
 window.history Returns the History object for the window that contains information about the
URLs visited in the window.

window.navigator Returns the Navigator object for the window that contains information about the
browser.

window.performance Returns the Performance object for the window that contains information about
the performance of the window.

window.localStorage Returns the Storage object for the window that contains information about the
local storage of the window.

window.sessionStorage Returns the Storage object for the window that contains information about the
session storage of the window.

window.document Returns the Document object for the window that contains information about the
document loaded in the window.

window.frames Returns the array of all the frames (iframes) in the window.

window.self Returns the window itself.

Window Methods
The window object has lots of methods that can be used to perform different tasks. Some of
the most commonly used methods are listed below.

Method Description

window.alert() Displays an alert box with a message and an OK button.

window.confirm() Displays a dialog box with a message and an OK and a Cancel button.

window.prompt() Displays a dialog box that prompts the visitor for input.

window.open() Opens a new browser window.

window.close() Closes the current browser window.

window.moveTo() Moves the window relative to the upper-left corner of the screen.

window.moveBy() Moves the window relative to its current position.

window.resizeTo() Resizes the window to the specified width and height.

window.resizeBy() Resizes the window by the specified pixels.

 window.print() Prints the content of the window.

window.find() Searches for a specified string in the document.

window.focus() Brings the window to the front.

window.blur() Removes focus from the window.

window.scroll() Scrolls the document by the specified number of pixels.

window.scrollBy() Scrolls the document by the specified number of pixels.

window.scrollTo() Scrolls the document to the specified coordinates.

window.scrollByLines() Scrolls the document by the specified number of lines.

window.scrollByPages( Scrolls the document by the specified number of pages.

)

window.setTimeout() Call a function or evaluates an expression after a specified number of milliseconds.

window.setInterval() Repeatedly calls a function or evaluates an expression at specified intervals (in

milliseconds).

Window Events
The window object has lots of events that are triggered when a specific action is performed.
Some of the most commonly used events are listed below

Event Description

onload Fires when the window has finished loading.

onunload Fires when the window is closed.

onresize Fires when the window is resized.

onscroll Fires when the window is scrolled.

onfocus Fires when the window gets focused.

onblur Fires when the window loses focus.

onerror Fires when an error occurs.

 <script>
function createWindow() {
var win = window.open("", "My Window", "width=500,
height=200,screenX=100,screenY=100");
// window properties
var isclose = win.closed;
var name = win.name;
// writing in the current document
document.write(isclose +"<br>");
document.write(name +"<br>");
document.write(win.screenY +"<br>");
document.write(win.screenX +"<br>");
// we can access the new window document like this
win.document.write("Hello World!");
}
</script>

</body>
</html>

JavaScript Document Object

JavaScript Document object is an object that provides access to all HTML elements of a document.
When an HTML document is loaded into a browser window, then it becomes a document object.

The document object stores the elements of an HTML document, such as HTML, HEAD, BODY, and
other HTML tags as objects.

JavaScript Document Object Properties

As we know, a property of an object is the value associated with the object. The property is accessed
by using the following notation:
objectName.propertyName
where objectName is the name of the object and propertyName is the name of its property.
Now we will show you the properties of document object in the table given below:

Properties Description

cookie returns a report that contains all the visible and unexpired cookies associated with
the document

domain returns the domain name of the server from which the document has originated

lastModified returns the date on which document was last modified

 documentMode returns the mode used by the browser to process the document

readyState returns the loading status of the document.

referrer returns the URL of the documents referred to in an HTML document

title returns the name of the HTML document defined between the starting and ending
tags of the TITLE element

URL returns the full URL of the HTML document.

Let's take an example, to see the document object properties in action:

JavaScript Document Object Methods

JavaScript Document object also provides various methods to access HTML elements.
Now we will show you some of the commonly used methods of the document object:

Methods Description Syntax

open() opens an HTML document.open(mimetype, replace

document to display the
output

close() closes an HTML document.close()

document

write() Writes HTML document.write(exp1, exp2, ...

expressions or JavaScript
code into an HTML
document

writeln() write a new line character document.writeln(exp1, exp2, ...)

after each HTML
expressions or JavaScript
Code

getElementById() returns the reference of document.getElementById(id)

first element of an HTML
document with the
specified id.

getElementByName() returns the reference of an document.getElementsByName(name)

element with the specified
name
 getElementsByTagName( returns all elements with document.getElementsByTagName(tagname)
) the specified tagname

Now let's take an example, to see the document object methods like open(), write(),
and getElementById() to explain their usage. See the below example:

<!doctype html>
<head>
<title>JS Document Methods Example</title>
</head>
<body>
<h3>Document Methods Example</h3>
<p id="demo">It Will change</p>

<script>
// Open document
document.open();
// writing
document.write("Hello" +"<br>");
document.getElementById("demo").innerHTML = "Set by ID";
</script>
</body>
</html>

JavaScript Browser Object Model

JavaScript provides WebAPIs and Interfaces(object types) that we can use while developing web
application or website. These APIs and objects help us in controlling the lifecycle of the webpage
and performing various actions like getting browser information, managing screen size, opening and
closing new browser window, getting URL information or updating URL, getting cookies and local
storage, etc.

There is so much that you can do using these WebAPIs and Interfaces. All the supported Web APIs
and Interfaces in JavaScript are listed on the Mozilla Developer website.

The Iterfaces (object types) which help us interact with the browser window are known
as Browser objects. Browser object is not an official term but its a group of objects which belongs
to different WebAPIs but are used for managing various browser related information and actions.

For example, when an HTML document is opened in a browser window, the browser interprets the
document as a collection of hierarchical objects(HTML tags) and accordingly displays the data
contained in these objects(HTML page rendering). The browser parses the document and creates a
collection of objects, which defines the documents and its details. We have shown the various
objects that can be used to access various components of the browser window in the picture below:
The browser objects are of various types, used for interacting with the browser and belongs to
different APIs. The collection of these Browser objects is also known as Browser object
Model(BOM).

The default object of browser is Window which means you can call its functions directly.

Browser Objects:

The objects listed below are called browser objects.

 Window - part of DOM API

 Navigator

 Document - part of DOM API

 Screen - property of Window object

 History - property of Window object

 Location - property of Window and Document object

Window Object

It is used to interact with the browser window which displays the web page. It generally represents
a tab in browser, but some actions like window width and height will affect the complete browser
window.

We have covered JavaScript Window Object separately, in detail.

Navigator Object

It acts as a storehouse of all the data and information about the Browser software used to access
the webpage and this object is used to fetch information related to the browser for example,
whether the user is using Chrome browser or Safari browser, which version of browser is being used
etc.

We have covered JavaScript Navigator Object separately, in detail.

Document Object

This object represent the HTML document that is loaded into the browser. A document object is
an object that provides access to all HTML elements of a document(webpage). We can use this
object to append a new HTML tag to the webpage, modify any exsiting HTML tag, etc.

We have covered JavaScript Document Object separately, in detail.

History Object

It stores Uniform Resource Locator(URLs) visited by a user in the browser. It is a built-in object
which is used to get browser history. This object is a property of the JavaScript Window object.

We have covered JavaScript History Object separately, in detail.

Screen Object

It is a built-in object which is used to fetch information related to the browser screen, like the
screen size, etc. It is also obtained from the Window object.

We have covered JavaScript Screen Object separately, in detail.

Location Object

Location is a built-in object which represent the location of the object to which it is linked,
which can be Window or Document. Both the Document and Window interface have a linked
location property.

We have covered JavaScript Location Object separately, in detail.

From the next tutorial, we will cover all these objects, one by one, in detail, with examples to see
how we can use them to interact with browser and perform various different actions.

JavaScript Built-in Functions

Number Methods

The Number object contains only the default methods that are part of
every object's definition.

Sr.N Method & Description

o.

1 constructor()

Returns the function that created this object's instance. By default this is the Number
object.

2 toExponential()

Forces a number to display in exponential notation, even if the number is in the range in
which JavaScript normally uses standard notation.

3 toFixed()

Formats a number with a specific number of digits to the right of the decimal.

4 toLocaleString()

Returns a string value version of the current number in a format that may vary according
to a browser's locale settings.

5 toPrecision()

Defines how many total digits (including digits to the left and right of the decimal) to
display of a number.

6 toString()

Returns the string representation of the number's value.

7 valueOf()

Returns the number's value.

Boolean Methods

Here is a list of each method and its description.

Sr.N Method & Description

o.

1 toSource()

Returns a string containing the source of the Boolean object; you can
use this string to create an equivalent object.

2 toString()

Returns a string of either "true" or "false" depending upon the value

of the object.

3 valueOf()

Returns the primitive value of the Boolean object.

String Methods

Here is a list of each method and its description.

Sr.N Method & Description

o.

1 charAt()

Returns the character at the specified index.

2 charCodeAt()

Returns a number indicating the Unicode value of the character at the given index.

3 concat()

Combines the text of two strings and returns a new string.

4 indexOf()

Returns the index within the calling String object of the first occurrence of the specified
value, or -1 if not found.
5 lastIndexOf()

Returns the index within the calling String object of the last occurrence of the specified
value, or -1 if not found.

6 localeCompare()

Returns a number indicating whether a reference string comes before or after or is the
same as the given string in sort order.

7 length()

Returns the length of the string.

8 match()

Used to match a regular expression against a string.

9 replace()

Used to find a match between a regular expression and a string, and to replace the
matched substring with a new substring.

10 search()

Executes the search for a match between a regular expression and a specified string.

11 slice()

Extracts a section of a string and returns a new string.

12 split()

Splits a String object into an array of strings by separating the string into substrings.

13 substr()

Returns the characters in a string beginning at the specified location through the
specified number of characters.

14 substring()

Returns the characters in a string between two indexes into the string.

15 toLocaleLowerCase()

The characters within a string are converted to lower case while respecting the current
locale.
16 toLocaleUpperCase()

The characters within a string are converted to upper case while respecting the current
locale.

17 toLowerCase()

Returns the calling string value converted to lower case.

18 toString()

Returns a string representing the specified object.

19 toUpperCase()

Returns the calling string value converted to uppercase.

20 valueOf()

Returns the primitive value of the specified object.

String HTML wrappers

Here is a list of each method which returns a copy of the string

wrapped inside the appropriate HTML tag.

Sr.N Method & Description

o.

1 anchor()

Creates an HTML anchor that is used as a hypertext target.

2 big()

Creates a string to be displayed in a big font as if it were in a

<big> tag.

3 blink()

Creates a string to blink as if it were in a <blink> tag.

4 bold()

Creates a string to be displayed as bold as if it were in a <b>

tag.
 5 fixed()

Causes a string to be displayed in fixed-pitch font as if it were

in a <tt> tag

6 fontcolor()

Causes a string to be displayed in the specified color as if it

were in a <font color="color"> tag.

7 fontsize()

Causes a string to be displayed in the specified font size as if it

were in a <font size="size"> tag.

8 italics()

Causes a string to be italic, as if it were in an <i> tag.

9 link()

Creates an HTML hypertext link that requests another URL.

10 small()

Causes a string to be displayed in a small font, as if it were in a

<small> tag.

11 strike()

Causes a string to be displayed as struck-out text, as if it were

in a <strike> tag.

12 sub()

Causes a string to be displayed as a subscript, as if it were in a

<sub> tag

13 sup()

Causes a string to be displayed as a superscript, as if it were in

a <sup> tag

Array Methods

Here is a list of each method and its description.

Sr.N Method & Description
o.

1 concat()

Returns a new array comprised of this array joined with other

array(s) and/or value(s).

2 every()

Returns true if every element in this array satisfies the provided

testing function.

3 filter()

Creates a new array with all of the elements of this array for
which the provided filtering function returns true.

4 forEach()

Calls a function for each element in the array.

5 indexOf()

Returns the first (least) index of an element within the array

equal to the specified value, or -1 if none is found.

6 join()

Joins all elements of an array into a string.

7 lastIndexOf()

Returns the last (greatest) index of an element within the array

equal to the specified value, or -1 if none is found.

8 map()

Creates a new array with the results of calling a provided

function on every element in this array.

9 pop()

Removes the last element from an array and returns that

element.

10 push()
 Adds one or more elements to the end of an array and returns
the new length of the array.

11 reduce()

Apply a function simultaneously against two values of the array

(from left-to-right) as to reduce it to a single value.

12 reduceRight()

Apply a function simultaneously against two values of the array

(from right-to-left) as to reduce it to a single value.

13 reverse()

Reverses the order of the elements of an array -- the first

becomes the last, and the last becomes the first.

14 shift()

Removes the first element from an array and returns that

element.

15 slice()

Extracts a section of an array and returns a new array.

16 some()

Returns true if at least one element in this array satisfies the

provided testing function.

17 toSource()

Represents the source code of an object

18 sort()

Sorts the elements of an array.

19 splice()

Adds and/or removes elements from an array.

20 toString()
 Returns a string representing the array and its elements.

21 unshift()

Adds one or more elements to the front of an array and returns

the new length of the array.

Date Methods

Here is a list of each method and its description.

Sr.N Method & Description

o.

1 Date()

Returns today's date and time

2 getDate()

Returns the day of the month for the specified date according to local time.

3 getDay()

Returns the day of the week for the specified date according to local time.

4 getFullYear()

Returns the year of the specified date according to local time.

5 getHours()

Returns the hour in the specified date according to local time.

6 getMilliseconds()

Returns the milliseconds in the specified date according to local time.

7 getMinutes()

Returns the minutes in the specified date according to local time.

8 getMonth()

Returns the month in the specified date according to local time.

9 getSeconds()
 Returns the seconds in the specified date according to local time.

10 getTime()

Returns the numeric value of the specified date as the number of milliseconds since January
1, 1970, 00:00:00 UTC.

11 getTimezoneOffset()

Returns the time-zone offset in minutes for the current locale.

12 getUTCDate()

Returns the day (date) of the month in the specified date according to universal time.

13 getUTCDay()

Returns the day of the week in the specified date according to universal time.

14 getUTCFullYear()

Returns the year in the specified date according to universal time.

15 getUTCHours()

Returns the hours in the specified date according to universal time.

16 getUTCMilliseconds()

Returns the milliseconds in the specified date according to universal time.

17 getUTCMinutes()

Returns the minutes in the specified date according to universal time.

18 getUTCMonth()

Returns the month in the specified date according to universal time.

19 getUTCSeconds()

Returns the seconds in the specified date according to universal time.

20 getYear()

Deprecated - Returns the year in the specified date according to local time. Use
 getFullYear instead.

21 setDate()

Sets the day of the month for a specified date according to local time.

22 setFullYear()

Sets the full year for a specified date according to local time.

23 setHours()

Sets the hours for a specified date according to local time.

24 setMilliseconds()

Sets the milliseconds for a specified date according to local time.

25 setMinutes()

Sets the minutes for a specified date according to local time.

26 setMonth()

Sets the month for a specified date according to local time.

27 setSeconds()

Sets the seconds for a specified date according to local time.

28 setTime()

Sets the Date object to the time represented by a number of milliseconds since January 1,
1970, 00:00:00 UTC.

29 setUTCDate()

Sets the day of the month for a specified date according to universal time.

30 setUTCFullYear()

Sets the full year for a specified date according to universal time.

31 setUTCHours()

Sets the hour for a specified date according to universal time.

32 setUTCMilliseconds()
 Sets the milliseconds for a specified date according to universal time.

33 setUTCMinutes()

Sets the minutes for a specified date according to universal time.

34 setUTCMonth()

Sets the month for a specified date according to universal time.

35 setUTCSeconds()

Sets the seconds for a specified date according to universal time.

36 setYear()

Deprecated - Sets the year for a specified date according to local time. Use setFullYear
instead.

37 toDateString()

Returns the "date" portion of the Date as a human-readable string.

38 toGMTString()

Deprecated - Converts a date to a string, using the Internet GMT conventions. Use
toUTCString instead.

39 toLocaleDateString()

Returns the "date" portion of the Date as a string, using the current locale's conventions.

40 toLocaleFormat()

Converts a date to a string, using a format string.

41 toLocaleString()

Converts a date to a string, using the current locale's conventions.

42 toLocaleTimeString()

Returns the "time" portion of the Date as a string, using the current locale's conventions.

43 toSource()

Returns a string representing the source for an equivalent Date object; you can use this value
to create a new object.
44 toString()

Returns a string representing the specified Date object.

45 toTimeString()

Returns the "time" portion of the Date as a human-readable string.

46 toUTCString()

Converts a date to a string, using the universal time convention.

47 valueOf()

Returns the primitive value of a Date object.

Date Static Methods

In addition to the many instance methods listed previously, the Date

object also defines two static methods. These methods are invoked
through the Date( ) constructor itself −

Sr.N Method & Description

o.

1 Date.parse( )

Parses a string representation of a date and time and returns the internal millisecond
representation of that date.

2 Date.UTC( )

Returns the millisecond representation of the specified UTC date and time.

Math Methods

Here is a list of each method and its description.

Sr.N Method & Description

o.

1 abs()

Returns the absolute value of a number.

2 acos()

Returns the arccosine (in radians) of a number.

3 asin()

Returns the arcsine (in radians) of a number.

4 atan()

Returns the arctangent (in radians) of a number.

5 atan2()

Returns the arctangent of the quotient of its arguments.

6 ceil()

Returns the smallest integer greater than or equal to a number.

7 cos()

Returns the cosine of a number.

8 exp()

Returns EN, where N is the argument, and E is Euler's constant, the base of the natural
logarithm.

9 floor()

Returns the largest integer less than or equal to a number.

10 log()

Returns the natural logarithm (base E) of a number.

11 max()

Returns the largest of zero or more numbers.

12 min()

Returns the smallest of zero or more numbers.

13 pow()

Returns base to the exponent power, that is, base exponent.

14 random()

Returns a pseudo-random number between 0 and 1.

15 round()

Returns the value of a number rounded to the nearest integer.

16 sin()

Returns the sine of a number.

17 sqrt()

Returns the square root of a number.

18 tan()

Returns the tangent of a number.

19 toSource()

Returns the string "Math".

RegExp Methods

Here is a list of each method and its description.

Sr.No. Method & Description

1 exec()

Executes a search for a match in its string parameter.

2 test()

Tests for a match in its string parameter.

3 toSource()

Returns an object literal representing the specified object; you can use this value to create a
new object.
 4 toString()

Returns a string representing the specified object.

JavaScript Form Validation

It is important to validate the form submitted by the user because it can have inappropriate values.
So, validation is must to authenticate user.

JavaScript provides facility to validate the form on the client-side so data processing will be faster
than server-side validation. Most of the web developers prefer JavaScript form validation.

Through JavaScript, we can validate name, password, email, date, mobile numbers and more fields.

Forms are used on webpages for the user to enter their required details that further send to the server for
processing. A form is also known as a web form or HTML form. Examples of form use are prevalent in e-
commerce websites, online banking, and online surveys to name a few.
Prerequisites:
 HTML is used to create the form.
 CSS to design the layout of the form.
 JavaScript to validate the form.
Validating a form: The data entered into a form needs to be in the right format and certain fields need to be
filled in order to effectively use the submitted form. Username, password, and contact information are
some details that are mandatory in forms and thus need to be provided by the user.

JavaScript Form Validation Example

In this example, we are going to validate the name and password. The name can’t be empty and
password can’t be less than 6 characters long.

Here, we are validating the form on form submit. The user will not be forwarded to the next page
until given values are correct.

<html>
<body>
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;

if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post"
action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return
validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>

JavaScript Retype Password Validation

<html>
<head>
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;

if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>
</head>
<body>

<form name="f1" action="http://www.javatpoint.com/javascriptpages/valid.jsp"

onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>

</body>
</html>
JavaScript Number Validation
<html>
<head>
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter Numeric value only";
return false;
}else{
return true;
}
}
</script>
</head>

<body>
<form name="myform" action="http://www.javatpoint.com/javascriptpages/valid.jsp"
onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
</form>

</body>
</html>
HTML5
The term HTML5 is essentially a buzzword that refers to a set of modern web technologies. This
includes the HTML Living Standard, along with JavaScript APIs to enhance storage, multimedia,
and hardware access. You may sometimes hear about "new HTML5 elements", or find HTML5
described as a new version of HTML.

HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language.
HTML is an abbreviation of Hypertext and Markup language. Hypertext defines the link between the web
pages. The markup language is used to define the text document within the tag which defines the structure
of web pages. HTML 5 is the fifth and current version of HTML. It has improved the markup available for
documents and has introduced application programming interfaces (API) and Document Object Model
(DOM).
Features:
 It has introduced new multimedia features which supports both audio and video controls by using
<audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>, <section> and <figure> are added.
 Drag and Drop- The user can grab an object and drag it further dropping it to a new location.
 Geo-location services- It helps to locate the geographical location of a client.
 Web storage facility which provides web application methods to store data on the web browser.
 Uses SQL database to store data offline.
 Allows drawing various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e., <!doctype html>
 Easy character encoding i.e., <meta charset=”UTF-8″>

 There is a list of newly included tags in HTML 5. These HTML 5 tags (elements) provide a
better document structure. This list shows all HTML 5 tags in alphabetical order with
description.

 List of HTML 5 Tags

Tag Description
<article> This element is used to define an independent piece of content in a document, that may
be a blog, a magazine or a newspaper article.
<aside> It specifies that article is slightly related to the rest of the whole page.
<audio> It is used to play audio file in HTML.
<bdi> The bdi stands for bi-directional isolation. It isolates a part of text that is formatted in
other direction from the outside text document.
<canvas> It is used to draw canvas.
<data> It provides machine readable version of its data.
<datalist> It provides auto complete feature for textfield.
<details> It specifies the additional information or controls required by user.
<dialog> It defines a window or a dialog box.
<figcaption It is used to define a caption for a <figure> element.
>
<figure> It defines a self-contained content like photos, diagrams etc.
<footer> It defines a footer for a section.
<header> It defines a header for a section.
<main> It defines the main content of a document.
<mark> It specifies the marked or highlighted content.
<menuite It defines a command that the user can invoke from a popup menu.
m>
<meter> It is used to measure the scalar value within a given range.
<nav> It is used to define the navigation link in the document.
<progress It specifies the progress of the task.
>
<rp> It defines what to show in browser that don't support ruby annotation.
<rt> It defines an explanation/pronunciation of characters.
<ruby> It defines ruby annotation along with <rp> and <rt>.
<section> It defines a section in the document.
<summary It specifies a visible heading for <detailed> element.
>
<svg> It is used to display shapes.
<time> It is used to define a date/time.
<video> It is used to play video file in HTML.
<wbr> It defines a possible line break.

Difference between HTML and HTML5

HTML HTML5
It didn’t support audio and video without the use of It supports audio and video controls with
flash player support. the use of <audio> and <video> tags.
It uses cookies to store temporary data. It uses SQL databases and application
cache to store offline data.
Does not allow JavaScript to run in browser. Allows JavaScript to run in background.
This is possible due to JS Web worker API
in HTML5.
Vector graphics is possible in HTML with the help of Vector graphics is additionally an integral a
various technologies such as VML, Silver-light, part of HTML5 like SVG and canvas.
Flash, etc.
 It does not allow drag and drop effects. It allows drag and drop effects.
Not possible to draw shapes like circle, rectangle, HTML5 allows to draw shapes like circle,
triangle etc. rectangle, triangle etc.
It works with all old browsers. It supported by all new browser like Firefox,
Mozilla, Chrome, Safari, etc.
<HTML>,<Body> , and <Head> tags are mandatory These tags can be omitted while writing
while writing a HTML code. HTML code.
Older version of HTML are less mobile-friendly. HTML5 language is more mobile-friendly.
Doctype declaration is too long and complicated. Doctype declaration is quite simple and
easy.
Elements like nav, header were not present. New element for web structure like nav,
header, footer etc.
Character encoding is long and complicated. Character encoding is simple and easy.
It is almost impossible to get true GeoLocation of One can track the GeoLocation of a user
user with the help of browser. easily by using JS GeoLocation API.
It can not handle inaccurate syntax. It is capable of handling inaccurate syntax.
Being an older version , it is not fast , flexible , and It is efficient, flexible and more fast in
efficient as compared to HTML5. comparison to HTML.
Attributes like charset, async and ping are absent in Attributes of charset, async and ping are a
HTML. part of HTML 5.

HTML style using CSS

Let's suppose we have created our web page using a simple HTML code, and we want something
which can present our page in a correct format, and visibly attractive. So to do this, we can style our
web page with CSS (Cascading Stylesheet) properties.

CSS is used to apply the style in the web page which is made up of HTML elements. It describes the
look of the webpage.

CSS provides various style properties such as background color, padding, margin, border-color, and
many more, to style a webpage.

Each property in CSS has a name-value pair, and each property is separated by a semicolon (;).

Example:

<body style="text-align: center;">

<h2 style="color: red;">Welcome to javaTpoint</h2>

<p style="color: blue; font-size: 25px; font-style: italic ;">This is a great website to learn technologies in very
simple way. </p>

</body>

Three ways to apply CSS

To use CSS with HTML document, there are three ways:

o Inline CSS: Define CSS properties using style attribute in the HTML elements.
o Internal or Embedded CSS: Define CSS using <style> tag in <head> section.
 o External CSS: Define all CSS property in a separate .css file, and then include the file with
HTML file using tag in section.

Inline CSS:

Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element.

To apply inline CSS, you need to use style attribute within HTML element. We can use as many
properties as we want, but each property should be separated by a semicolon (;).

Example:
<h3 style="color: red;
font-style: italic;
text-align: center;
font-size: 50px;
padding-top: 25px;">Learning HTML using Inline CSS</h3>
Internal CSS:
An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML
document. To use Internal CSS, we can use class and id attributes.

We can use internal CSS to apply a style for a single HTML page.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
/*Internal CSS using element name*/
body{background-color:lavender;
text-align: center;}
h2{font-style: italic;
font-size: 30px;
color: #f08080;}
p{font-size: 20px;}
/*Internal CSS using class name*/
.blue{color: blue;}
.red{color: red;}
.green{color: green;}
</style>
</head>
<body>
<h2>Learning HTML with internal CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
External CSS:
An external CSS contains a separate CSS file which only contains style code using the class name, id
name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using <link>
tag.

If we have multiple HTML pages for an application and which use similar CSS, then we can use external
CSS.

There are two files need to create to apply external CSS

First, create the HTML file

Create a CSS file and save it using the .css extension (This file only will only contain the styling code.)
Link the CSS file in your HTML file using tag in header section of HTML document.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Learning HTML with External CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
Test it Now
CSS file:

body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}

.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}

Commonly used CSS properties:

Properties-name Syntax Description
background-color background-color:red; It defines the background color of that element.
color color: lightgreen; It defines the color of text of an element
padding padding: 20px; It defines the space between content and the border.
margin margin: 30px; margin-left: It creates space around an element.
font-family font-family: cursive; Font-family defines a font for a particular element.
Font-size font-size: 50px; Font-size defines a font size for a particular element.
text-align text-align: left; It is used to align the text in a selected position.

CSS3:
Difference between CSS and CSS3:
S.No CSS CSS3
.
1 CSS is capable of positioning texts and On the other hand, CSS3 is capable of making the web
objects. page more attractive and takes less time to create. CSS3
is backward compatible with CSS.
2 Responsive designing is not supported in CSS CSS3 is the latest version, hence it supports responsive
design.
3 CSS cannot be split into modules. Whereas CSS3 can be breakdown into modules.
4 Using CSS, we cannot build 3D animation But in CSS3 we can perform all kinds of animation and
and transformation. transformations as it supports animation and 3D
transformations.
5 CSS is very slow as compared to CSS3 Whereas CSS3 is faster than CSS.
6 In CSS we have set of standard colors and it Whereas CSS3 has a good collection of HSL RGBA,
uses basic color schemes only. HSLA, and gradient colors.
7 In CSS we can only use single text blocks. But in CSS3 we can use multi-column text blocks
8 CSS does not support media queries. But CSS3 supports media queries
9 CSS codes are not supported by all types of Being the latest version, CSS3 codes are supported by all
modern browsers. modern browsers.
10 In CSS, designers have to manually develop But CSS3 provides advanced codes for setting rounded
rounded gradients and corners. gradients and corners
11 There is no special effect like shadowing text, CSS3 has many advance features like text shadows,
text animation, etc. in CSS. The animation visual effects, and a wide range of font styles and colors.
was coded in jQuery and JavaScript.
12 In CSS, the user can add background colors Whereas CSS3 list has a special display property defined
to list items and lists, set images for the list in it. Even list items also have counter reset properties.
items, etc.
13 CSS was developed in 1996. CSS3 is the latest version of CSS and was released in
2005.
14 CSS is memory intensive. CSS3 memory consumption is low as compared to CSS.
Features in CSS 3
CSS3: CSS3 stands for Cascading Style Sheet level 3, which is the advanced version of CSS. It is used
for structuring, styling, and formatting web pages. Several new features have been added to CSS3
and it is supported by all modern web browsers. The most important feature of CSS3 is the
splitting of CSS standards into separate modules that are simpler to learn and use.
New Selectors: More ways to target HTML Elements
CSS3 has introduced new selectors to target HTML elements to create more
efficient stylesheets. Examples of new Selectores are:
Attribute Selectors: These selectors help you to target elements based on
attributes like class or id.

Adjacent Sibling Selectors: The adjacent Sibling Selectors allow you to

target a component that is the immediate successor of another element. To
target the first paragraph after a heading, we can use the “h1+p” selector.

Child Selectors: These target elements that are direct children of another
element. For example, to target the lists of an ordered list, we use the selector
“ol>li.”

Nth-child selectors: These are used depending on their position within a

parent element. For example, “li: nth-child (even).”
Expanded color options and Gradient Effects
CSS3 comes with expanded color options and gradient effects. The expanded
color options include colors beyond the traditional web-safe colors. This is
achieved with the help of new color formats like RGBA and HSLA.
We can also add linear or radial gradients to HTML components to enhance the
look of the web pages. The advanced CSS3 gradient effect allows developers to
add multiple color breaks within a gradient that adds to the flexibility of the
gradient effect.
Rounded Corners
With the earlier versions of CSS, it was pretty challenging to have rounded
corners for images and elements. The CSS3 feature of “border-radius” to create
rounded corners has simplified this issue. We can have more appealing HTML
components with rounded corners by specifying a value greater than 0 to the
border-radius. Today, we can see rounded corners to most of the web content,
all thanks to CSS3.
Example:
.round_sq{
border-radius: 12px;
}

The above example applies a border-radius of 12px on the targeted HTML

element with the class name round_sq.
2D and 3D transformations for shapes and text
CSS3 comes with a critical transform property that can be applied to rotate,
translate, skew, flip, zoom, shrink, and scale HTML elements.
For 2D transformations CSS3 provides rotate(), scale(), skew() and translate()
functions. While for 3D transformations, we have rotateX(), rotateY(), and
rotateZ(). These functions can be used to create more interactive and stunning
web designs.
rotate(): To rotate an element clockwise and counterclockwise around the z
axis, we use the rotate() function in CSS3.

scale(): To resize any HTML element on a 2D plane, we use the scale() function
inCSS3.

skew(): To give a shear transformation to a specific angle, we use the skew()

function in CSS3.

translate(): To change the position of any HTML element along the horizontal
or vertical direction, we use the translate() function in CSS3.
Shadow effect
The CSS3 has an important box-shadow property to add shadows to text and
shapes, thus adding a sense of depth to them. Along with the box shadow, we
can add a horizontal and vertical offset, blur amount, shadow color, shadow
spread, and inset. This makes the web pages visually more engaging.
Example:
.container{
box-shadow : 1.5px 1.5px 5px #312577;
}

The above CSS code adds a shadow with a horizontal and vertical offset of
1.5px, 5px blur radius, and #312577 color to an HTML element with the class
name container.
Transitions and Animations: Smooth and Dynamic Visual Effects
CSS3 transitions and animations are an advanced styling feature that allows
web developers to add smooth and dynamic visual effects to their web pages.
While the transition property is used to create gradual changes in CSS property,
with animations, you can create more complex effects by specifying the
keyframes, which in turn target the values of CSS properties at specific time
stamps. Both transitions and animations can be used to create interactive web
pages.
Example:
HTML
<div class=”container”></div>

CSS
.container {
width: 50px;
height: 50px;
background-color: yellow;
 transition: width 1s ease-in-out;
animation: rotate 4s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Setting Opacity
Using rgba colors, the CSS3 opacity property can be applied to alter the opacity
of HTML elements. Instead of editing the picture with the required opacity and
adding it to the HTML file, we can simply write a single line of code in CSS.
Example:
div{
opacity: 0.7;
}

The above example applies an opacity of 0.7 on the targeted div element.
Flexbox: Powerful Layout Capabilities for Responsive Design
CSS3 comes with a very versatile and powerful flexbox property to organize the
contents within an HTML element in an efficient way to create a responsive
layout. The features of Flexbox include the following:
Flexible container: The HTML component containing the flex items can be
adjusted to fill the entire space or shrink as per the requirement.
Flexible items: The flex items can also be positioned as needed.

Alignment: Flexbox provides alignment options to align its items center,

spaced, or wrapped.

Responsive design: This property enables us to create flexible layouts for

different screen sizes.

Direction control: We can change the direction of the Flexbox from column to
row and vice versa using the direction control feature of the Flexbox.
Multi Column Layout
CSS3 multicolumn layout property is used to create column layouts similar to
that of a newspaper or a magazine article. With this property, content can flow
to the next column automatically, depending upon the space available. We can
also define the column width, column count, gap, and property. We can thus
have the content in a more readable and presentable layout.
Media queries: Conditional styling for different screen sizes

The contribution of media query properties toward the responsive design

of a webpage is worth mentioning. This CSS3 feature allows conditional styling
to create designs and layouts for different screen sizes like laptops, desktops,
tablets, mobiles, etc. Thus a consistent user experience across different
screens is achieved through media queries.
Word Wrapping
CSS3 word wrapping feature allows developers to control and manage long
words when they exceed the container's width.
We can have two values with the word-wrap property: normal and break-word.
While the normal value allows lengthy words to extend beyond the container's
width, the word-break value breaks long words and wraps them to the following
line.
Example:
.box {
width: 150px;
border: 1px solid red;
word-wrap: break-word;
}
Font Flexibility
CSS3 has introduced many new font-related features, including font flexibility.
This feature allows us to specify the range of font styles, thus giving us
absolute control over how the text appears on the web page. We can also add
our own variations to the font styles using the font-stretch property.
Compatibility: Cross-platform support and vendor prefixes
CSS3 features are supported by almost all web browsers and operating
systems. Sometimes when the older versions of web browsers do not support
the CSS3 features, tools like Vendor prefixes can be used by developers to
address the cross-platform compatibility issues. Thus the consistency and
appearance of the web pages are maintained across different platforms and
web browsers.

HTML Canvas
he HTML <canvas> element is used to draw graphics on a web page.

The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient
rectangle, a multicolor rectangle, and a multicolor text.

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the
graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

The HTML canvas element provides HTML a bitmapped surface to work with. It is used to draw
graphics on the web page.

The HTML 5 <canvas> tag is used to draw graphics using scripting language like JavaScript.

The <canvas> element is only a container for graphics, you must need a scripting language to draw
the graphics. The <canvas> element allows for dynamic and scriptable rendering of 2D shapes and
bitmap images.

It is a low level, procedural model that updates a bitmap and does not have a built-in scene. There
are several methods in canvas to draw paths, boxes, circles, text and add images.

Syntax:
<canvas>
Content...
</canvas>

Canvas Examples
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

The markup looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to
define the size of the canvas. To add a border, use the style attribute.

The basic syntax of the rect() method can be given with:

context.rect(x, y, width, height);

Here is an example of a basic, empty canvas:

<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#000000;">
Your browser does not support the HTML canvas tag.
</canvas>

</body>
</html>
Add a JavaScript
After creating the rectangular canvas area, you must add a JavaScript to do the drawing.

Here are some examples:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>

Draw a Circle

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

</body>
</html>

This example, we will write a text using HTML Canvas.

<!DOCTYPE html>
<html>

<body>
<canvas id="GFG"
width="600"
height="200"
style="border:1px solid #d3d3d3;">
</canvas>
<script>
let g = document.getElementById("GFG");
let geeks = g.getContext("2d");
geeks.font = "30px Arial";
geeks.fillText("vit", 170, 50);
</script>
</body>

</html>

Top Web Design Tools for Designers

Web designing gives the power to create digital environments that encourage user activity. Web design refers to
the creatives that are displayed on the internet. And a web designer is responsible for transforming concepts/ideas
of websites into responsive and interactive web pages.
 Web design is directly linked to the visual components of a web application. It is reported that 75% of website
credibility is due to its design and 89% of website viewers move to a competitor site if the user experience of not up
to the mark. Hence, it is essential to ensure that the web designs are robust and aesthetic for the success of the
application.
There are many types of tools available that web designers can use, such as

 Website builders that don’t require any coding experience

 Web design tools that include code editor and visual design software
 Design tools that help in making prototypes
In this article, let us look at the top web design tools that will help design your website and prototypes more
efficiently.

12 Best Tools for Web Designing

Below is a list of web designing tools that designers can use to create visually appealing and futuristic pages.
1. Wix
Source
Wix is a website-building tool that does not require coding to build websites. If you want to build a website but do
not have a lot of experience in it, Wix could be one of the best options. Some features of the Wix Platform include:

 It enables you to incorporate site elements using the drag-and-drop feature to create your desired website layout.
 Track the performance of the website using in-house tools and analytics. It offers the possibility of adding tools like
Google Analytics, Google Ads, Facebook Pixel, etc.
 You can create an online community that can interact with each other via likes, follows, comments, etc. This is
similar to other popular social media platforms.
Even though you do not get the creative freedom offered by tools that require coding, Wix’s simple process can
help you make a website with brilliant customization.
2. Squarespace

Squarespace is another website-building tool that offers more than 100 website templates to start with. Some
features of Squarespace are as follows:

 It provides various functionalities for online shopping centers, such as customer account functionality, inventory
management, abandoned card recovery, and discount codes.
 You can duplicate pages or other content to expedite the website building process.
 You can provide fine-grain access to your project collaborators. The various access levels are Administrator, Store
Manager, Comment Moderator, Viewer, etc.
 The UI of Squarespace itself is amazing, which may be one of the best options for you if you want to build an e-
commerce website.
You can avail a free trial of 2 weeks before subscribing to a paid plan.
Also Read: Overcoming Common Problems While Developing eCommerce Websites
3. Shopify

Shopify is a digital storefront platform that helps businesses create their digital stores. Some features of Shopify
include:
 All the digital stores built on Shopify consist of an SSL certificate, and the store owner can purchase the domain
names directly from Shopify.
 The platform helps the business owner to market their products using native marketing tools suite and sell more
products by introducing a mature third-party application integration ecosystem.
 You can use many analytics tools to assess the digital store’s performance. This data can be further used to make
data-driven decisions for marketing, supply chain, etc.
You can avail of a free trial of Shopify for two weeks before subscribing to a paid plan.
Read More: Tips to Boost Speed of Shopify Website
4. WordPress

WordPress is the most known Content Management System (CMS) that can help you build a website quickly.
Some features of WordPress are as follows:

 You can embed any type of media file on the page’s content area. There is also no limit on the number of pages,
posts, etc.
 It is an open-source platform where you can find lots of free plugins that can improve the functionality of your
website.
 Working with WordPress doesn’t require any prior experience in coding, and this platform is mainly used for
creating blogging websites for individuals or organizations.
Even though the website is open source, there are some costs related to building and running a website on the
WordPress platform.
Read More: Browser Compatibility Check on WordPress Sites
5. Webflow

Webflow is another website designer tool that doesn’t require coding to build websites. If you don’t want to get
involved in coding, Webflow is one of the tremendous website-building platforms. Also, you can add site elements
using the drag-and-drop feature to make a customized design layout.
Some other features of Webflow are as follows:

 The Webflow platform includes a comprehensive CMS and web hosting services.
 If you have already started building a website on other platforms like Squarespace, Wix, etc., and you want to
move the process to the Webflow platform, you can get in touch with one of the website-building experts approved
by the Webflow team.
 You can add customized codes for an entire site, page, or a part of a page if you want to add something that isn’t
already offered by Webflow.
Also Read: 6 Common Web Design Mistakes That Degrade a Website’s User Experience
6. Adobe Dreamweaver

Adobe Dreamweaver is a commercial coding engine that allows you to view a real-time preview of the updated
content as soon as you edit the code. Some features of Dreamweaver are as follows:

 Using Dreamweaver, you can build a responsive website application from scratch or use one of the available
templates.
 This platform consists of code hints and GitHub support to help you make customized HTML sites such as blogs,
emails, e-commerce websites, portfolio web pages, etc.
 You can import files from Adobe PhotoShop, Illustrator, and Sketch.
 You can avail a free trial of 30 days before subscribing to a paid plan. You can also subscribe for a plan that
includes the complete Adobe Creative Suite suite, Dreamweaver, XD, and Photoshop.
7. Figma

Figma is an online web designing tool that enables users to edit and prototype website designs. This tool
empowers the collaborative effort of the web designing team. You can collaborate in brainstorming ideas and
create prototypes and share them with other collaborators for feedback using the same tool. Some important
features include:

 You can collaborate with developers (for free) at the commencement of the design process to understand the
requirements better.
 The API plugin enables collaborators to make their own plugins or use the resources from the user community to
improve the functionality of the tool.
 Other features include auto layout, template library, ease of collaboration, etc.
8. Nova

Nova is an updated version of Panic, a website development application used for the Mac Operating System. This
website layout design tool aims to reduce the number of secondary tools needed to develop a web application like
CSS editor, FTP client, and version control system. This, in turn, improves the workflow and functionality of your
development team.
Some features of Nova are:

 The platform has a user interface with multiple tabs for text editing, SVN, file transfers, CSS, etc.
 Nova offers a range of extensions, for example: ESLint, Prettier, YAML, TypeScript, etc.
 The text editor of Nova has many features, including smart autocomplete, mini-map, multiple cursors, editor over-
scroll, etc.
You can purchase the Nova application and own it forever for $99 + taxes.
9. Google Web Designer

Google Web Designer is a website designing platform that helps build interactive and appealing webpage designs
based on HTML 5. The tool also ensures that the webpage designs and motion graphics are running as expected
and can be viewed on various digital devices like computers and smartphones. Some features of this tool are as
follows:

 This tool helps in editing JavaScrip, CSS, and HTML.

 It offers tools that enable you to make your web layout responsive across a wide range of screen sizes.
 You can use Google Drive to publish your designs with Google Web Designer.
 This tool is generally used to create HTML 5 advertisements and other types of similar web content.
You can download or use Google Web Designer for free.
10. Canva

Canva is the most popular design platform. This tool can help you to create visuals for your website. Some
features of Canva are as follows:

 You can combine multiple images and build creative montages

 Various customizable templates can be used for the creation of designs.
 This tool also uses a drag-and-drop feature to add elements to a design draft.
 You can use the basic version of the tool for free or you can subscribe to the paid version to enjoy premium
features.
11. Adobe XD
One of the most critical steps in website designing is prototyping. These prototypes act as a temple for the real
website. Adobe XD is a vector-based prototyping tool that enables users to visualize their designs and evaluate the
user experience. Some other features of Adobe XD are as follows:

 This tool allows for adding animations, building design systems, and responsive web designs.
 Using Repeat Grid, you can duplicate all types of lists and galleries for different web pages
 You can import files from Adobe PhotoShop, Illustrator and Sketch.
You can avail a free started plan of Adobe XD and create a limited number of projects. You can go for a plan that
includes the complete suite of Adobe Creative Suite that includes Dreamweaver, XD, and Photoshop.
You can use BrowserStack’s free Responsive Design checker to check the website’s responsiveness on various
iOS and Android devices.

12. InVision Studio

InVision Studio is a prototyping tool that permits users to visualize their designs and evaluate the user experience.
It makes it easy for multiple collaborators to work on a single web development project. Some features of InVision
Studio include:

 Numerous collaborative tools like InVision Freehand to brainstorm ideas and create a template design on the
digital whiteboard.
 You can also receive feedback and comments from other collaborators on the platform itself.
 The tool eases the transition from the prototyping phase to the development phase.
Some of the other tools that weren’t listed above but are with mentioning are as follows:

 Adobe Photoshop
 Sketch
 Marvel
 Mockflow
 Adobe Comp
 Bootstrap and many others