Programming Language/JavaScript

[JavaScript] 자바스크립트 데이터 출력하기

오늘은 자바스크립트를 이용하여 웹 브라우저 화면에 변수나 데이터를 출력하는 4가지 방법에 대해 알아보자.

1. document.write() 함수

document.write() 함수는 변수나 데이터를 브라우저 화면에 출력하는 가장 간단한 방법이다. 해당 함수는 실제 프로그램에서는 사실 잘 사용하지는 않지만 사용 방법이 간단하기 때문에 자바스크립트를 처음 공부할 때 많이 활용하는 편이다.

예제 코드를 작성하고 document.write() 함수가 어떻게 사용되는지 한 번 살펴보자.

let x = 29;
let y = 1;
document.write(x + y);

변수 x에 29, y에 1을 초기화하고 document.write() 함수를 이용하여 x + y값을 화면에 출력한다.

실행결과

2. window.alert() 함수

변수나 데이터를 출력하는 두 번째 방법은 window.alert() 함수를 이용하는 것인데 해당 함수는 웹 브라우저의 경고 창에 데이터를 출력하는 데 사용된다.

let x = 29;
let y = 1;
window.alert(x + y);

window.alert() 함수 같은 경우는 window를 생략하고 alert(데이터)와 같은 형식으로도 사용할 수 있다.

3. console.log 함수

console.log() 함수는 일반적으로 프로그램의 오류를 찾는 디버깅(Debugging) 용도로 변수나 데이터를 콘솔 화면에 출력하는 데 사용한다.

let x = 29;
let y = 1;
console.log(x + y);

브라우저 화면에서 F12 → 콘솔을 눌러보면 위의 결과와 같이 30이라는 데이터가 콘솔화면에 출력된 걸 확인할 수 있다.

4. innerHTML을 이용하여 화면에 데이터 출력

데이터를 출력하는 4번째 방법은 innerHTML을 이용하는 것이다. innerHTML은 데이터를 HTML 요소에 데이터를 삽입하는 데 사용된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print</title>
</head>
<body>
    
    <h1>Hungry Developer</h1>
    <p id = 'hd'></p>

    <script>
        window.onload = function(){
            let x = 29;
            let y = 1;
            document.getElementById("hd").innerHTML = x + y;
        }
    </script>
</body>
</html>

4.1 window.onload = function() {}

window.onload는 JavaScript에서 사용되는 이벤트 핸들러 중 하나로, 웹 페이지의 모든 리소스(HTML, CSS, 이미지 등)가 완전히 로드되고 준비되었을 때 실행되는 함수를 정의한다. 해당 이벤트는 웹 페이지가 초기화되고 사용자와 상호작용할 준비가 된 시점을 나타내며 주로 초기화 코드나 작업을 실행하기 위해 사용된다.

4.2 document.getElementById()

document.getElementById 함수는 JavaScript에서 사용되는 DOM(Document Object Model) 조작 함수중 하나로, 웹 페이지에서 특정 ID를 가진 HTML 요소를 찾는 데 사용된다. 이 함수는 해당 ID를 가진 요소를 반환하며 이를 통해 요소의 속성이나 내용을 변경하거나 조작할 수 있다.

위의 결과에서 확인할 수 있듯이 innerHTML은 해당 HTML 요소에 데이터를 삽입하여 출력하는 데 사용된다.

728x90

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 onclick, addEventListener 함수 사용법 (0)	2023.09.25
[JavaScript] 자바스크립트 조건문,반복문, 논리 연산자 (0)	2023.09.19
[JavaScript] 자바스크립트 데이터 타입 (0)	2023.09.16
[JavaScript] 자바스크립트 변수 (0)	2023.09.06
[JavaScript] 자바스크립트의 역사와 역할 (0)	2023.09.05

Contents

새소식

인기 검색어