#3 JAVASCRIPT ON THE BROWSER

 

< #3.0 The Document Object >

• "document" is just an object already included in browser that refers to the html we're using
• representation of the html in the point of view of a javascript
• document.title brings the title of html
• we can get and set the properties : document.title = "Hi" : changes the title of the html in javascript

 

 

< #3.1 HTML in Javascript >

• document.getElementById("ID") : gets the id 
  • const title = document.getElementById("title");
  • console.dir(title);
  • shows all the elements we can use for the corresponding id
• we can use can change some things too

 

 

< #3.2 Searching for Elements >

• caught TypeError: Cannot set properties of null (setting 'innerText')
  • title does not exist. cannot get the innerText of null.
• document.querySelector(".hello h1");
  • allows to search an element using css notation
  • gets 1 element
  • can get h1 inside of class="hello"
  • should classify the class name (hello) and id (h1)
  • only gets 1 elememt. if there's none, it prints null
  • if there are 3 same things (.hello h1) and we want everything : 
    • if we hust do querySelector(".hello h1"), we only get the first one
    • we need to to querySelectorAll. Then we get an array of all.
• document.querySelector("#hello") and document.getElementById("hello") does the same thing

 

 

< #3.3 Events >

• title.style.color = "blue" : we can change the style in javascript

function handleTitleClick(){
    console.log("title was clicked!")
}

title.addEventListener("click", handleTitleClick);

• when it listens the event "click" it operates the handleTitleClick function
• click does not need a button
• we can always vary the event and the function

function handleTitleClick(){
    title.style.color = "blue"
}

title.addEventListener("click", handleTitleClick);

 

 

< #3.4 Events part Two >

• To find the events we can use, google "h1 html elememt mdn" and find the page with "Web APIs"
• or do "console.dir(title)"
  • if there are any elements of on~~~, ~~~ are the events we can use

function handleMouseEnter(){
    title.innerText="Mouse is here!"
}
funtitle.addEventListener("mouseenter",handleMouseEnter);

function handleMouseLeave(){
    title.innerText = "Mouse is gone!"
}
title.addEventListener("mouseleave",handleMouseLeave);

 

 

< #3.5 More Events >

• another way of listening to events : oneventname

title.onclick = handleTitleClick;
title.onmouseenter = handleMouseEnter;
title.onmouseleave = handleMouseLeave;

function handleWindowResize(){
    document.body.style.backgroundColor = "red";
}

window.addEventListener("resize", handleWindowResize);

function handleWindowCopy(){
    alert("copier!");
}

window.addEventListener("copy", handleWindowCopy);

function handleWindowOffline(){
    alert("SOS no WIFI!");
}

window.addEventListener("offline", handleWindowOffline);

function handleWindowOnline(){
    alert("ALL GOOD!")
}

window.addEventListener("online", handleWindowOnline);

 

 

< #3.6 CSS in Javascript >

function handleTitleClick(){
    const currentColor = title.style.color;
    let newColor; //let can be updated
    if(currentColor === "blue"){
        newColor = "tomato";
    } else {
        newColor = "blue";
    }
    title.style.color = newColor;
}

title.addEventListener("click", handleTitleClick);

 

 

< #3.7 CSS in Javascript part Two >

• Javascript modifies html

//css
title {
    color: cornflowerblue;
    transition: color .5s ease-in-out;
}

.active {
    color: tomato;
}

//js
function handleTitleClick(){
    title.className = "active";
}

title.addEventListener("click", handleTitleClick);

• same result with less js file

 

function handleh1Click(){
    if(h1.className === "active"){
        h1.className = "";
    } else {
        h1.className = "active";
    }
}

h1.addEventListener("click", handleh1Click);

• using "active" twice can lead to errors. It can be misspelled

 

function handleh1Click(){
    const clickedClass = "active";
    if(h1.className === clickedClass){
        h1.className = "";
    } else {
        h1.className = clickedClass;
    }
}

h1.addEventListener("click", handleh1Click);

• we can use the variable
• but the js does not care about the past and replaces the class name
• we want to keep the class name

 

 

< #3.8 CSS in Javascript part Three >

function handleh1Click(){
    const clickedClass = "active";
    if(h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    } else {
        h1.classList.add(clickedClass);
    }
}

h1.addEventListener("click", handleh1Click);

• this does not replace the class name, but it adds on to the class name

 

function handleh1Click(){
    h1.classList.toggle("clicked");
}

h1.addEventListener("click", handleh1Click);

• toggle : does the same thing in the simplest code!
  • it checks if the class name "clicked" is in the class name of h1 and if it doesn't it will add "clicked" class name