0% found this document useful (0 votes)
2 views37 pages

What is JavaScript

JavaScript is a lightweight, object-oriented programming language used for scripting web pages, enabling dynamic interactivity. It supports various features such as being case-sensitive, weakly typed, and object-oriented, and can be integrated into HTML documents in multiple ways. JavaScript also includes concepts like variables, data types, arithmetic operators, and comments, making it a versatile tool for web development.

Uploaded by

pradhannikki1997
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
2 views37 pages

What is JavaScript

JavaScript is a lightweight, object-oriented programming language used for scripting web pages, enabling dynamic interactivity. It supports various features such as being case-sensitive, weakly typed, and object-oriented, and can be integrated into HTML documents in multiple ways. JavaScript also includes concepts like variables, data types, arithmetic operators, and comments, making it a versatile tool for web development.

Uploaded by

pradhannikki1997
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 37

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.

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 document.write() 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=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

<script>

document.write("Hello from Sanskruti");

</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=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

</head>

<body>

<h1>Hello</h1>

<script>

document.write("Hello from Sanskruti");

</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

document.write("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=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

<!-- External JavaScript -->

<script src="js/test.js"></script>

</head>

<body>

<h1>Hello</h1>

</body>
</html>

HTML Tags In Javascript


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=“authors” content=“Balbharti”>
<meta name=“description” content=“advance javascript”>
<meta name=“keywords” content=“html5, javascript”>
<title>JavaScript</title>
<script>
document.write("Hello World <br><br>");
document.write("<i><b>Hello from Sanskruti<b></i>");
</script>
</head>
<body>
<h1>Sanskruti</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=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

<script>
//document.write("Hello World <br><br>");

document.write("<i><b>Hello from Sanskruti<b></i>");

</script>

</head>

<body>

<h1>Sanskruti</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=“authors” content=“Balbharti”>


<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

<script>

/*document.write("Hello World <br><br>");

document.write("<i><b>Hello from Sanskruti<b></i>");*/

document.write("Hello");

</script>

</head>

<body>

<h1>Sanskruti</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=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<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:

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=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

<script>

let z = "Hello World";

document.write(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=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

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

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=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

<script>

/* String Data Type */

var a = "Hello World";

document.write(a);

document.write("<br>");

document.write(typeof a);

document.write("<br><br>");

/* Number Data Type */


var b = 25;

document.write(b);

document.write("<br>");

document.write(typeof b);

document.write("<br><br>");

/* Boolean Data Type */

var c = true;

document.write(c);

document.write("<br>");

document.write(typeof c);

document.write("<br><br>");

/* Array Data Type */

var d= ["HTML","CSS","JS"];

document.write(d);

document.write("<br>");

document.write(typeof d);

document.write("<br><br>");

/* Object Data Type */

var x= {first:"Jane",last:"Doe"};

document.write(x);

document.write("<br>");

document.write(typeof x);
document.write("<br><br>");

/* Null Data Type */

var y = null;

document.write(y);

document.write("<br>");

document.write(typeof y);

document.write("<br><br>");

/* undefined Data Type */

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.

Operator Description Example

+ Addition 10+20 = 30

- Subtraction 20-10 = 10

* Multiplication 10*20 = 200

/ Division 20/10 = 2

% Modulus (Remainder) 20%10 = 0


++ Increment var a=10; a++; Now a = 11

-- Decrement var a=10; a--; Now a = 9

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

<script>

/* Addition Arithmetic Operators */

var a = 10;

var b = 10;

var c = a + b;

document.write(c);

document.write("<br><br>");

/* Subtraction Arithmetic Operators */

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>");

/* Exponentiation Arithmetic Operators */

var d = 10;

var e = 3;

var f = d ** e;

document.write(f);

document.write("<br><br>");

/* Division Arithmetic Operators */

var s = 14;

var t = 2;

var w = s / t;

document.write(w);

document.write("<br><br>");

/* Modulus(Remainder) Arithmetic Operators */

var x = 14;

var y = 2;
var z = a % b;

document.write(z);

document.write("<br><br>");

/* Increment Arithmetic Operators */

var i = 10;

var j = 3;

document.write(i + j);

document.write("<br>");

i++;

document.write(i + j);

document.write("<br><br>");

/* Decrement Arithmetic Operators */

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">

<meta name=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>


<title>JavaScript</title>

<script>

/* Equalto Assignment Operators */

var m = 10;

var n = 3;

o = m + n;

document.write(o);

document.write('<br><br>');

/* Addition Assignment Operators */

var a = 10;

var b = 3;

a += b;

document.write(a);

document.write('<br><br>');

/* Subtraction Assignment Operators */

var m = 10;

var n = 3;

m -= n;

document.write(m);

document.write('<br><br>');

/* Multiplication Assignment Operators */

var p = 10;
var q = 3;

p *= q;

document.write(p);

document.write('<br><br>');

/* Exponentiation Assignment Operators */

var d = 10;

var e = 3;

d **= e;

document.write(d);

document.write('<br><br>');

/* Division Assignment Operators */

var s = 10;

var t = 3;

s /= t;

document.write(s);

document.write('<br><br>');

/* Modulus(Remainder) Assignment Operators */

var x = 10;

var y = 3;

x %= y;

document.write(x);

document.write('<br><br>');
</script>

</head>

<body>

</body>

</html>

JS With Google Chrome Console


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=“authors” content=“Balbharti”>
<meta name=“description” content=“advance javascript”>
<meta name=“keywords” content=“html5, javascript”>
<title>JavaScript</title>
<script>
var x = 50;
console.log(x);

console.log([1,2,3]);

console.table([1, 2, 3]);

console.error("Something went wrong.");


console.time("Test");
console.warn("This is just warning");
console.timeEnd("Test");
//console.clear();
</script>
</head>
<body>
<h1 id="main">Sanskruti</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
OPERATOR NAME USAGE OPERATION
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 Operator a>=b Checks if the left operator is greater than or equal to the right 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=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

<script>

/* Equal to Comparison Operators */

var a = 10;

var b = 20;

document.write( a == b);

document.write('<br><br>');

/* Equal value and equal type Comparison Operators */

var c = 10;

var d= "10";

document.write(a === b);

document.write('<br><br>');
/* Not Equal Comparison Operators */

var e = 2;

var f = 3;

document.write(e != f);

document.write('<br><br>');

/* Not Equal value or not equal type Comparison Operators */

var g = 2;

var h = '2';

document.write(g !== h);

document.write('<br><br>');

/* Greater Than Comparison Operators */

var i = 2;

var j = 4;

document.write(i > j);

document.write('<br><br>');

/* Less Than Comparison Operators */

var m = 10;

var n = 20;

document.write(m > n);

document.write('<br><br>');
/* Greater Than or Equal To Comparison Operators */

var p = 10;

var q = 20;

document.write(p >= q);

document.write('<br><br>');

/* Less Than or Equal To Comparison Operators */

var x= 20;

var y = 20;

document.write(x <= y);

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">

<meta name=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

<script>

/* Greater Than If Condition */

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

The following are the logical operators supported by JavaScript:

Operator Name Example


&& Logical And ( a< 5 && b>2)

|| Logical Or (a<5 || b>2)

! Not (a!=5)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

<script>

/* Logical And Operator */

var age = 18;

if (age >= 18 && age <= 21) {

document.write("Yes you are eligible.");

document.write("<br><br>");

/* Logical OR Operator */

var a = 10;

var b = 15;

if (a >= 8 || b <= 15) {

document.write("Yes you are eligible.");


}

document.write("<br><br>");

/* Logical Not Operator */

var x = 30;

console.log(!x >= 12);

</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){

//content to be evaluated if condition is true


}

else{

//content to be evaluated if condition is false

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

<script>

/* Greater Than If Else Condition */

var a = 15;

if (a > 30) {

document.write("A is Greater");

}else {

document.write("A is smaller");

document.write("<br><br>");

/* Equal to If Else Condition */

var x = 100;
if (x == 100) {

document.write("X is Same");

}else {

document.write("X is not smaller");

</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){

//content to be evaluated if expression1 is true


}

else if(expression2){

//content to be evaluated if expression2 is true

else if(expression3){

//content to be evaluated if expression3 is true

else{

//content to be evaluated if no expression is true

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name=“authors” content=“Balbharti”>

<meta name=“description” content=“advance javascript”>

<meta name=“keywords” content=“html5, javascript”>

<title>JavaScript</title>

<script>

/* If Else IF Condition */

var per = prompt("Enter your Percentage : ");

if (per >= 80 && per <= 100) {

document.write("You are in Merit.");


}else if (per >= 60 && per < 80) {

document.write("You are in Ist Division.");

}else if (per >= 45 && per < 60) {

document.write("You are in IIst Division.");

}else if (per >= 33 && per < 45) {

document.write("You are in IIIst Division.");

}else if (per < 33) {

document.write("You are Fail.");

}else {

document.write("Please Enter Valid Percentage.");

</script>

</head>

<body>

</body>

</html>

You might also like