[JavaScript] JavaScript 출력하기
- 웹 프로그래밍/JavaScript
- 2020. 12. 12. 00:00
안녕하세요.
오늘부터는 지난번 HTML, CSS 공부에 이어서 JavaScript라는 언어도 함께 공부해서 포스팅 하려고 합니다.
웹을 공부하기 위해서는 기본적으로 HTML, CSS, JavaScript 언어의 개념은 익히고 다음 단계로 넘어가는게 수월하다고 해서 지금 매우 열심히 공부를 하고 있는데요.
오늘부터는 JavaScript도 함께 공부해서 그날 공부했던 내용들을 정리해서 블로그에 올리려고 합니다.
오늘은 그 첫 번째 시간으로, JavaScript에서 출력하는 방법에 대해서 알려 드리려고 합니다.
출력하는 방법은 여러가지 방법이 있으니까 예제를 통해서 보여 드리도록 하겠습니다.
예제 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 연습 - 범범조조</title>
<style>
p{
color: aqua;
background-color: red;
}
</style>
<body>
<h1>alert() 메서드를 이용하여 출력하기</h1>
<button onclick="alertDialogBox()">alert 대화 상자</button>
<script>
function alertDialogBox(){
alert("확인을 누를때 까지, 다른 작업을 할 수 없습니다.")
}
</script>
<h1>HTML DOM 요소를 이용한 innerHMTML 프로퍼티 방법으로 출력</h1>
<p id ="text">이 문장을 바꿀 것입니다.</p>
<script>
var str = documnet.getElementByID("text");
str.innerHTML = "이 문장으로 바뀌었습니다.";
</script>
<h1>Document write() 메서드로 출력하기</h1>
<button onclick="document.write(5 * 27)">버튼 눌러봐요.</button>
<br/>
<h1>console.log() 메서드를 이용한 출력</h1>
<p>F12 를 눌러서 콘솔 화면에서 결과 확인 가능합니다.</p>
<script>
console.log('곱하기 :' + 4 * 5);
</script>
</body>
</html>
|
cs |
실행 결과
위와 같이 다양한 방법으로 JavaScript에서 출력하는 방법에 대해서 연습해 보았습니다.
감사합니다.^^
728x90
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JavaScript] JavaScript 날짜를 문자, 숫자로 변환하기 (0) | 2020.12.17 |
|---|---|
| [JavaScript] JavaScript 산술 연사자 (0) | 2020.12.16 |
| [JavaScript] JavaScript 타입 변환 (0) | 2020.12.15 |
| [JavaScript] JavaScript 기본 타입 종류 (0) | 2020.12.14 |
| [JavaScript] JavaScript 를 HTML에 적용하기 (0) | 2020.12.13 |
