Html에서 JavaScript 로드하기
Inline 방식
- 태그 내에 직접 자바스크립트 명령어를 작성하는 방법
- html 코드와 javascript 코드가 같이 있기 때문에 분명하게 드러난다.
- html 코드와 javascript 코드가 같이 있기때문에 유지보수가 어렵고 코드가 짬뽕이 된다.
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('hi')" value='hi'/>
</body>
</html>
<!-- onclick은 html의 속성의 문법이다. alert는 웹 브라우저의 속성이다. -->Internal 방식
- HTML 문서 내 별도의 영역에 자바스크립트를 작성하는 방식
- html 코드와 javascript 코드가 분리되어 있어 필요한 부분만 수정하면 된다.
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('hi')" value='hi' id='btn'/>
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', () => {
alert('hi')
})
</script>
</body>
</html>External 방식
- HTML과 자바스크립트를 분리해서 외부 파일로 분리하는 방식, 자바스크립트 파일(확장자 js)로 작성
- HTML 문서에 불러올 때 script 태그에 src 속성에 자바스크립트 파일의 경로와 파일명을 써준다.
<!-- html 파일 !-->
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('hi')" value='hi' id='btn'/>
<script src=./script.js></script> <!-- script.js 파일을 불러온다. !-->
</body>
</html>// script.js
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', () => {
alert('hi')
})
</script>
https://github.com/jaewon1676