중앙정보기술인재개발원

[중앙정보기술인재개발원] 35일차

기록하는 개발 2024. 5. 24. 18:27

[JS/브라우저] DOM

HTML을 학습할 때, HTML은 웹페이지의 구조를 만드는 마크업 언어, 그리고 JavaScript에 대해서는 HTML로 만들어진 구조에 기능을 더 할 수 있는 프로그래밍 언어라고 설명했습니다. 기억하고 계신가요? 카카오톡과 같은 메신저로 예를 든다면, HTML로 텍스트를 입력할 수 있는 입력폼을 만들 수는 있지만, 버튼을 클릭했을 때 입력폼에 입력된 텍스트가 채팅창에 띄워지도록 만들 수는 없습니다. 이런 작업은 JavaScript로 해야 하는 작업입니다.

이처럼 JavaScript를 이용하면 단순한 웹 문서를 웹 애플리케이션으로 바꿀 수 있습니다. 여러분도 이 유닛을 학습한 후에는, 브라우저 환경에서 JavaScript를 이용해 HTML을 조작할 수 있게 됩니다.

Before You Learn

  • HTML 기초 : 상황에 맞게 적절한 태그를 사용하고, id와 class를 부여할 수 있어야 합니다.

Chapter1. DOM 기초

학습 목표

  • DOM의 개념을 이해한다.
  • DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다.
  • HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다.

[그림] HTML과 DOM의 구조

 

DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다.

HTML을 조작할 수 있다는 게 무슨 뜻일까요? 여러 뛰어난 웹 개발자들이 모여 HTML을 분석하여 HTML의 아주 작은 부분까지 접근할 수 있는 구조를 만들었습니다. 이렇게 만들어진 구조를 DOM이라고 합니다. DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있습니다. 앞서 학습한 조건문과 반복문, 배열, 객체를 활용하면 소셜 미디어에서 새롭게 생성되는 게시물을 저장하고 분류하는 작업을 구현할 수 있습니다.

자바스크립트는 다양한 일을 할 수 있지만, 웹 페이지를 제어하기 위한 목적으로 오랜 기간 사용되었습니다. 이번 유닛에서 DOM을 학습하고, 웹 개발에 가장 적합한 언어인 자바스크립트로 애플리케이션을 더 다이내믹하게 만들어봅니다.

Chapter1-1. HTML에 JavaScript 적용하기

  1. 개념학습: DOM을 사용하여 HTML에 JavaScript를 적용하는 방법을 학습합니다.
  2. 퀴즈: HTML의 구조를 상기하면서, 구조를 분석합니다.
  3. 해설: 퀴즈에 대한 해설을 확인합니다.

개념학습

HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용합니다. 아래의 경우 HTML 파일과 같은 디렉토리에 존재하는 myScriptFile.js을 불러옵니다.

<script src="myScriptFile.js"></script>

[코드] HTML 문서에 포함되는 script 요소

 

웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춥니다. HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행합니다. <script> 요소는 등장과 함께 실행된다는 사실을 꼭 기억하세요.

 

[그림] 웹 브라우저는 script 요소를 만나면 HTML 해석을 일시정지합니다.

 

이 <script> 요소를 추가하는 두 가지 대표적인 사례가 존재합니다. 하나는 <head> 요소에 추가하는 방법, 다른 하나는 </body> 가 끝나기 전에 추가하는 방법입니다.

Chapter1-2. HTML에 jQuery 적용하기

  1. 개념학습: DOM을 사용하여 HTML에 jQuery를 적용하는 방법을 학습합니다.

개념학습

jQuery로 DOM 조작하기

 

1. jQuery 추가하기

HTML 문서에 jQuery를 추가하기 위해서는 <script> 태그를 사용하여 jQuery 라이브러리를 불러와야 합니다. 일반적으로는 Google CDN에서 제공하는 jQuery 링크를 사용합니다.

이 코드는 <head> 태그 내에 jQuery 스크립트 파일을 포함시키는 예시입니다. 이렇게 하면, 페이지가 로드될 때 jQuery 라이브러리가 자동으로 로드되어 사용 준비가 됩니다.

 

2. jQuery 사용 예제

자바스크립트 예제에서는 document.querySelector를 사용하여 DOM 요소를 선택했습니다. jQuery에서는 $ 함수를 사용하여 이와 같은 작업을 보다 간단하게 수행할 수 있습니다.

$(document).ready(function(){
    console.log('welcome jQuery');

    let msgElement = $('#msg');
    console.log(msgElement);
});
  • $(document).ready(function(){ ... }): 이 코드는 문서가 완전히 로드되고 준비된 후에 내부의 함수를 실행하라는 의미입니다. 이를 통해, 모든 HTML 요소들이 로드된 후에 스크립트가 실행되도록 보장합니다.
  • $('#msg'): 이는 ID가 msg인 HTML 요소를 선택합니다. jQuery에서는 CSS 선택자를 사용하여 요소를 선택할 수 있으며, **#**은 ID 선택자를 의미합니다.

3. <head> vs. <body> 내부 스크립트 배치

  • <head>에 스크립트를 배치할 경우: 모든 HTML 요소보다 먼저 스크립트가 로드되고 실행됩니다. 따라서, DOM 요소에 접근하려 할 때 해당 요소들이 아직 로드되지 않았을 가능성이 있습니다.
  • <body> 끝에 스크립트를 배치할 경우: 페이지의 모든 HTML 요소들이 로드된 후 스크립트가 실행됩니다. 이 방법을 사용하면 DOM 요소에 바로 접근할 수 있으므로, 위의 jQuery 예제처럼 $(document).ready를 사용하지 않아도 됩니다.

요약정리

  • jQuery는 DOM 요소를 조작하고, 이벤트를 처리하는 등의 작업을 보다 쉽게 할 수 있도록 도와주는 라이브러리입니다.
  • 스크립트 태그를 <body>의 끝에 배치하는 것이 일반적으로 권장되며, 이 경우 $(document).ready와 같은 메서드를 사용하지 않아도 됩니다.
  • jQuery를 사용하면, DOM 요소를 선택하고 조작하는 코드를 더 직관적이고 간결하게 작성할 수 있습니다.

Chapter2. DOM 다루기

앞선 챕터에서 확인할 수 있듯이, document 객체에는 많은 속성과 메서드가 존재합니다. 모든 속성과 메서드를 외워야 할까요? 지금 당장 전부 알아야 할 필요는 없습니다. 지금 집중할 부분은 CRUD(Create, Read, Update and Delete)입니다. 앞으로 여러분이 앞으로 어떤 종류의 개발이나 컴퓨터 언어를 배우시더라도 가장 먼저 CRUD에 집중해야 합니다. CRUD를 먼저 이해하는 것이 새로운 언어를 가장 빠르게 학습하는 방법입니다. (CRUD를 이해한 다음에는 세세한 메서드들을 알아야 합니다.)

이 챕터에서는 document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 방법을 학습합니다. DOM에는 HTML에 적용(APPEND)하는 메서드가 따로 있으니 주의하세요!

이번 챕터는 실습으로 이루어져 있습니다. 설명을 읽고 codesandbox를 이용하여 실습하세요!

학습 목표

  • DOM을 JavaScript로 조작하여 HTML Element를 추가할 수 있다. (CREATE)
  • DOM을 JavaScript로 조작하여 HTML Element를 조회할 수 있다. (READ)
  • DOM을 JavaScript로 조작하여 HTML Element를 변경할 수 있다. (UPDATE)
  • DOM을 JavaScript로 조작하여 HTML Element를 삭제할 수 있다. (DELETE)
  • 생성한 HTML Element를 부모 엘리먼트의 자식 엘리먼트로 포함할 수 있다. (APPEND)
  • innerHTML과 textContent의 차이를 이해한다.

Chapter2-1. CREATE

  • 실습: DOM을 이용하여 HTML Element를 추가하는 방법을 실습합니다.

Javascript 실습하기

DOM을 이용하여 HTML Element를 추가하는 방법을 실습합니다.

CREATE

실습 repository

dom-practice

해당 문서는 DOM으로 HTML을 조작하는 방법 중 가장 기초적인, 새로운 요소를 만드는 방법을 안내합니다.

실습 repository에서 받은 index.html 파일을 브라우저에서 열고, 개발자도구의 console 탭에서 예시 코드를 입력하여 document 객체의 createElement 메서드를 이용하여 <div> 요소를 만듭니다.

document.createElement('div')

[코드] 새로운 <div> 요소를 만듭니다.

 

 

[그림] 크롬 개발자 도구의 콘솔 탭에서 새로운 div 엘리먼트를 생성합니다.

새롭게 생성한 div element는 어떻게 활용할 수 있나요?

이번 유닛을 끝까지 학습하면, JavaScript로 DOM을 조작할 수 있어야 합니다. JavaScript에서 어떤 작업의 결과를 담으려면 어떻게 해야 할까요? 변수를 선언하고 어떤 작업의 결과를 변수에 할당합니다. 여기서는 div element를 변수 tweetDiv에 할당합니다.

const tweetDiv = document.createElement('div')

[코드] 새롭게 생성한 div element를 변수에 할당합니다.

화면에 어떤 변화도 나타나지 않습니다. 제가 무엇을 놓쳤나요?

아직 화면에 변화가 없는 게 당연합니다. tweetDiv라는 요소는 현재 공중부양 중입니다. 다음 그림을 보며 설명합니다. DOM의 구조를 나타내는 트리 구조를 하나 그립니다. 아무것도 연결이 되어있지 않은 하나의 노드를 그립니다.

[그림] createElement 메서드로 생성된 엘리먼트는 공중에 떠있는 상태입니다.

위 그림처럼 공중에 떠있는 엘리먼트를 확인하기 위해서는 APPEND 해야 합니다. APPEND를 이용해 실제 웹 페이지 상에도 보이는 것을 확인할 수 있습니다. 이어지는 콘텐츠 APPEND에서, tweetDiv를 트리 구조에 연결합니다.

Chapter2-2. APPEND

  • 실습: DOM을 이용하여 HTML Element를 부모 노드에 포함하는 방법을 실습합니다.

javascript 실습하기

DOM을 이용하여 HTML Element를 부모 노드에 포함하는 방법을 실습합니다.

 

APPEND

이전 콘텐츠 CREATE에서 생성한 tweetDiv를 트리 구조와 연결합니다. CREATE에서는 다음과 같이 tweetDiv를 생성했습니다.

const tweetDiv = document.createElement('div')

CREATE에서 만든 tweetDiv라는 변수는 아직 "공중부양"을 하고 있습니다. 이번 콘텐츠에서는 append라는 메서드를 사용해서, 변수 tweetDiv를 <body>에 넣어보겠습니다.

document.body.append(tweetDiv)

[코드] 변수 tweetDiv에 담긴 새로운 <div> 요소를 <body> 요소에 append 합니다.

아무것도 보이지 않는데, 잘못 입력한 건가요?

아니요. 잘 적용된 겁니다. 새롭게 생성한 <div> 요소에 아무런 내용을 입력하지 않아서 보이는 내용이 없을 뿐입니다. 크롬의 개발자 도구 Elements 탭에서 내용을 확인하세요.

 

[그림] 개발자 도구 Elements 탭에서 변경사항을 확인할 수 있습니다.

내용은 어떻게 넣나요?

다음 콘텐츠인 UPDATE에서 좀 더 자세히 설명합니다. 이번 콘텐츠에서는 textContent라는 메서드를 활용하면 문자열을 입력할 수 있습니다.

다른 트윗처럼 이쁘게 container 안에 넣을 순 없나요?

생성한 tweetDiv를 container에 넣기 위해서는, container를 먼저 찾아야 합니다. 어떻게 container를 찾을 수 있을까요? 위에서 언급했던 DOM 트리를 순회해서 찾을 수 있습니다. 그러나 보다 더 편리한 방법이 있으니 검색해 보시기 바랍니다.

Chapter2-3. READ

  • 실습: DOM을 이용하여 HTML Element를 조회하는 방법을 실습합니다.

실습하기

DOM을 이용하여 HTML Element를 조회하는 방법을 실습합니다.

 

READ

JavaScript에서 원시 자료형인 변수의 값을 조회하기 위해서는, 변수의 이름으로 직접 조회할 수 있습니다. 참조 자료형인 배열은 index를, 객체는 key를 이용해 값을 조회할 수 있습니다. 그러나 DOM은 조금 특별한 방법을 사용해야 합니다. DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 선택자(selector)를 전달하여 확인할 수 있습니다. 선택자로는 HTML 요소("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용됩니다.

참고로 querySelector는 선택자를 조회한다는 의미를 가지고 있습니다. query의 의미가 "질문하다"라는 것을 알고 있다면 역할을 쉽게 유추하실 수 있습니다. 이 query라는 단어는 개발자 간에 "ㅇㅇㅇ를 조회한다"라는 의미를 "쿼리를 날리다"라는 jargon(특정 영역에서만 사용되는 단어)로 굳어졌기 때문에 알고 있어야 합니다.

querySelector

querySelector에 '.tweet'을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.

const oneTweet = document.querySelector('.tweet')

[코드] querySelector로 클래스 이름이 tweet인 HTML 요소를 조회합니다.

HTML 문서에는 클래스 이름이 tweet 인 요소가 여러 개 있는 데, 변수 oneTweet에 할당된 요소는 단 하나입니다. 여러 개의 요소를 한 번에 가져오기 위해서는, querySelectorAll을 사용합니다. 이렇게 조회한 HTML 요소들은 배열처럼 for문을 사용하실 수 있습니다. 주의하세요! 앞서 조회한 HTML 요소들은 배열이 아닙니다! 이런 '배열 아닌 배열'을 유사 배열, 배열형 객체 등 다양한 이름으로 부릅니다. 정식 명칭은 Array-like Object입니다. Array-like Object 같이 개념을 설명하는 용어는 영어로도 명확하게 기억해 두는 게 좋습니다.

const tweets = document.querySelectorAll('.tweet')

[코드] querySelectorAll로 클래스 이름이 tweet 인 모든 HTML 요소를 유사 배열로 받아옵니다.

querySelector와 querySelectorAll만 알아도 대부분의 요소를 조회할 수 있습니다. 다만, 여러분이 어떤 회사에 개발자로 입사한 다음, 아래와 같이 get으로 시작하는 DOM 조회 메서드를 볼 수도 있습니다. 이런 메서드는 querySelector와 비슷한 역할을 하는 오래된 방식이라고만 이해하면 됩니다. 만약 이전 버전의 브라우저(인터넷 익스플로러) 호환성을 신경 써야 한다면, 이런 옛날 방식을 사용해야 할 수도 있습니다. 실제 동작은 동일하니 이런 메서드가 있다는 것 정도는 알아두세요.

const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

[코드] getElementById와 querySelector로 각각 받아 온 container 요소는 하나의 요소입니다.

CREATE에서 생성한 div 요소를 container에 넣을 준비를 마쳤습니다. 다음 코드를 입력하면, container의 맨 마지막 자식 요소로 tweetDiv를 추가합니다.

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

[코드] tweetDiv를 container의 마지막 자식 요소로 추가합니다.

[그림] tweetDiv를 container의 마지막 자식 요소로 추가한 모습

 

[그림] id가 container인 엘리먼트의 마지막 자식 요소로 tweetDiv를 추가합니다.

 

새롭게 추가된 tweetDiv는 별도의 class가 지정되어 있지 않아, CSS를 이용한 스타일링이 적용되지 않습니다. 이어지는 콘텐츠에서는, 새롭게 생성한 tweetDiv에 class를 붙여 스타일링을 적용합니다.

Chapter2-4. UPDATE

  • 실습: DOM을 이용하여 HTML Element를 변경하는 방법을 실습합니다.

javascript 실습하기

DOM을 이용하여 HTML Element를 변경하는 방법을 실습합니다.

UPDATE

앞선 콘텐츠 CREATE, APPEND, READ를 통해 새로운 DOM 객체를 만들고, 기존의 DOM 객체에 붙이고, DOM 객체를 선택해서 조회하는 방법을 학습했습니다. oneDiv라는 이름의 <div> 요소를 만들어 보겠습니다.

const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>

이번 콘텐츠 UPDATE에서는 기존에 생성한 빈 div 태그를 업데이트하여, 보다 다양한 작업을 할 수 있습니다. 먼저, textContent를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다.

oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

[코드] textContent를 이용해 문자열을 입력합니다.

앞서 생성한 div 엘리먼트를 container에 append 했을 때, CSS 스타일링이 적용되지 않았습니다. CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다.

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

[코드] classList.add를 이용해 'tweet' 클래스를 추가합니다.

생성한 엘리먼트에 텍스트를 채웠고, 클래스를 추가하여 스타일링을 적용했습니다. 이번에는 append를 이용해 container의 자식 요소로 추가합니다.

const container = document.querySelector('#container')
container.append(oneDiv)

[코드] append를 이용해 container의 자식 요소에 oneDiv를 추가합니다.

새롭게 추가한 엘리먼트는 클래스 tweet의 스타일이 적용된 상태로 출력됩니다.

 

[그림] container에 oneDiv를 추가합니다.

class와 id 말고는 다른 attribute를 추가할 수는 없나요?

MDN에서 setAttribute라는 메서드를 검색해 보세요.

생성한 엘리먼트에 CSS가 적용이 되지 않는 것 같아요 😢

혹시 index.html의 여섯 번째 줄을 읽어보시겠어요? 우리는 CSS를 불러오는 방법을 학습했습니다. 앞서 학습한 내용을 상기하며 다시 시도하세요.

Chapter2-5. DELETE

  • 실습: DOM을 이용하여 HTML Element를 삭제하는 방법을 실습합니다.

실습하기

DELETE

이번 챕터의 마지막 콘텐츠입니다. CRUD의 Delete, 삭제하는 법을 학습합니다. 삭제하는 방법에도 여러 가지가 있습니다. 먼저 삭제하려는 요소의 위치를 알고 있는 경우에 사용하는 방법입니다. 앞서 생성하고 추가한 tweetDiv를 삭제합니다. remove 메서드를 사용하세요.

const container = document.querySelector('#container')
const oneDiv = document.createElement('div')
container.append(oneDiv)
oneDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

[코드] id가 container인 요소 아래에 tweetDiv를 추가하고, remove로 삭제합니다.

 

[그림] tweetDiv를 container의 자식으로 추가한 뒤, 삭제합니다.

여러 개의 자식 요소를 지우려면, 어떻게 해야 할까요? innerHTML을 이용하면, 아주 간단하게 모든 자식 요소를 지울 수 있습니다. 컨테이너의 모든 자식 요소를 지우려면, 다음과 같이 입력합니다.

document.querySelector('#container').innerHTML = '';

[코드] id가 container인 요소 아래의 모든 요소를 지웁니다.

innerHTML을 이용하는 방법은 분명 간편하고 편리한 방식이지만, innerHTML은 보안에서 몇 가지 문제를 가지고 있습니다. 이 방법을 대신할 다른 메서드를 사용합니다. removeChild는 자식 요소를 지정해서 삭제하는 메서드입니다. 모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있습니다. 다음의 코드는 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제하는 코드입니다.

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

[코드] container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거합니다.

 

[그림] container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거합니다.

removeChild와 while을 이용해 자식 요소를 삭제하면, 제목에 해당하는 H2 "Tweet List"까지 삭제됩니다. 이를 방지하기 위한 방법은 여러 가지가 있습니다. 자식 요소가 담고 있는 문자열을 비교해 "Tweet List"만 남기거나, 새로운 변수를 생성하고 Tweet List를 할당해 뒀다가 반복문이 끝난 뒤에 새롭게 추가할 수도 있습니다. 또는 자식 요소를 하나만 남기게 할 수도 있습니다.

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

[코드] container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거합니다.

또는 직접 클래스 이름이 tweet인 요소만 찾아서 지우는 방법도 있습니다.

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}

[코드] 클래스 이름이 tweet인 요소만 찾아서 제거합니다.

 

[그림] 클래스 이름이 tweet인 모든 요소를 제거합니다.

 

어떤 방법이든, 바로 이해하는 건 쉽지 않습니다. DOM이나 자식 요소를 순회하는 방법에 대해 이해가 잘되지 않으면, 어떤 논리로 요소에 접근하여 요소를 지우는 것인지 이해하기 어렵습니다. 이 부분이 잘 이해가 안 된다면, innerHTML을 이용해서 요소를 삭제해도 좋습니다.

Chapter3. 이벤트 객체

웹 사이트를 서핑하다 보면, 이미지나 카드를 클릭하거나 드래그하는 일이 있습니다. 이렇게 클릭이나 드래그하는 일을 이벤트라고 합니다. 이번 챕터는 기본적인 이벤트를 알고, 이벤트 핸들러를 구현합니다. 구현한 이벤트 핸들러를 적절한 엘리먼트에 적용하여, 사용자가 엘리먼트에 특정 이벤트를 발생시켰을 때 이벤트 핸들러가 동작하도록 합니다.

 

학습 목표

  • 기초적인 event를 알고, event handler를 element에 적용할 수 있다.
  • onclick에 직접 할당하는 것과 addEventListener의 차이를 이해한다.
  • eventHandler 함수를 만들고, eventHandler의 첫 번째 인자를 사용할 수 있다.

Chapter3-1. 이벤트 객체 기초

  1. 실습: 이벤트 객체 기초에 대한 내용을 실습한다.

실습

이번 챕터는 이벤트 객체에 대해 설명합니다. 다음 그림은 POS기를 만드는 과정 중 일부입니다. 화면에 아메리카노와 카페라떼를 선택하도록 하는 두 개의 버튼이 있습니다. 이 두 개의 버튼을 클릭할 때, 각각 아메리카노를 클릭하셨습니다. 또는 카페라떼를 클릭하셨습니다.라고 출력하는 단순한 프로그램입니다.

 

[그림] 카페에 들어갈 POS기를 만드는 과정의 일부

 

위 예제에서 JavaScript 코드는 다음과 같이 시작합니다.

let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.

let btnAmericano = menus[0];
let btnCaffelatte = menus[1];

btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // for 문으로도 충분히 구현할 수 있는 내용입니다.

function handleClick() {
  // 아래의 빈칸(____)을 채우세요.
  let currentMenu = ____; // TODO
  console.log(currentMenu + "를 클릭하셨습니다.");
}

[코드] 빈칸이 포함된, 제작 중인 POS기의 JavaScript 일부

 

두 버튼의 이벤트 핸들러가 동일한 함수에 의해 동작한다는 점을 주목하세요. 어떤 메뉴가 추가되더라도, 하나의 함수를 추가하면 됩니다. 이렇게 함수를 작성하면 함수를 여러 번 재사용할 수 있습니다.

그렇다면 위의 코드에서 현재 메뉴의 이름을 가져오는 방법은 무엇일까요?

이벤트 객체

사용자가 버튼을 클릭하면, 그 버튼의 textContent(또는 innerHTML)을 이용해 메뉴의 이름을 가져올 수 있습니다. 사용자가 누른 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져옵니다. 다시 말해, 이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체입니다.

간단한 퀴즈를 준비했습니다. handleClick 함수를 다음과 같이 변경하고, 다음의 질문에 대한 답을 고민하세요.

function handleClick(event) {
  console.log(event); // <-- 어떤 내용이 콘솔에 출력되나요?

  // let currentMenu = ____; // TODO
  // console.log(currentMenu + '를 클릭하셨습니다.');
}

[코드] 이벤트 객체를 출력하도록 코드를 변경하세요.

1. keydown과 keyup 이벤트

<!DOCTYPE html>
<html>
<body>

<p>키보드를 누르고 놓으면 알림이 표시됩니다.</p>

<script>
document.addEventListener("keydown", function(event) {
  console.log("키 다운: " + event.key);
});

document.addEventListener("keyup", function(event) {
  console.log("키 업: " + event.key);
});
</script>

</body>
</html>

<--!아래는 on이벤트함수 활용 예제입니다-->

<!DOCTYPE html>
<html>
<body>

<input type="text" id="keyInput">

<script>
var input = document.getElementById("keyInput");

input.onKeydown = function() {
  console.log('키 다운');
};

input.onkeyup = function() {
  console.log('키 업');
};
</script>

</body>
</html>

2. mouseover와 mouseout 이벤트

<html>
<body>

<div id="hoverMe" style="width: 200px; height: 100px; background-color: yellow;">
  여기에 마우스를 가져다 대세요.
</div>

<script>
var element = document.getElementById("hoverMe");
element.addEventListener("mouseover", function() {
  console.log('마우스 오버');
});
element.addEventListener("mouseout", function() {
  console.log('마우스 아웃');
});
</script>

</body>
</html>

<--!아래는 on이벤트함수 활용 예제입니다-->

<!DOCTYPE html>
<html>
<body>

<div id="hoverMe" style="width: 200px; height: 100px; background-color: yellow;">
  여기에 마우스를 가져다 대세요.
</div>

<script>
var div = document.getElementById("hoverMe");

div.onmouseover = function() {
  console.log('마우스 오버');
};

div.onmouseout = function() {
  console.log('마우스 아웃');
};
</script>

</body>
</html>

3. load 이벤트

<!DOCTYPE html>
<html>
<body>

<p>이 페이지가 로드되면 콘솔에 메시지가 표시됩니다.</p>

<script>
window.addEventListener("load", function() {
  console.log('페이지 로드 완료');
});
</script>

</body>
</html>

<--!아래는 on이벤트함수 활용 예제입니다-->

<!DOCTYPE html>
<html>
<body>

<script>
window.onload = function() {
  console.log('페이지 로드됨');
};
</script>

</body>
</html>

4. scroll 이벤트

<!DOCTYPE html>
<html>
<body>

<div style="height: 1000px">
  이 페이지를 스크롤하면 콘솔에 메시지가 표시됩니다.
</div>

<script>
window.addEventListener("scroll", function() {
  console.log('스크롤 발생');
});
</script>

</body>
</html>

<--!아래는 on이벤트함수 활용 예제입니다-->

<!DOCTYPE html>
<html>
<body>

<div id="scrollable" style="width: 100%; height: 100px; overflow: auto;">
  <div style="height: 500px;">
    스크롤해 보세요.
  </div>
</div>

<script>
var scrollableDiv = document.getElementById("scrollable");

scrollableDiv.onscroll = function() {
  console.log('스크롤 발생');
};
</script>

</body>
</html>

5. 클릭 이벤트

<!DOCTYPE html>
<html>
<body>

<button id="clickMe">클릭하세요</button>

<script>
document.getElementById("clickMe").addEventListener("click", function() {
  alert('버튼 클릭됨!');
});
</script>

</body>
</html>

<--!아래는 on이벤트함수 활용 예제입니다-->

<!DOCTYPE html>
<html>
<body>

<button id="clickButton">클릭하세요</button>

<script>
var button = document.getElementById("clickButton");

button.onclick = function() {
  console.log('버튼 클릭됨');
};
</script>

</body>
</html>

 

 

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