이롭게 현명하게
[JavaScript] 자바스크립트 시작하기 / 개발환경 본문
목차
내부 자바스크립트 코드
외부 자바스크립트 코드
자바스크립트를 적용하기 위해서는 에디터가 필요하다.
[VSCODE] VSCODE 설치 / Visual Studio Code 설치하기
목차 VSCODE 설치 VSCODE 환경설정 (한글설정) 번외 [ VSCODE 설치 ] 1. 홈페이지 접속 2. 본인의 운영체제에 맞는 설치 파일 클릭 저는 window운영체제로 설치하였습니다. 2. 설치 파일 클릭 후 동의합니다
devyihyun.tistory.com
[내부 자바스크립트 코드로 적용]
자바스크립트 코드는 <script> ~ </script> 태그를 사용하여 HTML 문서 안에 삽입할 수 있다.
HTML 문서의 <head> ,<body> 에 위치해 있다.
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script>
function printDate2() {
document.getElementById("date2").innerHTML = Date();
}
</script>
</head>
<body>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button onclick="printDate1()">1. 현재 날짜와 시간 표시하기!</button>
<p id="date1"></p>
<script>
function printDate1() {
document.getElementById("date1").innerHTML = Date();
}
</script>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button onclick="printDate2()">2. 현재 날짜와 시간 표시하기!</button>
<p id="date2"></p>
</body>
</html>
자바스크립트 코드를 <head> 태그에 삽입하거나 <body> 태그에 삽입하나 동작상의 차이는 없다.
[외부 자바스크립트 코드로 적용]
자바스크립트 코드는 HTML 문서의 내부 뿐만 아니라 외부 파일로 생성하여 삽입할 수도 있다.
외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장한다.
자바스크립트 파일을 적용하고 싶다면 <script> 태그를 사용해 외부 자바스크립트 파일경로를 지정해 준다.
// example.js
function printDate() {
document.getElementById("date").innerHTML = Date();
}
<!-- index.html -->
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script src="/examples/media/example.js"></script>
</head>
<body>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button onclick="printDate()">1. 현재 날짜와 시간 표시하기!</button>
<p id="date"></p>
</body>
</html>
https://devyihyun.tistory.com/156
[JavaScript] 자바스크립트 출력하기
목차 window.alert() 메서드 HTML DOM 요소 사용 document.write() 메서드 console.log() 메서드 [window.alert() 메서드] window.alert() 메서드 : 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달한다.
devyihyun.tistory.com
잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊
댓글과 좋아요는 큰 힘이 됩니다!
'웹 개발 > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 데이터 타입 (0) | 2023.11.29 |
|---|---|
| [JavaScript] 자바스크립트 출력하기 (1) | 2023.11.28 |
| [JavaScript] 자바스크립트 시작하기 (1) | 2023.11.24 |
| [JavaScript] 배열 내장 함수 (0) | 2023.11.21 |
| [JavaScript] 자바스크립트 Scope와 hoisting (0) | 2023.05.18 |
