2주차 (#2.1 추가 설명)

<aside> ❗ #2.1 강의 영상은 JavaScript를 안다는 전제 하에 진행되는 강의 영상입니다. 따라서 JavaScript의 다양한 함수와 요소들이 등장하기 때문에, 부가 설명 없이 영상을 시청하게 된다면, 자세한 내용을 이해하지 못 한 채 강의가 끝날 수도 있어요🥲 이 페이지의 목차를 확인하고, 강의 영상을 시청하면서 나오는 부분을 봐주시면서 공부해주세요!

</aside>

<script>

JavaScript를 HTML에서 사용하려면 html 파일에 <script> 태그를 추가해주어야 합니다.

<!DOCTYPE html>
<html lang="en">
    <body>
        <button>Click me</button>
    </body>
    **<script>
        // 넣고 싶은 javascript 코드
    </script>**
</html>

위 코드와 같이 <head>, <body> 태그와 같은 깊이에 적어주시면 됩니다!

querySelector

처음에 버튼을 만들 때

const button = document.querySelector("button")

이런 코드가 <script> 태그 안에 작성되어 있습니다. 위 코드는 무슨 뜻을 담고 있는지 하나하나 알려드릴게요!

document.querySelector()는 괄호 속에 제공한 선택자와 일치하는 문서 내 첫 번째 Element를 반환, 일치하는 요소가 없다면 null을 반환하는 함수입니다.

위 코드에는 선택자 자리에 button이 들어 있죠? 그러면 문서 내의 첫 번째 <button> 태그를 찾아 button에 반환을 해주는 겁니다.

하지만 선택자에 태그 이름을 넣게 되면, 여러 겹치는 태그를 넣었을 때, 작동이 잘 되지 않아요. 따라서 다른 선택자 방식을 사용해줍니다.

선택자 종류는 CSS 선택자처럼 클래스 선택자, 태그 선택자, id 선택자가 있습니다.

강의 영상에서는 id를 사용하였으니, 그대로 따라 적으시면 되겠죠?☺️

다른 선택자의 예시도 보여드리겠습니다.

<!DOCTYPE html>
<html lang="en">
    <body>
      <h1>h1</h1>
	    <h2 class="h2">h2</h2> <!--클래스 부여-->
	    <h3 id="h3">h3</h3> <!--id 부여-->
	    <h3>h3_2</h3>
	    <div>
	      <span>Span1</span>
	      <span>Span2</span>
	    </div>
    </body>
    <script>
        const selected = document.querySelector("h1"); // 태그 선택자
        const selected = document.querySelector(".h2"); // 클래스 선택자
        const selected = document.querySelector("#h3"); // id 선택자
    </script>
</html>