This is html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javscript</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
border: 2px solid red;
margin: 3px 0;
background: cyan;
padding: 9px;
}
.bg-primary{
background-color:blueviolet ;
}
.text-success{
color: white;
}
</style>
</head>
<body>
<h1>Welcome to this Javscript tutorial</h1>
<div id="firstcontainer" class="container">
<button id="click" onclick="clicked()">click me</button>
<p>this is paragraph which</p>
</div>
<div class="container">
<p>This is a paragraph</p>
</div>
<script src="index.js"></script>
</body>
</html>
this is JavaScript
//1. ways to print in Javascript
// console.log("hellow world");
//alert("me")
// javascript console API
//alert("me")
//document.write("This is document write")
//2.Javascript console API
console.log("hello world", 4 + 6, "another log");
console.warn("This is warning");
console.error('This is an error')
/*
multiline
line
comment*/
//3. Javascript variables
// What are the variables?? -containers to store data values
var number1 = 34;
var number2 = 56;
console.log(number1 + number2);
//4. Data type in JavaScript
//numbers
var num1 = 23;
var num2 = 35;
//string
var str1 = 'this is a string';
var str2 = 'This is also a string'
// objects
var marks = {
ravi: 34,
shubham: 78,
harry: 99.977
}
//booleans
var a = true;
var b = false;
console.log(a, b);
var und = undefined;
console.log(und)
var n = null;
console.log(n)
/*At a very high level , there are two of data types in Javascript
1. Primitive data types: undefined, null, number, string, boolean, Symbol
2. Referance data types: Array and Object
*/
var arr = [1, 2, 3, 4, 5]
console.log(arr)
// operators in Javasceript
// Arithmetic operators
var a = 34;
var b = 56;
console.log("The vale of a + b is ", a + b)
console.log("The vale of a - b is ", a - b)
console.log("The vale of a * b is ", a * b)
console.log("The vale of a / b is ", a / b)
// assignment operator
var c = b;
// c +=2;
// c-=2;
// c*=2;
c /= 2;
console.log(c)
// comparison operator
var x = 34;
var y = 56;
// console.log(x==y);
// console.log(x<=y);
// console.log(x>=y);
// console.log(x>y);
// console.log(x<y);
// Logical Operator
// logical OR (||)
// console.log(true || true)
// console.log(true || false)
// console.log(false || true)
// console.log(false || false)
//logical And (&&)
// console.log(true && true)
// console.log(true && false)
// console.log(false && true)
// console.log(false && false)
// ligical not (!)
console.log(!false);
console.log(!true)
// Function in JavaScript
function avg(a, b) {
return (a + b) / 2;
}
c1 = avg(32, 12);
c2 = avg(14, 16);
console.log(c1, c2)
var age = 19;
// coditional in Javascript
// if (age>18){
// console.log('you can drink rasana water');
// }
// //if-esle statement
// if (age>18){
// console.log('You can drink rasan water')
// }
// else{
// console.log("you cannot drink rasana water");
// }
age = 10;
//if-else ladder
/*
if(age>32){
console.log("you are not a kid")
}
else if (age>26){
console.log("Bacche nahi rahe")
}
else if (age>22){
console.log("yes bacche nahi rahe")
}
else if (age>18){
console.log("18 nahi raeh");
}
else {
console.log("bacche rahe")
}
console.log("end of ladder");
*/
//
var arr = [1, 2, 3, 4, 5, 6, 7]
// for (var i=0;i<arr.length;i++){
// console.log(arr[i])
// }
// arr.forEach(function(element){
// console.log(element)
// })
// const ac=0;
// ac++;
// ac= ac+1; //shows error thro
let j = 0;
// while loop
// while(j<arr.length){
// console.log(arr[j]);
// j ++;
// }
// // do-while loop
// do{
// console.log(arr[j]);
// j++;
// } while (j < arr.length);
let myarr = ["fan", "camera", 34, null, true, ]
//array methods
console.log(myarr.length);
// myarr.pop();
// myarr.push("avi");
//myarr.shift()
//myarr.unshift('avi')
const newlen=myarr.unshift('avi')
console.log(newlen) //gives lenth of array
console.log(myarr)
// String mehtods in JavaScript
let myLovelyString = "avi is a good boy good";
// console.log(myLovelyString.length)
// console.log(myLovelyString.indexOf("good")); // gives idex of 1st occurance of good
// console.log(myLovelyString.lastIndexOf('good')) // gives index of last good
//console.log(myLovelyString.slice(1,7))
d=myLovelyString.replace("avi", 'rohan')
// d=d.replace("good","bad")
// console.log(d,myLovelyString)
let mydate= new Date();
// console.log(mydate.getTime());
// console.log(mydate.getFullYear());
// console.log(mydate.getDay()); //starting from sunday=0
// console.log(mydate.getMinutes());
// console.log(mydate.getHours())
// DOM (Document Object Model) Manupulation
let elem=document.getElementById('click');
console.log(elem)
let elemClass=document.getElementsByClassName('container');
console.log(elemClass);
//elemClass[0].style.background = "yellow"; //background color yellow
elemClass[0].classList.add("bg-primary") //background color violet
elemClass[0].classList.add('text-success') //add class
// console.log(elem.innerHTML);
// console.log(elem.innerText);
// console.log(elemClass[0].innerHTML);
// console.log(elemClass[0].innerText);
tn=document.getElementsByTagName('div');
console.log(tn)
createdElement= document.createElement('p');
createdElement.innerText= "this is created para";
tn[0].appendChild(createdElement)
createdElement2= document.createElement('b');
createdElement2.innerText= "this is created bold";
tn[0].replaceChild(createdElement2,createdElement)
//reomoveChild(element); ----> remove an element
// Selecting using Query
sel = document.querySelector(".container")
console.log(sel)
sel = document.querySelectorAll(".container")
console.log(sel)
// Events in Javascript
// function clicked(){
// console.log('the button was clicked');
// }
// window.onload= function(){
// console.log('the document was loaded');
// }
// firstcontainer.addEventListener('click', function(){
// document.querySelectorAll(".container")[1].innerHTML = "<b> we have clicked </b>"
// console.log("clicked on container");
// })
// firstcontainer.addEventListener('mouseover', function(){
// console.log("Mouse on container");
// })
// firstcontainer.addEventListener('mouseout', function(){
// console.log("Mouse out of container");
// })
// let prevHTML = document.querySelectorAll('.container')[1].innerHTML;
// firstcontainer.addEventListener('mouseup', function(){
// document.querySelectorAll(".container")[1].innerHTML=prevHTML;
// console.log("Mouse up when clicked on container");
// })
// firstcontainer.addEventListener('mousedown', function(){
// document.querySelectorAll(".container")[1].innerHTML = "<b>we have clicked</b>"
// console.log("Mouse down when clicked on container");
// })
// function summ(a,b){
// return a+b;
// }
// summ= (a,b)=>{
// return a+b;
// }
//setTimeout and Setintrval
logkaro= ()=>{
document.querySelectorAll(".container")[1].innerHTML = "<b>set interval fired</b>"
console.log("I am your log")
}
// setTimeout(logkaro, 2000);
// clr = setInterval(logkaro,2000) // use clearInterval/clearTimeout to cancel setInterval/setTimeout
// JavaScript Local Storage
// localStorage.setItem('name','avi')
// undefined
// localStorage
// Storage {name: "avi", length: 1}
// localStorage.getItem('name')
// localStorage.removeItem('name')
//localStorage.clear()
// Json
// obj= {name: "avi", length: 1, a:{this: 'that"t'}}
// jso =JSON.stringify(obj); //obj to json string
// console.log(typeof jso)
// console.log(jso)
// parsed = JSON.parse(`{"name":"avi","length":1,"a":{"this":"that"}}`)
// console.log(parsed);
// Template literals - Badkticks
a=34;
console.log(`this is my ${a}`)