-
[기초] - 자바스크립트 적용JavaScript/기본 1 2022. 1. 8. 16:59
- 자바스크립트 적용 방법
- 내부 자바스크립트 코드로 적용
- 외부 자바스크립트 파일로 적용
- 내부 자바스크립트 코드
- <script>태그를 사용해 HTML문서 안에 삽입
- <head>, <body>태그에 위치 가능
<!-- script - head에 위치 --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript Apply</title> <!-- head tag에 올 경우 --> <script> function printDate() { document.getElementById("date").innerHTML = Date(); } </script> <body> <h1>head 태그 내의 자바스크립트</h1> <p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p> <button onclick="printDate()">현재 날짜와 시간 표시하기!</button> <p id="date"></p> <!-- body tag에 올 경우 --> <script> function printDate() { document.getElementById("date").innerHTML = Date(); } </script> </body> </head>
- 외부 자바스크립트 파일
- 외부에 작성된 파일은 .js확장자 사용하여 저장
<!-- example.js ( 외부 js파일) --> function printDate() { document.getElementById("date").innerHTML = Date(); } <!-- 예제 --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript Apply</title> <script src="/example.js"></script> </head> <body> <h1>외부 자바스크립트 파일</h1> <p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p> <button onclick="printDate()">현재 날짜와 시간 표시하기!</button> <p id="date"></p> </body> </head>
- 외부에 작성된 파일은 .js확장자 사용하여 저장
'JavaScript > 기본 1' 카테고리의 다른 글
[타입] - 변수 (0) 2022.01.08 [타입] - 타입 변환 (0) 2022.01.08 [타입] - 기본 타입 (0) 2022.01.08 [기초] - 자바스크립트 출력 (0) 2022.01.08 [기초] - 자바스크립트 (0) 2022.01.08 - 자바스크립트 적용 방법