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에 대해 심플하게 살펴봤다.
- 배울수록 자주 쓰인다.
Leave A Comment