Lee Jun Hyeok

안녕하세요~😸

최대 1 분 소요

왜 JavaScript를 사용하는가?🍍

요즘 어디서나 JavaScript를 사용한다. 왜?

1.웹서버 2.모바일앱 3.머신러닝 등등
그 중 웹환경에서의 JavaScript의 목적은 'html 조작과 변경이다'.


자, 이제 html을 JS로 조작해보자.

index.html

  <body>
    <h2 id="ㅎㅇ">ㅎㅇ</h2>

    <script>
      document.getElementById("ㅎㅇ").innerHTML = "안녕하세요";
    </script>
  </body>

‘html 조작방법’

html에 body태그안에 script로 감싸주어 그 안에 코드를 작성한다. getElementById는 이름만 봐도 알 수 있듯이 id를 통해 원하는 태그를 가져오는 메서드이다.


index.html

  <body>
    <h2 class="ㅎㅇ">ㅎㅇ</h2>

    <script>

      document.getElementsbyClassName("ㅎㅇ")[0].innerHTML = "안녕하세요";

    </script>
  </body>

‘getElementsbyClassname’

class이름이 같은 모든 태그를 가져오기때문에 배열에 담긴다. 꼭 배열을 불러오는 []을 사용하자.


index.html

  <body>
    <button class="bu">ㅎㅎ</button>

    <script>

      document.getElementsByClassName("bu")[0].addEventListener("click", () => {

        document.getElementsByClassName("bu")[0].innerHTML = "안녕하세용";

      });

    </script>

  </body>


‘addEventListener’

클릭, 스크롤, 키다운, 마우스오버 등 다양한 이벤트로 콜백함수의 내용을 행할수있다.


🏳️ DOM : 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있습니다. DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할을 함.

JS는 document라는 전역객체를 통해 HTML에 접근할 수 있다.

업데이트: