TIL #210110

📚 TIL

---

인터랙티브 자바스크립트

 

JavaScript 중급 코스의 인터랙티브 자바스크립트 토픽입니다!

 

🧸 인터랙티브 자바스크립트 시작하기

 

자바스크립트 연결

 

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

 

id로 태그 선택하기

 

- 하나의 요소를 선택할 때 사용

- 존재하지 않는 id를 입력하면 null이 리턴됨

 

const myTag = document.getElementById('id');
console.log(myTag);

 

class로 태그 선택하기

 

- 여러 요소들을 한꺼번에 선택할 때 사용

- 존재하지 않는 class를 입력하면 HTMLCollection []이 출력됨.

 

const myTags = document.getElementsByClassName('class');
console.log(myTags);

for (let tag of myTags) {
  console.log(tag);
}

 

태그 이름으로 태그 선택하기

 

- HTMLCollection 리턴

- '*' 값을 전달하게 되면 모든 태그 선택

- 명확한 의도 없이 많은 요소를 다루면 실수할 가능성이 있어 많이 사용되지는 않음

 

const btns = document.getElementsByTagName('button');
// HTML 문서 내에 있는 모든 button 태그를 선택

 

css 선택자로 태그 선택하기

 

(1) id 선택

 

const myTag = document.querySelector('#myNumber');

 

(2) 클래스 선택

 

const myTags = document.querySelectorAll('.color-btn');
// 유사 배열 NodeList 출력

 

유사 배열(Array-Like Object)

 

- 배열과 유사한 객체

- 형태가 다양하기 때문에 아래의 특징에 해당하지 않을 수 있음

 

유사 배열의 조건과 특징

 

1. 숫자 형태의 indexing 가능   console.log(myTags[1]);   2. length 프로퍼티가 있음   console.log(myTags.length);   3. 배열의 기본 메소드를 사용할 수 없음   myTags.push('codeit');   myTags.splice('codeit);   4. Array.isArray(유사배열)은 false

 

이벤트와 버튼 클릭

 

- 이벤트 : 웹 페이지에서 발생하는 대부분의 일들

- 이벤트 핸들링(Event Handling) : 이벤트가 발생했을 때 어떤 특별한 동작을 하도록 이벤트를 다루는 것

- 이벤트 핸들러(Event Handlier) : 구체적인 동작들을 코드로 표현한 함수 부분, 이벤트 리스너

- HTML 코드에 직접 작성 가능하나 코드의 일관성을 위해 잘 사용되지 않음

 

const btn = document.querySelector('#myBtn');
btn.onclick = function () {
  console.log('Hello Codeit!');
} // 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기

<button id="myBtn" onclick="console.log('Hello Codeit!')">클릭!</button>
// HTML 태그의 onclick 속성에 바로 표시하기

 

---

 

🧸 브라우저와 자바스크립트

 

window 객체

 

- 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체

- 전역객체 (Global Object)

- window.을 생략하여 사용할 수 있음

 

DOM(Document Object Model)

 

- 문서 객체 모델, 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것

- document 객체가 웹 문서의 최상단 객체

 

DOM 트리

 

- DOM의 계층구조를 나무에 비유해서 DOM 트리라고 부름

- 각 객체를 노드(Node)라는 용어로 표현

- 각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현

- 태그는 요소 노드, 문자는 텍스트 노드로 구분

- 텍스트 노드는 자식 노드를 가질 수 없음

 

console.log와 console.dir

 

	console.log	console.dir
출력하는 자료형	문자열, 숫자형, 불린형 등	문자열
출력 특징	파라미터로 전달밭은 값 위주로 출력	객체의 속성을 더 자세하게 출력
파라미터로 전달할 수 있는 값의 개수	전달받은 모든 값 출력	첫 번째 값만 출력
DOM 객체 출력	HTML 형태로 출력	객체 형태로 출력

 

DOM 이동 시 활용 가능한 프로퍼티

 

element.children element.firstElementChild element.lastElementChild element.parentElement element.previousElementSibling element.nextElementSibling

node.childNodes node.firstChild node.lastChild node.parentNode node.previousSibling node.nextSibling

 

주요 요소 노드 프로퍼티

 

(1) element.innerHTML

 

- 요소 노드 내부의 HTML 코드 문자열로 리턴

- 내부의 HTML 자체를 수정할 때 자주 활용

 

const myTag = document.querySelector('#list-1');
console.log(myTag.innerHTML);
 
    <li>Hello</li> 
    <li>Hello</li> 
  

 

(2) element.outerHTML

 

- 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴

 

const myTag = document.querySelector('#list-1');
console.log(myTag.outerHTML);

<ul id="list-1">
    <li>Hello</li> 
    <li>Hello</li> 
  </ul>

 

(3) element.textContent

 

- 요소 노드 내부의 내용들 중에서 HTML을 제외하고 텍스트만 리턴

 

const myTag = document.querySelector('#list-1');
console.log(myTag.textContent);

    Hello
    Hello
  

 

(4) 공통 특징

 

- 내부에 있던 값을 완전히 새로운 값으로 교체함

- 내부에 있는 줄 바꿈이나 들여쓰기 모두 포함

 

요소 노드 다루기

 

- 요소 노드 만들기 : document.createElement('태그이름')

- 요소 노드 꾸미기 : element.textContent, element.innerHTML, ...

- 요소 노드 추가 혹은 이동하기 : element.prepend, element.append, element.after, element.before

- 요소 노드 삭제하기 : element.remove();

 

HTML 속성 다루기

 

- 대부분의 HTML 속성은 DOM 객체의 프로퍼티로 변환 가능
- 표준 속성이 아닌 경우에는 프로퍼티로 변환 불가
- 아래 메소드를 활용하면 표준이 아닌 HTML 속성들도 다룰 수 있음

 

속성에 접근하기: element.getAttribute('속성')    속성 추가(수정)하기: element.setAttribute('속성', '값')    속성 제거하기: element.removeAttribute('속성')

 

스타일 다루기

 

- style 프로퍼티 활용하기

 

element.style.styleName = 'value';

 

- class 변경을 통해 간접적으로 스타일 적용하기

 

element.className, element.classList

 

- classList의 유용한 메소드

 

classList.add : 클래스 추가하기   classList.remove : 클래스 삭제하기   classList.toggle : 클래스 없으면 추가, 있으면 삭제하기. 하나의 값만 적용 가능

 

---

 

😁 오늘 한 일

---

 

📑 계획 짜기

- 다음주 월요일부터 코드숨과 함께 공부를 하게 되었어요

- 오전 중에 공부 시작 전 해야될 것들을 정리했어요

- 하루를 어떻게 보낼 지랑 생활에 대해서도 계획을 만들었어요 ㅎㅎ

 

📕 코드잇 공부하기

- 오늘은 자바스크립트 중급 강의를 수강했어요!

- 이것저것 하느라 오늘의 공부 양은 적지만 굉장히 유용한 코드들을 배웠어요!

 

🧆 장어 먹기

- 점심으로 장어를 먹었어요 엄마랑아빠랑 먹었어요!

- 밑반찬 엄청 많고 돌솥밥까지 시켜먹어서 넘 맛있었어요

- 장어 완전 통통하고 열무김치랑 같이 먹으니까 잘어울리더라고요!!

- 저녁먹을 시간까지도 배불러서 저녁은 제가 김치볶음밥해서 같이 먹었어요 ㅋㅋ

 

 

🎬 영화 아일랜드 보기

- 일요일은 메이플하는 날이라 메이플 하면서 영화 한 편 봤어요

- 왓챠에서 영화 아일랜드를 봤어요! 2005년 작품이네요

- 반전도 있고 되게 생각할 거리가 많은 영화예요 러닝타임이 엄청 긴데 지루하지도 않았어요!

- 영화에서 2019년이라고 나오거든요 엄청 먼 미래라고 나온 느낌인데 지금 2021년..!

 

 

😴 낮잠 자기

- 장어먹고 오니까 졸려서 4시에 자버렸어요..

- 공부할 시간이었는데 ㅎㅎ 핫 넘 졸려버렸다

- 두 시간이나 자서 오늘 한 일에 넣었어요 ㅋㅋㅋ

 

🍁 메이플하기

- 아일랜드를 봤는데 영화보면서 메이플하느라 두 번이나 죽었어요 ㅋㅋㅋ

- 어제 노트북 수리비용 안나와서 신나서 메이플 옷 샀어요~! 짱짱 귀여워..

- 그리고 일요일이라 열심히 코인을 모았답니다! 여섯 캐릭터 모은듯..!

- 코인 많이 모은 이유는 애들 익성비 사서 레벨 200 찍으려고요!

- 어제 카이저, 아크, 일리움 세 명 200 찍었어요 ㅎㅎ 유니온 8천 가자!!

 

 

🔒 방탈출 게임하기

- 오늘은 플레이 더 월드에서 방탈출 게임을 했어요 방탈출 게임처럼 만들어놓은 어플이에요!

- 여러 테마가 있는데 오프라인 테마도 있고 귀여운 테마, 무서운 테마 다양해요!

- 자기 전에 무서운 거 보고 싶어서 찾다가 새로운 공포 방탈출 테마가 나왔길래 해봤어요

- 제가 오늘 플레이한 테마는 [LIVE] 시골 폐가 2부 예요!

- 저는 무서운걸 잘보고 좋아해서 그렇게 무섭진 않았어요!!

- 일찍 해가지고 명예의 전당에도 올랐어요 엄청 많이 틀렸는데 ㅋㅋㅋ

 

2등이다! 내일이면 내려가있겠지 ㅋㅋ