[TCP School/자바스크립트] 자바스크립트 적용
2023. 4. 17. 13:11
자바스크립트를 적용하는 방법
HTML 문서에 자바스크립트 코드를 적용하는 방법에는 다음과 같은 방법이 있다.
1. 내부 자바스크립트 코드로 적용
2. 외부 자바스크립트 파일로 적용
내부 자바스크립트 코드
자바스크립트 코드는 <script>태그를 사용하여 HTML 문서 안에 삽입할 수 있다.
내부에 삽입된 자바스크립트 코드는 <head>태그나 <body>태그, 또는 양쪽 모두에 위치할 수 있다.
아래 예제는 <head>태그에 자바스크립트 코드를 삽입한 예제이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>inner javascript</title>
<script>
function printDate() {
document.getElementById('date').innerHTML = Date();
}
</script>
</head>
<body>
<h1>head 태그 내의 자바스크립트</h1>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button type="button" onclick="printDate()">현재 날짜와 시간 표시하기!</button>
<p id="date"></p>
</body>
</html>
외부 스크립트 파일
자바스크립트 코드는 HTML 문서의 내부뿐만 아니라 외부 파일로 생성하여 삽입할 수도 있다.
외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장한다.
해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용해 외부 자바스크립트 파일을 포함하면 된다.
외부 자바스크립트 파일은 웹 브라우저가 미리 읽어올 수 있어 웹 페이지의 로딩 속도가 빨라진다는 장점이 있다.
// external_javascript.js
function printDate() {
document.getElementById('date').innerHTML = Date();
}<!--external_javascript.html-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>inner javascript</title>
<script src="external_javascript.js"></script>
</head>
<body>
<h1>head 태그 내의 자바스크립트</h1>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button type="button" onclick="printDate()">현재 날짜와 시간 표시하기!</button>
<p id="date"></p>
</body>
</html>
TCP School의 강의 내용을 정리한 포스트입니다.
http://www.tcpschool.com/javascript/intro
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'공부 > JavaScript' 카테고리의 다른 글
| [TCP School/자바스크립트] 타입 - 타입 변환 (0) | 2023.04.17 |
|---|---|
| [TCP School/자바스크립트] 타입 - 기본 타입 (0) | 2023.04.17 |
| [TCP School/자바스크립트] 자바스크립트 출력 (0) | 2023.04.17 |
| [TCP School/자바스크립트] 자바스크립트 문법 (0) | 2023.04.17 |
| 생성자를 통한 상속 (0) | 2023.02.06 |
