웹브라우저 JavaScript

HTML에서 JavaScript 로드하기

JavaScript로 웹페이지를 제어하기 위해서는 JavaScript를 로드해야 한다.

inline

inline 방식은 태그에 직접 자바스크립트를 기술하는 방식이다. 장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다. 하지만 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다.

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

script

<script></script> 태그를 만들어서 여기에 자바스크립트 코드를 삽입하는 방식이다. 장점은 html 태그와 js 코드를 분리할 수 있다는 점이다. 

<!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>

외부 파일로 분리

js를 별도의 파일로 분리할 수도 있다. 장점은 보다 엄격하게 정보와 제어를 분리할 수 있다. 하나의 js 파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있다. 캐쉬를 통해서 속도의 향상, 전송량의 경량화를 도모할 수 있다.

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

script2.js

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

Script 파일의 위치

script를 head 태그에 위치시킬 수도 있다. 하지만 이 경우는 오류가 발생한다.

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

아래와 같이 script2.js의 코드를 수정해야 한다.

window.onload = function(){
    var hw = document.getElementById('hw');
	hw.addEventListener('click', function(){
		alert('Hello world');
	})
}

window.onload = function(){} 함수는 웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수다. 이러한 것을 이벤트라고 하는데 이벤트는 뒤에서 배울 것이다.

script 파일은 head 태그 보다 페이지의 하단에 위치시키는 것이 더 좋은 방법이다. 

댓글

댓글 본문
  1. 완료
  2. 주황버섯
    23.02.18수강완료
  3. 오오
    22.12.22
  4. 헤밍웨이
    220825 이런 원리가 숨어있었군요!
  5. 진진리
    0812
  6. mary5544
    감사합니다!
  7. choi
    완료
  8. 임앤강
    2022-02-06 수강완료~
  9. pmxsg
    2021.12.19. 수강
  10. 드림보이
    2021.12.14. HTML에서 JavaScript 로드하기 파트 수강완료
  11. 안젤라비
    21-11-26 (FRI)
  12. 경이
    2021 11 08 감사합니다
  13. labis98
    20210905 좋은 강의 감사합니다.
  14. yogg
    css를 html의 style태그로 정리하는 것이 별로 좋지 않은 이유랑 비슷하군요
  15. gkalsdlf
    완료!
  16. header에 스크립트 파일을 연결할 경우 window.onload = function(){} 라는 함수 안에 넣어야함(body의 내용이 읽힌 뒤에 스크립트를 실행해야해서)

    따라서 body태그 끝에 스크립트를 연결하는게 좋음
  17. 박병진
    감사합니다. 20.12.01
  18. 현미쓰
    11/16 복습중!
  19. 11/5
  20. nurunzii
    2020.08.31 완료!
  21. 마준
    완료
  22. anne
    완료
  23. 김광현
    7월14완료
  24. 정승옥
    완료
  25. 한강
    script tag는 body tag 끝에 위치하는게 좋다.
    200623
  26. 쑤우
    완료. 감사합니다~
  27. bomnie
    script 파일은 head 태그 보다 페이지의 하단에 위치시키는 것이 더 좋은 방법
    window.onload는 문서 전체가 다 읽히고 나서 실행될 소스를 실행시키는 방법
  28. Useok
  29. 없으면안돼요
    감사합니다.
  30. 묵주코더
    간@훈 박@제 정@호 강@민 염@열 김@영 어휴
  31. 얼그레이
    0219
  32. 이동현
    잘 봤습니다. ~~
  33. 이강의는 새로그침(F5)를 눌러 다시볼수있습니다
  34. ㅎㅅㅁ
    다시 시작 0114
  35. jinxiong
    전체 한번 다듣고 다시 하나씩 코드실행하며 수강 합니다, 화이팅!
  36. 장진호
    12.8수강시작
  37. 자바스크립 초보자
    좋은 강의 감사 드립니다~1234
  38. 자바스크립트 입문
    강의 감사합니다~
  39. 광주토박이
    완료
  40. 19-10-13 5:15 pm 완료
  41. 정홍
    완료
  42. 류석현
    다시 시작합니다

    2019. 09. 28
  43. 류석현
    힘내요! 저도 몰라서 2번 봤네요
    대화보기
    • :thinking:
      'ready' 이벤트를 통해 감지해 보세요.
      대화보기
      • ㅂㅂ
        에휴...
        대화보기
        • ㄴㅇ
          먼소리하는건지 1도모르겟다
        • 빌리
          스고이
        • 애용
          ㅇㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐ용
        • ㅌㅋㅋㅋ
          hi bro!!!!!!!!!!!
        • ㅁ;나ㅗㅓㅇㅁ자ㅣ엄냐ㅣㅏㅇ
          닥쳐
        버전 관리
        egoing@gmail.com
        현재 버전
        선택 버전
        graphittie 자세히 보기