JS 코딩 #03 - 자바스크립트 위치
*이 글은 유효하지 않습니다. 개정본은 '코딩 카페' 에서 확인해주세요.
https://steemit.com/hive-196354/@ajerang/nadxt-js-03
이번 강의는 HTML 문서 내에서 자바스크립트가 어디에 위치할 수 있는지 알아보겠습니다.
Agenda
<script>태그- 함수와 이벤트 (Functions and Events)
<head> 또는 <body>태그- 외부 자바스크립트 (External JavaScript)
- 외부 참조 (External References)
1. <script> 태그
HTML 문서에서 자바스크립트 코드는 <script> 와 </script> 태그 사이에 삽입될 수 있습니다.
예제를 보겠습니다. (이미지를 클릭하면 codepen.io 에서 직접 코딩해볼 수 있습니다)
다음과 같이 type 속성에 text/javascript 를 명시하지 않아도 HTML 에서는 자바스크립트가 기본 값이므로 생략할 수 있습니다.
<script type="text/javascript"> ... </script>
2. 함수와 이벤트 (Functions and Events)
자바스크립트의 함수는 어떠한 목적을 위해 호출되어질 수 있는 기능 단위의 코드 블록(code block)을, 이벤트는 사용자의 액션이나 어떠한 조건에 의해 발생되는 사건을 뜻합니다.
예를 들어, 사용자가 웹 페이지의 특정 버튼을 클릭했을 때(사건) 이벤트를 감지하여 함수(기능; 코드블록)를 호출할 수 있습니다.
함수와 이벤트에 대해서는 다음 강의들에서 더 자세히 다루겠습니다.
3. <head> 또는 <body> 태그
HTML 문서에는 자바스크립트를 얼마든지 포함될 수 있으며, <body> 또는 <head> 영역 내에 위치할 수 있습니다.
<head>내 위치다음 예제는 자바스크립트가
<head>영역 내 위치한 경우입니다.
버튼이 클릭되면 함수가 호출됩니다.
<body>내 위치위 예제의 자바스크립트 코드를
<head>에서<body>안으로 그대로 옮겨 보겠습니다.
참고로, 자바스크립트 코드는 해독하는데 시간이 걸리므로
<body>영역의 맨 밑에 위치시키면 브라우저에 웹 페이지가 표시되는 속도를 높일 수 있다고 합니다.
4. 외부 자바스크립트 (External JavaScript)
자바스크립트는 외부 파일에 위치할 수 있습니다.
외부 자바스크립트 파일에는
<script>태그를 포함할 수 없습니다.
5. 외부 자바스크립트의 이점(advantages)
자바스크립트 코드를 외부 파일로 작성할 경우 이점은 다음과 같습니다.
HTML과 스크립트 코드를 분리할 수 있습니다.
소스코드를 읽기 쉽고 유지보수가 용이합니다.
자바스크립트 파일이 캐싱되어 페이지를 불러오는 속도가 빨라질 수 있습니다.
*캐싱(caching)은 사용자의 브라우저나 캐시 서버를 통해 자주 변경되지 않는 정적(static) 파일들을 메모리 또는 저장매체에 기록해뒀다 필요할 때 빠르게 로딩(loading)하기 위해 사용되는 기술입니다.
여러 개의 스크립트 파일을 한 페이지에 추가할 경우 <script> 태그를 여러 개 사용할 수 있습니다.
6. 외부 참조 (External References)
외부 스크립트는 URL 또는 웹 사이트 내의 상대적 경로를 통해 참조될 수 있습니다.
다음은 사용자가 방문한 사이트 내의 자바스크립트를 사용하는 예제입니다.
자바스크립트 코드가 현재 페이지가 위치한 폴더 내에 위치할 경우 파일 이름만 명시하여 사용할 수 있습니다.
이상으로 강의를 마치구요, 다음 시간에는 자바스크립트를 이용해 화면이나 콘솔에 출력(output)하는 법에 대해 알아보겠습니다. ^ _^)/
Hello ajerang!
Congratulations! This post has been randomly Resteemed! For a chance to get more of your content resteemed join the Steem Engine Team