1. 내부 자바스크립트 사용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 자바스크립트 사용하기</title>
<style>
body{text-align:center;}
#heading {color:blue;}
#text {
color:gray;
font-size:15px;
}
</style>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요.</p>
<script>
var heading=document.querySelector('#heading');
heading.onclick=function() {
heading.style.color="red";
}
</script>
</body>
</html>
2.외부스크립트 사용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 자바스크립트 사용하기</title>
<style>
body{text-align:center;}
#heading {color:blue;}
#text {
color:gray;
font-size:15px;
}
</style>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요.</p>
<script src="js/change-color.js"></script>
</body>
</html>
var heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "red";
}
'JavaScript' 카테고리의 다른 글
| 14장 for 문/ while 문 (0) | 2023.04.06 |
|---|---|
| 14장 실습 2 (0) | 2023.04.05 |
| 14장 예제 - if문/if-else문/ 중첩된 if-else문 /Switch문 (0) | 2023.04.05 |
| 14장 실습 (0) | 2023.04.05 |
| 13장 예제- 간단한 입출력 방법 (0) | 2023.04.04 |
