2022. 12. 27. 16:23ㆍJavascript/TCP school
자바스크립트를 적용하는 방법
1. 내부 자바스크립트 코드로 적용
2. 외부 자바스크립트 파일로 적용
내부 자바스크립트 코드
자바스크립트 코드는 <script>태그를 사용하여 HTML 문서 안에 삽입
<script>
document.getElementById("text").innerHTML = "여러분을 환영합니다!";
</script>이렇게 삽입된 자바스크립트 코드는 HTML 문서의 <head>태그나 <body>태그, 또는 양쪽 모두에 위치할 수 있음
<head>태그에 자바스크립트 코드를 삽입한 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
</head>
<body>
<h1>head 태그 내의 자바스크립트</h1>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button onclick="printDate()">현재 날짜와 시간 표시하기!</button>
<p id="date"></p>
</body>
</html>head 태그 내의 자바스크립트
자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!
<body>태그에 자바스크립트 코드를 삽입한 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
</head>
<body>
<h1>body 태그 내의 자바스크립트</h1>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button onclick="printDate()">현재 날짜와 시간 표시하기!</button>
<p id="date"></p>
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
</body>
</html>body 태그 내의 자바스크립트
자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!
동작상의 차이는 없다!!!!!
외부 자바스크립트 파일
자바스크립트 코드는 HTML 문서의 내부뿐만 아니라 외부 파일로 생성하여 삽입 가능
외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장
해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용해 외부 자바스크립트 파일을 포함하면 됨
example.js
function printDate() {
document.getElementById("date").innerHTML = Date();
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script src="/examples/media/example.js"></script>
</head>
<body>
<h1>외부 자바스크립트 파일</h1>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button onclick="printDate()">현재 날짜와 시간 표시하기!</button>
<p id="date"></p>
</body>
</html>외부 자바스크립트 파일을 사용하면 웹의 내용을 담당하는 HTML 코드로부터 웹의 동작을 구현하는 자바스크립트 코드를 분리할 수 있음
이렇게 하면 HTML 코드와 자바스크립트 코드를 각각 읽기도 편해지고, 유지 보수도 쉬워짐
참고
http://www.tcpschool.com/javascript/js_intro_apply
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'Javascript > TCP school' 카테고리의 다른 글
| 타입 변환 (0) | 2022.12.28 |
|---|---|
| 기본 타입 (0) | 2022.12.27 |
| 자바스크립트 출력 (0) | 2022.12.27 |
| 자바스크립트 문법 (1) | 2022.12.26 |
| 자바스크립트 소개 (0) | 2022.12.26 |