js browser 니코 강의 2 - 수정중

document

console에 document를 입력하면, 작성한 html을 전부 보여준다

document는 browser에 이미 존재하는, html을 가리키는 객체다.

console.dir(document)

예를들어, 콘솔에다가 document.title 을 치면, 내가 title 태그에 넣은 내용을 밸류로 뱉는다. 오~

반대로, document.title = "내가 바꿨지롱" 하면 title태그를 Js로 바꿀 수도 있다는거다. WOW

 

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

console.dir(title);

니콜라스의 바닐라 JS로 크롬 앱 만들기 3.0강부터 다시 정리하면서 보자.

3.0-3.2강까지는 정리가 빠짐.

id나 class에 대한 선택자가 아닌 querySelctor을 쓸거다. 라는 내용이었다.

 

html에서 js파일을 로드하기 때문에, document가 존재하며, 브라우저가 document에 접근할 수 있는것이다.

 

css도 바꿀 수 있다.

Js는 event들을 listen하는 용도로 많이 쓰인다.

 

const title = document.querySelector("#title");
title.innerText="마 함 클릭해보소";
title.style.color ='red';

function changeColor(){
    if(title.style.color=='red'){
        title.style.color='black'
    } else {title.style.color='red'};
};

title.addEventListener("click", changeColor);

 

 

Mozila Development Network

 

css를 직접 바꿔줘도 되지만,

classname에 따라 다른 css를 미리 css 파일에 작성해두고, Js로 classname만 바꾸는게 훨씬 낫다.

그게 Js의 역할이기에.

 

블록지정 -> Cmd + shift + L : 텍스트 일괄변경

 

const comment = document.querySelector("#title");
comment.innerText="마 함 클릭해보소";
comment.style.color ='red';

function changeColor(){
    if(comment.style.color=='red'){
        comment.style.color='black'
    } else {comment.style.color='red'};
}

function changeColorHover(){
        comment.style.color='pink'
  
}
function changeColorHover1(){
    comment.style.color='blue'

}

comment.addEventListener("click", changeColor);
comment.addEventListener("mouseenter",changeColorHover);
title.addEventListener("mouseleave",changeColorHover1);


title.addEventListner("click",xxx);
title.onclick=xxx; 
//이 둘이 같다.

//하지만 addEventListner 이 좋은점은, .removeEventListner 을 할 수 있기 때문

//resize

개발자가 직접 설정한 값을 raw value라고 한다. 이걸로 모든 것을 하는 것은 좋지 않다.

따로 변수를 선언하고, raw value를 담은 후 그 변수를 사용하는게 좋다.

잘못 사용하면 콘솔에서 오류도 알려주고. 

const comment1 = document.querySelector("#title");
function change(){
    comment1.classList.toggle("clicked");
}

comment1.addEventListener("click", change)

//강력한 토글이라는 기능 on off 같은 감성