[부스트코스 서포터즈3기]웹과 자바스크립트 - 제어할 태그 선택하기 + QUIZ 1

들어가기 전 

___________________________________________________

 

안녕하세요! :) 

 

오늘은 웹과 자바스크립트의 마지막!! 제어할 태그 선택하기 부분입니다 

 

 

정말 아직까지는 크게 어려웠던 내용들이 없어서 배우는 것에 있어 큰 무리는 없었다면 ,

 

 

과연 다음 단원부터는 더 재밌어질지.....

 

 

아! 그리고 각 단원이 마칠때마다 제대로 이해했는지 퀴즈도 있으니 같이 한번 살펴보도록 하겠습니다 :) 

 

 

제어할 태그 선택하기 

___________________________________________________

 

오늘의 강의 학습목표와 핵심단어들에 대해 살펴보겠습니다. 

 

 

 

지금까지 CSS에 대해 살펴보았다면 다시 이번부터는 javascript로 돌아와 이야기해보겠습니다! 

 

 

해당 강의를 통해 배우면서 중점적으로 배웠던것이 querySelector이었습니다. 

 

 

querySelector이란 함수를 사용할시 선택자를 이용해 원하는 태그를 선택할 수 있습니다. 

 

 

직접 보지않고 설명만 들으면 이해가 잘 안 되기 때문에 코드를 통해 같이 살펴보겠습니다 :)

 

 

먼저 querySelector을 쓰는 기본적인 구조는 다음과 같습니다. 

 

 

 document.querySelector(selectors); 

 

 

그렇다면 직접 타이핑을 하면서 알아보도록하겠습니다! 

 

 

웹 페이지안에 버튼을 넣고 그 버튼을 눌렀을 때 나타나는 이벤트들에 대해 작성을 해보았습니다 :) 

 

 

각 코드들에대해 설명한다면 

 

 

<input type = "button" value = "night" on click = " " >  <-- 이 부분은 이전 시간에 설명했으니 패스! 

 

 

document.querySelector('body'). style.backgroundColor = 'black';

 

 

각 이코드에서 의미하는 것들에 대해 살펴보겠습니다! 

 

document : 내 웹페이지를 지칭

 

query :질의하다라는 뜻을 가지고 있습니다. (웹브라우저에게 질의한다.)

 

Selector : CSS의 selector을 의미 

 

('body') : 현재 body 태그를 선택하기때문에 body를 입력 , 만약 id일 경우 #(id명) , 클래스일 경우.(클래스명)

 

 

style 이후로는 이전에 설명했으니 넘어가도록 하겠습니다 :)  (사실 검색만 하더라도 다 나오긴 합니다...) 

 

 

두 번째 줄의 코드도 다음과 설명은 같습니다! 

 

 

이렇게 해당 코드들을 웹브라우저에 실행시키게 되면! 

 

 

이렇게 초기화면에서! 

 

 

짠! 

 

 

검은색 배경을 주고 , 글자에는 흰색을 줬었던 것이 잘 표현되어 나타남을 확인할 수 있습니다! 

 

[출처] 부스트코스 자바스크립트의 시작

 

더 이해가 시기 쉬우시라고 강사님의 설명을 더 넣어보겠습니다 :) 

 

 

생각해보기

___________________________________________________

 

오늘의 생각해보기!!  한번 살펴보겠습니다 :) 

 

 

 

 

이번 수업내용에서 , 배경색을 검은색으로 만드는 것을 해보았었는데 

 

 

이 부분에서 마우스를 올렸을 때라는 이벤트 , 그리고 배경색이 회색이 되는 설정만 바꾼다면 크게 문제가 없겠죠!? :)

 

 

 

여러분은 어떻게 작성하셨나요!? 똑같이 나왔나요! :) 

 

 

오늘 했었던 과정을 토대로 작성하면 크게 문제없게 나왔습니다  ㅎㅎ 

 

 

 

Quiz 1.

___________________________________________________

 

이렇게 해당 단원에 대해 다 살펴보았습니다 :) 

 

 

그렇다면 , 한번 퀴즈를 풀어 보도록 할까요!

 

 

보시는 여러분도 같이 맞춰본다면 더 실력 향상에 도움이 될 거 같습니다! 

 

 

이제 각각 문제를 보여드리면서 같이 풀어보겠습니다!

 

 

자 1번! 

 

선택해버린 실수...

 

 

2번!

 

 

3번! 

 

자꾸... 찍기 전에 풀어버리는 실수... 

 

 

4번! 

 

 

5번!

 

6번!

7번!

8번!

9번!

 

=> 수업을 열심히 들었다면 전혀 어렵지 않은 문제들로 구성되어있었습니다 :) 

 

저는! 

 

그래도 90점 만점에 90점! 뿌듯하다 ㅠㅠ 놀지 않고 잘 들었구나... 

 

 

마치며

___________________________________________________

 

이렇게 웹과 javascript부분이 종료되었습니다!

 

 

어떤가요!? 저는 초반이긴 하지만 너무 흥미롭게 재밌게 잘 들어서 좋았습니다 :) 

 

 

2단원도 열심히 해서 마무리 파이팅해서 해야지! 

 

 

 다음 시간에는 2단원 :Javascript 제어문 - 프로그램 , 프로그래밍 , 프로그래머 부분에 대해 살펴보겠습니다 :) 

 

 

제가 작성하는 모든 내용은 부스트 코스의 자바스크립트 시작에서 배운 내용을 바탕으로 작성됩니다! 

 

 

www.boostcourse.org/cs124

자바스크립트의 시작