HTML에서의 자바스크립트가 어떻게 동작하는지 알아보기.

컨텐츠의 내용은 'Codeit | 인터랙티브 자바스크립트' 온라인 강좌를 듣고 학습한 내용과 코드들을 머릿속에 정리하기 위해 정리해 본 내용입니다.(행여라도 문제가 생길 시 바로 컨텐츠를 삭제하도록 하겠습니다.)

웹에서의 자바스크립트는 어떻게 동작하는지에 대해 알아보자.
첫번째는 HTML에서의 자바스크립트 동작
두번째는 CSS에서의 자바스크립트 동작
세번째는 Browser에서의 자바스크립트 동작

총 3가지의 자바스크립트 동작중 첫번째인 HTML에서의 자바스크립트 동작을 간단한 예제를 통해서 알아보자.

css파일을 따로 생성하기 귀찮아서 tailwind css의 도움을 받았다.

<!-- head부분에 link 추가 -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />

<body class="p-20">
  <h1 id = "title-text" class="text-xl font-bold">  Interactive     JavaScript-HTML  </h1>
  <div class="container">
    <div id="count" class="text-xl font-bold mb-8">0</div>
    <button id="plusBtn" class="bg-gray-400 rounded shadow p-2 hover:bg-gray-200">+</button>
    <button id="minusBtn" class="bg-gray-400 rounded shadow p-2 hover:bg-gray-300">-</button>
    <div class="mt-5 flex gap-5">
      <button
        class="colorBtn p-5 shadow rounded bg-red-600 hover:bg-red-400"
        data-color="#dc2626"
      >
        red
      </button>
      <button
        class="colorBtn p-5 shadow rounded bg-yellow-600 hover:bg-yellow-400"
        data-color="#dc7706"
      >
        orange
      </button>
      <button
        class="colorBtn p-5 shadow rounded bg-blue-600 hover:bg-blue-400"
        data-color="#2563eb"
      >
        blue
      </button>
      <button
        class="colorBtn p-5 shadow rounded bg-purple-600 hover:bg-purple-400"
        data-color="#7c3aed"
      >
        purple
      </button>
    </div>
  </div>
  <script src="js/index.js"></script>
</body>

ex_img

index.js 자바스크립트 코드를 통해 아래의 2가지 기능을 구현해야 한다.

첫번째. +버튼을 누르면 id=count 0의 숫자가 1씩 증가하고, -버튼을 누르면 숫자가 -1씩 감소한다.

자바스크립트에서 DOM요소를 접근하기 위해서는 지원하는 메소드를 활용해야 한다.

① getElementById 메소드를 활용해 count,plusBtn,minusBtn 엘리먼트에 접근해 자바스크립트 변수에 담아보자.

const countTag = document.getElementById('count');
const increaseTag = document.getElementById('plusBtn');
const decreaseTag = document.getElementById('minusBtn');
console.log(countTag);//outputs: <div id="myNumber" class="text-xl font-bold mb-8">0</div>

문득 getElementById('')로 가져온 데이터 타입이 무엇인지 궁금해서 확인해보니 console.log(typeof countTag) ouput은 object 였다.
console.log(countTag) 출력값이 하나의 div id값을 가져왔지만 id값 내부에 여러

자식들이 있다면 자식들값도 같이 출력된다.

② countTag에 담겨있는 0의 값을 숫자값으로 바꿔서 변수에 담아줘야 한다.

const jjuCount = +countTag.textContent;

✅ countTag앞에 '+'가 붙은 이유 : 여기서의 +는 연산자의 +가 아니다. textContent 프로퍼티는 해당 id값의 내용들을 string형태로 가져온다. <div id=count>0</div> 즉 '0'이라는 값을 문자열로 값을 가져오게 되는데 여기 앞에 +를 붙이게 되면 자바스크립트에서는 숫자형으로 형변환이 된다.변수앞에 '+'가 아닌 Number(countTage.textContent)를 사용해도 된다.

✅ textContent 와 같은 역할을 하는 innerText라는 프로퍼티를 사용해도 된다.

textContent& innerText공통점 : 태그의 값을 문자열로 가져온다는 것
textContent& innerText차이점
- 양쪽 끝의 띄어쓰기 공백과 중간에 두칸 이상의 띄어쓰기 공백 상태 그대로 문자열을 가져오는 건 'textContent' 프로퍼티
- 2칸 이상의 띄어쓰기 공백을 제외하고 문자열값을 가져오는 건 'innerText'프로퍼티

<h1 id = "title-text" class="text-xl font-bold">  Interactive     JavaScript-HTML  </h1>

const titleTextTag = document.getElementById('title-text');
let titleText1 = titleTextTag.textContent;
let titleText2 = titleTextTag.innerText;
console.log(titleText1); //outputs:  Interactive     JavaScript-HTML
console.log(titleText2); //outputs:Interactive JavaScript-HTML

③ 자바스크립트의 onclick 이벤트 속성을 이용해 increase, decrease 기능 만들기

increaseTag.onclick = function () {
    jjuCount++;
    countTag.textContent = jjuCount;
}
decreaseTage.onclick = function () {
    jjuCount--;
    countTag.textContent = jjuCount;
}

두번째. 색상 버튼을 누르면 id=count 0의 색상이 해당하는 색상 버튼과 동일한 색상으로 바뀐다.

모든 색상 버튼은 <button class=colorBtn> 라는 공통의 class 이름을 가지고 있다. HTML에서 id값은 고유한 단 하나의 식별 값이지만 class는 어디서든 똑같은 네이밍 속성값을 갖을 수 있다.

① getElementsByClassName메소드를 활용해 모든 colorBtn 엘리먼트에 접근해 자바스크립트 변수에 담아보기.

const colorBtnTag = document.getElementsByClassName('colorBtn');
console.log(colorBtnTag); //outputs: [object HTMLButtonElement]??

상단의 getElementById메소드를 활용했을 경우 console.log(countTag); //outputs: <div id="myNumber" class="text-xl font-bold mb-8">0</div> 정확하게 해당값에 html div태그 값을 가져온다. getElementsByClassName메소드 역시 같은 역할로 해당하는 div태그 값을 가져올거 같지만 배열 형태의 [object]값을 가져온다.

위에서 말한 것 처럼 class는 같은 이름으로 어디서든 활용할 수 있기 때문에 배열의 형태로 값을 가져온다. 그렇기 때문에 getElementById메소드와 같은 값을 얻기 위해서는 console.log(colorBtnTag[0]);처럼 배열의 대가로 index표기법으로 값을 가져와야 한다.

여기서 중요한 점은 배열의 형태를 가지고 있지만 실제 배열은 아니라는 것이다. 배열의 다양한 기본 메소드(splice,pop등)를 사용할 수가 없다. 이렇게 배열을 유사 배열(Array-like-Object)이라고 불린다.

😮유사 배열이란 무엇인가?
- 배열과 같은 숫자로 된 index값을 사용할 수 있다. 참고로 HTML의 index 순서는 HTML 코드의 위에서 아래 순서로 index값이 매겨진다.
- length값이 존재한다.
- 대가로 표기법으로 해당하는 값에 접근할 수 있다. colorBtnTag[0]
- 배열과 같이 for..of문이 사용가능하다.
- 배열의 다양한 기본 메소드를 사용할 수 없다.
- Array.isArray 값은 false이다.

for문을 사용해 모든 colorBtn class 엘리먼트에 접근해보자.

const colorBtnsGroup = document.getElementsByClassName('colorBtn');
for (let i = 0; i < colorBtnsGroup.length; i++) {
    console.log(colorBtnsGroup[i]); //ouputs: <button class...> x 4
}

② 각 해당하는 요소에 onclick 이벤트 속성을 이용해 counterTag 숫자 색상이 바뀌게 만들어보기

const colorBtnsGroup = document.getElementsByClassName('colorBtn');
for (let i = 0; i < colorBtnsGroup.length; i++) {
    colorBtnsGroup[i].onclick = function () {
        counterTag.style.color = colorBtnsGroup[i].dataset.color;
}

for문을 통해 className으로 가져온 각 <button class>들에 onclick이벤트를 걸어주고 클릭 이벤트가 발생하면 자바스크립트에서 dataset 객체를 통해 가져온 <button data-color="xxxxxx">의 color값을 counterTage.style.color 에 할당해준다.

✅ dataset 객체 활용
HTML에서는 어느 엘리멘트에서나 data-로 시작하는 속성은 어떤 값으로든 추가해 줄 수 있다. (화면에 보이지 않는다.)

    <div
        id="overwatch"
        data-char="24"
        data-make="billizard">
           ...
    </div>

이런식으로 추가된 값들을 JS에서는 dataset객체를 활용해 값에 접근할 수 있다.

let datas = document.getElemetById('overwatch');
datas.dataset.char //"24"
datas.dataset.make //"billzard"

문제점은 인터넷익스플로러 11+ 이하 버전에서는 dataset을 지원하지 않고,속도적인 면에서도 추천하지 않는다고 한다.

for문 대신 for..of문을 사용해도 된다.

const colorBtnsGroup = document.getElementsByClassName('colorBtn');
for (let btn of colorBtnsGroup) {
    btn.onclick = function () {
        countTag.style.color = btn.dataset.color
    }
}

🙄❓getElementById와 getElementsByClassName 사용시 찾을 수 없는 값을 출력하면 어떤 값이 나올까?

const searchId = document.getElementById('noSearch');
const searchClass = document.getElementsByClassName('noSearch');
console.log(searchId); //outputs: null
console.log(searchClass); //outputs: HTMLCollection[]

🔲최종 index.js 코드

const countTag = document.getElementById("count");
const increaseTag = document.getElementById("plusBtn");
const decreaseTag = document.getElementById("minusBtn");
let jjuCount = +countTag.textContent;

increaseTag.onclick = () => {
  jjuCount++;
  countTag.textContent = jjuCount;
};

decreaseTag.onclick = () => {
  jjuCount--;
  countTag.textContent = jjuCount;
};

let colorBtnsGroup = document.getElementsByClassName("colorBtn");
for (let i = 0; i < colorBtnsGroup.length; i++) {
  colorBtnsGroup[i].onclick = function () {
    countTag.style.color = colorBtnsGroup[i].dataset.color;
  };
}

저작자표시 변경금지 (새창열림)

'🍖 WELL-DONE Project > Javascript' 카테고리의 다른 글

this 개념 이해하기 (0)	2021.02.17
브라우저에서의 자바스크립트 동작 알아보기.2 (0)	2020.12.18
브라우저에서의 자바스크립트 동작 알아보기.1 (0)	2020.12.17
자바스크립트 문자열(String) 익히기 - 배열(Array)과 공통점&차이점 (0)	2020.12.08

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

HTML에서의 자바스크립트가 어떻게 동작하는지 알아보기.

첫번째. +버튼을 누르면 id=count 0의 숫자가 1씩 증가하고, -버튼을 누르면 숫자가 -1씩 감소한다.

두번째. 색상 버튼을 누르면 id=count 0의 색상이 해당하는 색상 버튼과 동일한 색상으로 바뀐다.

'🍖 WELL-DONE Project > Javascript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

HTML에서의 자바스크립트가 어떻게 동작하는지 알아보기.

첫번째. +버튼을 누르면 id=count 0의 숫자가 1씩 증가하고, -버튼을 누르면 숫자가 -1씩 감소한다.

두번째. 색상 버튼을 누르면 id=count 0의 색상이 해당하는 색상 버튼과 동일한 색상으로 바뀐다.

'🍖 WELL-DONE Project > Javascript' 카테고리의 다른 글

'🍖 WELL-DONE Project/Javascript' Related Articles

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역