FlowerBombs
Javascript 구문 특성 본문
Javascript 구문 특성
Javascript는 <script>태그가 서로 분리되어 있어도 실행시에는 하나로 병합되어 동작다.
<html>
<head>
<script> var a = 10; </script>
</head>
<body>
<script> var b = 20; </script>
...
<script> var c = a+b; </script>
</body>
</html>
소스코드 실행시점
HTML 파일을 한 라인씩 해석하는 브라우저의 특성상 소스코드의 위치에 따라서 실행시점이 결정되므로 HTML 태그를 제어하고자 하는 경우 제어하려는 HTML 태그보다 소스코드가 나중에 명시되어야 한다.
case1 - <body> 태그 닫기 직전에 스크립트 코드 명시(제어할 대상을 먼저 인식하고 자바스크릡트 코드=>스파게티 코드가 되어 가독성 유지보스에서 좋지 않다)
<body>
<div id="foo">... </div>
<script>
document.getElementById("foo").innerHTML = "hello";
</script>
</body>
ㅊㅁㄴㄷ1 제어할 대상을 먼저 인식하고 자바스크릡트 코드=>스파게티 코드가 되어 가독성 유지보스에서 좋지 않다
case2 - <head> 태그에 스크립트 코드가 함수 단위로 정의되는 경우(같은 종류의 코드끼리 모아놓기 위함.)
onload 이벤트를 통해서 해당 함수를 호출시킨다. (브라우저가 html태그 전체를 인식할 때까지 스크립트 실행을 기다려야 하기 때문.)
<head>
<script>
function foo() {...}
</script>
</head>
<body> onload="foo()"
</body>
HTML태그의 id속성값 중복 금지!!!!!
CSS에서는 id값이 중복될 경우 여러 요소에 대하여 동시에 적용이 가능하지만,
JS의 경우는 id속성이 중복될 경우 그 중에서 가장 첫 번째 요소만 인식하고 그 ㅗ이의 요소들은 식별하지 못한다. 그러므로 HTML에서 id속성은 반드시 고유한 값을 사용해야 한다.
<head>
<style>
/** 모든 id="hello"에 적용됨 */
#hello {color : red; }
</style>
<script>
function foo() {
// 첫 번째 요소에만 적용됨
document.getElementById("hello").innerHTML = "hello"
}
</script>
</head>
<body onload="foo()">
<div id="hello">... </div>
<div id="hello">... </div>
<div id="hello">... </div>
[TIP!] CSS에서는 클래스 속성만 사용하고, JS에서는 id속성만을 사용한다.
'Javascript & JQuery&Ajax' 카테고리의 다른 글
| 객체 (0) | 2019.01.30 |
|---|---|
| 함수 정의의 또 다른 방법 (0) | 2019.01.30 |
| 이벤트 (0) | 2019.01.29 |
| 내장함수 (0) | 2019.01.29 |
| Javascript 작성 방법 (0) | 2019.01.25 |