[Javascript] 노마드코더바닐라 JS로 크롬 앱 만들기 2

---

 

nomadcoders.co/

노마드 코더 Nomad Coders

노마트 코더 Vanilla JS 는 크게 3개의 수업으로 나눠져있는데, 이번에는 두번째 수업에 관한 노트

 

 

2.0  Function & argument 

you can also  console.log(console)  to see built-in functions 

// function 


// function 



function sayHello(name, age){
	console.log(`Hello ${name}, and you are fucking ${age} years old`);
    }
    
  
 sayHello("skyler", 22);
    
// name is argument ;  we use the  arugment for the funtction
  

 

 

 

2.1 

 

the return value,  back tick usague (``)

//  try to get the id "title" from index.html
const title = document.getElementById("title");


title.innerHTML = "whast up skyler?"
console.log(title);


// function 

function sayHello(name, age){
	return `Hello ${name}, and you are fucking ${age} years old`;
    }

const greetSkyler = sayHello ("skyler", 28)
console.log(greetSkyler);

 

 

 

between tow functions, add ","  

const calculator ={
plus: function(a,b){
return a+b;
},

minus: function(a,b){
return a-b;
},

multi: function(a,b){
return a*b;
},

div: function(a,b){
return a/b;
},

pow: function(a,b){
return a **b;
}

}

const plus = calculator.plus(36, 33);
console.log(plus);
const minus = calculator.minus(109, 40);
console.log(minus);
const multi = calculator.multi(23, 3);
console.log(multi);
const div = calculator.div(138, 2);
console.log(div);
const pow = calculator.pow(6,2);
console.log(pow);

 

 

2.2 DOM

we can access html document via JS 

 

Document Object Moduke

JS will change all the html tag to object 

 

2.3 DOM with JS

we can change around HTML via JS 

querySelector  *   important 

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


title.innerHTML = "whast up skyler?";
const title = document.querySelector("#title");  // id = title
// const title = document.querySelector(".title");  // class = title 
title.style.color = "red";
document.title = "i can ch

2.4 

eventlistener =  you can wait til certain actoin and do whatever you want 

 

function handleResize : will consolelog you resize

function handleClick : will change the color of the font when you click it 

const title = document.querySelector("#title");


// event : anything happen in the interneet brower  
// we can intercept this event 


/*
function handleResie(event){
    console.log(" Fuck you why you changin my size ");
    console.log(event);
}

window.addEventListener("resize", handleResie)  // we have to tell them which event we are going to 

// if we use  indow.addEventListener("resize", handleResie())
// then it will just automotically call the function 
*/

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

title.addEventListener("click", handleClick);

 

2.5  IF -ELSE

 

=== :  check if this are same ?

/* 
if ("10"=== "10"){
    console.log(" you are not a cow")
}else if("10" === "11"){
    console.log("you are a cow")
}else{
    console.log(" you are mega cow")
}
*/


// && and = all the condition has to met
/*
if (20 > 5 && "skyler"=== "skyler"){
    console.log("all the condition has met")
}else(
    console.log("no condition met")
)


if (20 > 5 || "skyler"=== "skyler"){
    console.log("one or all the condition has met")
}else(
    console.log("none of the conditoin has met ")
)



// and 
true && true = true;
false && true = false;
true && false = false;
false && false = false ;

// or 
true || true = true;
false || true= true ;
true || false = true;
false || false = false ;

*/


const age = prompt("How old are you?");
console.log(age);

if (age >= 20 && age < 22){

    console.log("you can fucking drink but should not drink");
}else if(age >= 22){
    console.log("go get some drink ")
}else {
 console.log("fuck off")
}   

 

2.6

const title = document.querySelector("#title");
const BASE_COLOR ="black";
const OTHER_COLOR = "red";




function handleClick(){
    const CURRENT_COLOR=title.style.color;
    console.log(CURRENT_COLOR)

    if (CURRENT_COLOR === BASE_COLOR){
        title.style.color = OTHER_COLOR
    }else{
        title.style.color = BASE_COLOR
    }
}

function init(){
    title.style.color = BASE_COLOR;
    title.addEventListener("mouseenter", handleClick)

}


 init();


 function handleOffline(){
     console.log(" You are offline")
 }
 
 function handleOnline(){
    console.log(" You are online")
}


window.addEventListener("offline",handleOffline)

window.addEventListener("onine",handleOnline)


function keyPressed(){
    console.log(" dont mess with me")
}

document.addEventListener("keydown",keyPressed)

MDN -  이거어디서 봣는데? 언제봣더라 

어쩃든  event에관한 엄청나게 중요하고 유명한 MDN

 

developer.mozilla.org/en-US/docs/Web/Events

Event reference | MDN

 key down =>  any key pressed  you will see "dont mess with me ";

or you can also see if the wifi is out or not  

 

 

2.7  

When you modify the HTML you dont do everything in js file

the css file will incharge of the css stuff so you divide the logic to the js and color to css 

 

 

const title = document.querySelector("#title");

const CLICKED_CLASS = "clickedColor";


/*
function handleClick(){
    

    const hasClass = title.classList.contains(CLICKED_CLASS)

    if (!hasClass ){
        title.classList.add(CLICKED_CLASS);
    }else{
        title.classList.remove(CLICKED_CLASS);
    }
}
*/


function init(){

    title.addEventListener("click", handleClick)

}


 init();

/*
 function handleOffline(){
     console.log(" You are offline")
 }
 
 function handleOnline(){
    console.log(" You are online")
}


window.addEventListener("offline",handleOffline)

window.addEventListener("onine",handleOnline)


function keyPressed(){
    console.log(" dont mess with me")
}

document.addEventListener("keydown",keyPressed)
*/  

 

here comes first problem.   we added class name to the title as btn  and css file we give him the cursor : pointer

we want to keep the pointer (class btn)  and still we want to change the color when we click the title 

 

but since when we click it, it will chagne the whole class name  => this lead us to new solution

 

we go search in the MDN document 

 

MDN -> HTML -> element references -> element.classlist 

 

 

title.classList.add(classname)

title.classList.reomve(classname)

title.classList.contain(classname)

 

 

all this help us to keep the btn and still add /remove the wanted class name 

 

 

but in the end there is super easy one we can just add the toggle. 

const title = document.querySelector("#title");

const CLICKED_CLASS = "clickedColor";



function handleClick(){
    title.classList.toggle(CLICKED_CLASS);
}
function init(){

    title.addEventListener("click", handleClick)

}


 init();

 

title.classLIst.toggle.

 

this will automatically check the current class and toglle - 

 

 

it was one of the best and simple video lecture i ever had , he teaches from the beginning so ppl like me can understand and move on the next level ->  I understood why we have to use  add/remove  not just changing the whole class.  in the end he also give the super easy one but i think it crucial we know the basic stuff first and use the easiest way .