• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항

목차

  1. JS 위치
  2. JS 구문
  3. JS 코드작동시기
  4. JS 외부파일형식 (파일명.js)
  5. JS 외부파일형식 장점
  6. JS 코드위치 (head / body)
  7. JS 외부파일형식 주의사항  (= 변수 미적용 문제 해결법)
  8. JS 외부파일 관련 주소

 

JS 위치

 

JS는 <body>와 </body> 사이, 또는 <head>와 </head> 사이에 올 수 있음. 
또한, 
여러 개 중복 사용 가능하지만, 
원활한 웹문서 로딩 위해  되도록이면, JS 코드를 <body> 태그 안 하단에 모아 배치 !!
되도록이면, async 또는, defer 속성 추가해서 <head> 안쪽에 넣는 걸 권장.
https://homzzang.com/b/html-93

 

 

JS 구문

※ JS 소스는 반드시 <script>와 </script>로 감싸야 함.

<script>
document.getElementById("homzzang").innerHTML = "홈짱닷컴 (homzzang.com)";
</script>
 

PS. 참고

옛날엔 <script type="text/javascript">처럼 type 속성을 적었지만, 
지금은 <script>처럼 type 안 적어도 브라우저가 자동으로 JS로 인식.


[방법1] - 표준

<script type="text/javascript">  


</script>


[방법2] - 허용
<script language="javascript"> 

  ~ 
</script>


[방법3] - 허용 (∵ 최근 브라우저 경우, 자동 인식)
<script> 

  ~ 
</script>

 


cf. <script> 태그 사용 대신, html 태그 안에서 onclick="JS코드"  형식으로 표현 가능.
 
<button type="button" onclick="document.getElementById('homzzang').innerHTML = Date()">
현재 시간 보기</button>
 
<p id="homzzang"></p>
 

 

JS 코드작동시기

 

1.
JS 함수는 JS 코드의 덩어리이며, 요청 있을 때 실행.
즉, 
클라이언트 측의 이벤트 (즉, 브라우저 로딩이나 클릭 등 행위)가 존재해야만 실행.
※ 클라이언트 :  홈페이지에 접속하는 일반사용자

2.
HTML 요소가 로드 된 후에, 실행해야 에러 안 남.
DOMContentLoaded 이벤트 속성 사용 시, HTML 요소 위에 사용 가능.

※ jQuery 경우, $(document).ready(function() {....}) 기능과 유사.

(예제)

<script>

document.addEventListener('DOMContentLoaded', function() {

    document.getElementsByTagName('h1')[0].style.color='red';

});

</script>

<h1>홈짱닷컴</h1>

<h1>Homzzang.com</h1>

 

결과보기

 

JS 외부파일형식 (파일명.js)

 

<script type="text/javascript" src="외부 js 파일 주소"></script>

 

PS. 최신 브라우저 경우, type="text/javascript" 속성 생략 가능.


 

1.

JS는 HTML 문서와 별도로  js 확장자 가진 외부스크립트 방식도 가능.

(예: 파일명.js)

 

2.

브라우저로 확인 시, 한글깨짐 방지: utf-8 대신 unicode 인코딩 사용.

 

3.

JS 외부 파일엔 <script></script> 태그 빼고, 순수한 JS 코드만 넣음.

(∵ HTML 문서에 외부 JS 호출 시, <script> 태그의 src 속성 이용.)

(예)
<script src="<?php echo G5_JS_URL?>/homzzang.js"></script>

 

 

JS 외부파일형식 장점

  1. HTML 등 다른 코드와 분리되어, 가독성 좋아짐.
  2. 캐쉬화 될 경우, 문서 로딩 더 빠르게 할 수 있음.
  3. 동일 JS 코드를 여러 HTML 문서에 사용 시 유용.

 

JS 코드위치 (head / body)

<head> 태그 사이에 넣은 경우

 

<!DOCTYPE html>
<html>
<head>
<script>
function hz() {
    document.getElementById("homzzang").innerHTML = "변경 후 문서 내용";
}
</script>
</head>

<body>

<p id="homzzang">변경 전 문서 내용</p>

<button type="button" onclick="hz()">클릭</button>

</body>
</html> 


결과 보기


<body> 태그 사이에 넣은 경우 

 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function hz() {
    document.getElementById("homzzang").innerHTML = "변경 후 문서 내용";
}
</script>
<p id="homzzang">변경 전 문서 내용</p>
<button type="button" onclick="hz()">클릭</button> 
</body>
</html> 


결과 보기

 

JS 외부파일형식 주의사항  (= 변수 미적용 문제 해결법)

[문제점]

 

아래 코드를 외부JS 파일에 바로 넣어 웹문서 상단 불러오면 값이 적용 안 됨. 

var hz = document.getElementById('hz');

 


[해결책1]

 

아래처럼 함수 안에 정의 후, 웹문서 로딩 후 함수호출 방식 (예: hz())으로 사용.

function hz(){ 

    var hz = document.getElementById('hz');

}

 


[해결책2]

 

웹문서 맨 하단에 외부링크 추가.


[해결책3]


jQuery 웹문서로드 완료 구문 안에 넣어 사용.

 

(예)

$(document).ready(function() {
    var hz = document.getElementById('hz');

});

또는,

$(function() {
    var hz = document.getElementById('hz');

});


관련글 균이 님 https://sir.kr/qa/324275

 

JS 외부파일 관련 주소

 
<script> 태그 + async・defer 속성
 
<noscript> 태그
 
"use strict"; // 엄격 모드
 
JS 외부파일 한글깨짐 방지
 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/3
목록
찾아주셔서 감사합니다. Since 2012