What is JavaScript
What is JavaScript
JavaScript (js) is a light-weight object-oriented programming language which is used by several websites
for scripting the webpages. It is an interpreted, full-fledged programming language that enables dynamic
interactivity on websites when applied to an HTML document. It was introduced in the year 1995 for
adding programs to the webpages in the Netscape Navigator browser. Since then, it has been adopted
by all other graphical web browsers. With JavaScript, users can build modern web applications to
interact directly without reloading the page every time. The traditional website uses js to provide
several forms of interactivity and simplicity.
Although, JavaScript has no connectivity with Java programming language. The name was suggested and
provided in the times when Java was gaining popularity in the market. In addition to web browsers,
databases such as CouchDB and MongoDB uses JavaScript as their scripting and query language.
Features of JavaScript
1. All popular web browsers support JavaScript as they provide built-in execution environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a
structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the
operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather than using
classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.
Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript code: within body
tag, within head tag and external JavaScript file.
The text/javascript is the content type that provides information to the browser about the data.
Let’s see the same example of displaying alert dialog box of JavaScript that is contained inside the head
tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
2) JavaScript Example: code between the body tag
In this example, we have displayed the dynamic content using JavaScript in body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Hello</h1>
<script>
</script>
</body>
</html>
3) External JavaScript file
We can create external JavaScript file and embed it in many html page.
It provides code re usability because single JavaScript file can be used in several html pages.
An external JavaScript file must be saved by .js extension. It is recommended to embed all JavaScript
files into a single file. It increases the speed of the webpage.
Let's create an external JavaScript test.js file that prints Hey Hello Again.
// test.js file
Let's include the JavaScript file into html page. It calls the JavaScript function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="js/test.js"></script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
JS Comments
JavaScript Comment
The JavaScript comments are meaningful way to deliver message. It is used to add information about
the code, warnings or suggestions so that end user can easily interpret the code.
The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the browser.
1. To make code easy to understand It can be used to elaborate the code so that end user can
easily understand the code.
2. To avoid the unnecessary code It can also be used to avoid the code being executed.
Sometimes, we add the code to perform some action. But after sometime, there may be need to
disable the code. In such case, it is better to use comments.
1. Single-line Comment
2. Multi-line Comment
It is represented by double forward slashes (//). It can be used before and after the statement.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
//document.write("Hello World <br><br>");
</script>
</head>
<body>
<h1>Sanskruti</h1>
</body>
</html>
It can be used to add single as well as multi line comments. So, it is more convenient.
It is represented by forward slash with asterisk then asterisk with forward slash. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
document.write("Hello");
</script>
</head>
<body>
<h1>Sanskruti</h1>
</body>
</html>
JS Variables
Variables are Containers for Storing Data
Automatically
Using var
Using let
Using const
Var Keyword:
The var keyword was used in all JavaScript code from 1995 to 2015.
The var keyword should only be used in code written for older browsers.
<!DOCTYPE html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
var x = "Hello";
var y = "World";
document.write(x + y);
</script>
</head>
<body>
</body>
</html>
JS Variables ( Let & Const )
Let Variable:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
document.write(z);
</script>
</head>
<body>
</body>
</html>
Const Variable:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
const second = "Hello World";
document.write(second);
</script>
</head>
<body>
</body>
</html>
JS Data Types
JavaScript provides different data types to hold different types of values. There are two types of data
types in JavaScript.
JavaScript is a dynamic type language, means you don't need to specify type of the variable because it is
dynamically used by JavaScript engine. You need to use var here to specify the data type. It can hold any
type of values such as numbers, strings etc. For example:
There are five types of primitive data types in JavaScript. They are as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
document.write(a);
document.write("<br>");
document.write(typeof a);
document.write("<br><br>");
document.write(b);
document.write("<br>");
document.write(typeof b);
document.write("<br><br>");
var c = true;
document.write(c);
document.write("<br>");
document.write(typeof c);
document.write("<br><br>");
var d= ["HTML","CSS","JS"];
document.write(d);
document.write("<br>");
document.write(typeof d);
document.write("<br><br>");
var x= {first:"Jane",last:"Doe"};
document.write(x);
document.write("<br>");
document.write(typeof x);
document.write("<br><br>");
var y = null;
document.write(y);
document.write("<br>");
document.write(typeof y);
document.write("<br><br>");
var z;
document.write(z);
document.write("<br>");
document.write(typeof z);
document.write("<br><br>");
</script>
</head>
<body>
</body>
</html>
JS Arithmetic Operators
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations on the operands. The following
operators are known as JavaScript arithmetic operators.
+ Addition 10+20 = 30
- Subtraction 20-10 = 10
/ Division 20/10 = 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
var a = 10;
var b = 10;
var c = a + b;
document.write(c);
document.write("<br><br>");
var m = 10;
var n = 5;
var o = m - n;
document.write(o);
document.write("<br><br>");
/* Multiplication Arithmetic Operators */
var p = 10;
var q = 10;
var r = a * b;
document.write(r);
document.write("<br><br>");
var d = 10;
var e = 3;
var f = d ** e;
document.write(f);
document.write("<br><br>");
var s = 14;
var t = 2;
var w = s / t;
document.write(w);
document.write("<br><br>");
var x = 14;
var y = 2;
var z = a % b;
document.write(z);
document.write("<br><br>");
var i = 10;
var j = 3;
document.write(i + j);
document.write("<br>");
i++;
document.write(i + j);
document.write("<br><br>");
var g = 10;
var h = 3;
document.write(g + h);
document.write("<br>");
g--;
document.write(g + h);
</script>
</head>
<body>
</body>
</html>
JS Assignment Operators
avaScript assignment operator is equal (=) which assigns the value of the right-hand operand to its left-
hand operand. That is if a = b assigns the value of b to a.
The simple assignment operator is used to assign a value to a variable. The assignment operation
evaluates the assigned value. Chaining the assignment operator is possible in order to assign a single
value to multiple variables.
Syntax
data=value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
var m = 10;
var n = 3;
o = m + n;
document.write(o);
document.write('<br><br>');
var a = 10;
var b = 3;
a += b;
document.write(a);
document.write('<br><br>');
var m = 10;
var n = 3;
m -= n;
document.write(m);
document.write('<br><br>');
var p = 10;
var q = 3;
p *= q;
document.write(p);
document.write('<br><br>');
var d = 10;
var e = 3;
d **= e;
document.write(d);
document.write('<br><br>');
var s = 10;
var t = 3;
s /= t;
document.write(s);
document.write('<br><br>');
var x = 10;
var y = 3;
x %= y;
document.write(x);
document.write('<br><br>');
</script>
</head>
<body>
</body>
</html>
console.log([1,2,3]);
console.table([1, 2, 3]);
JS Comparison Operators
JavaScript Comparison operators are mainly used to perform the logical operations that determine the
equality or difference between the values. Comparison operators are used in logical expressions to
determine their equality or differences in variables or values.
JavaScript Comparison Operators list: There are so many comparison operators as shown in the table
with the description.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
var a = 10;
var b = 20;
document.write( a == b);
document.write('<br><br>');
var c = 10;
var d= "10";
document.write('<br><br>');
/* Not Equal Comparison Operators */
var e = 2;
var f = 3;
document.write(e != f);
document.write('<br><br>');
var g = 2;
var h = '2';
document.write('<br><br>');
var i = 2;
var j = 4;
document.write('<br><br>');
var m = 10;
var n = 20;
document.write('<br><br>');
/* Greater Than or Equal To Comparison Operators */
var p = 10;
var q = 20;
document.write('<br><br>');
var x= 20;
var y = 20;
document.write('<br><br>');
</script>
</head>
<body>
</body>
</html>
JS If Statement
JavaScript If-else
The JavaScript if-else statement is used to execute the code whether condition is true or false. There are
three forms of if statement in JavaScript.
1. If Statement
2. If else statement
3. if else if statement
JavaScript If statement
It evaluates the content only if expression is true. The signature of JavaScript if statement is given below.
if(expression){
//content to be evaluated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
var a = 100;
var b = 20;
if(a > b) {
document.write("A is Greater");
document.write("<br><br>");
/* Equal to If Condition */
var m = 100;
var n = 100;
if (m == n) {
document.write("A is Greater");
document.write("<br><br>");
/* Equal value and equal type If Condition */
var x = 100;
var y = "100";
if (x === y) {
document.write("Sanskruti");
document.write("<br><br>");
</script>
</head>
<body>
</body>
</html>
JS Logical Operators
Logical Operators in JavaScript
! Not (a!=5)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
document.write("<br><br>");
/* Logical OR Operator */
var a = 10;
var b = 15;
document.write("<br><br>");
var x = 30;
</script>
</head>
<body>
</body>
</html>
JS If Else Statement
JavaScript If...else Statement
It evaluates the content whether condition is true or false. The syntax of JavaScript if-else statement is
given below.
if(expression){
else{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
var a = 15;
if (a > 30) {
document.write("A is Greater");
}else {
document.write("A is smaller");
document.write("<br><br>");
var x = 100;
if (x == 100) {
document.write("X is Same");
}else {
</script>
</head>
<body>
</body>
</html>
JS If Else If Statement
JavaScript If...else if statement
It evaluates the content only if expression is true from several expressions. The signature of JavaScript if
else if statement is given below.
if(expression1){
else if(expression2){
else if(expression3){
else{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
/* If Else IF Condition */
}else {
</script>
</head>
<body>
</body>
</html>