JavaScript Basics
JavaScrip
t
• For JavaScript, you should know the basic language i.e., HTML and CSS.
• JavaScript is the programming language of HTML and the web. It makes
web page dynamic. It is interpretated programming language with object
oriented capabilities.
INPAGE JS
External JS
test.js
Basic Structure
• Document.write() function is used to display the data on the webpage.
Linking more than one javascript file.
Variable
Rules for defining the variables-
Declaring variable
Declaring variable
• Valid variable Declaration Invalid Declaration
Direct variable initialisation
Good Practice is to write the var datatype for each variable
Multiple initialisation of a variable.
JavaScript Constant
• The const keyword was introduced in ES6 (2015)
• Variables defined with const cannot be Redeclared
• Variables defined with const cannot be Reassigned
Conditional Statements
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.
JavaScript If...else Statement
It evaluates the content whether condition is true of false. The syntax of JavaScript if-else statement is given
below.
<script>
var a=20;
if(a%2==0){
document.write("a is even number");
}
else
{
document.write("a is odd number");
}
</script>
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.
<script>
var a=20;
if(a==10){
document.write("a is equal to 10");
}
else if(a==15){
document.write("a is equal to 15");
}
else if(a==20){
document.write("a is equal to 20");
}
else{
document.write("a is not equal to 10, 15 or 20");
}
</script>
JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while, do while or for-
in loops. It makes the code compact. It is mostly used in array.
There are four types of loops in JavaScript.
1.for loop
2.while loop
3.do-while loop
4.for-in loop
LOOPS in JAVASCRIPT
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. The syntax of while loop is given below.
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
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. The syntax of do while loop is given below.
<script>
var i=21;
do
{
document.write(i + "<br/>");
i++;
}
while (i<=25);
</script>
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. The syntax of for loop is given below.
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
ARRAYS in JAVASCRIPT
JavaScript Arrays
An array is a special variable, which can hold more than one value:
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = [ "Saab", "Volvo", "BMW"];
document.write(cars);
</script>
</body>
</html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
document.write(cars[0]);
</script>
</body>
</html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns an array as a comma separated
string:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write (fruits);
</script>
</body>
</html>
Array Properties
The following table lists the standard properties of the Array object.
The length property is always one more than the highest array index.
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>
<p>The length property returns the length of an array:</p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.write(size);
</script>
</body>
</html>
JavaScript Array Methods
Array length Array join()
Array toString() Array delete()
Array pop() Array concat()
Array push() Array flat()
Array shift() Array splice()
Array unshift() Array slice()
JavaScript Array toString()
The JavaScript method toString() converts an array to a string of (comma separated)
array values.
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns an array as a comma separated string:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
Join()
The join() method also joins all array elements into a string.
It behaves just like toString(), but in addition you can specify the separator:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The join() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
</body>
</html>
JavaScript Array pop()
The pop() method removes the last element from an array:
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
JavaScript Array push()
The push() method adds a new element to an array (at the end):
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
JavaScript Array shift()
The shift() method removes the first array element and "shifts" all other elements to a lower index.
ARRAYS METHODS
The slice() method returns selected elements in an array, as a new array.
The splice() method is used to add or remove elements of an existing array and the return value will be
the removed items from the array.
