karkranikhil/API

## API
<!DOCTYPE html>
<html>
<head>
    <title>Browser and Events</title>
</head>

<body>
<button onclick="showAlert();">Show</button>
<button onclick="cancelAlert();">Cancel</button>

<!-- interval -->
<p id="text">JavScript setInterval Demo</p>
  <button onclick="start()">Start</button>
  <button onclick="stop()">Stop</button>
    <script>
/**display an alert dialog.***/
   // alert("Hello")

/****display a modal dialog with a question.****/
/**confirm return true and false***/
    /*let result = confirm('Are you sure you want to delete?');
    let message = result ? 'You clicked the OK button' :
        'You clicked the Cancel button';
    alert(message);*/


/**************Prompt*************/
    /*let lang = prompt('What is your Name?');
    let feedback = lang.toLowerCase() === 'nikhil' ? `Yes` : `No`;
    alert(feedback);*/


/*****setTimeout**********/

/*In this syntax:

 cb is a callback function to be executed after the timer expires.
delay is the time in milliseconds that the timer should wait before executing the callback function. If you omit it, the delay defaults to 0.
arg1, arg2, … are arguments passed to the cb callback function.*/

//The setTimeout() returns a timeoutID which is a positive integer identifying the timer created as a result of calling the method.

var timeoutID;

function showAlert() {
    timeoutID = setTimeout(alert, 3000, 'setTimeout Demo!');
}

function cancelAlert() {
    console.log("cancelled successfully")
    clearTimeout(timeoutID);
}
// call the callback function repeatedly with a fixed delay between each call.
let intervalID;

    function toggleColor() {
      let e = document.getElementById('text');
      e.style.color = e.style.color == 'red' ? 'blue' : 'red';
    }

    function stop() {
      clearInterval(intervalID);
    }

    function start() {
       intervalID = setInterval(toggleColor, 1000);
    }


//Syntax for SAVING data to localStorage:
//sessionStorage
localStorage.setItem("code", "12345");

//Syntax for READING data from localStorage:

var code = localStorage.getItem("code");

//Syntax for REMOVING data from localStorage:

localStorage.removeItem("code");
/****location****/

//https://marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode
/*
 location.href- returns the href (URL) of the current page
location.hostname- returns the domain name of the web host
location.pathname - returns the path and filename of the current page
location.protocol - returns the web protocol used (http: or https:)
location.assign - loads a new document*/

    //location.assign("https://google.com")

/************Navigator*****************/
navigator.language
navigator.onLine;

   //geolocation
    function getLocation() {
    navigator.geolocation.watchPosition(function(position) {
   console.log(position)
});
}
getLocation()


/***Screen api ********/
The Screen object is typically used by the web analytic software like Google Analytics to collect information of the client device on which the web browsers are running.
// Returns the screen orientation as specified in the Screen Orientation API
screen.orientation

//	Represents the pixel height of the screen.
screen.height


/*********history api*********/
    </script>


</body>
</html>

## custom event
<!DOCTYPE html>
<html>
<head>
    <title>Custom Event</title>
</head>

<body>
 <button id="btn">click me</button>
 <div id="msg"></div>
    <script>

/***create an event****/
let elem = document.querySelector("#btn")
let msg = document.querySelector("#msg")

elem.addEventListener("click", function(e){
    /***add an event****/
    let helloEvent = new CustomEvent("showmsg", {
      detail:"hello msg",
      bubbles: false,
	  cancelable: false
  })
   /***trigger the event****/
  elem.dispatchEvent(helloEvent)
})

elem.addEventListener("showmsg", function(e){
    console.log(e.detail)
    msg.innerText = e.detail
})


    </script>
</body>
</html>

## DOM
<!DOCTYPE html>
<html>
<title>Javascript Session 3</title>

<body>
    <p id="hello" variant="brand">Hello Everyone</p>
    <p class="myclass">I hope You are doing great</p>
    <div class="myclass">Let's learn something new<div>
</body>
<script>
/***********Document Object Model ***********/

// When a web page is loaded, the browser creates a Document Object Model of the page.
// The HTML DOM model is constructed as a tree of Object/Nodes
// It provides API that allows you to add, remove, and modify parts of the document effectively.
// In this DOM tree, the document is the root node. The root node has one child which is the <html> element. The <html> element is called the document element


/************DOM Manipulation ***********/

/***Fetch element using ID *********/
let elemId = document.getElementById("hello")
console.log("fetch by id", elemId)


/***Fetch element using class *********/
//getElementsByClassName return array of nodes

let elemClass = document.getElementsByClassName("myclass")
console.log("fetch by id", elemClass)


/***Fetch element using querySelector *********/
// The querySelector() allows you to find the first element based on selector, it works with id, class or any combinations
let byId = document.querySelector("#hello")
let byClass = document.querySelector(".myclass")
let byTag = document.querySelector("p")


/***Fetch element using queryAllSelector *********/
// The querySelectorAll() allows you to find all the lement based on selector, it also works with id, class or any combinations.
// It returns the array-like nodes
let allId = document.querySelectorAll("p")
let allClass = document.querySelectorAll(".myclass")


/**************Traversing of element **************/
// fetch all the childrem
document.querySelector("body").children
// fetch the first child
document.querySelector("body").firstElementChild

/*******************Manipulating elements*************************** */
// innerText replace the text of the tags
// document.querySelector(".myclass").innerText ="hey hurray"

// innerHTML replace the text of the HTML tags
// document.querySelector(".myclass").innerHTML ="<div>hey hurray</div>"


/********************Manipulating Attributes***************************** */
// getAttribute allow you to fetch the value of the Attributes
// document.querySelector("#hello").getAttribute("variant")

// setAttribute allow you to set the value of the Attributes
//document.querySelector("#hello").setAttribute("variant","success")

/********************Manipulating Element;s style Attributes***************************** */
// using style property you can add any css individually
document.querySelector("#hello").style.fontSize='40px'

//exam important

document.querySelector("#hello").style.visibility="hidden"
document.querySelector("#hello").style.visibility="visible"

// filtering of list prefer display property not visibility
document.querySelector("#hello").style.display="none"
document.querySelector("#hello").style.display="block"


//classList allow you to add and remove the class dynamically
document.querySelector("#hello").classList.add("show")

document.querySelector("#hello").classList.remove("show")

</script>


</html>

## Event flow
<!DOCTYPE html>
<html>
<title>Javascript Session 3</title>

<body id="body">
    <div id="div_wrapper">
        <button id="btn"> click me</button>

        <!-- <a href="https://www.google.com/" id="link">Google</a> -->
    </div>
</body>
<script>
// Introduction to JavaScript events
// An event is an action that occurs in the web browser, which the web browser feedbacks to you so that you can respond to it.
// For example, when users click a button on a webpage, you may want to respond to this click event by displaying a alert box.

// Event handler -  It is a block of code that will execute when the event occurs. It is also known as an event listener.
let btn = document.querySelector('#btn');
//element.addEventListener(event, function, useCapture);
btn.addEventListener('click',function(){
    alert('It was clicked!');
});
// First, select the button with the id btn by using the querySelector() method.
// Then, define a function called display() as an event handler.
// Finally, register an event handler using the addEventListener() so that when users click the button, the display() function will be executed.


/*********Event Flows************ */
// Event flow explains the order in which events are received on the page from the element where the event occurs and propagated through the DOM tree

// let btn = document.querySelector('#btn');
// let div_wrapper = document.querySelector('#div_wrapper');
// let body = document.querySelector('#body');
// btn.addEventListener('click',function(){
//     alert('button clicked!');
// });
// div_wrapper.addEventListener('click',function(){
//     alert('div wrapper clicked!');
// });
// body.addEventListener('click',function(){
//     alert('Body clicked clicked!');
// });

/*****Event Capture phase *******/
// let btn = document.querySelector('#btn');
// let div_wrapper = document.querySelector('#div_wrapper');
// let body = document.querySelector('#body');
// btn.addEventListener('click',function(){
//     alert('button clicked!');
// });
// div_wrapper.addEventListener('click',function(){
//     alert('div wrapper clicked!');
// });
// body.addEventListener('click',function(){
//     alert('Body clicked clicked!');
// }, true);

/***********Event Object************ */
// btn.addEventListener('click',function(event){
//    console.log(event.currentTarget);
//    console.log(event.target);
// });
body.addEventListener('click',function(event){
   console.log(event.currentTarget);
   console.log(event.target);
});

/***prevent default */
// Note that the preventDefault() method does not stop the event from bubbling up the DOM but stop the default operation
// let link = document.querySelector('#link');

link.addEventListener('click',function(event) {
    console.log('clicked');
    event.preventDefault();
});

/********Stop propagation ****/
btn.addEventListener('click',function(event){
   console.log("btn clicked");
   event.stopPropagation()
});
body.addEventListener('click',function(event){
   console.log("body clicked");
});
</script>


</html>

## Event Handling
<!DOCTYPE html>
<html>
<title>Javascript Session 3</title>

<body>
    <input type="button" value="Save" onclick="showAlert()">
    <button id="btn">click me</button>
     <button id="remove">remove click</button>
</body>
<script>
/****** HTML event handler attributes****** */
// function showAlert(){
//     alert("hey alert")
// }


/***********DOM Level 0 event handlers******** */
//Each element has event handler properties such as onclick. To assign an event handler, you set the property to a function as shown in the example:
// in this case, the anonymous function becomes the method of the button element. Therefore, the this value is equivalent to the element. And you can access the element’s properties inside the event handler:
// let btn = document.querySelector('#btn');

// btn.onclick = function() {
//     alert('Clicked!');
// };

/************ DOM Level 2 event handlers******** */
//1. The addEventListener() method
// The addEventListener() method accepts three arguments: an event name, an event handler function, and a Boolean value that instructs the method to call the event handler during the capture phase (true) or during the bubble phase (false)

//element.addEventListener(event, function, useCapture);


let btn = document.querySelector('#btn');
let showAlert = function() {
    alert('Clicked!');
};
btn.addEventListener('click',showAlert);


let removebtn = document.querySelector('#remove');
removebtn.addEventListener('click',function(event) {
    btn.removeEventListener('click',showAlert);
});

</script>


</html>

## Page Load Event
<!DOCTYPE html>
<html>
<head>
    <title>JS Page Load Events</title>
</head>

<body>
 <a href="https://www.google.com/">Google</a>
    <script>
  //the browser fully loaded HTML and completed building the DOM tree. However, it hasn’t loaded external resources like stylesheets and images. In this event, you can start selecting DOM nodes or initialize the interface.

        window.addEventListener('DOMContentLoaded', (event) => {
            console.log('The DOM is fully loaded.');
        });
//the browser fully loaded the HTML and also external resources like images and stylesheets
        window.addEventListener('load', (event) => {
            console.log('The page is fully loaded.');
        });
//fires before the page and resources are unloaded. You can use this event to show a confirmation dialog to confirm if you really want to leave the page. By doing this, you can prevent data loss in case you are filling out a form and accidentally click a link to navigate to another page.
        window.addEventListener('beforeunload', (event) => {
            event.preventDefault();
           // Google Chrome requires returnValue to be set.
            event.returnValue = '';
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Browser and Events</title>
	</head>

	<body>
	<button onclick="showAlert();">Show</button>
	<button onclick="cancelAlert();">Cancel</button>

	<!-- interval -->
	<p id="text">JavScript setInterval Demo</p>
	<button onclick="start()">Start</button>
	<button onclick="stop()">Stop</button>
	<script>
	/display an alert dialog.*/
	// alert("Hello")

	/**display a modal dialog with a question.**/
	/confirm return true and false*/
	/*let result = confirm('Are you sure you want to delete?');
	let message = result ? 'You clicked the OK button' :
	'You clicked the Cancel button';
	alert(message);*/


	/************Prompt***********/
	/*let lang = prompt('What is your Name?');
	let feedback = lang.toLowerCase() === 'nikhil' ? `Yes` : `No`;
	alert(feedback);*/


	/***setTimeout********/

	/*In this syntax:

	cb is a callback function to be executed after the timer expires.
	delay is the time in milliseconds that the timer should wait before executing the callback function. If you omit it, the delay defaults to 0.
	arg1, arg2, … are arguments passed to the cb callback function.*/

	//The setTimeout() returns a timeoutID which is a positive integer identifying the timer created as a result of calling the method.

	var timeoutID;

	function showAlert() {
	timeoutID = setTimeout(alert, 3000, 'setTimeout Demo!');
	}

	function cancelAlert() {
	console.log("cancelled successfully")
	clearTimeout(timeoutID);
	}
	// call the callback function repeatedly with a fixed delay between each call.
	let intervalID;

	function toggleColor() {
	let e = document.getElementById('text');
	e.style.color = e.style.color == 'red' ? 'blue' : 'red';
	}

	function stop() {
	clearInterval(intervalID);
	}

	function start() {
	intervalID = setInterval(toggleColor, 1000);
	}


	//Syntax for SAVING data to localStorage:
	//sessionStorage
	localStorage.setItem("code", "12345");

	//Syntax for READING data from localStorage:

	var code = localStorage.getItem("code");

	//Syntax for REMOVING data from localStorage:

	localStorage.removeItem("code");
	/**location**/

	//https://marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode
	/*
	location.href- returns the href (URL) of the current page
	location.hostname- returns the domain name of the web host
	location.pathname - returns the path and filename of the current page
	location.protocol - returns the web protocol used (http: or https:)
	location.assign - loads a new document*/

	//location.assign("https://google.com")

	/**********Navigator***************/
	navigator.language
	navigator.onLine;

	//geolocation
	function getLocation() {
	navigator.geolocation.watchPosition(function(position) {
	console.log(position)
	});
	}
	getLocation()


	/*Screen api ******/
	The Screen object is typically used by the web analytic software like Google Analytics to collect information of the client device on which the web browsers are running.
	// Returns the screen orientation as specified in the Screen Orientation API
	screen.orientation

	// Represents the pixel height of the screen.
	screen.height


	/*******history api*******/
	</script>



	</body>
	</html>
	<!DOCTYPE html>
	<html>
	<title>Javascript Session 3</title>

	<body>
	<p id="hello" variant="brand">Hello Everyone</p>
	<p class="myclass">I hope You are doing great</p>
	<div class="myclass">Let's learn something new<div>
	</body>
	<script>
	/*********Document Object Model *********/

	// When a web page is loaded, the browser creates a Document Object Model of the page.
	// The HTML DOM model is constructed as a tree of Object/Nodes
	// It provides API that allows you to add, remove, and modify parts of the document effectively.
	// In this DOM tree, the document is the root node. The root node has one child which is the <html> element. The <html> element is called the document element


	/**********DOM Manipulation *********/

	/*Fetch element using ID *******/
	let elemId = document.getElementById("hello")
	console.log("fetch by id", elemId)


	/*Fetch element using class *******/
	//getElementsByClassName return array of nodes

	let elemClass = document.getElementsByClassName("myclass")
	console.log("fetch by id", elemClass)


	/*Fetch element using querySelector *******/
	// The querySelector() allows you to find the first element based on selector, it works with id, class or any combinations
	let byId = document.querySelector("#hello")
	let byClass = document.querySelector(".myclass")
	let byTag = document.querySelector("p")


	/*Fetch element using queryAllSelector *******/
	// The querySelectorAll() allows you to find all the lement based on selector, it also works with id, class or any combinations.
	// It returns the array-like nodes
	let allId = document.querySelectorAll("p")
	let allClass = document.querySelectorAll(".myclass")


	/************Traversing of element ************/
	// fetch all the childrem
	document.querySelector("body").children
	// fetch the first child
	document.querySelector("body").firstElementChild

	/*****************Manipulating elements************************* */
	// innerText replace the text of the tags
	// document.querySelector(".myclass").innerText ="hey hurray"

	// innerHTML replace the text of the HTML tags
	// document.querySelector(".myclass").innerHTML ="<div>hey hurray</div>"


	/******************Manipulating Attributes*************************** */
	// getAttribute allow you to fetch the value of the Attributes
	// document.querySelector("#hello").getAttribute("variant")

	// setAttribute allow you to set the value of the Attributes
	//document.querySelector("#hello").setAttribute("variant","success")

	/******************Manipulating Element;s style Attributes*************************** */
	// using style property you can add any css individually
	document.querySelector("#hello").style.fontSize='40px'

	//exam important

	document.querySelector("#hello").style.visibility="hidden"
	document.querySelector("#hello").style.visibility="visible"

	// filtering of list prefer display property not visibility
	document.querySelector("#hello").style.display="none"
	document.querySelector("#hello").style.display="block"





	//classList allow you to add and remove the class dynamically
	document.querySelector("#hello").classList.add("show")

	document.querySelector("#hello").classList.remove("show")

	</script>


	</html>