JavaScript
JavaScript is an object-based scripting language which is lightweight and cross-
platform, which is used by several websites for scripting the webpages to enables
dynamic interactivity.
JavaScript is not a compiled language, but it is a interpreted language. The
JavaScript Translator (embedded in the browser) is responsible for translating the
JavaScript code for the web browser.
It was introduced in the year 1995 for adding programs to the webpages in the
Netscape Navigator browser.
JavaScript accepts both double and single quotes.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="js">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("js").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>
<html>
<body>
<h2>Welcome to JavaScript</h2>
<script>
document.write("Hello JavaScript");
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="dis()"/>
</form>
</body>
</html>
function dis(){
alert("Hello Javascript");
}
<script>
// It is single line comment
document.write("hello javascript");
</script>
<script>
/* It is multi line comment.
It will not be displayed */
document.write("example of javascript multiline comment");
</script>
JavaScript Variable
A JavaScript variable is simply a name of storage location. There are two types of
variables in JavaScript : local variable and global variable.
There are some rules while declaring a JavaScript variable (also known as
identifiers).
Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ )
sign.
After first letter we can use digits (0 to 9), for example value1.
JavaScript variables are case sensitive, for example x and X are different
variables.
var marks = 90;
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>
JavaScript local variable
A JavaScript local variable is declared inside block or function. It is accessible
within the function or block only.
<script>
function abc(){
var x=10;//local variable
}
</script>
JavaScript global variable
A JavaScript global variable is accessible from any function. A variable i.e.
declared outside the function or declared with window object is known as global
variable.
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();
</script>
JavaScript Let
The let keyword was introduced in ES6 (2015).
Variables defined with let cannot be Redeclared.
let x = "xyz";
let x = 0;
// SyntaxError: 'x' has already been declared
Variables defined with let must be Declared before use.
Variables defined with let have Block Scope.
{
let x = 2;
}
// x can NOT be used here
Javascript Data Types
JavaScript provides different data types to hold different types of values. There
are two types of data types in JavaScript.
Primitive data type
Non-primitive (reference) data type
JavaScript is a dynamic type language, means we don't need to specify type of the
variable because it is dynamically used by JavaScript engine. We need to use var
here to specify the data type. It can hold any type of values such as numbers,
strings etc.
var a=17;//holding number
var b="xyz";//holding string
Primitive data type
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
Non-primitive (reference) data type
Data Type Description
Object represents instance through which we can access members
Array represents group of similar values
RegExp represents regular expression
JavaScript Operators
a+b //a & b is an operand // + operator
There are following types of operators in JavaScript.
Arithmetic Operators (+, -, *, /, %, ++, --)
Comparison (Relational) Operators (<, >, ==, ===, !=, <=, >=)
Bitwise Operators (&, |, ^, <<, >>)
Logical Operators (&&, ||, !)
Assignment Operators (=, +=, -=, *=, /=, %=)
Special Operators()
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.
If Statement
if(expression){
//content to be evaluated
}
<html>
<body>
<script>
var marks=90;
if(a>80){
document.write("Congrats");
}
</script>
</body>
</html>
If else statement
if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}
<script>
var a=17;
if(a%2==0){
document.write("a is even number");
}
else{
document.write("a is odd number");
}
</script>
if else if statement
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
}
JavaScript Switch
The JavaScript switch statement is used to execute one code from multiple
expressions.
switch(expression){
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......
default:
code to be executed if above values are not matched;
}
<script>
var grade='B';
var result;
switch(grade){
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
break;
default:
result="No Grade";
}
document.write(result);
</script>
JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while, do
while or for-in loops.
1) JavaScript For loop
The JavaScript for loop iterates the elements for the fixed number of times. It
should be used if number of iteration is known.
for (initialization; condition; increment)
{
code to be executed
}
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
2) JavaScript while loop
The JavaScript while loop iterates the elements for the infinite number of times.
It should be used if number of iteration is not known.
while (condition)
{
code to be executed
}
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
3) JavaScript do while loop
The JavaScript do while loop iterates the elements for the infinite number of times
like while loop. But, code is executed at least once whether condition is true or
false.
do{
code to be executed
}while (condition);
<script>
var i=1;
do{
document.write(i + "<br/>");
i++;
}while (i<=5);
</script>
JavaScript Functions
JavaScript functions are used to perform operations, can call JavaScript function
many times to reuse the code.
Advantage of JavaScript function
There are mainly two advantages of JavaScript functions.
Code reusability: can call a function several times so it save coding.
Less coding: It makes our program compact. We don’t need to write many lines of
code each time to perform a common task.
JavaScript Function Syntax
function functionName(arg1, arg2, ...argN){
//code to be executed
}
<script>
function msg(){
alert("hello! this is js");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
<script>
var add=new Function("num1","num2","return num1+num2");
document.writeln(add(2,5));
</script>
<script>
var pow=new Function("num1","num2","return Math.pow(num1,num2)");
document.writeln(pow(2,3));
</script>
