자바스크립트 사용하기

브라우저를 제어한다는 기본적인 자바스크립트의 활용 분야로만 따진다면 자바스크립트를 사용하는 것은 다음과 같이 사용할 수 있다. 또한 자바스크립트를 확인하는 것은 웹브라우저에 해당 예제 파일을 열기를 하는 것으로 확인이 가능하다.

1. 인라인 방식

<!DOCTYPE html>
<html>
<body>
    <input type="button" id="btn" value="Hello World" onclick="alert('Hello World')">
</body>
</html>

인라인 방식이란, html의 이벤트 헨들러 속성을 이용하여 html 테그 안에 직접 삽입하는 방식이다.

이 방식의 장점은 html 테그 안에 넣었기 때문에 직관적이며 해당 테그 자체를 지정을 해주어야 하지 않아도 되기 때문에 코드의 길이는 줄어드는 장점이 있다.

반대로 이 방식의 단점은 html 테그 안에 넣었기 때문에 추후 유지보수가 어렵고 실행시 출동이 나서 오류가 생길 가능성이 있으며 다른 객체에도 같은 내용의 자바스크립트가 필요할 시 일일이 해당 객체마다 따로 자바스크립트를 써주어야해서 재활용성이 안 좋은 단점이 있다.

2. 스크립트 태그 안에 삽입하는 방식

<DOCTYPE html>
<html>
<body>
    <input type=”button” id=”btn” value=”Hello World”>
    <script>
    var btn=document.getElementById(‘btn’);
    btn.addEventListener(‘click’,function(){
        alert(‘Hello World’);
    });
    </script>
</body>
</html>

스크립트 태그 안에 삽입하는 방식이란, html의 스크팁트 테그 안에 자바스크립트 문을 넣는 방식이다. 이 방식의 장점은 자바스크립트 문을 분리하여 유지 보수 및 코드의 재활용성 등 전반적인 코드의 관리와 활용이 쉬워진다는 점이다.

단점은 html 파일과 완전한 분리가 되지 않았기 때문에 자칫 코드가 길어지거나 여러가지 코드를 넣으면 이 조차도 복잡하게 보여질 수 있으며 각 파일별로 전부 넣어주어야 하기 때문에 페이지의 로딩속도가 느려진다는 단점이 있다.

3. 외부 파일로 분리하는 방식

<DOCTYPE html>
<html>
<body>
    <input type=”button” id=”btn” value=”Hello World”>
    <script src=”./common.js”></script>
</body>
</html>

common.js 내용

var btn=document.getElementById(‘btn’);
btn.addEventListener(‘click’,function(){
    alert(‘Hello World’);
});

외부 파일로 분리하는 방식이란, html의 스크립트 태그를 이용하여 외부의 자바스크립트 문서를 연결해서 사용하는 방식이다.

이 방식의 장점은 다른 문서간에 동일한 html 구문에 동일한 자바스크립트 문이 필요할 경우 자바스크립트 문서를 분리해서 각 html 문서에 연결해 주는 것으로 대체할 수 있어서 코드의 재활용성과 유지 보수의 효율을 극대화 할 수 있으며 외부 파일로 사용할 경우 자바스크립트 문서를 수정하지 않는 이상 1번 로드된 문서는 브라우저에 캐시로 남기 때문에 상당히 빠른 페이지 로딩 속도를 보이는 방식이다.

단점은 파일의 경로가 바뀌면 그 경로를 연결했던 모든 html 문서를 찾아서 바꾸어 주어야 한다는 점이 단점이라고 할 수 있겠다.

참고로 위 세가지 방식 중 가장 추천되는 방식은 외부 파일로 분리하는 방식을 가장 추천한다.

4. 스크립트 태그를 사용하는 방식에서 스크립트 태그의 위치

스크립트 태그는,

<head></head>

와

<body></body>

사이에 들어갈 수 있는데 각각 장단점이 있다.

모든 프로그래밍 문서가 그렇듯이 자바스크립트도 왼쪽에서 오른쪽으로, 위에서 아래로 해석되며 프로그램이 동작하게 된다. HTML도 CSS도 마찬가지이다.

덕분에 아래와 같다면 문제가 발생한다.

<DOCTYPE html>
<html>
<head>
    <script src=”./common.js”></script>
</head>
<body>
    <input type=”button” id=”btn” value=”Hello World”>
</body>
</html>

common.js 내용

var btn=document.getElementById(‘btn’);
btn.addEventListener(‘click’,function(){
    alert(‘Hello World’);
});

왜 문제가 일어나냐면 스크립트 문 안에 연결된 자바스크립트 문에서 btn이라는 아이디를 가진 html 태그가 현제 문서의 해석 순서에 따라서 아직 나오지 않았는데 그것을 가져와서 경고창을 띄운다고 이야기하고 있기 때문이다. 즉 로드가 되지 않아서 일어나는 문제인데 이럴경우 다음과 같이 추가해서 자바스크립트 문을 바꾸면 동작이 가능하다.

window.onload=function(){
    var btn=document.getElementById(‘btn’);
    btn.addEventListener(‘click’,function(){
        alert(‘Hello World’);
    });
}

즉 윈도우가 모드 로딩된 다음에 다음 자바스크립트 문을 해석하라는 이야기를 붙혀야만 실행이 가능해 진다.

이런 방식은 웹페이지가 완전히 로딩된 다음 다시 실행 파일이나 구문을 찾아서 다시 한 번 실행해야 하기 때문에 웹페이지의 로딩이 느려지는 현상이 나타난다. 따라서 완전히 로딩해서 무엇인가를 반드시 해야하는 것이 아니라면

<body></body>

사이에서도

</body>

바로 위에 스크립트 문을 넣는 것이 여러모로 좋다.

자바스크립트 사용하기

댓글