생활코딩

Coding Everybody

코스 전체목록

닫기

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. 맞아요
    님 잘못이 아닙니다.
    많은 이들이 그렇게 말해왔으니까요.
    잘 팔린다는 어느 책에는 '우리나라 개발자 대부분은 헤드 태그 안에 넣고, 이게 우리나라 개발 환경'이라고 써 있기도 하네요.
    하지만 바디 하단에 외부 파일로 넣는 것이 좋은 것 맞습니다.
    로딩부하, 자원 관리, 코드 가독성, 코드 재사용 등등 잇점이 많으니까요.
    대화보기
    • canivas
      2018/11/10 완료!
    • 코딩가즈아
      오오오...WEB2 에서 보면서 궁금했던 게 해결됐네요! 감사합니다
    • 김수
      벌써 어렵다 ..^^
    • SlowStarter
      감사합니다!
    • 브라우저마다 다르긴할거 같은데요.
      Js 는 맨하단에, css는 상단에 두는게 좋다고 합니다.

      ( css 를 상단에 두는 이유는 잘 기억이 나질 않네요 ..)
      일반적으로 브라우저가 js파일을 읽을때는 블락되어 html을 읽지 않습니다.
      js내부에서 style을 제어하는 경우가 있기에 js를 읽는 동안에는 다른 작업을 하지 않죠.

      > style을 제어할 경우 다시 그려야하기 때문에 ..

      즉, html 중간이나 처음에 둘 경우 작업이 밀릴 수 있습니다.

      css를 앞에두는 이유는 아마(?) 브라우저가 css를 읽기 전까진 painting을 하지 않앗던걸로 기억해요

      (기억이 안나네여 ㅠ )
      대화보기
      • 웹퍼블이
        제가 맨 처음 독학했을때는

        <script> 의 위치는 웬만하면 head 안에... <script> <link> <style> 순으로 위치하는것을 권장한다

        라고 알고있었는데요.
        요즘 문득 다시 공부하면서 보면 아에 다르더라구요?
        제일 맨 하단에 정의하는게 성능상으로나 문제없는거로나.... 이것저것 하단이 좋다고....
        하단에 위치하는게 왜 좋은건가요?
        대강은 알고있는데,

        왜 저는 여태것 head 안에 위치하는걸 권장한다 라고 알고있었고,
        하단에 위치하면 좋은 구체적이고 확실한 이유를 알고싶네요.
      • 스페이스몽키
        감사합니다~
      • 생선과고양이
        20180423 감사합니다
      • 감사합니다~
      • An TaeHyeon
        18-01-23 수강완료!
        강의록 공유합니다.
        https://goo.gl/GKLea1
      • 띠링
        css는 head에 먼저 작성해서 그 뒤에 나오는 id나 class를 사용해도 됐었는데,
        자바스크립트는 함수로 되어 있어서 id나 class가 먼저 설정되어야 하는군요!
      • 박신우
        body 태그 밑에 다는 습관을 들여야겠네요
      • 박인호
        12-26
        수강완료.
      • 개발자가 되고 싶은 고등학생
        감사합니다!
      • GoldPenguin
        감사합니다.
      • 이민규
        감사합니다!!
      • 신덜덜
        감사합니다!
      • 바람과 나무
        감사합니다.
      • 바람과 나무
        감사합니다.
      • 수복
        감사합니다!
      • 동관K
        디버깅을 해보면 말씀하신 것 처럼 NULL이 들어오는게 맞네요.
      • 신시내티
        window.onload = function(){} 함수는 해당 웹브라우저의 모든 코드의 로드가 끝났을때 호출되는 함수다.
        즉 해당 브라우저에 대한 코드가 처음부터 끝까지 읽혀졌다는 의미.

        그러나 왠만하면 script 파일은 head 태그 보다 페이지의 하단에 넣자.
      • Jeffry
        @Eunmi Min
        ->ctrl + s 해서 저장할 때 이름 설정하고 해야지 저렇게 되더라고요. 더 간편한 설정을 알게되셨다면 알려주시면 감사하겠습니다~!
      • Eunmi Min
        sublime text에서 바로 웹을 실행시키는 화면으로 가는 단축키가 있는가요?
        파일을 만들때도 뚝딱 만드시던데 제가 new file만들때는 untitle이라고 나와서 만들기가 좀 어렵거든요.
      • laqah
        엄청 꿀이에요!!
      • neutralwind
        저도 이거 궁금해용
        대화보기
        • 하니
          window.onload는 한 번만 쓸 수 있다고 들었어요. 그렇게 된다면 모든 함수나 객체를 그 안으로 넣어야 되는건가요?
          대안으로는 jquery를 쓰는 법이 있지만 만약 자바스크립트로만 코딩한다면 문제가 될 것 같은데 어느 것이 맞나여?
        • woos
          반드시 스크립트를 헤드에 넣는것 보다 하단에 넣는게 좋다라고 말할 수 없습니다. 일반적인 경우 잘못 사용된 스크립트의 많은 문제로 인해 하단에 넣는게 더 유리한것은 맞지만요. 로딩이나 런타임 렌더링 생각해봐도 하단에 들어가는 것은 더 유리하기도 하지만... 스크립트란게 본문 코딩에 관련 부분의 정의만 있는게 아니거든요.
        • 범이
          복습왔어요.
          window.onload!!!
        • 으노
          window.onload에 대해서 정확히 알게 되었습니다. 감사합니다.
        • 범이
          function loginBtn(){
          alert("loginBtn");)};

          오타가 있는듯 합니다.

          function loginBtn(){
          alert("loginBtn");
          }

          이렇게 하시면 될 것 같네요 ~
          대화보기
          • ckocko
            다들 헤드에만 놔서 거기에 놓는게 제일 좋은 방법인 줄 알았는데 아니었네요 감사합니다!
          • choboja
            질문이 있습니다. js외부파일에 window.onload() = function 대신에 window.addEventListener("load", function () { 이것을 사용했습니다. javascirpt는 jquery를 사용했습니다.
            1 . button id ="loginBtn" 형식
            $(function(){
            $("#loginBtn").on("click", function(){
            alert("loginBtn"); )};

            2 button onclick ="loginBtn()" 형식
            function loginBtn(){
            alert("loginBtn");)};
            1번은 잘 됩니다. 2번은 안되는데, 인터넷을 찾아봤지만 안 보여서 아시면 알려주셨으면 좋겠습니다.
          • chsss
            질문이 있어서 처음으로 댓글을 적지만 여러 필요한 강의를 정말 잘 듣고 있습니다. 감사합니다^^
            Q> javascript는 body태그 위에 작성할 시 window.onload() 같은 웹브라우저의 로드가 끝났을 때 작동되라는 작업을 해야되지만 css는 body태그 위에 그냥 작성해도 되는 이유가 무엇인가요?
          • hwangcoding@naver.com
            클리어클리어
          • 유유
            감사합니다.
          • 감사합니다!
          • hsoon
            너무 잘 보고갑니다.
          • dhkim1
            감사합니다!
          • Maple
            잘 보고 갑니다.
          • Wj Kim
            감사합니다. (_._)
          • hyuna
            감사합니다.
          • hyuna
            전 마우스오른쪽누르고.. 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초정도 걸리더라구요..

              이문제 어떻게 해결하면 좋을까요..?
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기