JAVA SCIPT TUTORIAL FRINT END
1. JAVA SCRIPT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java Script</title>
</head>
<body>
<div class="container">
<div class="row">
<p>
This is row in this container
</p>
</div>
</div>
<!-- WRITE YOUR JS HERE -->
<script>
console.log('Hello World')
</script>
</body>
</html>
2. JAVA SCRIPTS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java Script</title>
<script>
var a = 78;
var b = "shivam";
c = 34.55;
console.log(c);
// OPERATORS IN JACASCRIPT
// OPERAND - ENTITIES ON WHICH OPERATORS OPERATE
// EXAMPLES
// IN 3+4 '+' IS THE OPERATOE AND 3,4 ARE OPERANDS
// 1. UNARY OPERATOR - IT HAS SINGLE OPERAND( X = -X)
// EXAMPLES OF UNARY OPERATOR
c = -c
console.log(c);
// 2. BINARY OPERATOR - IT HAS TWO OPERAND( X = X+6)
// EXAMPLES OF BINARY OPERATOR
C = 456 + 8;
console.log(C);
var num1 = 5;
var num2 = 7;
// ARITHMETIC OPERATORS IN ACTION IN JAVASCRIPT
console.log("The value of num1 + num2 is " + (num1 + num2));
console.log("The value of num1 - num2 is " + (num1 - num2));
console.log("The value of num1 * num2 is " + (num1 * num2));
console.log("The value of num1 / num2 is " + (num1 / num2));
console.log("The value of num1 ** num2 is " + (num1 ** num2));
console.log("The value of num1 ++ is " + (num1++));
console.log("The value of ++num1 is " + (++num1));
console.log("The value of num1 -- is " + (num1--));
console.log("The value of --num1 is " + (--num1));
</script>
</head>
<body>
<div class="container">
<h1>This is a Heading</h1>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum eaque doloribus iure sit natus ducimus
molestiae placeat cum atque tempore quod aliquam, dolorem, ipsam ab accusantium neque. Maxime placeat,
nulla aut corporis commodi aliquid sed fuga, nam soluta, assumenda quae tenetur unde maiores animi
deleniti.</p>
</div>
</div>
</body>
</html>
3. JAVA SCIPT |Strings and String Methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java Script |Strings and String Methods </title>
</head>
<body>
<div class="container">
<h1>
Lorem ipsum dolor sit amet.
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur reprehenderit delectus qui eligendi,
saepe officia dolorem laboriosam pariatur enim. Recusandae consequatur repudiandae maiores praesentium
facilis voluptatem, molestiae quod corporis.</p>
</div>
<script>
// var string = "this";
var string = 'thi"s';
var name = 'shivam';
var channel = 'CodeWithShivam';
var message = 'Shivam is good boy';
var temp = `${name} is a 'nice' person "and" he has a channel called ${channel}`;
// console.log(string + name + message);
// console.log(temp);
// var len = name.length;
// console.log(`Length of name is${len}`)
// console.log("Hello \\world\nShivam\tand");
var y = new String("this");
console.log(y);
</script>
</body>
</html>
4. Java Script String Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java Script String Function</title>
<style>
</style>
</head>
<body>
<script>
var str = "This is a string";
console.log(str);
//FIRST OCCURENCE OF A SUBSTRING
var postion = str.indexOf('is');
console.log(postion);
//LAST OCCURENCE OF A SUBSTRING
postion = str.lastIndexOf('is');
console.log(postion);
//SUBSTRING FROM A STEING
// var substr = str.slice(1, 7);
// var substr = str.substring(1, 7);
var substr1 = str.substr(1, 7);
console.log(substr1);
var replaced = str.replace('string', 'Shivam')
console.log(str);
console.log(replaced);
console.log(str.toUpperCase());
console.log(str.toLowerCase());
var newString = str.concat(' New String my name is shivam');
console.log(newString);
var strWithWhitespaces = " this contains whitespaces ";
console.log(strWithWhitespaces);
console.log(strWithWhitespaces.trim());
var char2 = str.charAt(2);
var char2code = str.charCodeAt(2); // not very importent
console.log(char2);
console.log(char2code);
console.log(str[3]);
</script>
</body>
</html>
5. Java Sript Scope and conditionals
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java Sript Scope and conditionals</title>
<style>
</style>
</head>
<body>
<div>
<ul>
<li>Iten-1</li>
<li>Iten-2</li>
<li>Iten-3</li>
<li>Iten-4</li>
<li>Iten-5</li>
<li>Iten-6</li>
<li>Iten-7</li>
</ul>
</div>
<script>
// var string1 = "This is String";
// var string1 = "This is String2";
// console.log(string1);
// let a = "u";
// {
// let a = "u6";
// console.log(a);
// }
// console.log(a);
// const a = "This cannot be changed";
// a = " I want to change this. This cannot be changed";
// console.log(a);
// let age = 5;
// if (age > 18) {
// console.log("You can drink Whater");
// }
// else if (age == 2) {
// console.log("Agr is 2");
// }
// else if (age == 5) {
// console.log("Age is 5");
// }
// else {
// console.log("You can drink cold Drink");
// }
// const cups = 45;
// const cups = 4;
// const cups = 31;
const cups = 44;
switch (cups) {
case 4:
console.log("This valu of cups is 4");
break;
case 31:
console.log("This valu of cups is 31");
break;
case 40:
console.log("This valu of cups is 40");
break;
case 44:
console.log("This valu of cups is 44");
break;
default:
console.log("This valu of cups is none of 4 31 40 44");
break;
}
</script>
</body>
</html>
6. Java Script Arrays and Object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java Script Arrays and Object</title>
<style>
</style>
</head>
<body>
<div class="container">simple si html</div>
<script>
let myvar = 34;
let myvar2 = "String";
let myvar3 = true;
let myvar4 = null;
let myvar5 = undefined;
// let employee = {
// name: "Shivam",
// salary: 10,
// channel1: "CodeWithShivam",
// "channel 2": "ProgrammingWithShivam",
// }
// console.log(employee);
// let names = [1, 2, 4, "Shivam", undefined];
// let names = new Array(41, 2, 4, "Shivam", undefined);
let names = new Array(23);
console.log(names.length);
names = names.sort();
names.push("this is pushed");
console.log(names);
</script>
</body>
</html>
7. Java Script Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java Script Function</title>
</head>
<body>
<div class="container">
This is a contanier
</div>
</body>
<script src="/JS53.js"></script>
</html>
JS
console.log("This is tutorial 53");
function greet(name, greetText = "Greetings from JavaScript") {
let name1 = "Name1";
console.log(greetText + " " + name);
console.log(name + " is a good boy ");
}
function sum(a, b, c) {
let d = a + b + c;
return d;
// THIS LINE NEVR EXECUTE (UNREACHABLE CODE)
// console.log("Function is returned");
}
let name1 = "Shivam ji";
let name2 = "Saurabh";
let name3 = "Sonu";
let name4 = "Sohan";
let name5 = "Sundaram";
let greetText1 = "Good Morning";
greet(name1, greetText1);
greet(name2, greetText1);
greet(name3, greetText1);
greet(name4, greetText1);
greet(name5);
// UNDIFIND CODE
// let returnVel = greet(name1);
// console.log(returnVal);
let returnVel = sum(1, 2, 3);
console.log(returnVel);
// console.log(name1 + " is a good boy ");
// console.log(name2 + " is a good boy ");
// console.log(name3 + " is a good boy ");
// console.log(name4 + " is a good boy ");
// console.log(name5 + " is a good boy ");
8. Interaction using alert, confirm and prompt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interaction using alert, confirm and prompt</title>
</head>
<body>
<div class="container">
This is a page
</div>
<script>
//ALERT IN IN-BROWSER JAVASCRIPT - dose not return anything
// alert("This/ is a message")
// PROMPT IN JS
// let name = prompt("what is your name?", "gust");
// console.log(name);
// CONFIRM IN JS
let deletePost = confirm("Do you reaily want to delete this post RAVI SONI ?");
console.log("deletePost");
if (deletePost) {
console.log("Your post has been deleted successfully");
}
else {
console.log("Your post has not been deleted");
}
</script>
</body>
</html>
9. LOOPS IN JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loops in js</title>
</head>
<body>
<div>
This is abouts loops
</div>
<script>
console.log("This is a tutoeial 55");
// let i = 0;
// for (i = 0; i < 3; i++) {
// console.log(i);
// }
let friends = ["Shivam", "Saurabh", "Sundaram", "Sohan", "Shiv"];
// for (let index = 0; index < friends.length; index++) {
// console.log("Hello friends", friends[index]);
// }
// friends.forEach(function f(element) {
// console.log("Hello Friends," + element + " to modern JavaScript");
// });
// for (element of friends) {
// console.log("Hello Friends," + element + " to modern JavaScript again");
// }
let employee = {
name: "Shivam",
salary: 10,
channel1: "CodeWithShivam",
channel2: "ProgrammingWithShivam"
}
// USE THIS LOOP TO ITERATE OVER OBJECTS IN JAVASCRIPT
for (key in employee) {
console.log(`The ${key} of employee is ${employee[key]}`);
}
// WHILE LOOP IN JS
let i = 0;
while (i < 4) {
console.log(`${i} i is less then 4`);
i++;
}
// DO WHILE LOOP IN JS
let j = 34;
do {
console.log(`${j} i is less then 4 and we are inside do while loop`);
j++;
} while (j < 4);
</script>
</body>
</html>
10. Manipulating DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manipulating DOM</title>
</head>
<body>
<div id="main" class="container">
<ul id="nav">
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
<li>Services</li>
<li>Offers</li>
</ul>
</div>
<div class="container">
Another container
</div>
<script>
let main = document.getElementById('main');
console.log(main);
let nav = document.getElementById('nav');
console.log(nav);
let container = document.getElementsByClassName('container');
console.log(container);
// let sel = document.querySelector('#nav>li');
// console.log("Selector returns ", sel);
let sel = document.querySelectorAll('#nav>li');
console.log("Selector returns ", sel);
</script>
</body>
</html>
11. JS EVENTS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Events</title>
<style>
#btn {
background-color: rgb(252, 19, 97);
padding: 12px;
border: 3px solid rgb(13, 209, 7);
color: black;
font-weight: bolder;
border-radius: 13px;
cursor: pointer;
}
#btn:hover {
background-color: lawngreen;
border: 5px solid blue;
}
</style>
</head>
<body>
<!--
BROWSER EVENTS:
click
contextmenu
mouseover/mouseout
mousedown/mouseup
mousemove
submit
focus
DOMContentLoaded
transitionend -->
<div class="container">
<h1>This is my Heading </h1>
<p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur tempora autem debitis
doloribus
expedita voluptate, unde accusantium vitae mollitia qui, minima voluptates dolor assumenda accusamus,
laboriosam illo dicta repellendus iure? Delectus iure incidunt, doloremque rerum labore sit saepe cumque
nihil iusto aperiam voluptate animi inventore modi alias exercitationem illum eveniet hic deleniti! Quam
sunt porro sequi quidem vitae id voluptatem vero, optio dolorem ad, asperiores eos aspernatur provident
minus adipisci velit laboriosam dignissimos voluptas aperiam voluptates quaerat corporis laborum enim
repudiandae. Repellendus modi harum magnam quis error, ut minus ullam recusandae voluptatum asperiores
quidem nesciunt iure fugit amet laborum perferendis sapiente et culpa dolorem temporibus? Minima, aliquid
necessitatibus explicabo labore dolor corrupti similique vitae inventore. Possimus pariatur necessitatibus
laudantium eum culpa quis excepturi rerum sapiente numquam! Consectetur, cumque veritatis cum veniam aliquid
pariatur? Cumque, similique nesciunt eligendi id dolorum voluptates alias quia nulla illum repellendus ipsum
dolor facilis aspernatur quis odio facere sit repudiandae iure autem error unde soluta illo! Nisi adipisci
quia vel aspernatur eligendi impedit architecto dolor voluptas, assumenda maiores labore? Soluta sunt
maiores totam perspiciatis repellat enim obcaecati, libero iusto repellendus eligendi alias, ratione illum
inventore consectetur quaerat ullam non cumque dolor aut tenetur, officiis assumenda odit? Nostrum, iusto
laborum quasi doloremque ut, eius repellendus voluptatibus eveniet necessitatibus quisquam tenetur fugit!
Fuga similique quaerat, et reiciendis pariatur velit itaque quae voluptas repellat magnam architecto
perspiciatis, vel officia qui, porro veniam?</p>
</div>
<button id="btn" onclick="toggleHide()">Show/Hide</button>
<script>
let para = document.getElementById('para');
para.addEventListener('mouseover', function run() {
alert('Mouse Inside')
});
para.addEventListener('mouseout', function run(){
alert('Mouse now went outside')
});
function toggleHide() {
let btn = document.getElementById('btn');
let para = document.getElementById('para');
if (para.style.display != 'none') {
para.style.display = 'none';
}
else {
para.style.display = 'block';
}
}
</script>
</body>
</html>
12. JavaScript SetTimeOut and ClearTimeout
<!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 SetTimeOut and ClearTimeout</title>
</head>
<body>
<div class="container">
Time now is <span id="time"></span>
</div>
<script>
console.log("This is tutorial 58");
// setTimeout --> Alllows us to run the function once after the interval of time
// clearTimeout --> Alllows us to run the function repeatedly after the interval of time
function greet(name, byeText){
console.log("Hello Good Morning " + name + " " + byeText);
}
// timeOut = setTimeout(greet, 5000, "Harry", "Take Care");
// console.log(timeOut);
// clearTimeout(timeOut);
// setTimeout(greet(), 12000); --> Wrong as it is calling the function inside setTimeout
// intervalId = setInterval(greet, 1000, "Harry", "Good Night");
// clearInterval(intervalId);
function displayTime(){
time = new Date();
console.log(time);
document.getElementById('time').innerHTML = time;
}
setInterval(displayTime, 1000);
</script>
</body>
</html>
13. DATES IN JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Events</title>
<style>
#btn {
background-color: rgb(252, 19, 97);
padding: 12px;
border: 3px solid rgb(13, 209, 7);
color: black;
font-weight: bolder;
border-radius: 13px;
cursor: pointer;
}
#btn:hover {
background-color: lawngreen;
border: 5px solid blue;
}
</style>
</head>
<body>
<!--
BROWSER EVENTS:
click
contextmenu
mouseover/mouseout
mousedown/mouseup
mousemove
submit
focus
DOMContentLoaded
transitionend -->
<div class="container">
<h1>This is my Heading </h1>
<p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur tempora autem debitis
doloribus
expedita voluptate, unde accusantium vitae mollitia qui, minima voluptates dolor assumenda accusamus,
laboriosam illo dicta repellendus iure? Delectus iure incidunt, doloremque rerum labore sit saepe cumque
nihil iusto aperiam voluptate animi inventore modi alias exercitationem illum eveniet hic deleniti! Quam
sunt porro sequi quidem vitae id voluptatem vero, optio dolorem ad, asperiores eos aspernatur provident
minus adipisci velit laboriosam dignissimos voluptas aperiam voluptates quaerat corporis laborum enim
repudiandae. Repellendus modi harum magnam quis error, ut minus ullam recusandae voluptatum asperiores
quidem nesciunt iure fugit amet laborum perferendis sapiente et culpa dolorem temporibus? Minima, aliquid
necessitatibus explicabo labore dolor corrupti similique vitae inventore. Possimus pariatur necessitatibus
laudantium eum culpa quis excepturi rerum sapiente numquam! Consectetur, cumque veritatis cum veniam aliquid
pariatur? Cumque, similique nesciunt eligendi id dolorum voluptates alias quia nulla illum repellendus ipsum
dolor facilis aspernatur quis odio facere sit repudiandae iure autem error unde soluta illo! Nisi adipisci
quia vel aspernatur eligendi impedit architecto dolor voluptas, assumenda maiores labore? Soluta sunt
maiores totam perspiciatis repellat enim obcaecati, libero iusto repellendus eligendi alias, ratione illum
inventore consectetur quaerat ullam non cumque dolor aut tenetur, officiis assumenda odit? Nostrum, iusto
laborum quasi doloremque ut, eius repellendus voluptatibus eveniet necessitatibus quisquam tenetur fugit!
Fuga similique quaerat, et reiciendis pariatur velit itaque quae voluptas repellat magnam architecto
perspiciatis, vel officia qui, porro veniam?</p>
</div>
<button id="btn" onclick="toggleHide()">Show/Hide</button>
<script>
let para = document.getElementById('para');
para.addEventListener('mouseover', function run() {
alert('Mouse Inside')
});
para.addEventListener('mouseout', function run(){
alert('Mouse now went outside')
});
function toggleHide() {
let btn = document.getElementById('btn');
let para = document.getElementById('para');
if (para.style.display != 'none') {
para.style.display = 'none';
}
else {
para.style.display = 'block';
}
}
</script>
</body>
</html>
14. >Arrow Functions
<!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>Arrow Functions</title>
</head>
<body>
<div class="container">
This is arrow functions tutorial.
</div>
<script>
// Arrow function
// let greet = ()=> {
// console.log('Good morning');
// }
let greet = () => console.log('Good morning');
// let sum2 = (a, b)=>{
// return a+b;
// };
let sum2 = (a, b) => a + b;
let half = a => a / 2;
// function greet() {
// console.log('Good morning');
// }
greet();
setTimeout(() => {
console.log("We are inside settimeout");
}, 3000);
let obj1 = {
greeting: "Good Morning",
names: ["Harry", "Rohan", "SkillF", "DjKhiladi"],
speak() {
this.names.forEach((student) => {
console.log(this.greeting + " Kukdoo Koo " + student);
});
}
}
obj1.speak();
</script>
</body>
</html>
15. MATHS OBJECTS
<!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>Math Object</title>
</head>
<body>
<div class="container">
<h1>This is math object tutorial</h1>
</div>
<script>
// Printing the Math Object
let m = Math;
console.log(m)
// Printing the constants from Math Object
console.log("The value of Math.E is ", Math.E)
console.log("The value of Math.PI is ", Math.PI)
console.log("The value of Math.LN2 is ", Math.LN2)
console.log("The value of Math.SQRT1_2 is ", Math.SQRT1_2)
console.log("The value of Math.LOG2E is ", Math.LOG2E)
// Printing the Functions from Math Object
let a = 34.64534;
let b = 89;
console.log("The value of a and b is ", a, b);
console.log("The value of a and b rounded is ", Math.round(a), Math.round(b));
console.log("3 raised to the power of 2 is ", Math.pow(3, 2))
console.log("2 raised to the power of 12 is ", Math.pow(2, 12))
console.log("1 raised to the power of 2 is ", Math.pow(1, 2))
console.log("Square root of 36 is ", Math.sqrt(36))
console.log("Square root of 64 is ", Math.sqrt(64))
console.log("Square root of 50 is ", Math.sqrt(50))
// Ceil and floor
console.log("5.8 rounded up to nearest integer is ", Math.ceil(5.8))
console.log("5.8 rounded down to nearest integer is ", Math.floor(5.8))
// Abs function
console.log("Absolute value of 5.66 is ", Math.abs(5.66))
console.log("Absolute value of -5.66 is ", Math.abs(-5.66))
// Trinonometric Functions
console.log("The value of sin(pi) is ", Math.sin(Math.PI/2))
console.log("The value of tan(pi) is ", Math.tan(Math.PI/2))
console.log("The value of cos(pi) is ", Math.cos(Math.PI/2))
// Min and max functions
console.log("Minimum value of 4, 5, 6 is ", Math.min(4,5, 6));
console.log("Minimum value of 14, 5, 16 is ", Math.min(14,5, 16));
console.log("Maximum value of 4, 5, 6 is ", Math.max(4,5, 6));
console.log("Maximum value of 14, 5, 16 is ", Math.max(14,5, 16));
// Generating a random number
let r = Math.random();
// Random number b/w (a, b) = a + (b-a)*Math.random()
let a1 = 50;
let b1 = 60;
let r50_60 = a1 + (b1-a1)*Math.random();
console.log("The random number is ", r)
console.log("The random number is ", r50_60)
</script>
</body>
</html>
16. JSON TUTORIAL IJ JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Json Tutorial</title>
</head>
<body>
<div class="container">
<h1>This is my container</h1>
</div>
<script>
let jsonObj = {
name: "Harry",
channel: "CWH",
friend: "Rohan Das",
food: "Bhindi"
//#bhindiLoverSquadSSS
}
console.log(jsonObj);
let myJsonStr = JSON.stringify(jsonObj);
console.log(myJsonStr);
myJsonStr = myJsonStr.replace('Harry', 'Larry');
console.log(myJsonStr)
newJsonObj = JSON.parse(myJsonStr);
console.log(newJsonObj)
</script>
</body>
</html>
Comments
Post a Comment