Understanding JavaScript Events and Methods

Javascript

The async attribute allows the browser to process the web page concurrently with loading and processing the JavaScript.

The defer attribute allows the browser to load the web page concurrently with loading the JavaScript, but the JavaScript is not processed until the web page is completely loaded.script src="bootstrap.js" async>script>

A change event is caused by an element value being modified. Ex: Selecting an item in a radio button group causes a change event.

An input event is caused when the value of an input or textarea element is changed.

A load event is caused when the browser completes loading a resource and dependent resources. Usually load is used with the body element to execute code once all the web page's CSS, JavaScript, images, etc. have finished loading.

A DOMContentLoaded event is caused when the HTML file has been loaded and parsed, although other related resources such as CSS, JavaScript, and image files may not yet be loaded.

A focus event is caused when an element becomes the current receiver of keyboard input. Ex: Clicking in an input field causes a focus event.

A blur event is caused when an element loses focus and the element will no longer receive future keyboard input.

A submit event is caused when the user submits a form to the web server.

addEventListener() method to register an event handler for a DOM object. Ex: document.getElementById("myButton").addEventListener("click", clickHandler)

document.documentElement -> html

document.documentElement.children[1] -> body (because head then body)

document.documentElement.children[1].parentNode -> html

var bondStr ='{"name":"James","age":35}';

console.log(bondStr); - {"name":"James","age":35}

var bondObj = JSON.parse(bondStr);

console.log("Happy birthday, "+ bondObj.name); - Happy birthday, James

bondObj.age +=1;

bondStr = JSON.stringify(bondObj);

console.log(bondStr); - {"name":"James","age":36}

console.log(JSON.stringify({ x: 5, y: 6 }));

// expected output: "{\"x\":5,\"y\":6}"

{
    "name":"John",
    "age":31,
    "pets":[
        { "animal":"dog", "name":"Fido" },
        { "animal":"cat", "name":"Felix" },
        { "animal":"hamster", "name":"Lightning" }
    ]
}

document.getElementById("demo").innerHTML = myObj.pets[0].name;

var searchBtn = document.getElementById("search");

searchBtn.addEventListener("click",function(){

var xhr =new XMLHttpRequest();

xhr.addEventListener("load", responseReceivedHandler);

xhr.responseType ="json";

var title = document.getElementById("title");

var queryString ="title="+

encodeURIComponent(title.value);

xhr.open("GET","lookup.php?"+ queryString);

xhr.send();

});

function responseReceivedHandler(){

var movieInfo = document.getElementById("movieinfo");

if(this.status ===200){

var movie =this.response;

movieInfo.innerHTML =""+ movie.title +

": Rated "+ movie.rating +

", released in "+ movie.year;

}else{

movieInfo.innerHTML ="Movie data unavailable.";

}

}

$(".clickMe").click(function(event){

$.ajax({

type:"post",

url: "funPHP.php"

success: function (response){

$(event.target).attr('src', response);

});

});