웹브라우저 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. hwangcoding@naver.com
    클리어클리어
  2. 유유
    감사합니다.
  3. 감사합니다!
  4. hsoon
    너무 잘 보고갑니다.
  5. dhkim1
    감사합니다!
  6. 잘 보고 갑니다.
  7. Wj Kim
    감사합니다. (_._)
  8. 감사합니다.
  9. 전 마우스오른쪽누르고.. open in browser로 봐요. 금방되요..
    대화보기
    • tachyon
      감사합니다
    • cicada
      감사합니다.
    • yihsang
      처음에 script태그를 head태그에 작성했습니다.
      왜 오류가 나는가 한참 찾았습니다.
      뒤의 강의를 보니 window.onload = function(){}의 구조를 사용해야 되는 것이네요.
      왜 이고잉님이 빠르게 수업을 청취하라고 하셨는지 이해가 됩니다.
      감사합니다.
    • JustStudy
      2016.07.07목
      고맙습니다 3.
    • JustStudy
      window.onload = function(){} 함수는 웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수다.
      고맙습니다 2.
    • 궁그매요
      지금 sublime 텍스트 3를 쓰고있는데 저장하고 페이지를 f5를 누르면 로딩이거의 13초정도 걸리더라구요..

      이문제 어떻게 해결하면 좋을까요..?
    • 부지런한곰탱이
      굿굿 잘보고가요!
    • 이해하기 쉬운 설명, 정말 감사합니다.
    • 온달장군
      강좌 잘보고 갑니다. 감사합니다.
    • 정회진
      감사합니다 ㅜㅜ
    • 레드판다
      언제나 친절하고 쉬운 수업 감사드립니다.
    • JustStudy
      고맙습니다
    • 초보도 이해할 수 있도록 자세한 설명 감사 드립니다. ~
    • 박첩구드
      감사합니다 ㅎㅎ
    • 택이
      아 그렇군요! Body 태그가 끝나는 곳에 !
    • 무정블루스
      감사합니다.
    • 방사포
      열심히 보고잇는데 아직은 어렵네요..ㅠㅠ
    • pej4303@naver.com
      감사합니다. 잘 봤어요:-)
    • document.write
      var hw = document.getElementById('hw');
      hw.addEventListener('click', function(){ //이부분이 너무 복잡해서
      alert('Hello world');
      })

      var hw=document.getElementById('hw');
      var f=function(){
      alert('Hello world');
      }
      hw.addEventListener('click',f) //이렇게 바꿨는데 동작은 똑같네요 잘못된 코딩은 아니겠죠?
      대화보기
      • ㅁㄴㅇㅁㄴㅇ
        ㄴㅇㄴㅇ
      • 머머
        이전 강좌에서 우리가 만든 index.php는 html과 php가 혼용되어있으니 정보로서 가치가 떨어지는건가요?
        nav나 article 모두 php를 통해 정보를 가져오는데 그럼 가져오는 부분은 다른 파일로 나눌 필요가 있는건가요?
      • 초보아빠
        감사합니다^^
        잠시쉬었다가 다시 달려봅니다.
      • 강지
        스크립트 파일 그냥 head 에 위치 시켰었는데 음... 좋은 내용 잘 봤습니다.
      • 개발괴발
        감사합니다 ~ 잘봤어요
      • 이도겸
        정말 감사합니다
      • nabie
        좋은 강의 감사합니다.
      • Chimy
        대단하세요! 이해 완전 잘 되요. 감사합니다.
      • 쏙쏙 들어오는 명강의입니다..들으면 들을수록 매료되는 강의며 목소리입니다..
        너무 감사드립니다..명강의~~~^^
      • 몽쉘통통
        스크립트 파일의 위치 별 생각없이 사용했었는데
        개념정리가 확실하게 됐습니다.
        이고잉님 감사해요^^
      • Welfare23
        짱이세요!
      • 감사해요
      • 아델리움
        좋은 강좌 감사합니다.
      • 빽짱구
        Good~
      • Minkoo Cho
        잘 보고 갑니다
      • 코몬
        좋은 강의 감사합니다.~~ 목소리도 너무 좋으십니다.!!
      • ssong
        재밌어요!! 감사합니다~~
      • 골드만삭스
        좋은 자료 감사합니다.
      • egoing
        헉 어찌 보셨나요? ^^
        대화보기
        • miwerjoa
          고잉님 늦은 시각에 고생하셨습니다.
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기