JavaScript in Web

js의 꽃! 페이지 동작의 핵심!

web에서 js를 이용해 여러 기능들을 구현해보자.

---

inweb.html

html상에 js 코드를 입력해도 되지만... 길어진 코드가 보기 좋을 리 없다.

따라서 (CSS 연결처럼) head태그 안에 다음과 같이 적어줘 외부 js 파일과 연결시키자.

 

1. window 객체

inweb.js

제일 먼저 window 객체!

prompt는 입력 받을 수 있는 프롬프트를, alert는 경고창을 출력한다.

해당 화면!

2. location 객체

inweb.js

setInterval 은 지정한 시간(여기서는 3초) 이후 함수를 작동시킨다.

↑이는 setTimeout 함수에 대한 설명!

setInterval은 지정한 시간 간격마다 반복해서 함수를 실행한다!

location은 html의 href와 유사한 기능! 뒤에 href, assign, replace 등이 붙을 수 있다.

 

3. 문서 객체 선택

document.getElementById(아이디) / document.querySelector(선택자)

각각 html상의 아이디와 선택자를 이용해 해당 객체를 선택할 수 있다!

inweb.js

이는 document, 즉 여기서는 inweb.html 내에서 Id가 header인 녀석을 선택한 것.

색도 바꾸고 테두리도 씌워줬다. 속성 지정하는 법을 잘 보자!

 

만약 선택하고자 하는 객체가 여러 개라면?

쨔잔. querySelectorAll의 경우 조건에 맞는 모든 객체를 가져오고자 하기 때문에...

for문을 이용해 전체 중 각각의 녀석들을 받아와야 한다!

inweb.html

즉 html의 코드는 이렇게 될 것이며,

해당 페이지는 이렇게 된다!

그런데 이상하다. html상에는 From Js가 아니라 header2라고 적어뒀는데??

inweb.js

아하! innerHTML이라는 녀석을 이용해 html상의 요소를 js에서 바꿀 수 있다!

해당 페이지는 이렇게 될 테다!

 

그럼 설마 이미지도?!

inweb.js

inweb.html

역시나 getElementById를 통해 html 속 image라는 Id를 받아오면 된다!

해당 이미지 소스와 크기 등도 지정이 가능!

그럼 해당 페이지는 이렇게 된다. 와우!