DoR@Hee의 끄적끄적

javascript - html javascript 로드 본문

공부/Javascript

javascript - html javascript 로드

DoR@Hee 2019. 2. 19. 17:55

inlie 방식

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
    <input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>
cs


장점 - 태그와 연관된 스크립트가 분명히 드러난다

단점 - 정보와 제어가 같이 있기때문에 가독성이 떨어진다. 


script 방식

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
    <input type="button" id="aa" value="Hello world" />
    <script type="text/javascript">
        var hw = document.getElementById('aa');
        aa.addEventListener('click', function(){
            alert('Hello world');
        })
    </script>
</body>
</html>
cs


장점 - js코드와 html을 분리가능

(addEventListener()는 이벤트를 추가하는 메소드이며 button클릭 시 수행된다)


외부파일로 분리하는 방식

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
    <input type="button" id="aa" value="Hello world" />
    <script type="text/javascript" src="script2.js"></script>
</body>
</html>
cs


1
2
3
4
var aa= document.getElementById('aa');
aa.addEventListener('click', function(){
    alert('Hello world');
})
cs


여기서 <script>태그의 위치가 문제가 될 수 있는대
태그는 
1. <head>안에 넣는다
2. </body> 안에 넣는다 크게 2가지로 나뉜다.

1번은 문서객체모델(DOM)에 접근/조작하는 코드가 없을 경우에 사용하며 가능한 </body>에 사용하는게 좋다고 한다.
2번은 일반적으로 사용하는 방식이다.


Comments