인터랙티브 자바스크립트

밥슌·2024년 7월 20일

☕❌js

목록 보기

1/15

인터랙티브 자바스크립트

인터렉티브 자바스크립트

유사 배열(Array-Like Object)이란? HTMLCollection 기억나시나요? 배열과 모양은 같지만, 완벽히 배열은 아닌 이런 형태를 유사 배열이라고 부른다고 했었는데요.
당장은 직접 유사 배열을 만들어서 사용하게 될 일은 없겠지만, 지난 시간처럼 자바스크립트로 HTML 태그를 다룰 때 종종 마주치게 되니깐 간단하게나마 개념적인 부분은 정리하고 넘어갑시다!
유사 배열(Array-Like Object)이란?
앞에서도 설명한 것처럼 이름 그대로 배열과 유사(類似)한 객체를 유사 배열, 영어로는 Array-Like Object라고 부릅니다.
하지만 마냥 모양만 비슷하다고 해서 모두 유사 배열이라고 부르진 않는데요. 유사 배열에도 최소한 갖춰야 할 조건과 특징들이 있습니다.
1. 숫자 형태의 indexing이 가능하다.
https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=3773&directory=%E1%84%8B%E1%85%B2%E1%84%89%E1%85%A1%E1%84%87%E1%85%A2%E1%84%8B%E1%85%A7%E1%86%AF&name=%E1%84%8B%E1%85%B2%E1%84%89%E1%85%A1%E1%84%87%E1%85%A2%E1%84%8B%E1%85%A7%E1%86%AF 배열은 각 요소에 0부터 순서대로 매겨진 index를 통해 요소끼리의 관계도 파악할 수 있고 그 index를 통해 요소에 접근할 수도 있다는 특징이 있죠? 유사 배열도 마찬가지로 배열이라는 이름에 걸맞게 각 요소에 0부터 시작하는 숫자 형태의 index가 있어야합니다.
2. length 프로퍼티가 있다.
https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=3773&directory=%E1%84%8B%E1%85%B2%E1%84%89%E1%85%A1%E1%84%87%E1%85%A2%E1%84%8B%E1%85%A7%E1%86%AF-2&name=%E1%84%8B%E1%85%B2%E1%84%89%E1%85%A1%E1%84%87%E1%85%A2%E1%84%8B%E1%85%A7%E1%86%AF-2 객체가 가지고 있는 요소의 갯수를 저장하는 length 프로퍼티도 역시 배열의 특징이라고 할 수 있는데요. 유사 배열 역시 length 프로퍼티가 있어야 비로소 유사 배열이라고 할 수 있습니다. 숫자 형태의 index가 있더라도 length 프로퍼티가 없다면 유사 배열이라기보단 그냥 숫자 형태의 key로 구성된 일반적인 객체라고 볼 수 있습니다.
3. 배열의 기본 메소드를 사용할 수 없다.
https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=3773&directory=%E1%84%8B%E1%85%B2%E1%84%89%E1%85%A1%E1%84%87%E1%85%A2%E1%84%8B%E1%85%A7%E1%86%AF-3&name=%E1%84%8B%E1%85%B2%E1%84%89%E1%85%A1%E1%84%87%E1%85%A2%E1%84%8B%E1%85%A7%E1%86%AF-3 상황에 따라서 직접 구현할 수도 있겠지만, 유사 배열이 완전한 배열이 아닌 가장 큰 이유는 바로 기본적인 배열의 메소드를 사용할 수 없다는 점 때문입니다. 배열의 메소드를 활용할 수 없다는 특징이 유사 배열을 활용하는 목적이 되기도 하는데요. indexing을 통해 유사 배열의 요소에 접근하는 건 쉽지만 수정하거나 삭제하는 작업이 까다롭습니다.
그래서 내부의 요소들은 배열처럼 다룰 수 있게 하면서 배열의 메소드 사용을 막고 싶거나, 혹은 일반 배열에는 없는 특별한 메소드를 제공하고 싶을 때 유사 배열을 만들어 활용하기도 합니다!
4. Array.isArray(유사배열)은 false다.
https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=3773&directory=%E1%84%8B%E1%85%B2%E1%84%89%E1%85%A1%E1%84%87%E1%85%A2%E1%84%8B%E1%85%A7%E1%86%AF-4&name=%E1%84%8B%E1%85%B2%E1%84%89%E1%85%A1%E1%84%87%E1%85%A2%E1%84%8B%E1%85%A7%E1%86%AF-4 Array 객체의 isArray 메소드는 파라미터로 전달한 값이 배열인지 아닌지를 평가해서 그 결과를 불린 형태의 값으로 리턴해주는 메소드입니다. 유사 배열은 배열과 비슷하지만 배열은 아니기 때문에 결괏값이 false 입니다.
주의사항: 유사 배열은 다양하다!
유사 배열은 위의 특징들을 가진 대부분의 형태를 가리키는 포괄적인 개념이기 때문에 정말 다양한 형태로 존재할 수 있습니다.
예를 들어 지난 시간에 봤던 HTMLCollection의 경우 for..of 문을 활용하는 데 문제는 없었지만 어떤 유사 배열의 경우에는 for..of문을 활용할 수 없는 경우도 있습니다.
배열의 기본 메소드를 사용할 수 없다고 했지만, 직접 구현해서 마치 배열처럼 사용할 수 있도록 만들 수도 있습니다.
하지만 직접 유사 배열을 만드는 게 아니라 이미 만들어진 유사 배열에 접근하는 경우에는 대부분 위 4가지 특징을 모두 가지고 있으니깐 잘 기억해 두시면 좋을 것 같습니다!
태그 이름으로 태그 선택하기 id와 class 속성을 이용해서 JavaScript로 HTML 태그를 선택하는 방법에 대해 알아봤는데요.
document.getElementsByTagName('태그이름')메소드를 활용하면 태그 이름으로 태그를 선택할 수 있습니다.
```
const btns = document.getElementsByTagName('button');
```
이렇게 하면 HTML 문서 내에 있는 모든 button 태그를 선택하게 됩니다. https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=3827&directory=%E1%84%90%E1%85%A2%E1%84%80%E1%85%B3%E1%84%8B%E1%85%B5%E1%84%85%E1%85%B3%E1%86%B7%E1%84%8B%E1%85%B3%E1%84%85%E1%85%A9%E1%84%90%E1%85%A2%E1%84%80%E1%85%B3%E1%84%89%E1%85%A5%E1%86%AB%E1%84%90%E1%85%A2%E1%86%A8%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5&name=%E1%84%90%E1%85%A2%E1%84%80%E1%85%B3%E1%84%8B%E1%85%B5%E1%84%85%E1%85%B3%E1%86%B7%E1%84%8B%E1%85%B3%E1%84%85%E1%85%A9%E1%84%90%E1%85%A2%E1%84%80%E1%85%B3%E1%84%89%E1%85%A5%E1%86%AB%E1%84%90%E1%85%A2%E1%86%A8%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5 document.getElementsByClassName('class')메소드와 마찬가지로 태그 이름으로 요소를 찾는 경우에 여러 개의 요소가 선택될 수 있기 때문에 메소드 이름에 Element(s), s가 있고, 실행결과 역시 HTMLCollection을 리턴한다는 점도 함께 기억해 두시면 좋을 것 같습니다. 참고로 css 선택자처럼 '*' 값을 전달하게 되면 모든 태그를 선택할 수도 있는데요.
```
const btns = document.getElementsByTagName('button');
const allTags = document.getElementsByTagName('*');
```
하지만, css 스타일링을 할 때도 태그 이름으로 스타일링을 하는 경우는 거의 없죠? 마찬가지로 명확한 의도가 없이 이렇게 많은 요소들을 한꺼번에 다루게 되면 예상치 못한 실수를 할 가능성이 있기 때문에 자바스크립트에서도 많이 사용되는 메소드는 아닙니다. <css 선택자로 태그 선택하기> css 선택자를 활용해서 태그를 선택하는 메소드는 document 객체의 querySelector와 querySelectorAll 두 가지가 있습니다. 하나의 요소를 선택할 때는 querySelector를 사용하는데,
그래서 querySelector('#ID')는 getElementById('ID')와 같은 결과를 리턴합니다.
한가지 주의해야 할 부분은 querySelector 메소드를 활용할 때 클래스나 태그 이름처럼 여러 개의 요소가 존재하는 선택자를 쓰더라도 그 중 가장 첫번째 요소 하나만 선택한다는 점, 이 부분도 잘 기억해 두시면 좋을 것 같습니다. 그리고 여러 개의 요소를 선택할 때는 querySelectorAll을 사용합니다. 여러 개의 요소가 선택되기 때문에 NodeList라는 이름의 유사 배열에 각 요소가 담기게 되는데요.
querySelectorAll 를 사용할 때 주의해야 할 부분은 만약 존재하지 않는 요소를 선택할 경우, undefined나 null 값이 리턴되는 것이 아니라
그냥 비어있는 NodeList가 리턴된다는 점을 잘 기억해 두어야 합니다. 참고로 getElementById와 동일하게 querySelector 메소드를 활용해 존재하지 않는 요소를 선택할 경우에는 null 값을 리턴합니다.
alert 실습
실습 설명
```
alert('message');
```
alert라는 함수를 사용하면, 브라우저에 경고창을 띄울 수 있습니다. https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=3779&directory=%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%83%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%81%E1%85%A1?-1&name=%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%83%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%81%E1%85%A1%3F-1 주어진 코드를 실행했을 때 화면에 나타나는 채점이라고 적힌 button 태그를 클릭하면 정답입니다!👏🏻라는 경고창이 나타나도록 코드를 작성해 주세요.
(박수 이모지 만들기가 어렵다면 본문의 글을 복사해서 붙여넣어 보세요) 단, HTML 태그에 직접 이벤트 핸들러를 등록하지 말고 자바스크립트 파일에서 코드를 작성해 주세요.
실습 결과
코드를 잘 작성하셨다면, 버튼을 클릭 했을 때 다음과 같은 경고창이 나타나야 합니다. https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=3779&directory=%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%83%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%81%E1%85%A1?-2&name=%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%83%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%81%E1%85%A1%3F-2
해설
지난 시간에 배운 내용을 복습해 봅시다. 버튼을 클릭했을 때 어떤 동작이 일어나게 하는 데에는 두 가지 방법이 있었습니다. 한 가지는 HTML 태그에 직접 자바스크립트 코드를 작성하는 방법이었는데요. 만약 그 방법을 사용한다면 다음과 같이 HTML 코드를 수정하면 됩니다.
```
...
  <button id="grade" onclick="alert('정답입니다!👏🏻')">
...
```
하지만, 이 방법은 자바스크립트 코드가 복잡해질 경우 HTML 파일의 가독성과 코드의 일관성을 해치기 때문에 웹 페이지의 구조를 결정하는 일은 HTML 파일에, 동작을 담당하는 일은 js 파일에만 작성하는 것이 좀 더 권장되는 방식이라고도 배웠습니다. 그래서 이번 실습 과제에서도 이 방법을 사용하지 말고, 자바스크립트 파일에서 코드를 작성하라는 조건이 있는데요. 지난 시간에 배운 내용 중에서 버튼을 클릭했을 때 어떤 동작이 일어나게 하는 다른 한 가지 방법은 바로 태그를 선택한 다음, 해당 태그의 onclick 프로퍼티를 활용하는 방법이었습니다.
그래서 일단은 button 태그를 선택해야겠죠? 그동안 배웠던 태그 선택 방법을 활용해서 button 태그를 선택해보면 이렇게 다양하게 선택할 수 있죠?
```
document.querySelector('#grade');
document.querySelector('button');
document.querySelectorAll('button')[0];
document.getElementsByTagName('button')[0];
```
그리고 이 값 중 하나를 변수에 담아서 onclick 프로퍼티에 이벤트 핸들러를 할당하면 되는데요.
이벤트 핸들러의 내용은 alert('정답입니다!👏🏻')로 작성하면 되겠죠? 결과적으로 아래와 같이 코드를 작성하면, 이번 실습을 해결할 수 있습니다.
모범 답안
```
const myBtn = document.querySelector('#grade');

myBtn.onclick = function() {
  alert('정답입니다!👏🏻');
};
```
실습 결과
https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=3779&directory=%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%83%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%81%E1%85%A1?-2&name=%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%83%E1%85%A1%E1%86%B8%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%81%E1%85%A1%3F-2 (실습환경에 따라 이모지 모양은 다르게 보일 수 있습니다.)

종합정리

1. 자바스크립트로 태그 선택하기

메소드	의미	결과
document.getElementById('id')	HTML id속성으로 태그 선택하기	id에 해당하는 태그 하나
document.getElementsByClassName('class')	HTML class속성으로 태그 선택하기	class에 해당하는 태그 모음(HTMLCollection)
document.getElementsByTagName('tag')	HTML 태그 이름으로 태그 선택하기	tag에 해당하는 태그 모음(HTMLCollection)
document.querySelector('css')	css 선택자로 태그 선택하기	css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나
document.querySelectorAll('css')	css 선택자로 태그 선택하기	css 선택자에 해당하는 태그 모음(NodeList)

이미지에 있는 메소드들을 실제 예시로 설명하겠습니다. 각 메소드가 어떻게 사용되는지 이해하기 쉽도록 HTML 예제와 함께 설명하겠습니다.

1. `document.getElementById('id')`

의미: HTML id 속성으로 태그 선택하기
결과: id에 해당하는 태그 하나

<!DOCTYPE html>
<html>
<body>

<p id="myId">Hello World!</p>

<script>
    var element = document.getElementById('myId');
    console.log(element); // <p id="myId">Hello World!</p>
</script>

</body>
</html>

2. `document.getElementsByClassName('class')`

의미: HTML class 속성으로 태그 선택하기
결과: class에 해당하는 태그 모음 (HTMLCollection)

<!DOCTYPE html>
<html>
<body>

<p class="myClass">Hello</p>
<p class="myClass">World!</p>

<script>
    var elements = document.getElementsByClassName('myClass');
    console.log(elements); // HTMLCollection(2) [p.myClass, p.myClass]
</script>

</body>
</html>

3. `document.getElementsByTagName('tag')`

의미: HTML 태그 이름으로 태그 선택하기
결과: tag에 해당하는 태그 모음 (HTMLCollection)

<!DOCTYPE html>
<html>
<body>

<p>Hello</p>
<p>World!</p>

<script>
    var elements = document.getElementsByTagName('p');
    console.log(elements); // HTMLCollection(2) [p, p]
</script>

</body>
</html>

4. `document.querySelector('css')`

의미: CSS 선택자로 태그 선택하기
결과: CSS 선택자에 해당하는 태그 중 가장 첫번째 태그 하나

<!DOCTYPE html>
<html>
<body>

<p class="myClass">Hello</p>
<p class="myClass">World!</p>

<script>
    var element = document.querySelector('.myClass');
    console.log(element); // <p class="myClass">Hello</p>
</script>

</body>
</html>

5. `document.querySelectorAll('css')`

의미: CSS 선택자로 태그 선택하기
결과: CSS 선택자에 해당하는 태그 모음 (NodeList)

<!DOCTYPE html>
<html>
<body>

<p class="myClass">Hello</p>
<p class="myClass">World!</p>

<script>
    var elements = document.querySelectorAll('.myClass');
    console.log(elements); // NodeList(2) [p.myClass, p.myClass]
</script>

</body>
</html>

이 예시들은 각 메소드가 어떻게 HTML 요소를 선택하고 결과를 반환하는지를 보여줍니다. getElementById는 단일 요소를 반환하며, getElementsByClassName과 getElementsByTagName는 HTMLCollection을 반환하고, querySelector는 첫 번째 일치 요소를, querySelectorAll은 NodeList를 반환합니다.

2. 유사 배열이란?

배열과 유사한 객체 ex) HTMLCollection, NodeList, DOMTokenList, ...

특징

숫자 형태의 indexing이 가능하다.
length 프로퍼티가 있다.
배열의 기본 메소드를 사용할 수 없다.
Array.isArray(유사배열)의 리턴값은 false다.

3. 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러

이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 ex) 버튼 클릭, 스크롤, 키보드 입력, ...
이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일
이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다.

4. 이벤트 핸들러를 등록하는 2가지 방법

4-1. 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기
```
const btn = document.querySelector('#myBtn');

btn.onclick = function() {
  console.log('Hello Codeit!');
};
```
4-2. HTML 태그의 onclick 속성에 바로 표시하기
```
<button id="myBtn" onclick="console.log('Hello Codeit!')">클릭!</button>
```

밥슌

마트 시식코너같은 저의 벨로그에 어서오세요.

다음 포스트

인터랙티브 자바스크립트

☕❌js

인터랙티브 자바스크립트

유사 배열(Array-Like Object)이란?

1. 숫자 형태의 indexing이 가능하다.

2. length 프로퍼티가 있다.

3. 배열의 기본 메소드를 사용할 수 없다.

4. Array.isArray(유사배열)은 false다.

주의사항: 유사 배열은 다양하다!

실습 설명

실습 결과

해설

모범 답안

실습 결과

1. 자바스크립트로 태그 선택하기

1. `document.getElementById('id')`

2. `document.getElementsByClassName('class')`

3. `document.getElementsByTagName('tag')`

4. `document.querySelector('css')`

5. `document.querySelectorAll('css')`

2. 유사 배열이란?

특징

3. 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러

4. 이벤트 핸들러를 등록하는 2가지 방법

4-1. 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기

4-2. HTML 태그의 onclick 속성에 바로 표시하기

[js] js의 틀을 익혀보자

0개의 댓글

인터랙티브 자바스크립트

☕❌js

인터랙티브 자바스크립트

유사 배열(Array-Like Object)이란?

1. 숫자 형태의 indexing이 가능하다.

2. length 프로퍼티가 있다.

3. 배열의 기본 메소드를 사용할 수 없다.

4. Array.isArray(유사배열)은 false다.

주의사항: 유사 배열은 다양하다!

실습 설명

실습 결과

해설

모범 답안

실습 결과

1. 자바스크립트로 태그 선택하기

1. document.getElementById('id')

2. document.getElementsByClassName('class')

3. document.getElementsByTagName('tag')

4. document.querySelector('css')

5. document.querySelectorAll('css')

2. 유사 배열이란?

특징

3. 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러

4. 이벤트 핸들러를 등록하는 2가지 방법

4-1. 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기

4-2. HTML 태그의 onclick 속성에 바로 표시하기

[js] js의 틀을 익혀보자

0개의 댓글

1. `document.getElementById('id')`

2. `document.getElementsByClassName('class')`

3. `document.getElementsByTagName('tag')`

4. `document.querySelector('css')`

5. `document.querySelectorAll('css')`