Java Script by Shree

What is JavaScript?
Javascript is a dynamic computer programming language. It

is lightweight and most commonly used as a part of web
pages, whose implementations allow client-side script to
interact with the user and make dynamic pages. It is an
interpreted programming language with object-oriented
capabilities.
JavaScript was first known as LiveScript, but Netscape
changed its name to JavaScript, possibly because of the
excitement being generated by Java.
JavaScript made its first appearance in Netscape 2.0 in
1995 with the name LiveScript. The general-purpose core of
the language has been embedded in Netscape, Internet
Explorer, and other web browsers.
The ECMA-262 Specification defined a standard version of
the core JavaScript language.
• JavaScript is a lightweight, interpreted programming
language.
• Designed for creating network-centric applications.
• Complementary to and integrated with Java.
• Complementary to and integrated with Java.
• Complementary to and integrated with HTML.
• Open and cross-platform
JavaScript is one of the popular programming languages
that is used in most of the websites on the World Wide
Web. It is also known as JS and is lightweight, cross-
platform, and interpreted in nature.
Most of the time, JS is used to make webpages interactive

and alive. For example, showing popups and changing page
content when a button is clicked, validating users' emails
on forms, and so on.
Basically, we can say that if you want to do anything

related to websites and webpages, JavaScript is the
language to go with.
Besides webpages, JavaScript is also used in game

development, mobile app development, artwork creation,
etc.
In short, it would be fair to conclude that javascript is the
one language that rules the web.
History of JavaScript
JavaScript was created in 1995 by Brandan Eich, a Netscape
programmer at that time. Initially, it was named Mocha
and LiveScript. However, while taking the language public,
it was named JavaScript.
The name was derived from the famous programming
language Java to make it look more appealing.
Despite having a similar name, JavaScript has nothing to do

with Java. It's an independent language with its own set of
specifications. In recent times, JavaScript is also referred to
as ECMAScript, and programs written in JavaScript are
called scripts.
Client-Side JavaScript
Client-side JavaScript is the most common form of the
language. The script should be included in or referenced by
an HTML document for the code to be interpreted by the
browser.
It means that a web page need not be a static HTML, but
can include programs that interact with the user, control
the browser, and dynamically create HTML content.
The JavaScript client-side mechanism provides many
advantages over traditional CGI server-side scripts. For
example, you might use JavaScript to check if the user has
entered a valid e-mail address in a form field.
The JavaScript code is executed when the user submits the
form, and only if all the entries are valid, they would be
submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as
button clicks, link navigation, and other actions that the
user initiates explicitly or implicitly.
Why Learn JavaScript?

You might be wondering why JavaScript, why not Python or
Java. Well, the simple answer to this question is that
JavaScript is used everywhere on the web.
If your goal is to dive into the field of web development,

then you should choose JavaScript without any double
thought. Here're some of the reasons why you should
learn JavaScript.
• Beginner Friendly Language
• Versatile Language
• Best Language for Better Career
• High Paying Programming Language
• Huge Community
Why Learn JavaScript?

In the last article, we learned about the introduction of
JavaScript programming language and we also introduced
the language as the most popular programming language.
Apart from being the most popular language, there are
various reasons why people should learn JavaScript
Beginner-Friendly Language
Unlike other programming languages, you can directly run
JavaScript code on web browsers. You can directly jump
into writing code without worrying about setting up the
environment first.
This makes starting JS so much easier, especially for

beginners who are learning JavaScript as their first
programming language.
Also, JavaScript provides straightforward syntaxes that are

easy to grasp for beginners.
JavaScript is a Versatile Language

JavaScript-based frameworks like Node, React, Angular,
React-Native, and so on makes the language so versatile
that you can build a complete application by just using
JavaScript.
Not only that, you can build desktop, web, and mobile
applications by only using JS.
Most Popular Programming Language
Yes, it is the world's most popular programming language
and by a significant margin. There are many reasons that
contribute to its popularity.
According to the latest survey by StackOverFlow, JavaScript

is the most widely used programming language in the
world for the tenth year in a row.
High Demand in Job Market

Being the most popular programming language, JavaScript
developers are always in huge demand and it's increasing
every month.
Not only that, JS developers are among the top paid

professionals in the current job market.
Huge Community and Support

When working with JavaScript, even if you are creating
small web applications, chances are that someone might
have done the same, or something similar.
You can take help from different JavaScript communities of

developers and enthusiasts. The community can offer small
solutions to different approaches to doing the same thing.
Applications of JavaScript
Besides the reasons mentioned above, there are various
applications of JavaScript due to which it has become the
most desirable programming language which everyone
should learn.
Web Applications
As mentioned earlier, JavaScript frameworks like React,
Vue, Angular, and Node can be used to create full-fledged
web applications.
In fact, popular applications like Microsoft Edge, Google

Maps, and Uber are also built using JavaScript.
Web Development
From the early days, JavaScript was introduced to create
web pages. It provides simple ways to add dynamic
behaviors and special effects to the webpage.
For instance, the ability to load the content of a webpage

without the need to reload the entire page, form
validations, change page behaviors during button clicks,
and so on.
With the help of JavaScript, we can even enable the user to
load content into a document without them having to
reload the entire page as well. Validations are one of the
other important features that JavaScript provides us.
Many of the biggest tech companies make use of JavaScript

to enhance the user experience even today.
Web Servers
With the introduction of Node.js, JavaScript developers
now can create web servers from the ground up and take
control of them.
If you don't know, servers are everywhere in today's web

development world and allow you to transfer chunks of
data without buffering.
JavaScript now being able to run outside the browser, via

Node.js. It gives the developers the privilege to create web
servers and take control of them. With Node.js, we can
create servers from the ground up, and it's all JavaScript.
Game Development
Yes, JavaScript can even create Games, and it's this
versatile nature of JavaScript that makes it so much
popular.
JavaScript can be combined with HTML5, and they

together play a very important role in game development
using JavaScript. There are different JavaScript libraries
present that can be used to develop Games in JavaScript.
Some of the famous games built using JavaScript are
OpenHog, CrossCode, Tower Building, etc.
Mobile Applications
We can even use JavaScript to create mobile applications,
and one of the most popular frameworks to do the same is
React Native, which allows you to build cross-platform
mobile applications.
Art
Don't be surprised seeing this point here as JavaScript does
help in creating arts via Canvas elements. Creators can
even draw and create 2D and 3D graphics by using the
graphics on a web page.
This is one of those applications that not everyone knows

about, but JavaScript excels when it comes to creating arts
via Canvas elements, as by making use of graphics on a
web page, the creators can draw and create 2D and 3D
graphics.
Hello World in JavaScript

A Hello World Program in JavaScript prints the text Hello
World to the console.
For this we will use a HTML file and inside the HTML file,
we will add a script tag. We will then write our JavaScript
code inside that tag.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Hello World - JavaScript Example</title>
</head>
<body>
<script>
console.log("Hello World");
</script>
</body>
</html>
Explanation - We created a simple HTML5 document. Just

focus on the <script> tag inside the body.
There you can find console.log("Hello World"); which prints

the output Hello World onto the terminal.
To see the output,

run this index.html file in your browser
open the developer tool
go to the console where you will see "Hello World"
Limitations of JavaScript
We cannot treat JavaScript as a full-fledged programming
language. It lacks the following important features:
Client-side JavaScript does not allow the reading or writing
of files. This has been kept for security reason.
JavaScript cannot be used for networking applications
because there is no such support available.
JavaScript doesn't have any multithreading or
multiprocessor capabilities. Once again, JavaScript is a
lightweight, interpreted programming language that allows
you to build interactivity into otherwise static HTML pages.
Syntax
JavaScript can be implemented using JavaScript statements
that are placed within the <script>... </script> HTML tags in
a web page.
You can place the <script> tags, containing your JavaScript,
anywhere within you web page, but it is normally
recommended that you should keep it within the <head>
tags.
The <script> tag alerts the browser program to start
interpreting all the text between these tags as a script. A
simple syntax of your JavaScript will appear as follows.
<script ...>
JavaScript code
</script>
The script tag takes two important attributes:
Language: This attribute specifies what scripting language
you are using. Typically, its value will be javascript. Although
recent versions of HTML (and XHTML, its successor) have
phased out the use of this attribute.
Type: This attribute is what is now recommended to

indicate the scripting language in use and its value should
be set to "text/javascript".
So your JavaScript syntax will look as follows.
<script language="javascript" type="text/javascript">
JavaScript code
</script>
This function can be used to write text, HTML, or both. Take

a look at the following code.
<html>
<body>
document.write ("Hello World!")
</script>
</body>
Whitespace and Line Breaks
JavaScript ignores spaces, tabs, and newlines that appear
in JavaScript programs. You can use spaces, tabs, and
newlines freely in your program and you are free to format
and indent your programs in a neat and consistent way that
makes the code easy to read and understand.
Semicolons are Optional

Simple statements in JavaScript are generally followed by a
semicolon character, just as they are in C, C++, and Java.
JavaScript, however, allows you to omit this semicolon if
each of your statements are placed on a separate line. For
example, the following code could be written without
semicolons.

</script>
But when formatted in a single line as follows, you must
use semicolons:

</script>
Note: It is a good programming practice to use semicolons.
Case Sensitivity
JavaScript is a case-sensitive language. This means that the
language keywords, variables, function names, and any
other identifiers must always be typed with a consistent
capitalization of letters.
So the identifiers Time and TIME will convey different
meanings in JavaScript. NOTE: Care should be taken while
writing variable and function names in JavaScript.
Why use comments?

Comments are valuable components and part of any
programming language, including JavaScript. Below are the
two most common uses of comments in JavaScript
1. Increasing Readability
Comments help in improving the readability of the code
Programmers can refer to them if they visit the code after
some time.
New programmers can use comments to understand the
code before starting to work.
2. Debugging
Comments are non-executable statements, so if we know
that a particular part of the code is causing an error, we
can easily comment on that part while debugging.
Types of Comments
In JavaScript, there are two types of comments. These are
1. Single Line Comment
2. Multi-Line Comment
Single Line Comment

The single-line comment starts with the // symbol. Any text
that is present after // up to the end of the line will be
ignored by JavaScript.
Consider the code that is shown below in which we are
creating two single-line comments.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>Comments in JavaScript</title>
</head>
<body>
<h1>Example</h1>
<h2>Comments in JavaScript</h2>
<script>
let str = 0;
// Using the Boolean method
console.log(Boolean(str));
str = "";
// Using the Boolean method
</script>
</body>
</html>
Explanation - In the above example, we have created two

comments // Using the Boolean method just before the
console.log() function.
We will get the following output if we run the above code

in the browser.
Output:
Multi-Line Comment
The multi-line comment starts with the /* symbol and ends
with the */ symbol. Any text that is present between these
/* and */ symbols will be ignored by JavaScript.
Consider the code that is shown below in which we are

creating multi-line comments.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
</head>
<body>
<h1>Example</h1>
<script>
let str = 0;
/*
Using Boolean method
in the console.log()
shown below
*/
str = "";
/*
Using the Boolean method
shown below
*/
</script>
</body>
</html>
Explanation - In the above example, texts in between /*
and */ (Using the Boolean method in the console.log()
shown below) are two multi-line comments in JavaScript.
If we run the above code in the browser, we will get the

following output.
Output:
Comments to prevent the execution of the code

We can even prevent some particular part of the code
from being executed if we comment on that part of the
code.
Consider the code shown below.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
</head>
<body>
<h1>Example</h1>
<script>
let str = 0;
/*
commenting the console.log()
functions call below
*/
// console.log(Boolean(str));
str = "";
/*
Using Boolean method
shown below
*/
</script>
</body>
</html>
Explanation - In the above code, we commented out a

console.log(Boolean(str)); using a single line comment.
When we run the code shown above, the interpreter will
ignore the commented part.
Output:
Commenting out code is important, especially when we
are debugging code. Because instead of removing code, we
can comment them out, so they won't be executed and
then uncomment whenever needed.
Good comments vs. Bad Comments

While comments for sure help us to increase readability
and code experience, not all comments are good for the
code.
Below are some of the ways with which you can distinguish
good and bad comments:
Bad Comments:
• Too much explanation
• Misleading data
• Not intention-revealing
• Redundant comments
Good Comments:
• Intent Explanation
• Informative
• Warning of Consequences
PLACEMENT OF SCRIPT TAG
There is a flexibility given to include JavaScript code
anywhere in an HTML document. However the most
preferred ways to include JavaScript in an HTML file are as
follows:
Script in <head>...</head> section.
Script in <body>...</body> section.
Script in <body>...</body> and <head>...</head> sections.
Script in an external file and then include in
<head>...</head> section.
In the following section, we will see how we can place
JavaScript in an HTML file
in different ways.
JavaScript in <head>...</head> Section

If you want to have a script run on some event, such as
when a user clicks somewhere, then you will place that
script in the head as follows.
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
JavaScript in <body>...</body> Section

If you need a script to run as the page loads so that the
script generates content in the page, then the script goes in
the <body> portion of the document. In this case, you
would not have any function defined using JavaScript. Take
a look at the following code.
<html>
<head>
</head>
<body>

</script>
<p>This is web page body </p>
</body>
</html>
JavaScript in <body> and <head> Sections

You can put your JavaScript code in <head> and <body>
section altogether as follows.
<html>
<head>
}
//-->
</script>
</head>
<body>

</script>
<input type="button" onclick="sayHello()" value="Say
Hello" />
</body>
</html>
JavaScript in External File

As you begin to work more extensively with JavaScript, you
will be likely to find that there are cases where you are
reusing identical JavaScript code on multiplepages of a site.
You are not restricted to be maintaining identical code in
multiple HTML files. The script tag provides a mechanism to
allow you to store JavaScript in an external file and then
include it into your HTML files.
Here is an example to show how you can include an
external JavaScript file in your HTML code using script tag
and its src attribute.
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>
To use JavaScript from an external file source, you need to

write all your JavaScript source code in a simple text file
with the extension ".js" and then include that file as shown
above.
For example, you can keep the following content in
filename.js file and then you can use sayHello function in
your HTML file after including the filename.js file.

}
Introduction to Printing Output

Generally, when we perform some actions on the website,
like clicking a button or providing input to a text area, we
get some response in return. Similarly, in programming as
well, we want to get some response after running our
code.
These responses are known as output. The output may be

simple plain text, an image, or an entire document file.
In this article, we will explore all the different ways of

printing output in JavaScript.
Different Ways to Print Output
When it comes to JavaScript, there are four different ways
with which we can print output to the terminal or console.
• Using console.log()
• Using window.alert()
• Using document.write()
• Using innerHTML
console.log()
The console.log() method in JavaScript is used when we
want to write a message to the console. Whatever
message we want to print to the console, we pass it inside
the log() method as an argument.
Let's create a simple example of the console.log() method.
Consider the index.html code shown below.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>console.log() - JavaScript Example</title>
</head>
<body>
<p>
Some text.
</p>
<script>
console.log("Hello There!");
</script>
</body>
</html>
Explanation - In the above code, we have a paragraph tag
first and a script tag. Inside the script tag, we have used
the console.log() method to print "Hello There!".
Once we run the code, we will see "Some text." printed on

the screen, and when we open the browser's console, we
will get Hello There!.
window.alert()
As the name suggests, the windows.alert() method prints
the output data as an alert in the browser. Let's see an
example.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>window.alert() - JavaScript Example</title>
</head>
<body>
<p>
Some text.
</p>
<script>
window.alert("Welcome to JavaScript")
</script>
</body>
</html>
Explanation - In the above code, we are making use of the

window.alert() method to print the text "Welcome to
JavaScript" in the browser window.
One important point to note here is that we can even avoid

the window keyword. It's because the window is a global
object in JavaScript, so it's allowed to access its method
and properties directly.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>window.alert() - JavaScript Example</title>
</head>
<body>
<p>
Some text.
</p>
<script>
alert("Welcome to JavaScript ")
</script>
</body>
</html>
Explanation - As you can see, we have removed the

window keyword and when we run this code, we will get
the same output as before.
innerHTML()
innerHTML in JavaScript is used to add required texts to
the specific HTML element and print it.
Let's say that we have a very simple div, in which we are

simply printing a text to the browser screen, and we want
to replace the text with the text of our choice. In this case,
we can make use of the innerHTML property.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>innerHTML - JavaScript Example</title>
</head>
<body>
<div id="simpleDiv">
This is a simple Div.
</div>
<script>
document.getElementById("simpleDiv").innerHTML =
"No, it is more than just a simple div"
</script>
</body>
</html>
Explanation - In the above code, inside the body tag, we

have a div with id simpleDiv, which is printing the text "This
is a simple Div.".
Now, instead of this text, suppose we want to print the text
of our own. Then, we can make use of the innerHTML.
First, we will call the getElementById() method to select
the HTML element where we want to make the changes
and then assign a new value to the innerHTML property.
document.getElementByID("simpleDiv").innerHTML = "No,
it is more than just a simple div"
We can even place a numeric value as well in the
innerHTML property.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>innerHTML - JavaScript Example</title>
</head>
<body>
<div id="simpleDiv">
This is a simple Div.
</div>
<script>
document.getElementById("simpleDiv").innerHTML = 13
</script>
</body>
</html>
Explanation - In the above code, I used a numeric

expression to be placed as the value of the innerHTML
property.
Once we run the above code in the browser, we would see

the following text printed.
Output:
document.write()
The document.write() method prints the output text on
the browser's webpage. Let's see an example.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>document.write() - JavaScript Example</title>
</head>
<body>
<script>
document.write("Shrikant.");
</script>
</body>
</html>
Explanation - In the above code, we are using the

document.write() method to print the text "Masai School is
Awesome.".
Note: If we use document.write() after the webpage has

finished loading, it will overwrite everything that is on the
webpage. Let's see one example.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>document.write() - JavaScript Example</title>
</head>
<body>
<p>
Some text before the button.
</p>
<button onclick="document.write('New text
overwrites the existing text');" >
Click me!
</button>
</body>
</html>
Explanation - In the above code, there's a p tag and a

button tag. Inside the button tag, we have used the onclick
method that is calling document.write. Because of this, the
document.write() method is only called when we click on
the button.
Once we run the code, we will see the text inside the
paragraph tag and a button.
Output
Here, this page has finished loading. Now, if we click the
button, the document.write() method is called, which will
overwrite the existing page content with a new one.
Output
You can see that only "New text overwrites the existing
text" is shown now. Because of this behavior, we should
never use document.write() after the page has finished
loading.
Working of document.write()
In the above code, the p tag is printing some text and the
button has an onclick event set up. Here, when we click the
button, the document.write() method is called.
Initially, when we run the code, the web page is completely
loaded, which will print the text and show the button. At
this point, the onclick event is not triggered. Now, when
we click the button, the document.write() method is called,
which will overwrite everything on the webpage and print
the text inside it.
While the above four methods are the ones that are used
when we want to print some text or value to the terminal
or the console in JavaScript, there's one more method that
might give the impression that it is used to print a text to
the browser console or your terminal. This method is
called the window.print() method.
window.print()
The window.print() method is different from all the
methods that are mentioned above as it is used when we
want the browser to print the content that we have on the
current browser window.
JavaScript ,by default, doesn't have any print method.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>window.print() - JavaScript Example</title>
</head>
<body>
<p>
Some text.
</p>
<button onclick="window.print();">
Click to Print!
</button>
</body>
</html>
Explanation - In the above code, we have a paragraph tag

first, and then inside the script tag, we have created a
button with an onclick attribute that calls the
window.print().
Once we run the above code in the browser, we would see
the following text printed in the browser's console.
Output:
After clicking on the button, you will be prompted with a

printing screen that will ask you whether you want to print
the content of the current window or not.
What are Variables?

Variables are containers that are used when we want to
store some data in them. We can also imagine a variable as
a placeholder for a value like when we go shopping, we
carry a bag that contains some fruits inside it, so the bag is
the variable and the fruits are the value of the variable.
Just like fruits in a bag, the values of variables may or may

not change.
Let's see an example,

let name = “Shrikant"
In the above code snippet, name is a variable which is

storing the value Shrikant.
It should be noted that a variable can only contain a value
at a time, and that value can be of any type.
Declaring variables in JavaScript

In JavaScript, there are different ways with which we can
declare variables. These are:
• Using let keyword
• Using const keyword
• Using var keyword
Now let's make use of all these keywords to understand

them better.
Using the let keyword

To declare a variable using the let keyword, we can
consider the example code snippet shown below.
let name;
let isCoding;
In the above code, we are creating two variables

called name and isCoding.
The let keyword was introduced in the ES6 version of

JavaScript. It is the most popular way of creating variables
because it is less error-prone and more stable than the var
keyword.
Both the variables that we created in the above code are

defined and not assigned any values, and hence their
values will be undefined for now.
Using the var keyword
Before 2015, there was only one way of creating variables

in JavaScript, using the var keyword. Later after the
introduction of let and const in 2015, let has been the
preferred way of creating variables.
However, people are still using var, so you will find tons of
examples where the var is used, although it is more prone
to errors.
In JavaScript, we use the var keyword to declare variables

as shown below.
var name;
var message;
In the above code snippet, we are making use of var

keywords to create two different variables,
namely, name and message.
One more important thing to note about the var keyword

is that if you are making use of older web browsers, then
you might have to consider using var only, as chances are
that the let keyword won't work there at all.
Using the const keyword
The const keyword provides another way of creating

variables in JavaScript. If we use const, we are telling our
interpreter that the value stored in the variable will remain
constant and never change.
It is a very powerful keyword, and you will always notice
that it is mainly used when we want to store configuration
values of our applications or values that will never change.
It is always recommended that you use const first, and

when you explore a scenario in which you need to change
the value of the variable, then only consider making use of
the let keyword.
Below is a code snippet showing how you can use the

const keyword.
const age;
const totalAttempts;
In the above code snippet, we are making use of the const

keyword to declare two constants,
namely, age and totalAttempts.
Now that we have explored the variable declaration using

the three keywords, it's time we learn how we can assign
values to the variables as well.
Assigning values to the variables

Let's create a simple example in which we will make use of
all three keywords: var, let, and const, to declare and
assign values at the same time.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>Variable Assignment</title>
</head>
<body>
<script>
let name = "Shrikant Kokate";
console.log(name);
const isCoding = "Yes";
console.log(isCoding);
var designation = "Senior Software Developer";
console.log(designation);
</script>
</body>
</html>
In the above code, we have declared three variables,

namely, name, isCoding, and designation. At the time of
declaration, we are assigning a value to them as well.
Note that we have only assigned text values to the above

variables. Instead, we can assign values of any type.
Now let's assign numeric values to the variables as well.

We will replace some of the variables that were there in
the above example, but the rest of the code will be the
same.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>Variable Assignment</title>
</head>
<body>
<script>
let age = 25;
console.log(age);
var year = 2022;
console.log(year);
const graduateYear = 2019;
console.log(graduateYear);
</script>
</body>
</html>
In the above code example, We assigned numeric values to
the variables instead of the text values that we had in the
previous example.

following output in the developer console.
Output:
Use of Variables in JavaScript

In JavaScript programs, variables are used everywhere to
store a variety of data, and they are an integral part of any
code.
It is important to create and store the data using variables.

If we directly start working with raw data, there is a high
chance that the data will be lost at some point, so storing
the data in a variable will help us prevent that.
If the data value is too long or too complicated, it's hard to

remember the whole data (something like id number,
passport number). Instead, we can store them in a variable
and provide an easy-to-remember name that we can use
later.
These are some of the benefits of using variables in

JavaScript.
Types of Variables
Before we learn about the types of variables, let's first
understand about scope. A scope for reference can be
defined as the space in which a variable can be accessed
within a program in JavaScript.
Based on the scope, we can classify variables into two

types:
Global Variables - A global variable is one that has a global
scope which means that we are able to use it anywhere in
the program.
Local Variables - A local variable is one that can only be
accessed within a function inside which it is defined.
Now let's understand what a global scope and local scope
variable actually mean.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>Scope Example</title>
</head>
<body>
<h1>Global Scope and Local Scope.</h1>
<script>
let isCoding = true;
function normalFunction() {
let running = false;
console.log("Running 1:", running);
console.log("isCoding 1:", isCoding);
}
normalFunction();
console.log("isCoding 2:", isCoding);
console.log("isRunning 2:", running);
</script>
</body>
</html>
Explanation - In the above code, we need to focus on the

code that is written inside the script tag. The
variable isCoding is a globally scoped variable, as it is not
defined inside any function, and we are able to access it
anywhere in the program, and then we created a function
named normalFunction.
In normalFunction, a variable named running is initialized

and that variable is only available inside that function, if we
try to access that variable outside this function, we will get
a reference error.
following output in the developer console.
Output:
The reference error in the above output is because we are

trying to access a locally scoped variable outside the
function in which it is defined.
It should be noted that since ES2015, there's something

called block scope as well, which is the scope in which a
variable, once defined, is only available and if we try to
access the variable outside that block, it won't be
available.
Only the let and const defined variables are blocked scope
variables, and the var keyword is either local scoped or
global scoped.
Now let's consider an example of block scope as well.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>Block Scope Example</title>
</head>
<body>
<h1>Block scope.</h1>
<script>
function normalFunction() {
let running = false;
{
let age = 100;
console.log("Age 1: " + age);
}
console.log("Age 2: " + age);
}
normalFunction();
</script>
</body>
</html>
Explanation - In the above code, inside the function, we

created a block where we declared and initialized a
variable named age. We are trying to access the age
variable outside the block, that's why we will get the same
reference error.
Output:
Variable Names in JavaScript
There are certain rules that we should follow when we are
declaring variables in JavaScript. These mainly are:
• Variables must start with a letter, an underscore(_), or
the dollar symbol ($).
• Variables cannot be named with numbers at the
starting index.
• Variables in JavaScript are case-sensitive.
• Keywords cannot be used as variable names.
Let's understand all of these points with the help of a

single example.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
content="IE=edge">
<title>Variable Convention Example</title>
</head>
<body>
<h1>Variable Convention.</h1>
<script>
// Valid Variable Declarations
let _name = “Shrikant”;
console.log('_name:' + _name);
let $age = 25;
console.log('Age: ' + $age);
let isStudent = false;
console.log('isStudent:' + isStudent);
// InValid Variable Declarations
let 1age = 25;
console.log('1age:' + 1age);
// Cannot use keywords as variable names
let var = 23;
console.log('var:' + var);
</script>
</body>
</html>
Explanation - In the above code, we explored valid variable

names: _name, $age, and isStudent and invalid variable
names: 1age and var.
The above code will generate a runtime error.
Output:
Below is the list of keywords that we can't use as variable

names in JavaScript.
Keywords
JavaScript Reserved Words
A list of all the reserved words in JavaScript are given in the
following table. They cannot be used as JavaScript
variables, functions, methods, loop labels, or any object
names.

Java Script by Shree

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java Script by Shree

Uploaded by

Copyright:

Available Formats

What is JavaScript?

Javascript is a dynamic computer programming language. It

Most of the time, JS is used to make webpages interactive

Basically, we can say that if you want to do anything

Besides webpages, JavaScript is also used in game

Despite having a similar name, JavaScript has nothing to do

Why Learn JavaScript?

If your goal is to dive into the field of web development,

Why Learn JavaScript?

This makes starting JS so much easier, especially for

Also, JavaScript provides straightforward syntaxes that are

JavaScript is a Versatile Language

According to the latest survey by StackOverFlow, JavaScript

High Demand in Job Market

Not only that, JS developers are among the top paid

Huge Community and Support

You can take help from different JavaScript communities of

In fact, popular applications like Microsoft Edge, Google

For instance, the ability to load the content of a webpage

Many of the biggest tech companies make use of JavaScript

If you don't know, servers are everywhere in today's web

JavaScript now being able to run outside the browser, via

JavaScript can be combined with HTML5, and they

This is one of those applications that not everyone knows

Hello World in JavaScript

Explanation - We created a simple HTML5 document. Just

There you can find console.log("Hello World"); which prints

To see the output,

Type: This attribute is what is now recommended to

This function can be used to write text, HTML, or both. Take

Semicolons are Optional

Why use comments?

Single Line Comment

Explanation - In the above example, we have created two

We will get the following output if we run the above code

Consider the code that is shown below in which we are

If we run the above code in the browser, we will get the

Comments to prevent the execution of the code

Consider the code shown below.

Explanation - In the above code, we commented out a

Good comments vs. Bad Comments

JavaScript in <head>...</head> Section

JavaScript in <body>...</body> Section

JavaScript in <body> and <head> Sections

JavaScript in External File

To use JavaScript from an external file source, you need to

function sayHello() {alert("Hello World")

Introduction to Printing Output

These responses are known as output. The output may be

In this article, we will explore all the different ways of

Let's create a simple example of the console.log() method.

Consider the index.html code shown below.

Once we run the code, we will see "Some text." printed on

Consider the index.html code shown below.

Explanation - In the above code, we are making use of the

One important point to note here is that we can even avoid

Consider the index.html code shown below.

Explanation - As you can see, we have removed the

Let's say that we have a very simple div, in which we are

Consider the index.html code shown below.

Explanation - In the above code, inside the body tag, we

Consider the index.html code shown below.

Explanation - In the above code, I used a numeric