반응형

자바스크립트 개발 환경은 Microsoft Visual Studio 2015 버전 HTML 기능 및 Chrome을 이용하고 있습니다.





이번에는 자바스크립트에서의 출력 메소드들을 알아보려 한다.


1. HTML element에 쓰기 위해서는 innerHTML을 이용한다.

2. HTML에 output으로 쓰기 위해서는 document.write()를 이용한다.

3. alert box를 쓰기 위해서는 window.alert()를 이용한다.

4. browser console에 쓰기 위해서는 console.log()를 이용한다.


4가지 방법에 대해 바로 적용해보자.




innerHTML 이용


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
        
        <p id = "test"></p>
 
        <script>
            document.getElementById("test").innerHTML = 11 * 12;
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus


클릭하시면 결과 화면을 확인 할 수 있습니다.




document.write() 이용


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
        
 
        <script>
            document.write(11 * 12);
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus


클릭하시면 결과 화면을 확인 할 수 있습니다.




이때 HTML 문서가 모두 로드 된 후에 documnet.write()를 사용하면 모든 HTML의 문서 내용이 사라지는 일이 생길 수 있다.



document.write() 이용 시 주의 사항


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
        <p>여기저기 글이 적혀있습니다.</p>
        
        <button type="button" onclick = "document.write('모든것이 사라졌습니다..')">gg </button>
 
        <p>여기저기 글이 적혀있습니다2.</p>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus

 

클릭하시면 결과 화면을 확인 할 수 있습니다.





alert() 이용


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
        
        <script>
            alert("hello world");
        </script>
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus


클릭하시면 결과 화면을 확인 할 수 있습니다.




console.log() 이용


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
    </head>
 
    <body>
        <h2> 크롬에서 F12키를 누르고 Console창을 열어 확인해보세요. </h2>
        
        <script>
            for (var i = 1; i <= 10; i++)
                console.log(i);
        </script>
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
cs



클릭하시면 결과 화면을 확인 할 수 있습니다.



















반응형
저작자표시 비영리 변경금지

'Basic > JavaScript' 카테고리의 다른 글

자바스크립트 null과 undefined차이  (0) 2017.09.20
자바스크립트 연산자 우선순위  (0) 2017.09.19
script 사용 기초, .js파일 호출 기초  (0) 2017.09.19
getElementById() 메소드 이용 방법  (0) 2017.09.18
자바스크립트 옵션 객체 초기화 방법  (0) 2017.08.31

티스토리툴바