인터랙티브 자바스크립트

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

• 웹 서비스와 JavaScriptHTML과 CSS만으로는 인터렉티브한 웹을 만들 수 없고 따라서 JavaScript를 사용한다.
• 우리는 웹을 통해 인터넷과 상호작용하며 여러 정보를 주고 받을 수 있다.
• id로 태그 선택하기

  document.getElementById(’id’);
  

  자바스크립트에서 위 코드로 접근할 수 있다.없는 id에 접근하면 null을 반환한다.
• id는 고유값이고 하나의 요소에 접근할 때 사용한다.
• HTML에서 id속성을 부여하고,
• class로 태그 선택하기

  document.getElementByClassName(’color-btn’);
  

  위 코드로 접근할 수 있다.배열은 아니지만 length나 대괄호 표기법([])으로 요소에 접근이 가능하다.없는 class에 접근하면 빈 HTMLCollection을 출력한다.
• 인덱스 순서는 위에서 아래로 증가한다.
• 여러개의 요소에 접근 가능하다.

<button class="color-btn red" data-color="#FF0000"></button> 
<button class="color-btn orange" data-color="#FFA500"></button> 
<button class="color-btn yellow" data-color="#FFFF00"></button> 
<button class="color-btn green" data-color="#008000"></button> 
<button class="color-btn blue" data-color="#0000FF"></button> 
<button class="color-btn indigo" data-color="#4B0082"></button> 
<button class="color-btn purple" data-color="#800080"></button> 
<button class="color-btn black" data-color="#000000"></button>

• 유사배열(Array-Like Object)이란..?특징:
  1. 숫자 형태의 indexing이 가능하다.
  2. length 프로퍼티가 있다.
  3. 배열의 기본 메소드를 사용할 수 없다.
  4. Array.isArray(유사배열)은 false다.
• 배열과 유사한 객체를 말한다.
• 태그 이름으로 태그 선택하기위 코드로 접근할 수 있다.
• 태그 이름으로 요소를 찾는 경우에 여러 개의 요소가 선택될 수 있기 때문에 메소드 이름에 Element(s)가 있고, 실행결과 역시 HTMLCollection을 리턴한다
• const btns = document.getElementsByTagName('button');
• css 선택자로 태그 선택하기위 코드로도 태그를 선택할 수 있다. 이는 상위 태그 하나를 지정한다.NodeList라는 유사 배열로 모든 태그를 출력한다.위와 같이 선택하면 하나의 태그를 반환한다.
• document.querySelectorAll(.className)[0]
• document.querySelectorAll(.className)
• document.querySelector(.className)
• 이벤트와 버튼 클릭 위와 같이 변수에 태그를 할당하고 그 태그에 이벤트 핸들러를 등록하면 상호작용이 가능하다.위와 같이 태그의 onClick 속성에 바로 표시도 가능하다.
• // 이벤트 핸들링(Event Handling) btn.onclick = function() { // 이벤트 핸들러(Event Handler) console.log('Hello Codeit!'); };
• <button id="myBtn" onclick="console.log('Hello Codeit!')">클릭!</button>
• // 이벤트(Event)와 버튼 클릭 const btn = document.querySelector('#myBtn');

브라우저와 자바스크립트

• 브라우저도 객체다?window객체를 이용하면 여러 값을 얻을 수 있다.위 코드로는 현재 창의 크기를 얻을 수 있다.모든 객체는 window 객체 안에 속해있고 이를 명시하지 않아도 프로퍼티를 사용할 수 있다.
• console, document 등의 객체도 window에 속해 있는 객체이다.
• window.innerWidth window.innerHeight
• 자바스크립트는 웹을 다루기 위한 언어이고 모든 것이 객체이다.
• DOM(Document Object Model)각 객체는 노드라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분된다.
• DOM을 사용하면 HTML 객체를 자유롭게 사용할 수 있다.
• 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이다.
• console.dir?차이:
  1. 출력하는 자료형이 다르다.
  2. log는 값 자체, dir은 객체의 속성을 중점적으로 출력한다.
  3. log는 여러 개의 파라미터를 출력할 수 있지만 dir은 첫번째 파라미터만 출력한다.
  4. DOM 객체를 다룰 때 console.log는 HTML, dir은 객체 형태로 출력한다.
• 두 메소드 모두 파라미터로 전달받은 값을 콘솔에 출력하는 역할을 한다.
• DOM 트리
• HTML의 계층 구조는 DOM에서도 반영되는데 이러한 계층구조를 나무에 비유해서 DOM 트리라고 부른다. 각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현합니다.
• DOM 트리 여행하기프로퍼티 유형 결과

  element.children	자식 요소 노드	element의 자식 요소 모음(HTMLCollection)
  element.firstElementChild	자식 요소 노드	element의 첫 번째 자식 요소 하나
  element.lastElementChild	자식 요소 노드	element의 마지막 자식 요소 하나
  element.parentElement	부모 요소 노드	element의 부모 요소 하나
  element.previousElementSibling	형제 요소 노드	element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나
  element.nextElementSibling	형제 요소 노드	element의 다음(next) 혹은 우측(right)에 있는 요소 하나
  node.childNodes	자식 노드	node의 자식 노드 모음(NodeList)
  node.firstChild	자식 노드	node의 첫 번째 자식 노드 하나
  node.lastChild	자식 노드	node의 마지막 자식 노드 하나
  node.parentNode	부모 노드	node의 부모 요소 하나
  node.previousSibling	형제 노드	node의 이전(previous) 혹은 좌측(left)에 있는 노드 하나
  node.nextSibling	형제 노드	node의 다음(next) 혹은 우측(right)에 있는 노드 하나

• 요소 노드 프로퍼티프로퍼티 내용 참고사항

  element.innerHTML	요소 노드 내부의 HTML코드 문자열로 리턴	요소 안의 정보를 확인할 수도 있지만,내부의 HTML 자체를 수정할 때 좀 더 자주 활용
  element.outerHTML	요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴	outerHTML은 새로운 값을 할당하면요소 자체가 교체되어 버리기 때문에 주의
  element.textContent	요소 노드 내부의 내용들 중에서 HTML을 제외하고 텍스트만 리턴	textContent는 말그대로 텍스트만 다루기 때문에HTML태그를 쓰더라도 모두 텍스트로 처리됨

• 요소 노드 추가, 삭제, 꾸미기
  1. 요소 노드 만들기: document.createElement('태그이름')
  2. 요소 노드 꾸미기: element.textContent, element.innerHTML, ...
  3. 요소 노드 추가 혹은 이동하기: element.prepend, element.append, element.after, element.before
  4. 요소 노드 삭제하기: element.remove()
• HTML 속성 다루기
  1. 속성에 접근하기: element.getAttribute('속성')
  2. 속성 추가(수정)하기: element.setAttribute('속성', '값')
  3. 속성 제거하기: element.removeAttribute('속성')
• 스타일 다루기
  1. style 프로퍼티 활용하기: element.style.*styleName* = '*value*';
  2. class 변경을 통해 간접적으로 스타일 적용하기: element.className, element.classList
• classList의 유용한 메소드메소드 내용 참고사항

  classList.add	클래스 추가하기	여러 개의 값을 전달하면 여러 클래스 추가 가능
  classList.remove	클래스 삭제하기	여러 개의 값을 전달하면 여러 클래스 삭제 가능
  classList.toggle	클래스 없으면 추가, 있으면 삭제하기	하나의 값만 적용 가능하고,두 번째 파라미터로 추가 또는 삭제 기능을 강제할 수 있음

이벤트 살펴보기

• 이벤트 핸들러 등록하기를 통해서 이벤트 핸들러를 등록할 수 있다.
• addEventListener 메소드를 활용하면 다양한 이벤트 타입으로 원하는 만큼 이벤트 핸들러를 자유롭게 등록할 수 있어서 onclick 프로퍼티와는 다르게 이벤트 핸들러를 등록한 만큼 동작하게 된다.
• Element.addEventListener('type', 'handler')
• 이벤트 핸들러 삭제하기를 통해서 이벤트 핸들러를 삭제할 수 있다.
• Element.removeEventListner('type', 'handler')
• 이벤트 객체 (Event Object)이벤트 종류마다 가지고 있는 프로퍼티가 다르며, 이벤트에 대한 유용한 정보들을 프로퍼티로 가지고 있다.
• 이벤트가 발생하면 이벤트 핸들러의 첫 번째 파라미터에는 자동으로 이벤트 객체가 전달된다.
• 이벤트 버블링 (Event Bubbling)이벤트 버블링은 이벤트 객체의 stopPropagation 메소드로 막을 수 있다.
• 자식 요소에서 부모 요소로 이벤트가 전파되는데 이를 이벤트 버블링이라고 한다.
• 이벤트 위임 (Event Delegation)이는 부모요소에 이벤트가 발생해도 처리되기 때문에 if문으로 자식 요소에 한해 작동하게끔 처리 해줄 수 있다.
• 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리할 수도 있다.
• 브라우저의 기본 동작(ex: 마우스 오른쪽 버튼을 클릭하면 상황에 맞는 메뉴 창이 뜬다거나, input 태그에 커서를 두고 키보드 키를 누르면 해당 값이 입력된다거나..)
• 이는 preventDefault 메소드를 통해 막을 수 있다.
• 브라우저에는 각 태그별 혹은 상황별로 기본적으로 약속된 동작이 있다.

다양한 이벤트 알아보기

• 마우스 버튼 이벤트값 내용

  0	마우스 왼쪽 버튼
  1	마우스 휠
  2	마우스 오른쪽 버튼
  3	X1 (일반적으로 브라우저 뒤로 가기 버튼)
  4	X2 (일반적으로 브라우저 앞으로 가기 버튼)

  mouseenter, mouseleave, mouseover, mouseout, mousemove 등 이동 관련 이벤트에서는 위 값이 다 0.
• 마우스 이벤트 객체의 버튼 프로퍼티를 활용하면 어떤 버튼을 입력했는지 알 수 있다.
• 마우스 이벤트 타입이벤트 타입 설명

  mousedown	마우스 버튼을 누르는 순간
  mouseup	마우스 버튼을 눌렀다 떼는 순간
  click	왼쪽 버튼을 클릭한 순간
  dblclick	왼쪽 버튼을 빠르게 두 번 클릭한 순간
  contextmenu	오른쪽 버튼을 클릭한 순간
  mousemove	마우스를 움직이는 순간
  mouseover	마우스 포인터가 요소 위로 올라온 순간
  mouseout	마우스 포인터가 요소에서 벗어나는 순간
  mouseenter	마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음)
  mouseleave	마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음)

• 마우스 이동 이벤트프로퍼티 설명

  clientX, clientY	마우스 포인터의 브라우저 표시 영역에서의 위치
  pageX, pageY	마우스 커서의 문서 영역에서의 위치
  offsetX, offsetY	마우스 포인터의 이벤트 발생한 요소에서의 위치
  screenX, screenY	마우스 포인터의 모니터 화면 영역에서의 위치

  마우스 이벤트 객체에서 마우스 포인트의 위치와 관련된 프로퍼티이다.
• mouseenter, mouseleave, mouseover, mouseout 이벤트에는 relatedTarget이라는 프로퍼티가 존재하는데, target 프로퍼티가 이벤트가 발생한 요소를 담고 있다면, relatedTarget 프로퍼티는 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소를 담고 있다.

• 키보드 이벤트이벤트 타입 설명

  keydown	키보드의 버튼을 누르는 순간
  keypress	키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음)
  keyup	키보드의 버튼을 눌렀다 떼는 순간

  키보드 이벤트 객체에는 key와 code 프로퍼티가 있다.
• key는 사용자가 누른 키가 가지고 있는 값을 나타내고 code는 누른 키의 물리적인 위치를 나타낸다.
• input 태그 다루기이벤트 타입 설명

  focusin	요소에 포커스가 되는 순간
  focusout	요소에 포커스가 빠져나가는 순간
  focus	요소에 포커스가 되는 순간 (버블링이 일어나지 않음)
  blur	요소에 포커스가 빠져나가는 순간 (버블링이 일어나지 않음)
  change	입력된 값이 바뀌는 순간
  input	값이 입력되는 순간
  select	입력 양식의 하나가 선택되는 순간
  submit	폼을 전송하는 순간

• 스크롤 이벤트
• scrollY 프로퍼티를 활용하면 스크롤된 특정한 위치를 기준으로 이벤트 핸들러가 동작하게 하거나 혹은 스크롤 방향(위로 스크롤 중인지/아래로 스크롤 중인지)을 기준으로 이벤트 핸들러가 동작하게끔 활용할 수도 있다.