재유's

[JavsScript] JavaScript 특성 본문

IT Story/　: : JAVASCRIPT

[JavsScript] JavaScript 특성

Stella_NY 2019. 1. 30. 10:09

JavaScript는 <script> 태그가 서로 분리되어 있어도 실행시에는 하나로 병합되어 동작한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
 
<head>
    <title>bin page</title>
 
    <script type="text/javascript">
        var a = 10;
    </script>
</head>
 
<body>
    <script>
        var b = 20;
    </script>
    ...
    <script>
        var c = a + b;
    </script>
 
</body>
 
</html>




소스코드 실행시점

HTML파일을 한 라인씩 해석하는 브라우저의 특성상 소스코드의 위치에 따라서 실행시점이 결정되므로 
HTML태그를 제어하고자 하는 경우 제어하려는 HTML태그보다 소스코다 나중에 명시되어야 한다.

case1 - <body> 태그 닫기 직전에 스크립트 코드 명시
1
2
3
4
5
6
<body>
    <div id="foo">...</div>
    <script>
        document.getElementById("foo").innerHTML = "hello";
    </script>
</body>


=> 스파게티 코드가 되어 가독성, 유지보수에서 좋지 않다.


case2 - <head> 태그에 스크립트 코드가 함수 단위로 정의 되는 경우

onload 이벤트를 통해서 해당 함수를 호출시킨다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
 
<head>
    <title>bin page</title>
    <script type="text/javascript">
        function foo() { ... }
    </script>
</head>
 
<body onload="foo()">
</body>
 
</html>


=> 브라우저가 HTML태그 전체를 인식할 때 까지 스크립트 실행을 기다려야 하기 때문에



HTML 태그의 id속성값 중복 금지!!!

CSS에서는 id값이 중복될 경우 여러 요소에 대하여 동시에 적용이 가능하지만,

JS의 경우 id속성이 중복될 경우 그 중에서 가장 첫번째 요소만 인식하고 그 외의 요소들은 식별하지 못한다.

그러므로 HTML에서 id속성은 반드시 고유한 값을 사용해야 한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
 
<head>
    <title>bin page</title>
    <style>
        /** 모든 id="hello"에 적용됨 */
    #hello {color: red;}
    </style>
    <script type="text/javascript">
        function foo() {
            // 첫번째 요소에만 적용됨.
            document.getElementById("hello").innerHTML = "hello";
        }
    </script>
</head>
 
<body onload="foo()">
    <div id="hello">...</div>
    <div id="hello">...</div>
    <div id="hello">...</div>
</body>
 
</html>



실행결과 

(div #hello 첫번째만 바뀐다.)

  [Tip!] CSS에서는 클래스 속성만 사용하고, JS에서는 id속성만 사용한다.



저작자표시

'IT Story > 　: : JAVASCRIPT' 카테고리의 다른 글

[JavaScript] 객체  (0) 2019.01.30
[JavaScript] 함수 정의의 또 다른 방법  (0) 2019.01.30
[JavaScript] 이벤트  (0) 2019.01.29
[JavaScript] 함수  (0) 2019.01.28
[JavaScript] 프로그램의 흐름제어(1)  (0) 2019.01.25
공유하기 링크
'IT Story/　: : JAVASCRIPT' Related Articles more
Comments