rustandbone Developer

이듬 강의_JavaScript 인터랙션 디자인(2)

04 Jul 2023

인터랙션 디자인(JavaScript)

switch 문. 그리고 날짜(Date) 객체

조건(삼항) 연산자

Condition Ternary Expression

  • 조건 ? 값1 : 값2
  • ‘식’이기에 변수에 담을 수 있음
  • let 변수 = 조건 ? 참인 값 : 거짓인 값
  • let 변수 = 조건 ? 참인 값 : 거짓인 값
  • 조건 ? 참인 값 : 조건2 ? 참 : 조건3 ? 참 : 거짓;
if (ampm) {
  ampm = !ampm ? "" : hour < 12 ? "AM " : "PM ";
  hour = hour >= 12 ? hour - 12 : 12 - hour > 3 ? "0" + hour : hour;
} else {
  ampm = "";
}

논리 곱(&&), 논리 합(||) 연산자 활용한 조건식 처리

function getYear(format) {
  return new Date().getFullYear() + (format || "");
}

DOM API - 이벤트 핸들링(Event Handling)

  • Event Model
  • Event Handler

  • DOM on-event-handler

  • 이벤트 속성: on{EventType} : click, mouseover, dragstart
  • 함수 : 이벤트 속성에 연결된 함수 : 이벤트 객체를 매개변수로 전달 받음

방법1.

<form class="form" oninput="sumNumbers()">
  <input type="number" value="10" aria-label="첫번째 수" />
  <input type="number" value="10" aria-label="두번째 수" />
  <output aria-label="결과 값"></output>
</form>

방법2.

el(".form").oninput = function () {
  let input1_val = Number(el('input[aria-label="첫번째 수"]').value);
  let input1_val = Number(el('input[aria-label="첫번째 수"]').value);
  let output = el('output[aria-label="결과 값"]');
  let result = input1_val + input2_val;
  output.value = result;
};

DOM API - 마우스 이벤트 핸들링

  • mousedown
  • mouseup
  • mousemove
  • click
  • dbclick
  • mouseover
  • mouseout
  • mouseenter
  • mouseleave
  • contextmenu

이벤트 객체의 기본 동작 차단 메서드 event.preventDefault();

function toggleMotion(e) {
  //이벤트 객체의 기본 동작 차단 메서드
  e.preventDefault();
  var target = e.target; //이미지 요소 가져옴

  //토글 코드 분기
  if (is_clicked) {
    target.src = "monks-to-mormal.gif";
  } else {
    target.src = "monks-to-click.gif";
  }
  //상태 변경
  is_clicked = !is_clicked;
}

DOM API - 키보드 이벤트 핸들링

  • 이벤트 속성
    • keydown
    • keypress
    • keyup
  • 발생 순서
    • keydown
      • 영문, 숫자, space, enter, 한글, tab, caps lock, shift, ctrl, alt, command, arrow, f1~12
    • => keypress
      • 영문, 숫자, space, enter
    • => keyup
      • tab, caps lock은 발생 안함

.keycode 사용해야함 브라우저 호환 위해서

window.onkeydown = function(){};

window.addEventListener('keydown', function(e) {
  console.log(e.type, e.keyCode, e.code, e.key);
  switch(e.keyCode) {
    case 38: //up
    case 32: //space
      jump();
      break;
    case 37: //arrow left
      moveLeft();
      break;
    case 39: //arrow right
      moveRight();
  }
})

boy.addEventListener('animationend', stand);

function stand() {
  boy.classList.remove('jump');
}

function jump() {
  boy.classList.add('jump');
}

function getDistanceX() {
  return window.parseInt(boy.style.transform.replace('translateX(', ''), 10) || 0;
}

funtion moveLeft() {
  var disX = getDistanceX() - 30;
  boy.style.transform = 'translateX(' + disX + 'px) rotateY(180deg)';
}

funtion moveRight() {
  var disX = getDistanceX() + 30;
  boy.style.transform = 'translateX(' + disX + 'px) rotateY(0deg)';
}

animationend event https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event

배열(Array)과 반복 문(Loop)

  • if문 : 조건이 참이면 1횟 ㅣㄹ행
  • while문 : 조건이 참이면 반복 실행
    • do-while
  • continue문 : 반복(순환) 중 조건이 충족할 경우, 조건 확인 영역으로 이동
  • break문 : 반복(순환) 중 조건이 충족할 경우, 실행 종료(반복문 종료)
  • label문 : 참조 가능한 식별자로 continue, break에 의해 식별 - 중첩문에 필요

반복문을 사용해 문서 객체 집합의 개별 요소 노드에 접근

  • for문 : 조건이 거짓으로 판별될 때까지 반복 - for([초기문]; [조건문]; [증감문]) {}
outFor: for (let i = 0; i < 10; i++) {
  inFor: for (let j = 0; j > 0; j -= 2) {
    console.log(j);
    break outFor;
  }
  console.log(i);
}
  1. 문서 객체에 접근하여 노드리스트를 변수에 참고
  2. for문 활용해 문서 객체 개별 접근
let colors = ["#000", "#fff"];

let menu_items = els(".ediya-menu__item");

for (let i = 0; i < menu_items.length; i++) {
  let item = menu_items[i];
  item.color = colors[i];
  item.addEventListener("click", openPanel);
}

function openPanel(e) {
  e.preventDefault();
  let figcaption = el("figcaption", this);
  figcaption.style.color = this.color;
}

for in 문 배열이 아닌 객체 순환할 때 사용

let beverage = {
  name: "라떼",
  width: "328px",
  height: "328px",
};

for (let property in beverage) {
  console.log(property); //key
  console.log(beverage[property]); //value
}

Related posts