[노마드코더 바닐라JS챌린지 ] 3강 정리

https://nomadcoders.co/

노마드 코더 Nomad Coders

니꼬쌤과 즐건 코딩공부~ㅎ

 

 

2강 정리

https://yees.tistory.com/241

[노마드코더 바닐라JS챌린지 ] 2강 정리

 

 

 

 

#3.0.The Document Object

javascript은 html을 자동으로 읽어오며/변경가능!

 

모든것은 document (=website 의미)에서 시작한다.

document.body

document.title

                 .엄청나게많음

 

#3.1.HTML in Javascript

HTML을 가지고 오는거지만 그걸 Javascript 에서 조정하고있는것!

 

*특정한 무언가를 가져오고싶다.

document.getElementById()

*getElementById : string 을 받는 함수

: HTML에서 id를 통해 element 를 찾아줌.

 

 

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

console.dir(title);

 

=이렇게 자바스크립에 의해 변경됨

 

*콘솔창에서 다 확인해 볼 수 있다.

 

#3.2.Searching For Elements

 

 

 

 

이말은 hellos. 로 무언가를 가져올수 없단말./걍 많은 h1이 들어있는 array 이기에

-> 가끔은 많은 element 를 한번에 가져와야하는 경우생김.

= getElementsByClassName() 쓰면됨.

->근데 class = "어쩌구"를 계속 추가하진 않을것임./ 아마 하나사용하면 다른 class name 을 사용할것임.

이제 grab me 를 가져오고싶다 -> 또다른 function 필요

 

const title = document.getElementsByTagName("h1");

console.log(title.);

getElementsByTagName : anchor,div,section,button 의미

h1 하나만 들어있는 array 가 나옴 (여러개일수도있는것)

 

*querySelector / querySelectorAll 

element 를 CSS 방식으로 검색할 수 있다.

동일하다 

BUT

h1/id하위의 form 을 가지고 오고싶다면 -> querySelector 밖에못함

무슨말? hello란 class 내부에있는 h1 가지고 올 수 있다

형태) .무언가

(getElementsByClassName("hello");)

 

=결과

*만약 h1이 세개라면? = 첫번째것만 결과로 나옴.

=그래서 querySelectorAll 을 써줘야한다. 

 

=결과

 

 

#3.3.Events #3.4.Events ll #3.5. More Events

HTML이 이걸 load 해줘야지 javascript가 access 할 수 있음.

 

console.log

console.dir <- console.log 의 안을 보고싶을때 사용

 

*Style (h1 의 스타일을 자바스크립에서 바꾸기)

h1.style.color = "blue";

 

 

*Event / addEventListener()

마우스클릭,후버,와이파이접속 해제될경우 등

반응형

*어떤 Event를 Listen 하고 싶은지

바로실행되길 원치x,내가 직접 실행버튼 누르지않고, javascript에 이 function 이름넘겨서,유저가 click할경우, javascript가 대신 실행버튼 눌러주길 원함.

ex)

 

 

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

* 구글에검색하는법

h1 html element mdn

사실우리는 java script element 를 찾길원함.

링크에 Web APIs 포함된 페이지 찾어 (자바스크립관점의 html heading element 란뜻)

 

*사용가능한 events 보는법

console.dir(title); 자바스크립에 넣어주고

사용할땐 onabort 대신 abort 라고 사용해야함!!

 

*다수의 events를 listen

 

 

이렇게 두개가 동일하다!

하지만 이걸 선호함 왜? removeEventListener 을 사용할 수 있어서!

 

 

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

*Style 은 CSS에서 변경되어야한다!

 

*window (resize,copy,offline/online)

body !!!!!!! (head,title 이런것들은 중요하기에 이렇게 존재)

--

--

SMALL

 

 

 

 

#3.6.CSS in Javascript #3.7. CSS in Javascript ll #3.8. CSS in Javascript lll

 

*눌렀을때 블루->토마토->블루->토마토

color의 현재 상태 저장

step1 : element 를 찾아라 (document)

step2 : event 를 listen

step3 : event 에 반응해라!

ㅡㅡㅡㅡㅡ

*언어가 섞이는게 싫기에

style : ess 에서 작업

상호작용 : javascript 에서

java -> html 변경 

css -> html 보고있음.

 

 

*코드 에러없도록 정리하는법

 

자바스크립은 html에서 class 네임 만들어줘도 -> 과거따위 상관안하고 자바에있는걸로 바꿔버림.

그래서 클래스네임을 적어줘야함.

BUTTTTTTTTTTTTTTTTTTTTT

classname 은 걍 다 바꿔버리기에

classList : class 들의 목록으로 작업할수 있게함

 

.contains 

우리가 명시한 클래스가 html element 의 class에 포함되어있는지 말해주는것임.

 

만약 clickedclass가 h1의 classlist 에 포함되어있다면,

clickedclass를 remove할것이다.

만약 clickedclass가 h1의 classlist 에 포함되어있지않다면,

clickedclass를 add할것이다.

 

=결과

 

*Toggle function (위에꺼를 다 대체가능함)

: classname이 존재하는지 확인할것임

/ 만약 존재한다면 / toggle은 classname 을 remove

/ 만약 존재하지않는다면 / toggle은 classname 을 add

 

=위의것과 동일하게 작동