목차
JS 위치 JS 구문 JS 코드작동시기 JS 외부파일형식 (파일명.js) JS 외부파일형식 장점 JS 코드위치 (head / body) JS 외부파일형식 주의사항 (= 변수 미적용 문제 해결법) JS 외부파일 관련 주소
JS 위치
JS는 <body>와 </body> 사이, 또는 <head>와 </head> 사이에 올 수 있음. 원활한 웹문서 로딩 위해 되도록이면, JS 코드를 <body> 태그 안 하단에 모아 배치 !! 되도록이면, async 또는, defer 속성 추가해서 <head> 안쪽에 넣는 걸 권장. https://homzzang.com/b/html-93
JS 구문
※ JS 소스는 반드시 <script>와 </script>로 감싸야 함.
document.getElementById("homzzang").innerHTML = "홈짱닷컴 (homzzang.com)";
</script>
PS. 참고
옛날엔 <script type="text/javascript">처럼 type 속성을 적었지만,
[방법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.※ 클라이언트 : 홈페이지에 접속하는 일반사용자 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 속성 이용.)
(예)
JS 외부파일형식 장점
HTML 등 다른 코드와 분리되어, 가독성 좋아짐.
캐쉬화 될 경우, 문서 로딩 더 빠르게 할 수 있음.
동일 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>
<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> 태그
JS 외부파일 한글깨짐 방지
최신댓글