JavaScript

문자메일 2017. 2. 27. 02:22

inline 방식 - 태그에 직접 자바스크립트를 기술하는 방식 (비권장)

html에서 속성중에 onclick = "alert('Hello world')"

빨간 부분에는 클릭을 했을 때 일어날 자바스크립트 코드를 입력한다.

script - 정보와 제어를 구분한다는 점에서 바람직

<!DOCTYPE html>
<html>
<body>
    <input type="button" id="hw" value="Hello world" />
<script type="text/javascript">
        var hw = document.getElementById('hw');
        hw.addEventListener('click', function(){
            alert('Hello world');
            })
    </script>
</body>
</html>

외부 파일로 분리 - 유지보수 측면에서 더 바람직

<!DOCTYPE html>
<html>
<body>
    <input type="button" id="hw" value="Hello world" />
    <script type="text/javascript" src="script2.js"></script>
</body>
</html>

//js파일
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
    alert('Hello world');
})