JavaScript in Web
js의 꽃! 페이지 동작의 핵심!
web에서 js를 이용해 여러 기능들을 구현해보자.
inweb.html
html상에 js 코드를 입력해도 되지만... 길어진 코드가 보기 좋을 리 없다.
따라서 (CSS 연결처럼) head태그 안에 다음과 같이 적어줘 외부 js 파일과 연결시키자.
1. window 객체
제일 먼저 window 객체!
prompt는 입력 받을 수 있는 프롬프트를, alert는 경고창을 출력한다.
2. location 객체
setInterval 은 지정한 시간(여기서는 3초) 이후 함수를 작동시킨다.
↑이는 setTimeout 함수에 대한 설명!
setInterval은 지정한 시간 간격마다 반복해서 함수를 실행한다!
location은 html의 href와 유사한 기능! 뒤에 href, assign, replace 등이 붙을 수 있다.
3. 문서 객체 선택
document.getElementById(아이디) / document.querySelector(선택자)
각각 html상의 아이디와 선택자를 이용해 해당 객체를 선택할 수 있다!
이는 document, 즉 여기서는 inweb.html 내에서 Id가 header인 녀석을 선택한 것.
색도 바꾸고 테두리도 씌워줬다. 속성 지정하는 법을 잘 보자!
만약 선택하고자 하는 객체가 여러 개라면?
쨔잔. querySelectorAll의 경우 조건에 맞는 모든 객체를 가져오고자 하기 때문에...
for문을 이용해 전체 중 각각의 녀석들을 받아와야 한다!
즉 html의 코드는 이렇게 될 것이며,
해당 페이지는 이렇게 된다!
그런데 이상하다. html상에는 From Js가 아니라 header2라고 적어뒀는데??
아하! innerHTML이라는 녀석을 이용해 html상의 요소를 js에서 바꿀 수 있다!
해당 페이지는 이렇게 될 테다!
그럼 설마 이미지도?!
역시나 getElementById를 통해 html 속 image라는 Id를 받아오면 된다!
해당 이미지 소스와 크기 등도 지정이 가능!
그럼 해당 페이지는 이렇게 된다. 와우!