웹브라우저 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. 신시내티
    window.onload = function(){} 함수는 해당 웹브라우저의 모든 코드의 로드가 끝났을때 호출되는 함수다.
    즉 해당 브라우저에 대한 코드가 처음부터 끝까지 읽혀졌다는 의미.

    그러나 왠만하면 script 파일은 head 태그 보다 페이지의 하단에 넣자.
  2. Jeffry
    @Eunmi Min
    ->ctrl + s 해서 저장할 때 이름 설정하고 해야지 저렇게 되더라고요. 더 간편한 설정을 알게되셨다면 알려주시면 감사하겠습니다~!
  3. Eunmi Min
    sublime text에서 바로 웹을 실행시키는 화면으로 가는 단축키가 있는가요?
    파일을 만들때도 뚝딱 만드시던데 제가 new file만들때는 untitle이라고 나와서 만들기가 좀 어렵거든요.
  4. 엄청 꿀이에요!!
  5. neutralwind
    저도 이거 궁금해용
    대화보기
    • 하니
      window.onload는 한 번만 쓸 수 있다고 들었어요. 그렇게 된다면 모든 함수나 객체를 그 안으로 넣어야 되는건가요?
      대안으로는 jquery를 쓰는 법이 있지만 만약 자바스크립트로만 코딩한다면 문제가 될 것 같은데 어느 것이 맞나여?
    • 반드시 스크립트를 헤드에 넣는것 보다 하단에 넣는게 좋다라고 말할 수 없습니다. 일반적인 경우 잘못 사용된 스크립트의 많은 문제로 인해 하단에 넣는게 더 유리한것은 맞지만요. 로딩이나 런타임 렌더링 생각해봐도 하단에 들어가는 것은 더 유리하기도 하지만... 스크립트란게 본문 코딩에 관련 부분의 정의만 있는게 아니거든요.
    • 범이
      복습왔어요.
      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번은 안되는데, 인터넷을 찾아봤지만 안 보여서 아시면 알려주셨으면 좋겠습니다.
      • 질문이 있어서 처음으로 댓글을 적지만 여러 필요한 강의를 정말 잘 듣고 있습니다. 감사합니다^^
        Q> javascript는 body태그 위에 작성할 시 window.onload() 같은 웹브라우저의 로드가 끝났을 때 작동되라는 작업을 해야되지만 css는 body태그 위에 그냥 작성해도 되는 이유가 무엇인가요?
      • hwangcoding@naver.com
        클리어클리어
      • 유유
        감사합니다.
      • 감사합니다!
      • 너무 잘 보고갑니다.
      • dhkim1
        감사합니다!
      • 잘 보고 갑니다.
      • 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초정도 걸리더라구요..

          이문제 어떻게 해결하면 좋을까요..?
        • 부지런한곰탱이
          굿굿 잘보고가요!
        • 이해하기 쉬운 설명, 정말 감사합니다.
        • 온달장군
          강좌 잘보고 갑니다. 감사합니다.
        • 정회진
          감사합니다 ㅜㅜ
        • 레드판다
          언제나 친절하고 쉬운 수업 감사드립니다.
        • 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
            대단하세요! 이해 완전 잘 되요. 감사합니다.
          • 쏙쏙 들어오는 명강의입니다..들으면 들을수록 매료되는 강의며 목소리입니다..
            너무 감사드립니다..명강의~~~^^
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기