JAVA SCRIPT
What is JavaScript
JavaScript (js) is a light-weight object-oriented programming language which is used by several websites for
scripting the webpages. It is an interpreted, full-fledged programming language that enables dynamic
interactivity on websites when applied to an HTML document. It was introduced in the year 1995 for adding
programs to the webpages in the Netscape Navigator browser. Since then, it has been adopted by all other
graphical web browsers. With JavaScript, users can build modern web applications to interact directly
without reloading the page every time. The traditional website uses js to provide several forms of
interactivity and simplicity.
Although, JavaScript has no connectivity with Java programming language. The name was suggested and
provided in the times when Java was gaining popularity in the market. In addition to web browsers,
databases such as CouchDB and MongoDB uses JavaScript as their scripting and query language.
Features of JavaScript
There are following features of JavaScript:
1. All popular web browsers support JavaScript as they provide built-in execution environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured
programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the
operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather than using classes
for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.
JS Implementation
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 script tag specifies that we are using JavaScript.
The text/javascript is the content type that provides information to the browser about the data.
The [Link]() function is used to display dynamic content through JavaScript.
3 Places to put JavaScript code
1. Between the head tag of html
2. Between the body tag of html
3. In .js file (external javaScript)
1) JavaScript Example : code between the head tag
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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
[Link]("Hello from Yahoo Baba");
</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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
</head>
<body>
<h1>Hello</h1>
<script>
[Link]("Hello from Yahoo Baba");
</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 [Link] file that prints Hey Hello Again.
// [Link] file
[Link]("Hey Hello Again");
Let's include the JavaScript file into html page. It calls the JavaScript function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<!-- External JavaScript -->
<script src="js/[Link]"></script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
HTML Tags In Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
[Link]("Hello World <br><br>");
[Link]("<i><b>Hello from Yahoo Baba<b></i>");
</script>
</head>
<body>
<h1>Yahoo Baba</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.
Advantages of JavaScript comments
There are mainly two advantages of JavaScript comments.
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.
Types of JavaScript Comments
There are two types of comments in JavaScript.
1. Single-line Comment
2. Multi-line Comment
JavaScript Single 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">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
//[Link]("Hello World <br><br>");
[Link]("<i><b>Hello from Yahoo Baba<b></i>");
</script>
</head>
<body>
<h1>Yahoo Baba</h1>
</body>
</html>
JavaScript Multi line Comment
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:
1. /* your code here */
It can be used before, after and middle of the statement.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
/*[Link]("Hello World <br><br>");
[Link]("<i><b>Hello from Yahoo Baba<b></i>");*/
[Link]("Hello");
</script>
</head>
<body>
<h1>Yahoo Baba</h1>
</body>
</html>
JS Variables
Variables are Containers for Storing Data
JavaScript Variables can be declared in 4 ways:
Automatically
Using var
Using let
Using const
Var Keyword:
The var keyword was used in all JavaScript code from 1995 to 2015.
The let and const keywords were added to JavaScript in 2015.
The var keyword should only be used in code written for older browsers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
var x = "Hello";
var y = "World";
[Link](x + y);
</script>
</head>
<body>
</body>
</html>
JS Variables ( Let & Const )
Let Variable:
Variables defined with let cannot be Redeclared
Variables defined with let must be Declared before use
Variables defined with let have Block Scope
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
let z = "Hello World";
[Link](z);
</script>
</head>
<body>
</body>
</html>
Const Variable:
Variables defined with const cannot be Redeclared
Variables defined with const cannot be Reassigned
Variables defined with const have Block Scope
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
const second = "Hello World";
[Link](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.
1. Primitive data type
2. Non-primitive (reference) data type
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:
1. var a=40;//holding number
2. var b="Rahul";//holding string
JavaScript primitive data types
There are five types of primitive data types in JavaScript. They are as follows:
Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all
JavaScript non-primitive data types
The non-primitive data types are as follows:
Data Type Description
Object represents instance through which we can access members
Array represents group of similar values
RegExp represents regular expression
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
/* String Data Type */
var a = "Hello World";
[Link](a);
[Link]("<br>");
[Link](typeof a);
[Link]("<br><br>");
/* Number Data Type */
var b = 25;
[Link](b);
[Link]("<br>");
[Link](typeof b);
[Link]("<br><br>");
/* Boolean Data Type */
var c = true;
[Link](c);
[Link]("<br>");
[Link](typeof c);
[Link]("<br><br>");
/* Array Data Type */
var d= ["HTML","CSS","JS"];
[Link](d);
[Link]("<br>");
[Link](typeof d);
[Link]("<br><br>");
/* Object Data Type */
var x= {first:"Jane",last:"Doe"};
[Link](x);
[Link]("<br>");
[Link](typeof x);
[Link]("<br><br>");
/* Null Data Type */
var y = null;
[Link](y);
[Link]("<br>");
[Link](typeof y);
[Link]("<br><br>");
/* undefined Data Type */
var z;
[Link](z);
[Link]("<br>");
[Link](typeof z);
[Link]("<br><br>");
</script>
</head>
<body>
</body>
</html>
JS Arithmetic Operators
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
/* Addition Arithmetic Operators */
var a = 10;
var b = 10;
var c = a + b;
[Link](c);
[Link]("<br><br>");
/* Subtraction Arithmetic Operators */
var m = 10;
var n = 5;
var o = m - n;
[Link](o);
[Link]("<br><br>");
/* Multiplication Arithmetic Operators */
var p = 10;
var q = 10;
var r = a * b;
[Link](r);
[Link]("<br><br>");
/* Exponentiation Arithmetic Operators */
var d = 10;
var e = 3;
var f = d ** e;
[Link](f);
[Link]("<br><br>");
/* Division Arithmetic Operators */
var s = 14;
var t = 2;
var w = s / t;
[Link](w);
[Link]("<br><br>");
/* Modulus(Remainder) Arithmetic Operators */
var x = 14;
var y = 2;
var z = a % b;
[Link](z);
[Link]("<br><br>");
/* Increment Arithmetic Operators */
var i = 10;
var j = 3;
[Link](i + j);
[Link]("<br>");
i++;
[Link](i + j);
[Link]("<br><br>");
/* Decrement Arithmetic Operators */
var g = 10;
var h = 3;
[Link](g + h);
[Link]("<br>");
g--;
[Link](g + h);
</script>
</head>
<body>
</body>
</html>
JS Assignment Operators
JavaScript 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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
/* Equalto Assignment Operators */
var m = 10;
var n = 3;
o = m + n;
[Link](o);
[Link]('<br><br>');
/* Addition Assignment Operators */
var a = 10;
var b = 3;
a += b;
[Link](a);
[Link]('<br><br>');
/* Subtraction Assignment Operators */
var m = 10;
var n = 3;
m -= n;
[Link](m);
[Link]('<br><br>');
/* Multiplication Assignment Operators */
var p = 10;
var q = 3;
p *= q;
[Link](p);
[Link]('<br><br>');
/* Exponentiation Assignment Operators */
var d = 10;
var e = 3;
d **= e;
[Link](d);
[Link]('<br><br>');
/* Division Assignment Operators */
var s = 10;
var t = 3;
s /= t;
[Link](s);
[Link]('<br><br>');
/* Modulus(Remainder) Assignment Operators */
var x = 10;
var y = 3;
x %= y;
[Link](x);
[Link]('<br><br>');
</script>
</head>
<body>
</body>
</html>
JS With Google Chrome Console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
var x = 50;
[Link](x);
[Link]([1,2,3]);
[Link]([1, 2, 3]);
[Link]("Something went wrong.");
[Link]("Test");
[Link]("This is just warning");
[Link]("Test");
//[Link]();
</script>
</head>
<body>
<h1 id="main">Yahoo Baba</h1>
</body>
</html>
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.
OPERATOR NAME USAGE OPERATION
Equality Operator a==b Compares the equality of two operators
Inequality Operator a!=b Compares inequality of two operators
Strict Equality Operator a===b Compares both value and type of the operand
Strict Inequality Operator a!==b Compares inequality with type
Greater than Operator a>b Checks if the left operator is greater than the right operator
Greater than or equal a>=b Checks if the left operator is greater than or equal to the right
Operator operator
Less than Operator a<b Checks if the left operator is smaller than the right operator
Less than or equal Operator a<=b Checks if the left operator is smaller than or equal to the right
operator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
/* Equal to Comparison Operators */
var a = 10;
var b = 20;
[Link]( a == b);
[Link]('<br><br>');
/* Equal value and equal type Comparison Operators */
var c = 10;
var d= "10";
[Link](a === b);
[Link]('<br><br>');
/* Not Equal Comparison Operators */
var e = 2;
var f = 3;
[Link](e != f);
[Link]('<br><br>');
/* Not Equal value or not equal type Comparison Operators */
var g = 2;
var h = '2';
[Link](g !== h);
[Link]('<br><br>');
/* Greater Than Comparison Operators */
var i = 2;
var j = 4;
[Link](i > j);
[Link]('<br><br>');
/* Less Than Comparison Operators */
var m = 10;
var n = 20;
[Link](m > n);
[Link]('<br><br>');
/* Greater Than or Equal To Comparison Operators */
var p = 10;
var q = 20;
[Link](p >= q);
[Link]('<br><br>');
/* Less Than or Equal To Comparison Operators */
var x= 20;
var y = 20;
[Link](x <= y)
[Link]('<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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
/* Greater Than If Condition */
var a = 100;
var b = 20;
if(a > b) {
[Link]("A is Greater");
}
[Link]("<br><br>");
/* Equal to If Condition */
var m = 100;
var n = 100;
if (m == n) {
[Link]("A is Greater");
}
[Link]("<br><br>");
/* Equal value and equal type If Condition */
var x = 100;
var y = "100";
if (x === y) {
[Link]("Yahoo Baba");
}
[Link]("<br><br>");
</script>
</head>
<body>
</body>
</html>
JS Logical Operators
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<script>
/* Logical And Operator */
var age = 18;
if (age >= 18 && age <= 21) {
[Link]("Yes you are eligible.");
}
[Link]("<br><br>");
/* Logical OR Operator */
var a = 10;
var b = 15;
if (a >= 8 || b <= 15) {
[Link]("Yes you are eligible.");
}
[Link]("<br><br>");
/* Logical Not Operator */
var x = 30;
[Link](!x >= 12);
</script>
</head>
<body>
</body>
</html>
