728x90
반응형
SMALL
공부단 1일차-3입니다.
HTML 문서안에 <script> 태그
1번 <body> 태그안에 내부 <script> 포함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>제목</title>
<link rel="stylesheet" href="css/change-color.css">
</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 name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>글자색 바꾸기</title>
<link rel="stylesheet" href="css/change-color.css">
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<script src="js/change.js"></script>
</body>
</html>var heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = "red";
}
이런식으로 분리해서 만들면 큰 규모의 프로젝트를 할 때는 훨씬 효율적입니다.
728x90
반응형
LIST
'JavaScript' 카테고리의 다른 글
| [Javascript] Do it! 자바스크립트 입문 - 자료형 (2) | 2024.01.05 |
|---|---|
| [Javascript] Do it! 자바스크립트 입문 - 변수 (2) | 2024.01.05 |
| [Javascript] Do it! 자바스크립트 입문 - prompt()함수 (0) | 2024.01.04 |
| [Javascript] Do it! 자바스크립트 입문 - 프로젝트 생성 (0) | 2024.01.04 |
| [Javascript] Do it! 자바스크립트 입문(웹 프로그래밍) 공부단 (0) | 2024.01.04 |