Code is copied!
Javascript
What is Javascript ?
- JS is a scripting language for web.
- JS can update and change both HTML and CSS.
- JS can be executed in the browser itself or within <script> tag at last inside body element.
Why we use Javascript ?
JS allows developers to create a dynamic and interactive web page to interact with visitors and execute complex actions.
HTML Layout
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
</head>
<body>
<h1 id="main">This is heading1</h1>
<p id="sub">This is an paragraph </p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
</head>
<body>
<h1 id="main">This is heading1</h1>
<p id="sub">This is an paragraph </p>
</body>
</html>
JS Variables
These are containers for storing data values
Ways to declare variables in JS :
- Using let
- Using const
- Using var
- Javascript var keyword is used in all JS code from 1995 to 2015 but from 2015 var is now obsolete
- So prefer using ‘let’ in place of ‘var’.
Example : In this example, price1, price2, and total, are variables:
const price1 = 5;
const price2 = 3;
let total = price1 + price2;
The variable total is declared let as its can be changed
JS Datatypes
In programming, data types is an important concept.
- Numbers
- Strings
- Arrays
- Objects
- Boolean
- Undefined
- Null
Numbers
Example:
let x = 3.14;
let y = 30;
console.log(x + y)
let x = 3.14;
let y = 30;
console.log(x + y)
Strings
- Strings stores some text
- Strings are written inside quotes either single(‘’) or double(“”)
- Indexing in strings starts from 0 to (length-1)
For Example:
let carname = “Creta SX”; // Double quotes.
let carname = ‘Creta SX’; // Single quotes
>> The length of a string is calculated using ‘length’ property.
Example: let txt = ‘This is a string’;
let len = txt.length // 5
let carname = “Creta SX”;
let carname1 = ‘Creta SX’;
let len = carname1.length
let carname = “Creta SX”;
let carname1 = ‘Creta SX’;
let len = carname1.length
Objects
Objects are variables too but objects can contain many values.
Example:
let car = {
type : "Creta",
model : "SX",
color : "White"
}
console.log(car.type) // Creta
In other words we can store key value pairs and type object.
let car = {
type : "Creta",
model : "SX",
color : "White"
}
console.log(car.type) // Creta
Arrays
Arrays are used to store multiple values in a single variable.
Example:
let cars = [“Creta” , ”SUV” , ”Innova” , ”Scorpio”];
console.log(cars[1])
let cars = [“Creta” , ”SUV” , ”Innova” , ”Scorpio”];
console.log(cars[1])
Functions
- A JS function is a block of code design to perform particular task
- A JS function is executed when we invokes it (calls it).
Syntax :
function function_name(var1, var2)
{
return var1*var2;
}
function_name(var1,var2); //calling a function
Example:
function myfunction(a, b)
{
return a*b;
}
alert( myfunction(10,2) ) //20
function myfunction(a, b)
{
return a*b;
}
alert( myfunction(10,2) ) //20
JS For Loop
Loops can execute a block of code a number of times.
Syntax :
for(intialization; condition; updation)
{
________statement1;
________statement2;
}
Example:
let arr = [1,2,3,4,5,6]
for(let i =0 ; i < ar.length ; i++)
{
console.log(ar[i])
}
let arr = [1,2,3,4,5,6]
for(let i =0 ; i < ar.length ; i++)
{
console.log(ar[i])
}
JS While Loop
The while loop loops through a block of code as long as a specified condition is true.
Syntax :
while (condition) {
// code block to be executed
}
Example:
let j = 0;
while (j< ar.length)
{ console.log(ar[j])
j++;
}
let j = 0;
while (j< ar.length)
{ console.log(ar[j])
j++;
}
JS Anonymous Function
An anonymous function in JavaScript is a function that has no name
Example:
const x = function (a, b) {return a * b};
alert(x(2,3))
- The function above is actually an anonymous function (a function without a name).
- Functions stored in variables do not need function names. They are always invoked (called) using the variable name.
- The function above ends with a semicolon because it is a part of an executable statement.
const x = function (a, b) {return a * b};
alert(x(2,3))
Ways to print in JS
1. console.log() : prints the message on console.
Example:
console.log(“Hello”)
2. alert() : method prints the output data as an alert message in the browser.
Example:
alert(“Hello”)
3. document.write() : method prints the text on the browser’s webpage.
Example:
document.write(“Hello”)
console.log(“Hello”)
alert(“Hello”)
document.write(“Hello”)
What JS can do ?
- Change HTML element.
- Change HTML styles (CSS).
- Can hide HTML element.
- Can show HTML element.
- Can add and remove class in an HTML element
You can fetch HTML element through JS using :
1. id : document.getElementById(“”)
2. tag name : document.getElementByTagName(“”)
3. class : document.getElementByClassName(“”)
Example 1:
document.getElementById("main").innerHTML = “Hello World”;
[It will fetch that element with the id “para1” and change its HTML content to “Hello world”]
document.getElementById("main").innerHTML = “Hello World”;
Example 2:
document.getElementById("main").style.fontsize = “30px”;
[It will fetch that element with the id “para1” and change its font size to “30px”]
document.getElementById("main").style.fontsize = “30px”;
Example 3:
document.getElementById("main").style.display = “none”;
[It will fetch that element with the id “demo” and change its display to “none” ( to hide that element) ]
document.getElementById("main").style.display = “none”;
Example 4:
document.getElementById("main").style.display = “block”;
[It will fetch that element with the id “demo” and change its display to “block”( to show that element) ]
document.getElementById("main").style.display = “block”;
Example 5:
let element = document.getElementById("main");
element.classList.add("mystyle");
[It will add class “mystyle” to the HTML element with the id “demo”]
let element = document.getElementById("main");
element.classList.add("mystyle");
Example 6:
let element = document.getElementById("main");
element.classList.remove("mystyle");
[It will remove class “mystyle” to the HTML element with the id “demo”]
let element = document.getElementById("main");
element.classList.remove("mystyle");
onclick event
The onclick event occurs when the user clicks on an HTML element.
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
</head>
<body>
<h1 id="main" >This is heading1</h1>
<p id="sub" >This is an paragraph </p>
<button onclick ="myfunction()" >Click Me </button>
<script>
function myfunction(){
alert('Button is clicked')
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
</head>
<body>
<h1 id="main" >This is heading1</h1>
<p id="sub" >This is an paragraph </p>
<button onclick ="myfunction()" >Click Me </button>
<script>
function myfunction(){
alert('Button is clicked')
}
</script>
</body>
</html>