먼저 자바스크립트에서의 출력이란
자바스크립트는 여러 방법을 통해 그 결과물을 HTML페이지에 출력할수 있는데 그 방법은 다음과 같다.
- window.alert() 메소드
- HTML DOM요소를 이용한 innerHTML 프로퍼티
- document.write() 메소드
- console.log() 메소드
이렇게 자바스크립트의 메소드를 이용한 출력방법과 프로퍼티를 이용한 출력방법이 있다는 것을 알아 볼수 있다.
1. window.alert()메소드
자바스크립트에서 가장 간단하게 데이터를 출력할수 있는 방법은 window.alert()메소드를 이용하는 것이다. 이 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달한다.
🙋♂️window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략할 수 있다.
2. HTML DOM요소를 이용한 innerHTML프로퍼티
실제 자바스크립트 코드에서 출력을 위해 가장 많이 사용되는 방법이다.
먼저 document 객체의 getElementByID() 나 getElementsByTagName() 등의 메소드를 사용하여 HTML요소를 선택한다.
그리고 innerHTML 프로퍼티를 이용하면 선택된 HTML요소의 내용(content)이나 속성(attribute)값 등을 손쉽게 변경할 수 있다.
3. document.write()메소드
document.write()메소드는 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력한다. 그러므로 document.write()메소드는 대부분 테스트나 디버깅을 위해 사용된다.
하지만 웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하게 된다.
따라서 document.write()메소드를 테스트 이외의 용도로 사용할 때에는 주의해야한다.
4. console.log()메소드
console.log()메소드는 웹 브라우저의 콘솔을 통해 데이터를 출력해준다.
주요 웹 브라우저에서 F12를 누른 후, 메뉴에서 콘솔을 클릭하면 열리는 콘솔화면을 얘기하는데, 이러한 콘솔 화면을 통해 데이터의 출력은 좀 더 자세한 사항까지 출력되므로, 디버깅하는데 많은 도움을 준다.
JAVASCRIPT 적용
HTML문서에 자바스크립트 코드를 적용하는 방법은 다음과 같다.
- 내부 자바스크립트 코드로 적용
- 외부 자바스크립트 파일로 적용
이 두가지 방법에 대해 알아 보겠다.
1. 내부 자바스크립트 코드
자바스크립트 코드는 <script>라는 태그를 사용하여 HTML문서 안에 삽입할 수 있다.
예제 👉
<script>
document.getElementById("text").innerHTML = "여러분을 환영합니다!";
</script>
이렇게 삽인된 자바스크립트 코드는 HTML문서의 <head>태그나 <body>태그, 또는 양쪽 모두에 위치할수 있다.
예제 👉
<head>
<meta charse="UTF-8">
<title>JavaScript Apply</title>
<script>
funchtionpirntDate(){
document.getElementByld("date").innerHTML = Date();
}
</script>
<head>
<body>
<p>자바스크립트를 이용하면 현재 날짜와 정보에도 손쉽게 접근할 수 있다.</p>
<button onclick="printDate1()">현재 날짜와 시간 표시하기!</button>
<p id="date"></p>
<script>
fuction printDate1(){
document.getElementById("date).innerHTML = Dte();
}
</script>
</body>
2. 외부 자바스크립트 파일
자바스크립트 코드는 HTML 문서의 내부뿐만 아니라 외부 파일로 생성할여 삽입할 수도 있다.
외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장한다. 해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용해 외부 자바스크립트 파일을 포함하면 된다.
예제 👉
//example.js
function printDate(){
document.getElementById("date).innerHTML = Date();
}
<head>
<meta charse="UTF-8">
<title>JavaScript Apply</title>
<script src="/examples/media/example.js"></script>
</head>
이렇게 외부 자바스크립트 파일을 사용하면 웹의 내용을 담당하는 HTML 코드로부터 웹의 동작을 구현하는 자바스크립트 코드를 분리할 수 있다.
HTML코드와 자바스크립트 코드를 각각 읽기도 편해지고, 유지보수도 쉬워진다.
또한, 외부 자바스크립트 파일은 웹 브라우저가 미리 읽어 올 수 있어 웹 페이지의 로딩 속도 또한 빨라진다.
어디서 퍼온것 같지만 출처는 내 노션이다..
'Javascript' 카테고리의 다른 글
| JAVASCRIPT 배열 (0) | 2023.04.21 |
|---|---|
| JAVASCRIPT 함수 (0) | 2023.04.21 |
| JAVASCRIPT의 변수 (0) | 2023.04.19 |
| JAVASCRIPT문법 (0) | 2023.04.19 |
| Javascript란?! (0) | 2023.04.17 |
댓글