TeamTreeHouse : Js Full stack.

/*
Basic
Numbers
Functions
Array
Objects

Landscape of JS
*/


//DOM


/* AJAX  */
- Developed by MS.
- Technical name is "XMLHttpRequest ( XHR ) Object".

   How to set up:
   1. Create XHR object.
   2. Create call back ( what to do with API) 
   3. OPEN
   4. SEND
   
    : Limitations of AJAX:
 - Ajax can only communicate within same website/server. It    can not communicate with another website/server.      
 - Can not change the port( parent domain has to be same        (will not work with different server )) Number and nor       change the Protocol ( https-http)
   

 How to resolve this issue:
 1. Web proxy :  We can request from client ->            server1(original) to server2. After that server2 will send    back response to server1 ( original ) -> Client.

 2. JSONP: JSON with padding.
 ( way CDN's work)
 3. CORS - Cross Origin resource sharing. ( This allows requests from different domains )


xhr.readState
  1-4 ( 4 is good )

xhr.status Codes
 : 200 ( OK ) 
 : 404 (file not found)
 : 401 ( not auth)
 : 500 (Server Error/Problem)

Syntax:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200 ){ 
         
     }
};
xhr.open('GET', 'sidebar.html');
xhr.send();

                   /* JSON */

JSON: Javascript object Notation.
 - Keys and values have to use double quotations ( single      will not work)
 

          /*      Asynchronous Progamming   */


##Cool Example ( Playing with two API's. )
//Make AJAX request
function getJSON(url, callBack) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function () {
        if (this.readyState == 4) {
            let data = (JSON.parse(this.responseText));
            callBack(data);
        }
    }
    xhr.send();
}

//Loading Data
    getJSON(astroUrl, (jsonData) => {
        jsonData.people.map(person => {
            getJSON(wikiUrl + person.name, generateHTML )
        });
    })




                        /*       Promises                 */

//Promise Contsructor takes 1 Parameter with two arguments.
let breakFast = new Promise(( res , rej )=>{
   setTimeout(()=>{
     res("it's resolved")
     rej("It's Rejected");
   },2000);
})

> breakFast.then( val => console.log(val) ); // It will resolve it

> breakFast
     .then()
     .catch( val => console.log(Error,val) )
// Catch is used to Handle the rejections.


 > Promise.all( val )
// It will provide the values from multiple promises.It is used when program needs to wait for the more then 1 promise to resolve.
// IF any values is failed? It will not show any results. ( all the values have to be resolved. )

                           
                        /*  Fetch     */


    fetch('apiLink...')
       .then( respo => respo.json() )
       .then( data => consoe.log(data) )
       .catch()
       .finally( ()=> )
                
                
                
                 /*         Await         */
                
async function gettingData(data){
     let response = await fetch(data);
     let dataRes = await response.json();
     return dataRes;
}

gettingData(astroUrl).then( data => console.log(data));

> Await:
   - Async function always return a promise.
   - It pauses the execution of an async function and waits for the resolution of a promise
   - Is Valid only inside function marked 'async'.
   
   
   
**
 async function gettingData(astroUrl){
     
     let response = await fetch(astroUrl).catch( e => {
          console.log( e ,"JEh Panga Ess API ch")
     })
     let dataRes = await response.json()
      
     let output1 = dataRes.people.map ( async element => {

          let craft = (element.craft)
           let response = await fetch( wikiUrl + element.name);
           let dataRes = await response.json();

           return {...dataRes, craft}
     });
     return Promise.all(output1)
 } 
**     
   
     
         /*        Fetch API              */
     
     //Posting the Data
function postData(event) {
  event.preventDefault();
  const name = document.querySelector('#name').value;
  const comment = document.querySelector('#comment').value;

  fetch('http://jsonplaceholder.typicode.com/comments', {
    method: 'POST',
    headers: {
      'Content-type': 'application/json'
    },
    body: JSON.stringify({ name, comment })
  })

    .then(data => data.json())
    .then(data => console.log(data))
}
   


//Or
let config = {
    method: 'POST',
    headers: {
      'Content-type': 'application/json'
    },
    body: JSON.stringify({ name, comment })
  };
fetch('url', config)
  .then(..//What to do with Code..)


               /*        OOPS       */
               /*        Clasees    */
      // Convert value to String
      toString(val);
      String(val);
----------------------------
//GET
let obj = {
 get  power(){
    return "Power"
  }
}
console.log(obj.power)
-----------------------------
// Same thing without using "GET", ( make the Power function as IIFA )
let obj = {
   power: (function(){
     return "Power...";
   }())
}
console.log(obj.power)
------------------------

//SET ( set will always have 1 parameter )
class Student {
    set someName(name){
      this._name = name; 
      // can not use same as parameter, So convection is to use                    Underscore and store it. '_name' ( called - **Backing Property** )
    }
     get valueFromSomeName(){
       //This is used to 'get' value from '_name'(stored variable ) from            above 'set' method, We can also the retrieve value without using the        'get' ( by calling like regular method ( .valueFromSomeName() ) )
       return this._name;
   }
}

let stuJaskaran  = new Student();

stuJaskaran.someName = "Jaskaran";

console.log("Logging 1 : ",stuJaskaran.valueFromSomeName);



//We can access 1 method from a different method.
class Student {
      set major(subject){
        if(this.level == 'Junior' || this.level == 'Senior'){ //We are      getting value from method "level"
           this._major = subject; 
        }else {
           this._major = 'None' ;
        }

      }
    get level() {
        if (this.credits > 90 ) {
            return 'Senior';
        } else if (this.credits > 60) {
            return 'Junior';
        } else if (this.credits > 30) {
            return 'Sophomore';
        } else {
            return 'Freshman';
        }
    }  
}


-------------------------------------------
  
 //We can use the return from one Oject and add to another new class property.
   class Student{
    //Blaah Blaah
     set someVar( name ){
       this._name = name;
     }
     
   }

   class Prof{
     //Blaah Blaah
   }
let Jaskaran = new Student();
Jaskaran.someVar = new Prof()
   //Check S20 gallery for more details. ( pic taken on 12th June 2021)
  ------------------------------------------------------