웹브라우저 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. nurunzii
    2020.08.31 완료!
  2. Rajneesh Tripathi
  3. 마준
    완료
  4. 완료
  5. 김광현
    7월14완료
  6. 정승옥
    완료
  7. 한강
    script tag는 body tag 끝에 위치하는게 좋다.
    200623
  8. 쑤우
    완료. 감사합니다~
  9. bomnie
    script 파일은 head 태그 보다 페이지의 하단에 위치시키는 것이 더 좋은 방법
    window.onload는 문서 전체가 다 읽히고 나서 실행될 소스를 실행시키는 방법
  10. 없으면안돼요
    감사합니다.
  11. 묵주코더
    감사합니다!
  12. 얼그레이
    0219
  13. 이동현
    잘 봤습니다. ~~
  14. 이강의는 새로그침(F5)를 눌러 다시볼수있습니다
  15. ㅎㅅㅁ
    다시 시작 0114
  16. jinxiong
    전체 한번 다듣고 다시 하나씩 코드실행하며 수강 합니다, 화이팅!
  17. 장진호
    12.8수강시작
  18. 자바스크립 초보자
    좋은 강의 감사 드립니다~
  19. 자바스크립트 입문
    강의 감사합니다~
  20. 광주토박이
    완료
  21. 19-10-13 5:15 pm 완료
  22. 정홍
    완료
  23. 류석현
    다시 시작합니다

    2019. 09. 28
  24. 류석현
    힘내요! 저도 몰라서 2번 봤네요
    대화보기
    • :thinking:
      'ready' 이벤트를 통해 감지해 보세요.
      대화보기
      • ㅂㅂ
        에휴...
        대화보기
        • ㄴㅇ
          먼소리하는건지 1도모르겟다
        • 빌리
          스고이
        • 애용
          ㅇㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐㅐ용
        • ㅌㅋㅋㅋ
          hi bro!!!!!!!!!!!
        • ㅁ;나ㅗㅓㅇㅁ자ㅣ엄냐ㅣㅏㅇ
          닥쳐
        • ㄴㅇ루ㅡㄴㅇㄹ
          닥쳐 **야
        • 멍미너ㅗ이ㅏㅁㄴ
          ㅋㅋㅋ
        • tlsdnjsdyd@naver.com
          브라우저의 렌더링 엔진을 공부해보시면 정답을 쉽게 알게 되실 것 같습니다 (:
          대화보기
          • 운림
            눈팅만 하다가 오늘부터 본격 코딩 연습 시작합니다.
            감사헙니다.
          • 브루스
            <script> 태그 위치
            1. Place library script such as the jQuery library in the head section.
            라이브러리 스크립트는 헤더에
            2. Place normal script in the head unless it becomes a performance/page load issue.
            성능/페이지 로딩문제가 없는 스크립트는 헤더에
            3. Place script that impacts the render of the page at the end of the body
            페이지 렌더링에 직결되는 스크립트는 바디 마지막에

            라고 하네요.

            맞는지 아닌지는 공부해가면서 확인해볼게요 ㅋㅋ
          • 미완성
            20190108완료
          • 처음써보는데 실행하는법좀알려주세요..
          • 맞아요
            님 잘못이 아닙니다.
            많은 이들이 그렇게 말해왔으니까요.
            잘 팔린다는 어느 책에는 '우리나라 개발자 대부분은 헤드 태그 안에 넣고, 이게 우리나라 개발 환경'이라고 써 있기도 하네요.
            하지만 바디 하단에 외부 파일로 넣는 것이 좋은 것 맞습니다.
            로딩부하, 자원 관리, 코드 가독성, 코드 재사용 등등 잇점이 많으니까요.
            대화보기
            • 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
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기