Javascript

Question 1

Javascript Variables

Answer 1

Variables in Javascript have similar types with Python variable, one variable can declare without explicitly type-definition, can store number, string, sequences, and class particularly an HTML element.
Ex: heading = document.querySelector('h1')
heading.innerHMTL = Hello

Question 2

DOM Manipulation

Answer 2

Javascript code run in client web browser, catch event caused by user like click, scroll, type, submit form with special function called Event Listener then inside using Query Selector to get specific HTML Elements and process it.

Question 3

Javascipt Templates Literal

Answer 3

Example:
let counter = 10
alert(`Counter is now ${counter}`)

Question 4

Javascript QuerySelector value access

Answer 4

Onsubmit Event Listener:
document.addEventListener(‘DOMContentLoaded’, function() {
document.querySelector(‘form’).onsubmit = function() {
let name = document.querySelector(‘#name’).value;
alert(Hello, ${name});
};
});
/ Access form’s value by .value property /
< form >
< input autofocus id=”name” placeholder=”Name” type=”text” >
< input type=”submit” >
< / form >
For id use ‘#idname’ class use ‘.classname’

Question 5

Javascript QuerySelectorAll() forEach() 
Putting data properties inside HTML element for Javascript access

Answer 5

forEach syntax passing in an array
array.forEach(function(element_name){do something})

/ use the data-SOMETHING attribute to assign data to an HTML element, later access that data in JavaScript using the element’s dataset property /
Putting data ‘color’ inside dict / obj property ‘data’ inside HTML tags
< h1 id=”hello” > Hello < / h1 >
< button data-color = ‘red’ > Red < / button >
< button data-color = ‘blue’ > Blue < / button >
< button data-color = ‘green’ > Green < / button >

document.addEventListener(‘DOMContentLoaded’, () => {
document.querySelectorAll(‘button’).forEach( button => {
button.addEventListener(‘click’, function() {
document.querySelector(‘h1’).style.color =
this.dataset.color;
}
/ ‘this’ keyword has many meaning in Javasript, in this context of event-handler function it refers to the object that receive the event handler which is button /
}
}
}

Question 6

Javascript APIs

Answer 6

Javascript Objects: Dictionary storing pairs of key-value, many APIs communicates by speical types of objects called JSON (Javascipt Object Notation). Example info of an flight getting from Http request to airport APIs:
{
    "origin": {
        "city": "New York",
        "code": "JFK"
    },
    "destination": {
        "city": "London",
        "code": "LHR"
    },
    "duration": 415
}

Question 7

Javascript fetch()

Answer 7

Create form submit chosen currency, fetch an HTTP request to server to get response, access response.json() getting JSON variable.
In currency.js:
document.addEventListener('DOMContentLoaded', function() {
   document.querySelector('form').onsubmit = () => {
      fetch('https://api.exchangeratesapi.io/latest?base=USD')
      .then( function(response) { return response.json() })
      .then( data => {
         const currency = document.querySelector('#currency').value.toUpperCase()
         const rate = data.rates[currency]
         if (rate !== undefined){
            document.querySelector['#result'].innerHTML = `1 USD = ${rate} currency`   
         }
         else{
            document.querySelector['#result'].innerHTML = "Invalid currency"
         }
      })
      .catch(error => {
            console.log('Error:', error);
        });
        // Prevent default submission
        return false;
   }
}

Question 8

Callback Function

Answer 8

Passing function as argument to another function to invoke it inside, or return function as function’s output
Benefit: able to store a function as an object and asynchronously invoke it when having necessary parameter.
Maintanance, Avoid repetition
Use Case:
Every Event Listener need callback function