자바스크립트는 다양한 방법으로 데이터를 표시할 수 있다.
innerHTML()을 이용한 HTML요소에 작성하기
document.write를 이용하여 HTML 출력에 작성하기
alert()를 이용하여 경고창에 표시하기
console.log()를 이용한 브라우저 콘솔에 표시하기
innerHTML
document.getElementById(id)를 통해 요소에 접근할 수 있음
id속성 값은 HTML요소에서 정의할 수 있음.
<!DOCTYPE html>
<html>
<head>
<title>innerHTML 테스트</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello, JAVASCRIPT";
</script>
</body>
</html>
document.write()
HTML 자체에 출력이 가능함
<!DOCTYPE html>
<html>
<head>
<title>document.write() 테스트</title>
</head>
<body>
<script>
document.write("Hello, JAVASCRIPT");
</script>
</body>
</html>
alert()
경고창을 이용하여 출력이 가능함
<!DOCTYPE html>
<html>
<head>
<title>alert() 테스트</title>
</head>
<body>
<script>
alert("Hello, JAVASCRIPT")
</script>
</body>
</html>
console.log()
console.log()는 일반적인 화면에서 확인할 수 없다. 브라우저 개발자도구 콘솔탭을 통해 확인이 가능
<!DOCTYPE html>
<html>
<head>
<title>console.log() 테스트</title>
</head>
<body>
<script>
console.log("Hello, JAVASCRIPT")
</script>
</body>
</html>
아래 그림은 크롬 개발자도구 화면입니다.
'웹 기초 > JAVASCRIPT' 카테고리의 다른 글
| 기본 문법 - 숫자 (0) | 2019.04.19 |
|---|---|
| 기본 문법 - 문자열 (0) | 2019.04.18 |
| 기본 문법 - 표현식, 식별자, 키워드 (0) | 2019.04.18 |
| 3. 자바스크립트 오류 확인 방법 - ES 개발이야기 (0) | 2019.01.28 |
| 2. 자바스크립트 alert()를 이용하여 경고창 띄우기 - ES 개발이야기 (0) | 2019.01.28 |
