JavaScript 기본편(2) - 실행위치

2023. 8. 24. 09:37Lang/JavaScript

    <button onclick="alert('hello World')">Hello World</button>

자바스크립트 복습하기 2편

 

<실행위치>

   (1) 내부방식

   (2) 외부방식

   (3) 인라인방식

 

      (1) 내부방식

           1) head태그에 작성 

                                         - 문서를 초기화하거나 설정하는 가벼운 script를 작성

                                         - 무거운 스크립트가 있을경우 랜더링에 방해가 되어 로딩화면이 오래 걸릴 수 있음

(** 랜더링(rendering) : 개발자가 작성한 문서(HTML, CSS, JS)가 브라우저에 출력되는 과정)

                                         - body 속 태그들이 생성되기전에 코드가 실행되므로 문서(document)에서 태그를 찾지 못함

 

           2) body태그에 작성(</body>태그 바로 위)

                                         - 무거운 script를 작성

                                         - 일반적으로 추천되는 script 위치

 

      (2) 외부방식

                                         - 일반적으로 사용되는 형태

                                         - 코드의 재사용성이 높아 유지보수가 편리

                                         - 코드가 공개되지 않아 보안에 좋음

 

      (2) 인라인방식

                                         - 태그 내에 직접 js 명령어 작성

                                         - html 태그와 분리하는 것을 권장함

                                         - 예시 :

    <button onclick="alert('hello World')">Hello World</button>

 

'Lang > JavaScript' 카테고리의 다른 글

JavaScript 기본편(4) - 함수  (0) 2023.08.25
JavaScript 기본편(3) - 기본문법  (0) 2023.08.24
JavaScript 기본편(1)  (0) 2023.08.08