데브코스 19일차 ( 24.11.07 목 ) JavaScript

워니·2024년 11월 7일

Programmers Front-end

목록 보기

19/27

[Section 04] DOM과 이벤트

< 배운 내용 요약 정리 >

1. window 객체

window.document : 현재 문서에 대한 Document 개체 반환
window.alert(massage) : 윈도우 객체에 내장되어 있는 경고창 내보냄
window.confirm() : 확인을 위한 대화상자 표시, 사용자 선택 반환
window.setTimeout() : 지정된 시간 후 함수 실행
window.setInterval() : 지정된 시간간격으로 함수 실행
1. BOM : 브라우저 객체를 제어하기 위한 모델
- 1. location 객체 : 현재 문서의 URL을 나타냄
  - location.href : 현재 페이지의 전체 URL 반환
  - location.reload() : 페이지 새로고침
  - location.replace() : 새로운 URL로 대체
  - location.hostname() : 현재 페이지 호스트 이름 반환
- 1. navigator 객체 : 웹 브라우저 정보를 축약해서 보여주는 것
  - navigator.userAgent : 브라우저 사용자 에이전트 문자열 반환
- 1. screen 객체 : 사용자의 화면에 대한 정보 제공
  - screen.width : 화면의 너비 픽셀 단위 반환
  - screen.height : 화면의 높이 픽셀 단위 반환
  - screen.availWidth : 현재 사용 가능한 화면 너비 반환
  - screen.availHeight : 현재 사용 가능한 화면 높이 반환
2. DOM : Document 객체를 제어하기 위한 모델
- 1. querySelector() 문서 객체 선택
  - querySelector() : CSS 선택자 방식으로 단일 선택
  - querySelectorAll() : CSS 선택자 방식으로 복수 선택
- 1. getElementBy..() 문서 객체 선택
  - getElementById() : ID 속성값으로 단일 선택
  - getElementByTagName() : 태그명으로 복수 선택
  - getElementByClassName() : 클래스 속성값으로 복수 선택
- 1. 부모자식형제 노드 탐색
  - parentNode : 현재 노드의 부모 요소 반환
  - childNodes : 현재 요소의 모든 자식 노드 반환
  - firstChild / lastChild : 첫 번째 또는 마지막 자식 노드 반환
  - nextSSibling / previousSibling : 현재 노드의 형제 요소 반환
- 1. 문서 객체 조작
  - .style.속성명 : 스타일 변경
  - setAttribute(name, value) : 속성 추가, 변경
  - getAttribute(name) : 속성 가져오기
  - removeAttribute(name) : 속성 제거
  - classList. : class 속성 제어
    - add() : 클래스 추가
    - remove() : 클래스 제거
    - toggle() : 있으면 삭제, 없으면 추가
    - contains() : 클래스 존재 여부 확인
  - 콘텐츠 변경
    - innerHTML : HTML 콘텐츠 변경
    - outerHTML : HTML 콘텐츠 변경
    - innerText : Text 콘텐츠 변경
    - textContent : Text 콘텐츠 변경
  - 요소 동적 추가
    - createElement() + appendChild() : 마지막 자식 요소로 추가
    - insertBefore(새로운요소, 위치지정) : 지정된 요소의 앞에 새로운 요소 추가
    - innerHTML
  - 요소 삭제
    - remove() : 직접 삭제
    - removeChild() : 부모 문서 객체의 자식 요소 삭제
3. DOM Node
- 노드 관계 요소
- 노드 엘리먼트 관계 요소

2. 이벤트

1. 이벤트 타겟 : 어느 요소에서 발생하는 이벤트인지 확인
1. 이벤트 타입 : 이벤트의 종류
1. 이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 콜백함수

< 23. `BOM`와 `DOM` >

1. `window 객체`

자바스크립트의 대장은 Object 표준내장객체,
웹 브라우저에서는 window
window 아래에 DOM과 BOM, Javascript의 기본객체가 포함
브라우저의 창이나 탭을 나타내며,
자바스크립트 객체와 함수는 window 객체의 속성으로 존재
주요 매서드 및 속성

1.1. `window.document`

현재 문서에 대한 Document 개체 반환

    console.log(window.document.title);

1.2. `window.alert(massage)`

윈도우 객체에 내장되어 있는 경고창을 내보내줌
사용자가 확인을 누를 때까지 락이 걸려서 다음 진행사항을 확인 불가

간단한 경고창을 보여주고 싶을 때 사용

  ex) 아이디를 입력하지 않고 전송버튼을 누를 때 
        “아이디를 입력해 주세요” 경고창이 뜨도록 설정

디자인이 안 예뻐서 실무에서 안 쓰는 추세
대신 별도의 alert창을 본인들이 만들어서 사용
관리자 페이지는 디자인이 중요하지 않으므로 굉장히 많이 사용

    window.alert("안녕하세요!");

1.3. `window.confirm()`

확인 대화상자를 표시하고, 사용자의 선택을 반환

    let result = window.confirm("정말로 삭제하시겠습니까?");

1.4. `window.setTimeout()`

지정된 시간 후에 함수를 실행

    setTimeout(() => { console.log("1초 후 실행"); }, 1000);

clearTimeout : 셋타임아웃 작업을 취소시킴

    const alarm = {
      remind(aMessage) {
        alert(aMessage);
        this.timeoutID = undefined;
      },
    
      setup() {
        if (typeof this.timeoutID === "number") {
          this.cancel();
        }
    
        this.timeoutID = setTimeout(
          (msg) => {
            this.remind(msg);
          },
          1000,
          "일어나세요!",
        );
      },
    
      cancel() {
        clearTimeout(this.timeoutID);
      },
    };
    window.addEventListener("click", () => alarm.setup());

1.5. `window.setInterval()`

지정된 시간간격으로 함수를 반복 실행

    setInterval(() => { console.log("1초마다 실행"); }, 1000);

clearInterval : 인터벌 작업을 취소시킴

    clearInterval(intervalID)

2. `BOM (Brower Object Model)`

location 객체, navigator 객체, screen 객체, history 객체

2.1. `location` 객체

현재 문서의 URL을 나타내며, URL 정보를 읽거나 수정할 수 있음
URL에 관련된 작업을 처리하는 객체
주요 매서드 및 속성

2.1.1. `location.href`

현재 페이지의 전체 URL 반환

    console.log(location.href);
    // 현재 URL 출력
    console.log("현재 URL:", location.href);

2.1.2. `location.reload()`

페이지를 새로고침

    location.reload();
    // 페이지 새로 고침
    function reloadPage() {
        location.reload();
    }

2.1.3. `location.replace()`

현재 URL을 새로운 URL로 대체
입력된 주소로 이동하고 싶을 때 사용 (뒤로가기 불가)

    location.replace('https://www.example.com');
    // URL 대체
    function navigateToGoogle() {
        location.replace("<https://www.google.com>");

2.1.4. `location.hostname()`

현재 페이지의 호스트 이름 반환

2.2. `navigator` 객체

웹 브라우저 정보를 축약해서 보여주는 것
주요 매서드 및 속성

2.2.1 `navigator.userAgent`

브라우저의 사용자 에이전트 문자열 반환

    console.log(navigator.userAgent);

예시

    // 사용자 에이전트 정보 출력
    console.log("사용자 에이전트:", navigator.userAgent);

2.3. `screen` 객체

사용자의 화면에 대한 정보 제공
주요 매서드 및 속성

2.3.1. `screen.width`

화면의 너비를 픽셀 단위로 반환합니다.

2.3.2. `screen.height`

화면의 높이를 픽셀 단위로 반환합니다.

2.3.3. `screen.availWidth`

현재 사용 가능한 화면 너비를 반환합니다.

2.3.4. `screen.availHeight`

현재 사용 가능한 화면 높이를 반환합니다.
예시

        // 화면 크기 출력
        console.log("화면 너비:", screen.width);
        console.log("화면 높이:", screen.height);
        
        // 사용 가능한 화면 크기 출력
        console.log("사용 가능한 너비:", screen.availWidth);
        console.log("사용 가능한 높이:", screen.availHeight);

3. `DOM (Document Object Model)`

Document 객체를 제어하기 위한 모델
DOM은 트리구조로 이루어져 있으며, 문서의 각 요소는 Node로 표현, 노드는 요소 노드(Element Node), 속성 노드(Attribute Node), 텍스트 노드(Text Node) 등 다양한 종류가 있음
자바스크립트 DOM의 핵심은 문서 객체의 선택과 제어

3.1. 문서 객체 선택

3.1.1. `getElementById()`

ID 속성값으로 선택 (단일)

const element = document.getElementById("myElement");

3.1.2. `getElementByTagName()`

태그 이름으로 선택 (복수)

const elements = document.getElementsByTagName("p"); 
// 모든 <p> 태그 선택

3.1.3. `getElementByClassName()`

클래스 속성값으로 선택 (복수)

const elements = document.getElementsByClassName("myClass"); 
// 클래스가 "myClass"인 모든 요소 선택

3.1.4. `querySelector()`

CSS 선택자 방식으로 선택 (단일)

const element = document.querySelector(".myClass"); 
// 첫 번째 "myClass" 클래스 선택

3.1.5. `querySelectorAll()`

CSS 선택자 방식으로 선택 (복수)

const elements = document.querySelectorAll("div.myClass"); 
// 모든 "myClass" 클래스의 <div> 선택

3.1.6. 부모, 자식, 형제 노드 탐색

parentNode
- 현재 노드의 부모 요소를 반환합니다.
```
const parent = document.querySelector('p').parentNode;
```
childNodes
- 현재 요소의 모든 자식 노드를 반환합니다.
```
const children = document.querySelector('div').childNodes;
```

firstChild / lastChild

첫 번째 자식 노드 또는 마지막 자식 노드를 반환합니다.


const firstChild = document.querySelector('ul').firstChild;
const lastChild = document.querySelector('ul').lastChild;

nextSibling / previousSibling

현재 노드의 형제 요소를 반환합니다.

const nextSibling = document.querySelector('li').nextSibling;
const previousSibling = document.querySelector('li').previousSibling;

3.2. 문서 객체 조작

3.2.1. 스타일 변경 `.style.속성명`

요소의 인라인 스타일 조작
font-size 처럼 대쉬가 들어가면 카멜표기법으로 fontSize

document.getElementById("myElement").style.color = "red"; 
// 텍스트 색상을 빨간색으로 변경

3.2.2. 속성 추가 `setAttribute(name, value)`

기존에 있으면 변경

document.getElementById("myElement").setAttribute("class", "highlight"); 
// 클래스 속성 추가

const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');

3.2.3. 속성 가져오기 `getAttribute(name)`

const link = document.querySelector('a');
const hrefValue = link.getAttribute('href');

3.2.4. 속성 제거 `removeAttribute(name)`

document.getElementById("myElement").removeAttribute("class"); // 클래스 속성 제거

const link = document.querySelector('a');
link.removeAttribute('href');

3.2.3. 클래스 조작 `classList`

태그의 속성을 덮어 씌우는 setAttribute와는 달리,
classList는 원하는 것만 수정
class 속성을 제어하는 특화 방법
- add(): 클래스 추가
- remove(): 클래스 제거
- toggle(): 클래스 있으면 삭제, 없으면 추가
- contains(): 클래스 존재 여부 확인

const element = document.querySelector('div');
element.classList.add('new-class');
element.classList.remove('old-class');

3.2.4. 콘텐츠 조작(변경)

HTML 콘텐츠 변경 innerHTML

document.getElementById("myElement").innerHTML = "<strong>Hello, World!</strong>"; // HTML 변경

자신을 포함한 HTML 변경 outerHTML

const element = document.querySelector('div');
element.outerHTML = '<section>섹션으로 변경</section>';

텍스트 콘텐츠 변경 innerText

document.getElementById("myElement").innerText = "Hello, World!"; // 텍스트 변경

텍스트 콘텐츠 변경 textContent
- 실무에선 innerText보다 성능이 좋은 것으로 판단

document.getElementById("myElement").textContent = 
"Hello, World!"; // 텍스트 변경

3.2.5. 요소 동적 추가

createElement() + appendChild() 활용
- 마지막 자식 요소로 추가
- 보안, 성능면에서 innerHTML보다 우수
- 요소 추가 때 마다 appendChild 필요

const newDiv = document.createElement('div');  // 새로운 div 요소 생성
newDiv.classList.add('new-element');           // 클래스 추가
newDiv.textContent = '새로운 내용입니다';      // 텍스트 콘텐츠 추가

const parent = document.getElementById('content');
parent.appendChild(newDiv);                    // 부모 요소에 추가

insertBefore() 활용
- 지정 위치 앞에 새로운 요소를 추가
- insertBefore(새로운 요소, 지정 위치)

const newDiv = document.createElement('div');
const firstChild = document.getElementById('content').firstChild;
document.getElementById('content').insertBefore(newDiv, firstChild);

innerHTML 활용

const newElementHTML = `
  <div class="new-element">
    <h2>새로운 제목</h2>
    <p>새로운 내용입니다</p>
  </div>
`;
document.getElementById('content').innerHTML = newElementHTML; // HTML 삽입

3.2.6. 요소 삭제

remove()
- 직접 삭제

document.getElementById("myElement").remove(); // 요소 삭제

removeChild()
- 부모 문서 객체의 자식 요소 삭제

const parent = document.querySelector("div");
const child = document.querySelector("p");
parent.removeChild(child); // div의 자식 p 태그 삭제

4. `DOM Node`

DOM Visualizer

4.1. 노드 관계 요소

Node.parentNode: 현재 노드를 기준으로 부모 노드를 선택합니다. 부모 노드는 해당 노드를 포함하고 있는 노드입니다.

const childNode = document.querySelector(".child");
const parentNode = childNode.parentNode;
console.log(parentNode); // .child의 부모 노드를 출력

Node.firstChild: 현재 노드를 기준으로 첫 번째 자식 노드를 선택합니다. 첫 번째 자식 노드는 텍스트 노드나 요소 노드 등일 수 있습니다.
```
const parentNode = document.querySelector(".parent");
const firstChild = parentNode.firstChild;
console.log(firstChild); // 부모의 첫 번째 자식 노드를 출력
```
Node.lastChild: 현재 노드를 기준으로 마지막 자식 노드를 선택합니다. 마지막 자식 노드도 텍스트 노드나 요소 노드 등일 수 있습니다.
```
const lastChild = parentNode.lastChild;
console.log(lastChild); // 부모의 마지막 자식 노드를 출력
```
Node.previousSibling: 현재 노드를 기준으로 이전 형제 노드를 선택합니다. 형제 노드는 같은 부모를 가지는 노드입니다.
```
const siblingNode = childNode.previousSibling;
console.log(siblingNode); // .child의 이전 형제 노드를 출력
```

Node.nextSibling: 현재 노드를 기준으로 다음 형제 노드를 선택합니다.

const nextSibling = childNode.nextSibling;
console.log(nextSibling); // .child의 다음 형제 노드를 출력

Node.childNodes: 현재 노드를 기준으로 모든 자식 노드들을 선택합니다. 이때 반환되는 노드 리스트는 요소 노드, 텍스트 노드 등 다양한 타입을 포함합니다.
```
const childNodes = parentNode.childNodes;
console.log(childNodes); // 부모의 모든 자식 노드를 출력
```

4.2. 노드 엘리먼트 관계 요소

Node.parentElement: 현재 노드의 부모 엘리먼트를 선택합니다. parentNode와 유사하지만, 항상 엘리먼트 노드만 반환합니다.
```
const parentElement = childNode.parentElement;
console.log(parentElement); // .child의 부모 엘리먼트를 출력
```
Node.children: 현재 노드의 자식 엘리먼트 노드를 선택합니다. 이때 반환되는 컬렉션은 HTMLCollection으로, 모든 자식 요소를 포함합니다.
```
const children = parentNode.children;
console.log(children); // 부모의 모든 자식 엘리먼트를 출력
```
Node.lastElementChild: 현재 노드의 마지막 엘리먼트 노드를 선택합니다. 마지막 자식 노드가 요소 노드일 경우에만 반환됩니다.
```
const lastElementChild = parentNode.lastElementChild;
console.log(lastElementChild); // 부모의 마지막 자식 엘리먼트를 출력
```
Node.previousElementSibling: 현재 노드의 이전 엘리먼트 노드를 선택합니다. 이전 형제 노드가 요소 노드일 경우에만 반환됩니다.
```
const previousElementSibling = childNode.previousElementSibling;
console.log(previousElementSibling); // .child의 이전 엘리먼트 노드를 출력
```
Node.nextElementSibling: 현재 노드의 다음 엘리먼트 노드를 선택합니다. 다음 형제 노드가 요소 노드일 경우에만 반환됩니다.
```
const nextElementSibling = childNode.nextElementSibling;
console.log(nextElementSibling); // .child의 다음 엘리먼트 노드를 출력
```

Node.childElementCount: 현재 노드의 자식 엘리먼트 노드의 개수를 반환합니다.

const childElementCount = parentNode.childElementCount;
console.log(childElementCount); // 부모의 자식 엘리먼트 노드의 갯수를 출력

< 24. 이벤트 >

웹 브라우저에서 발생하는 상호 작용
대표적으로 클릭 이벤트, 키보드 이벤트, 체인지 이벤트 등

// ex)
// .addEventListener가 붙은 div가 event.currentTarget
// click이 일어나는 요소인 div가 event.target
document.querySelector("div").addEventListener("click", function (e) {
  // addEventListener가 이벤트 리스너
  // function(e){}가 이벤트 핸들러
  // click이 이벤트 타입
  console.log(e); // 여기서 e가 이벤트 객체
});

인스턴스 메서드
- preventDefalt()
  - 자바스크립트의 이벤트 객체에서 사용할 수 있는 메서드
  - 특정 이벤트가 발생했을 때 브라우저가 기본적으로 수행하는 동작 차단

1. 이벤트 타겟

어느 요소에서 발생하는 이벤트인지 확인
이벤트가 발생하거나 이미 발생한 문서 객체
예를 들어, 버튼을 클릭하면 그 버튼 자체가 이벤트 타겟
Event.target
- 실제로 이벤트가 발생한 요소
Event.currentTarget
- 이벤트가 발생한 대상 요소, 이벤트 핸들러가 부착된 요소
- addEventListener와 같은 메소드 앞에 기술된 객체를 말함
- target과 currenTarget은 다를 수 있음
인스턴스 메서드
- addEventListener
  - 지정한 유형의 이벤트를 대상이 수신할 때마다 호출한 함수를 설정
- removeEventListener
  - addEventListener로 이벤트 대상에 등록한 수신기를 제거

2. 이벤트 타입

이벤트의 종류
클릭 click, 더블 클릭 dblclick, 스크롤 scroll 등

3. 이벤트 핸들러

특정 이벤트가 발생했을 때 실행되는 콜백함수
사용자가 수행한 행동에 대해 웹 페이지가 어떻게 반응해야 하는지 정의

4. 문법

[문서객체].addEventListener("이벤트명", 콜백함수);

예시

문서에서 <p> 요소를 클릭했을 때 알림을 표시하는 코드는 다음과 같습니다:

document.querySelector("p").addEventListener("click", function(){
   alert("클릭하셨습니다.");
});

5. 자주 사용하는 이벤트

4.1. 클릭 이벤트 (click)

설명: 클릭 이벤트는 사용자가 마우스를 클릭했을 때 발생합니다. 버튼, 링크 등의 인터랙티브 요소에서 주로 사용됩니다.

예제 코드:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>클릭 이벤트 예제</title>
</head>
<body>
    <button id="myButton">클릭하세요!</button>
    <div id="output"></div>

    <script>
        const button = document.getElementById("myButton");
        const output = document.getElementById("output");

        button.addEventListener("click", function() {
            output.textContent = "버튼이 클릭되었습니다!";
            output.style.color = "green"; // 글씨 색 변경
        });
    </script>
</body>
</html>

4.2. 키보드 이벤트 (keydown, keyup)

설명: 키보드 이벤트는 사용자가 키보드의 키를 누를 때 발생합니다. keydown은 키를 누르는 순간, keyup은 키를 뗄 때 발생합니다.

예제 코드:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>키보드 이벤트 예제</title>
</head>
<body>
    <input type="text" id="inputField" placeholder="여기에 입력하세요..." />
    <div id="keyOutput"></div>

    <script>
        const inputField = document.getElementById("inputField");
        const keyOutput = document.getElementById("keyOutput");

        inputField.addEventListener("keydown", function(event) {
            keyOutput.textContent = `누른 키: ${event.key}`;
        });

        inputField.addEventListener("keyup", function(event) {
            keyOutput.textContent += ` (뗀 키: ${event.key})`;
        });
    </script>
</body>
</html>

4.3. 드래그 이벤트 (drag, dragstart, dragend)

설명: 드래그 이벤트는 사용자가 마우스로 요소를 클릭하고 드래그할 때 발생합니다. 이 이벤트는 사용자 인터페이스(UI)에서 요소를 이동하거나 재배치할 때 사용됩니다.

예제 코드:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>드래그 이벤트 예제</title>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background-color: blue;
            cursor: move; /* 드래그 시 커서 변경 */
            position: relative;
        }
    </style>
</head>
<body>
    <div id="draggable" draggable="true">드래그 해보세요!</div>
    <div id="status"></div>

    <script>
        const draggable = document.getElementById("draggable");
        const status = document.getElementById("status");

        draggable.addEventListener("dragstart", function(event) {
            status.textContent = "드래그가 시작되었습니다!";
            event.dataTransfer.setData("text/plain", "이것은 드래그 중입니다.");
        });

        draggable.addEventListener("dragend", function(event) {
            status.textContent = "드래그가 종료되었습니다!";
        });
    </script>
</body>
</html>

4.4. 폼 이벤트 (submit, change, input)

설명: 폼 이벤트는 사용자가 웹 폼을 통해 데이터를 입력하고 제출할 때 발생합니다. 주요 이벤트로는 submit, change, input이 있습니다.

예제 코드:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 이벤트 예제</title>
    <style>
        #output {
            margin-top: 20px;
            color: blue;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <label for="name">이름:</label>
        <input type="text" id="name" placeholder="이름을 입력하세요" required>
        <br>
        <label for="email">이메일:</label>
        <input type="email" id="email" placeholder="이메일을 입력하세요" required>
        <br>
        <button type="submit">제출</button>
    </form>
    <div id="output"></div>

    <script>
        const form = document.getElementById("myForm");
        const output = document.getElementById("output");

        // submit 이벤트 핸들러
        form.addEventListener("submit", function(event) {
            event.preventDefault(); // 기본 제출 동작 방지
            const name = document.getElementById("name").value;
            const email = document.getElementById("email").value;
            output.textContent = `이름: ${name}, 이메일: ${email}이(가) 제출되었습니다.`;
        });

        // change 이벤트 핸들러
        const nameInput = document.getElementById("name");
        nameInput.addEventListener("change", function() {
            output.textContent += ` 이름이 변경되었습니다: ${nameInput.value}`;
        });

        // input 이벤트 핸들러
        nameInput.addEventListener("input", function() {
            console.log(`현재 이름 입력: ${nameInput.value}`);
        });
    </script>
</body>
</html>

예시

// ex1) 클릭했을 때 경고창 뜨기
const eventTarget = document.querySelector("button");
eventTarget.addEventListener("click", function () {
  alert("click");
});

// ex2) 클릭했을 때 h1 색상 바꾸기
const eventTarget = document.querySelector("button");
eventTarget.addEventListener("click", function () {
  const h1El = document.querySelector("h1");
  h1El.style.color = "red";
});

< 하루 정리 >

오늘은 배운 내용을 정리하는데만 한참이 걸릴 정도로 배운 것이 많다.
정확히 말하면 자잘하게 배운 내용이 많다.
그 예시를 강사님께서 보여주시는데 화면 전환이 너무 빨라 정신이 없기도 했고,
작성하시는 위치가 계속 바뀌고 이것도 지우고 이것도 추가하고 뭐가 뭔지 하나도 ..
그래서 연습문제를 푸는 시간에 딱 한 문제 풀었다 ....
그것도 앞에 내용 찾아가면서...

근데 용어와 내용이 이해가 안되는건 나 뿐인 것 같았다.
보통 같았으면 조금 뒤에 충분히 이해가 돼서 문제풀이 추가 설명 시간에 들었을텐데
오늘은 개념 자체가 이해가 안되니까 그 설명도 안 들으러가고 혼자 배운 내용을 정리했다.

정리하고나니 확실히 이해는 어느 정도 된 것 같다. 
이제는 문제 풀이에 적용을 해봐야하는데.. 막상하려니 걱정이 앞선다. 
일단은 오늘 남은 시간은 주말 과제나 다른 건 생각말고 아까 못 푼 연습문제부터 풀어야겠다.

힘드니까 팀 단톡방에서 유머감각이 살아난다. 미쳐가는거지 ㅋㅋㅋㅋ 
물론 그 힘듦이 정도를 넘어섰을 땐 카톡이고 뭐고 눈에서 레이저 나올 듯 강의 화면을 봐도
이해는 안 되고 몸은 점점 고되고 으으으... 일단 오늘 하루 마무리부터 잘 해보자!!

워니

첫 시작!

이전 포스트

데브코스 18일차 ( 24.11.06 수 ) JavaScript

다음 포스트

데브코스 19일차 ( 24.11.07 목 ) JavaScript

Programmers Front-end

[Section 04] DOM과 이벤트

< 배운 내용 요약 정리 >

< 23. BOM와 DOM >

1. window 객체

1.1. window.document

1.2. window.alert(massage)

1.3. window.confirm()

1.4. window.setTimeout()

1.5. window.setInterval()

2. BOM (Brower Object Model)

2.1. location 객체

2.1.1. location.href

2.1.2. location.reload()

2.1.3. location.replace()

2.1.4. location.hostname()

2.2. navigator 객체

2.2.1 navigator.userAgent

2.3. screen 객체

2.3.1. screen.width

2.3.2. screen.height

2.3.3. screen.availWidth

2.3.4. screen.availHeight

3. DOM (Document Object Model)

3.1. 문서 객체 선택

3.1.1. getElementById()

3.1.2. getElementByTagName()

3.1.3. getElementByClassName()

3.1.4. querySelector()

3.1.5. querySelectorAll()

3.1.6. 부모, 자식, 형제 노드 탐색

3.2. 문서 객체 조작

3.2.1. 스타일 변경 .style.속성명

3.2.2. 속성 추가 setAttribute(name, value)

3.2.3. 속성 가져오기 getAttribute(name)

3.2.4. 속성 제거 removeAttribute(name)

3.2.3. 클래스 조작 classList

3.2.4. 콘텐츠 조작(변경)

3.2.5. 요소 동적 추가

3.2.6. 요소 삭제

4. DOM Node

4.1. 노드 관계 요소

4.2. 노드 엘리먼트 관계 요소

< 24. 이벤트 >

1. 이벤트 타겟

2. 이벤트 타입

3. 이벤트 핸들러

4. 문법

5. 자주 사용하는 이벤트

4.1. 클릭 이벤트 (click)

4.2. 키보드 이벤트 (keydown, keyup)

4.3. 드래그 이벤트 (drag, dragstart, dragend)

4.4. 폼 이벤트 (submit, change, input)

< 하루 정리 >

데브코스 18일차 ( 24.11.06 수 ) JavaScript

데브코스 20일차 ( 24.11.08 금 ) Node JS

0개의 댓글

< 23. `BOM`와 `DOM` >

1. `window 객체`

1.1. `window.document`

1.2. `window.alert(massage)`

1.3. `window.confirm()`

1.4. `window.setTimeout()`

1.5. `window.setInterval()`

2. `BOM (Brower Object Model)`

2.1. `location` 객체

2.1.1. `location.href`

2.1.2. `location.reload()`

2.1.3. `location.replace()`

2.1.4. `location.hostname()`

2.2. `navigator` 객체

2.2.1 `navigator.userAgent`

2.3. `screen` 객체

2.3.1. `screen.width`

2.3.2. `screen.height`

2.3.3. `screen.availWidth`

2.3.4. `screen.availHeight`

3. `DOM (Document Object Model)`

3.1.1. `getElementById()`

3.1.2. `getElementByTagName()`

3.1.3. `getElementByClassName()`

3.1.4. `querySelector()`

3.1.5. `querySelectorAll()`

3.2.1. 스타일 변경 `.style.속성명`

3.2.2. 속성 추가 `setAttribute(name, value)`

3.2.3. 속성 가져오기 `getAttribute(name)`

3.2.4. 속성 제거 `removeAttribute(name)`

3.2.3. 클래스 조작 `classList`

4. `DOM Node`