자바스크립트 기초 #2

console.log 함수는 argument를 무한하게 가질수 있다

function sayHello (potato, age ){

console.log("hello!", potato, "you have", age, "years of age." ) ; }

sayHello("nicolas", 15 );

console.log("hi")

요게 작동 메카니즘 출력물은 이렇게됌

hello! nicolas you have 15 years of age. hi

#2-1
console이라는 함수가 있고 log 라는 key가 있음

console 은 nicoinfo보다 더 큰 오브젝트 임

console.log log는 console object안에있는 함수를 의미함

console.log (); 요거는 작동 안함
console.log ("hi"); 요건 hi 라고 작동함
괄호 안에다가 ""쓰고 니가 무얼쓰든
그게 나옴

함수를 작동시킬려면

function sayHello(text){
console.log('Hello!',text);
}

sayHello("nicolas"); 요렇게 해야
Hello! nicolas 이렇게 작동함

즉 function sayHello () {
consle.log("Hello!");} 이렇게하면

무조건 hello! 만 작동됌 저 함수를 부를때
ex ) sayHello("nico") ; 라고 해도 hello만 작동됌

! 심화

sayHello ("nicolas", 15 ); hello nicolas you have 15 이렇게
출력 하고 싶으면 어떻게 해야 할까 ?

function sayHello(text, potato){
console.log('Hello!',text, "you have ", potato );
}

이렇게 하면 됌 저기가 숫자 섰다고 해서 여기도 숫자써야 되는 건아님
그리고 그냥 아무 글자나 넣어 주어도 됌 다만 두개가 같아야함
,현재 function의 argument 는 2개임

더심화 console.log(hello! ${text} you have ${potato});

저번강의처럼 쉼표 노노
베틱이 섹시함

return  잔돈 같은거야 결과값같은거 이걸안해주면 정의되지않는값이라고뜸

함수가 반환하는 값을 가지면 저거 해줘야함
예를 들면 


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

const greetNicolas = sayHello("Nicolas", 14)

console.log(greetNicolas) 

요런식
결과값 hello Nicolas you are 14 years old

return에 대한 좀더 쉬운 이해로는  

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

}

const plus = calculator.plus(5,5)
console.log(plus)
결과값 10 
요런거임 




#2-3 

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

html 전체에서 #title 찾아보라는뜻 

const title = document.getEWlementById("title")
console.dir(title) 하면 titled함수로 할수있는거 다뜸


document.title = "hi" 하면 html title이 바뀜 

querySelector는 노드의 첫번째 자식을 반환해 ?????

그의미는 document로 가서 모든 자식들 중에서 찾으려고 한다는뜻

document.querySelector("#title")

#2.4

자바스크립트는 html과 css를 바꾸는 기능을 하지만 이벤트에 반응하기 위해 만들어졌다.

이벤트란? 웹사이트에서 발생하는 것들을 말한다.
click,resize,submit,input, change, load, before, closing, printing 같은 것들

----------

function handleResize() {
 console.log ( " i have been resized")
}

window.addEventListener("resize", handleResize);       -  예제1

-여기서 중요한건 handleResize 뒤에 ()붙이냐 안붙이냐는 중요 
  안붙이는 건 그냥 함수를 호출 하는것  니가 필요한 시점에/ 

() 이걸 붙이면 지금당장 퍼킹 실행하는 것임  

즉  이걸 이해하고  예제1 을 이해해 본다면 

addEventListener이 뜻은 이벤트가 일어날때까지 기다리는 거임 

따라서 윈도우의 사이즈가 변경될때 handleResize를 함수를 작동시키겠다


함수를 즉시 호출 하지 않겠다는 뜻 

여기서 윈도우의 뜻은 화면 사이즈로 볼수 있다 (여기에 한해서 의역)


----------
엥
function handleResize(event) {
 console.log ( event);
}

window.addEventListener("resize", handleResize); 

이렇게 하면 어떻게 될까 ? 

그전에는 그냥 
화면창이 바뀔때마다 i have been resized라고 출력하지만 
event를 하면 매 resize마다 변경된사항 전부를 출력해줌 console에  //
이벤트가 호출될때마다
이 이벤트의 object가 호출 됌 
resize에서는 이렇게 하는게 별쓸모없지만  폼을 만들때나 링크를 클릭할때 유용해

#2-5  && 는  and를 나타냄    

     ll 은 or 을 나타냄 

true && true = true ;
false && true = false;
true && false = false;
false&& false = false ;    

or은 둘중하나만 참이여도 참 

#2.7    

=== 같다는뜻 
!== 같지않다는뜻



--------------

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


const CLICKED_CLASS = "clicked";

function handleClick() {
    const currentClass = title.className;
    if (currentClass !== CLICKED_CLASS){
        title.className = CLICKED_CLASS;
    } else {
        title.className = "";
    }
}

function init(){

    title.addEventListener("click", handleClick);
}
init();


css 파일 

body {
  background-color: #ecf0f1;
}

h1 {
  color: #2e0fb6;
}

.clicked {
  color: #ff0800;
}

즉  클래스이름 가지고 같으면 냅두고 다르면 클래스이름을 빼벼려서 
결국  titlte 이란 id 가진놈의 색을 빼버림 

 title.className = ""; 요거는 되게 강력함 클래스를 싹다 지워버리는거임 전부!
그래서 만약 한요소가 3개의 클래스를 가지고 있는데 하나만 클래스를 on off 하고싶은데
위에꺼처럼 써버리면 3개다 꺼졌다 켜짐 

그래서 대체가 classList

const CLICKED_CLASS = "clicked";

function handleClick() {
    const currentClass = title.className;
    if (currentClass !== CLICKED_CLASS){
        title.classList.add(CLICKED_CLASS) ;
    } else {
        title.classList.remove(CLICKED_CLASS);
    }
}
요런식으로 더했다 빼주기 식으로  근데 이렇게 하면 다시 돌아가지않아서
반복적으로 못함   

왜그러냐면 더이상 currentClass가   clicked 의 상태가 아니라 2개의 클래스를
가지고 있어서 안됌  현재의 클래스와 같아질 수 가 없음 

그래서 조건문을바꿔야돼 어케 ? 

function handleClick() {
    const hasClass = title.classList.contains(CLICKED_CLASS);
    if (!hasClass) {
        title.classList.add(CLICKED_CLASS);
    } else {
        title.classList.remove(CLICKED_CLASS);
    }
}
이렇게    포함하고있냐 포함하고있지 않냐? 이런식으로 
!hasClass - 요거는 앞에 ! 이표시는 not 이라는 뜻 


근데 더쉽게 표현 

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


toggle( String [, force] )
하나의 인수만 있을 때: 클래스 값을 토글링한다. 
즉, 클래스가 존재한다면 제거하고 false를 반환하며, 
존재하지 않으면 클래스를 추가하고 true를 반환한다.

두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 
지정한 클래스 값을 추가하고 false로 평가되면 제거한다.