JS

History of JavaScript

• For implementing the dynamic behaviour of a web site.
• It was called as live script in initial stages.
• Brendan Eich (Netscape navigator) was introduced this JavaScript.(September 1995)
• JavaScript is an interpreter language.
• He tiedup with ECMA (Ecma Scrpt) - ECMA SCRIPT - 262 (ES-262)
• ECMA SCRIPT -2018 is the latest version (ES-9)
• For implementing high end JS modules, We've to focus on ES-6.

Data types

• Number
• String
• Boolean
• Function
• Object
• null
• undefined

Convertion functions

• Number()
• parseInt()
• parseFloat()

Alerts in JavaScript

• alert()

      alert("Hi");

• prompt()

      prompt("Enter your name");

• confirm()

    confirm("Are you sure?");

  Example:

       if(confirm("Are you sure?")==true){
           console.log("Clicked on okay");
       } else {
           console.log("Clicked on cancel");
       }

Console statements

• console.log()

	console.log("This is for displaying an output");

• console.info()

	console.info("This is also for displaying the output");

• console.warn()

	console.warn("This is a warning");

• console.error()

	console.error("Oops! this is error2");

Functions:

• Functions without parameters (static functions):

	// defining a function
	function add(){
		var a=1;
		var b=2;
		return a+b;
	}

	//Calling the above function
	add()

• Functions with parameters (Dynamic functions)

	function multiply(x,y){
		return x*y;
	}

	multiply(2,3)

• Function without name (Anonymous functions)

	var object=function(a,b){
		return a*b;
	}

	object(3,4)
	_______
	Output: 12

• Arrow functions

	var multiply=(x,y)=>{
		return (x*y)
	}

	multiply(5,6);
	______
	Output: 30

Array iteration using map,for-in and for-of

• Map()
  • Syntax:

	arrayName.map({arrow function})

• Example

	var names=["mark zukerburg","Jack dorsey","Tim","Jack ma"];
	// iter holds the values and index holds the index values of an array
	names.map((iter,index)=>{
		console.log(iter);
		console.log(index);
	})

• for-in

	var names=["mark zukerburg","Jack dorsey","Tim","Jack ma"];
	for(i in names){
		console.log(i);
	}

• for-of

	var names=["mark zukerburg","Jack dorsey","Tim","Jack ma"];
	for(i of names){
		console.log(i);
	}

Document Object Model (DOM):

• We can implement JavaScript code any where in html document.
• We've to use script tags for taht (<script> </script>)
• By using document keyword, We can manipulate the data in html document.
• Document object model functions are:

		document.getElementById("id");

• Collections

		document.getElementsByClassName("className");
		document.getElementsByTagName("Tag name");

• Common statements for DOM

		document.querySelector("#selector | .selector | Tag Name Selector");
		document.querySelectorAll(".selector | Tag Name Selector");

innerHTML

innerHTML triggers the information exist with in the tags. Example:

	<div id="second">
		Sample division
	</div>

	var second=document.getElementById("second").innerHTML;
	console.log(second);
	____
	Output: Sample division

Writing information into divisions using innerHTML

	document.getElementById("second").innerHTML="Hello everyone";

Creating and appending HTML attributes We can create the html attributes by using javascript code part also. For that we need to use document.createElement. And we can append the information into the created elements by using textContent.

Syntax:

	document.createElement("html tagname")

Example:

	//Selecting a section from html;
	var secondDiv=document.getElementById("second");
	
	// Creating a html attribute
	var heading2=document.createElement("h2");
	heading2.textContent="heading";
	
	//Appending child attribute to parent
	secondDiv.appendChild(heading2);

Objects in Javascript

Object is nothing but its a key,value pair. When we going to get the value from an object, we've to use the key of that object

Example:

	var student={
		name:"Hemanth sai",
		role:"Student",
		branch:"CSE:
	}
	__________
	student.name => Hemanth sai

Arrays in the object:

	var student={
		friends:["sai vasanth","savya sree", "nitesh bharti","venkatesh"]
	}
	_____
	// Here `0` is the index value
	student.friends[0]
	______
	Output: sai vasanth
	
	_____
	student.friends[student.friends.length-1]
	____
	Output: Venkatesh

Objects in Object:

	var student={
		student1:{
			name:"Swetha"
		},
		student2:{
			name:"venkatesh"
		}
	}
	______
	student.student1.name
	_____
	Output: Swetha

JSON

• Java Script Object Notation
• Light weight data-interchange format (This is a format to trnsfer information between the nodes)
• This is very easy to read,understand and write.
• This is very easy for the machines to parse and generate data.
• This is subset of javascript programming language standards (ECMA SCRIPT - 262).
• For accessing JSON data from a HTML document, we need to use a server.
  • npm server
  • web server for chrome (200 OK)
    • Web server for chrome is a static server invented google team. This allows us to access any information from external file into a HTML document.
    • Installation of 200 OK
      • Type web server for chrome in your chrome browser and press Enter.
      • We have to choose web server for chrome from chrome.google.com from listing.
      • We have to click on add to chrome button. Soon after we will see a dialogue box and then click on add app.

Promises:

A promise is an object that may produce a single value some time in the future. The client and the server communicating with eachother, client need to send a request to the server, the server need to respond to the client request simultaniously. This promise give us a value that the is resolved or not resolved. The states for the promise are

• Fulfilled
• Rejected
• Pending

The promise is a chine relation, We can build multiple coding blocks. The syntax:

	promise(request).then(response=>{
		return response;
	})

Promises examples:

• Fetch
• Cache

Example:

	fetch('data.json').then(response=>{
		return response.json();
	}).then(data=>{
		console.log(data);
	})