성준이의 공부블로그

[Javascript] Do it! 자바스크립트 입문 - <script> 태그 본문

JavaScript

[Javascript] Do it! 자바스크립트 입문 - <script> 태그

Seong-Jun 2024. 1. 4. 10:49
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
'JavaScript' Related Articles more