<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>외부 파일에 있는 자바스크립트 작성</title>
<script src="lib.js">
</script>
</head>
<body>
<h3>마우스 올려 보세요</h3>
<hr>
<img src="banana.png" alt="이미지"
onmouseover="over(this)"
onmouseout="out(this)">
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>이벤트 리스터 속성에 자바스크립트 코드</title>
</head>
<body>
<h3>마우스 올려 보세요</h3>
<hr>
<img src="apple.png" alt="이미지"
onmouseover="this.src='banana.png'"
onmouseout="this.src='apple.png'">
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>script 태그에 자바스크립트 작성</title>
<script>
function over(obj) {
obj.src="banana.png";
}
function out(obj) {
obj.src="apple.png";
}
</script>
</head>
<body>
<h3>마우스 올려 보세요</h3>
<hr>
<img src="apple.png" alt="이미지"
onmouseover="over(this)"
onmouseout="out(this)">
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>URL에 자바스크립트 작성</title>
</head>
<body>
<h3>링크의 href에 자바스크립트 작성</h3>
<hr>
<a href="Javascript:alert('클릭하셨어요?')">클릭해보세요</a>
</body>
</html>lib.js
function over(obj) {
obj.src="banana.png";
}
function out(obj) {
obj.src="apple.png";
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>document.write() 사용</title>
</head>
<body>
<h3>document.write()로 HTML 콘텐츠 출력</h3>
<hr>
<script>
document.write("<h3>Welcome!</h3>");
document.write("2+5는 <br>");
document.write("<mark>7 입니다.</mark>");
</script>
</body>
</html>'----------고1---------- > 화면구현' 카테고리의 다른 글
| [고1 화면구현] 11 - (2) (0) | 2023.11.21 |
|---|---|
| [고1 화면구현] 10 - (4) (0) | 2023.10.26 |
| [고1 화면구현] 10 - (3) (0) | 2023.10.19 |
| [고1 화면구현] 10 - (2) (1) | 2023.10.10 |
| [고1 화면구현] 10 - (1) (0) | 2023.10.05 |