반응형

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





window.onload = function()을 이용하면 다음과 같은 효과를 얻을 수 있다.


            window.onload :: 전체 페이지의 모든 외부 리소스, 이미지가 브라우저에 불려진 이후 작동한다.

            따라서 딜레이가 있을 때는 onload 이벤트 실행 시간을 기다려야 한다.


이때 string List형식과 array방식을 두개 이용해서 어떻게 서로가 다르게 동작하는지 알아보려 한다.


첫번째로는 String 방식으로 만들어내서 document.body.innerHTML = list를 해보려 한다. 


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
<!DOCTYPE html>
<html>
<head>
    <title>test title</title>
    <script>
        /*
            window.onload :: 전체 페이지의 모든 외부 리소스, 이미지가 브라우저에 불려진 이후 작동한다.
            따라서 딜레이가 있을 때는 onload 이벤트 실행 시간을 기다려야 한다.
        */
        window.onload = function()
        {
            var list = '';
 
            list += 'list의 모습'
            list += '<ul>';
            list += '   <li>Hello</li>';
            list += '   <li>javaScript..!</li>';
            list += '<ul>';
 
            document.body.innerHTML = list;
           
            /*
            var array = [];
            array.push('array의 모습')
            array.push('<ul>');
            array.push('   <li>Hello</li>');
            array.push('   <li>javaScript..!</li>');
            array.push('<ul>');
            document.body.innerHTML = array;
            */
        }
           
    </script>
</head>
 
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus








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
<!DOCTYPE html>
<html>
<head>
    <title>test title</title>
    <script>
        /*
            window.onload :: 전체 페이지의 모든 외부 리소스, 이미지가 브라우저에 불려진 이후 작동한다.
            따라서 딜레이가 있을 때는 onload 이벤트 실행 시간을 기다려야 한다.
        */
        window.onload = function()
        {
        /*
            var list = '';
            list += 'list의 모습'
            list += '<ul>';
            list += '   <li>Hello</li>';
            list += '   <li>javaScript..!</li>';
            list += '<ul>';
            document.body.innerHTML = list;
           */
            
            var array = [];
 
            array.push('array의 모습')
            array.push('<ul>');
            array.push('   <li>Hello</li>');
            array.push('   <li>javaScript..!</li>');
            array.push('<ul>');
 
            document.body.innerHTML = array;            
        }
           
    </script>
</head>
 
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus



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



결과를 보면 알 수 있다시피 list를 이용하면 ','가 없고, array를 이용하면 ','가 생김을 알 수 있다.


따라서 innerHTML을 쓸 때는 array를 이용하여 어떤 HTML 값들을 넣어두는것은 조심해야 할 것 같다. 



























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

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

자바스크립트 for문 이용 방법  (0) 2017.08.09
자바스크립트 브라우저 성능 알아보기  (0) 2017.08.09
자바스크립트 전역 변수, 지역 변수, 상수  (0) 2017.07.27
자바스크립트 기본 입력 및 출력  (0) 2017.07.27
홈페이지에 적용하기 좋은 JavaScript (TinyBox 2)  (0) 2016.07.08

티스토리툴바