Interactivity

  • HTML5와 CSS3는 interactive 하지 않다
  • 새로운 element와 pseudo-class 정도 밖에 안된다.
    (일시적인 변화 정도)

JavaScript는 뭘 할 수 있을까

  • HTML element를 read / write
  • event에 대한 반응 (mouse events, keyboard events)
  • 데이터 확인
  • 방문자의 브라우저 탐지
  • 쿠키 생성

JavaScript Output

  • JavaScript 는 빌트인 print function을 가지고 있지 않다.
  • 데이터는 디스플레이 된다.
    • window.alert() – alert box
    • window.prompt() – prompt
    • document.write() – HTML output
    • innerHTML() – HTML element
    • console.log() – browser console

alert()

alert는 정보를 보여주는 pop-up window

aelrt("My Message Here");

prompt()

alert와 유사하나 input이 있다.

prompt("Enter your name: ");

document.write()

만약에 영구적인 어떤 것을 원한다면?
페이지에 직접 document.write() 작성

쉽게 납용될 수 있어서 추천하진 않는다.

document.write("Time to learn JavaScript");

innerHTML

DOM의 content를 바꾸기 위해 변경할 content와 결합하여 innerHTML을 사용

element.innerHTML = "Time to learn JavaScript";

console.log()

브라우저 콘솔에 데이터를 쓴다.
디버깅에 유용하다.

console.log("Leave");

Debugging

  • Safari: Preferences -> Advanced Check the Show development menu
  • chrome: Developer -> JavaScript Console
  • Firefox: Tools -> Console
  • Edge: F12

Review

  • output에 대해 심플하게 살펴봤다.
  • 배울수록 자주 쓰인다.