실습문제 6-1
WEB/TRAINNING 2017. 11. 13. 10:01 |1. HTML 페이지와 출력 결과를 보고 물음에서 요구하는 대로 페이지를 수정하라.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <title>자바스크립트 코드 위치</title> </head> <body> <h3>마우스를 올려 보세요</h3> <hr> <div onmouseover="this.style.background='yellow'" onmouseout="this.style.background='white'"> 여기에 마우스를 올리면 배경색이 노란색으로 변합니다. </div> </body> </html> | cs |
(1) HTML 페이지를 수정하여 자바스크립트 코드를 <script> 태그에 삽입하라.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <title>자바스크립트 코드 위치</title> <script> function over(obj) // obj 대신 this를 쓰면 안됨. { obj.style.background="yellow"; // obj 대신 this를 쓰면 안됨. } function out(obj) { obj.style.background="white"; } </script> </head> <body> <h3>마우스를 올려 보세요</h3> <hr> <div onmouseover="over(this)" onmouseout="out(this)"> 여기에 마우스를 올리면 배경색이 노란색으로 변합니다. </div> </body> </html> | cs |
(2) 자바스크립트 코드를 6-1.js 파일에 저장하고 <script> 태그로 6-1.js 파일을 불러오도록 HTML 페이지를 수정하라.
.HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <title>자바스크립트 코드 위치</title> <script src=test.js> </script> </head> <body> <h3>마우스를 올려 보세요</h3> <hr> <div onmouseover="over(this)" onmouseout="out(this)"> 여기에 마우스를 올리면 배경색이 노란색으로 변합니다. </div> </body> </html> | cs |
test.js
1 2 3 4 5 6 7 8 | function over(obj) // obj 대신 this를 쓰면 안됨. { obj.style.background="yellow"; // obj 대신 this를 쓰면 안됨. } function out(obj) { obj.style.background="white"; } | cs |