728x90

1. Input(학습)

바닐라 자바스크립트 투두앱으로 DOM 조작 학습(강의링크)
css의 7가지 단위(링크)

2. Output(복습)

이벤트 핸들러 함수
웹게임 - 계산기

3. Notes(정리)

1. DOM 조작하기

1.1 이벤트 핸들러 함수 사용

이벤트 리스너의 콜백함수로 익명함수 또는 외부함수를 가져와서 사용할 수 있다. 다만 외부함수 사용시 () 사용할 경우 이벤트 발생과 상관없이 함수가 실행되기 때문에 () 생략하고 함수명만 넣는다.

const $button = document.querySelector('button');

// 익명함수 사용시
$button.addEventListener('click', () => { 버튼 클릭시 동작할 내용 });

// 외부함수 사용시
$button.addEventListener('click', onClickButton);

form 내 button 클릭시 페이지 초기화 방지하기

form 내의 button 클릭시 submit 기능이 기본값으로 작동하여 페이지가 초기화되므로 preventDefault 메소드를 사용하여 초기화 방지하기.

const $button = document.querySelector('.submit');
$button.addEventListener('click', (e) => {
  e.preventDefault();
  console.log('버튼 클릭 이벤트 감지');
});
// e는 현재 발생한 이벤트를 전달받는 매개변수이다.
// e: PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

자바스크립트로 요소 추가하기

.createElement() - 태그 생성
.createTextNode() - 텍스트 추가
.appendChild() 또는 .append() - 자식 요소 추가

const $button = document.querySelector('.submit');
const todos = document.querySelector('#todo-list');
const todoInput = document.querySelector('#todo-input');
let task;
const onClickButton = (e) => {
  e.preventDefault();
  const li = document.createElement('li'); // li태그를 생성하는 li변수 선언
  li.appendChild(document.createTextNode(todoInput.value)); // li 요소 안에 텍스트 추가(node객체로)
  li.classList.add('item'); // 생성한 li태그에 item 클래스를 부여하여 item 클래스에 부여한 css 스타일링 적용
  todos.appendChild(li); // 자식요소 추가
  todoInput.value = '';
  todoInput.focus();
};

$button.addEventListener('click', onClickButton);

이벤트 핸들러 함수로 고차함수를 사용하여 중복제거

const onClickNumber = (number) => {
        return () => {
          if (operator) {
            numTwo += number;
          } else {
            numOne += number;
          }
          $result.value += number;
        };
      };

document.querySelector('#num-0').addEventListener('click', onClickNumber('0'));

return값 미지정시 고차함수를 콜백함수로 호출해도 undefined가 반환되므로 return값으로 이벤트 발생시 실행할 함수를 넣는다.

4. Reminder

css의 rem단위는 root, 즉 에 지정된 폰트사이즈를 기준으로 함.
em은 현재 태그기준. 상속하면 중첩됨.
querySelector로는 무조건 하나의 태그만 선택되므로 동일한 클래스의 여러 요소를 선택하려면 querySelectorAll로 선택해야함.(참고: 여러 하위요소를 가진 하나의 요소는 그냥 querySelector로 선택가능)
nodelist에도 배열처럼 forEach로 반복문 돌릴 수 있음.
getElementsby~~로 선택시 : HTML Collection
querySelectorAll로 선택시: Nodelist
background와 background-color 둘 다 배경색을 지정해 줄 수 있으나 단축속성인 background는 다양한 백그라운드 옵션을 띄어쓰기로 구분해서 부여 가능.

background: #fff url("./image/button.jpg") no-repeat;

고차함수: 반환값이 함수이거나 매개변수로 콜백함수를 받는 함수
함수 중복 제거하는법: 달라지는 부분만 매개변수로 만든다.