** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
1. 준비구문이란?
- 준비구문이란 문서 객체를 먼저 읽고 스크립트구문을 실행하라는 구문입니다.
- <script>태그가 <body>보다 위쪽에 써있는 경우 먼저 코드를 읽기 때문에 문서객체를 읽지 못한 상태에서 명령이 실행되버립니다. 그럼 문서객체를 읽지 못하기 때문에 전혀 명령이 적용되지 않습니다.
## 표현식을 <body>태그 위쪽에 쓴 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 준비구문</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$('h1').css('color','red');
</script>
</head>
<body>
<h1>제목태그</h1>
</body>
</html>- 위에서 준 [ $('h1').css('color','red'); ] 표현식은 h1태그를 선택해서 CSS의 글자색을 빨간색으로 변경하라는 구문입니다.
- 더 자세한 문법은 다음 강의에 보도록 하겠습니다. 여기서는 위쪽에 작성해서 적용이 안되는 것을 보도록 하겠습니다.
## 표현식을 <body>태그 위쪽에 쓴 경우의 결과
- 전혀 색상이 바뀌지 않는 것을 볼 수 있습니다.
## 표현식을 <body>태그 안쪽 아래에 쓴 경
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 준비구문</title>
<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<h1>제목태그</h1>
<script>
$('h1').css('color','red');
</script>
</body>
</html>
## 표현식을 <body>태그 안쪽 아래에 쓴 경우 결과
- 글자색이 빨간색으로 변경된 것을 확인할 수 있습니다.
- 하지만 스크립트 태그를 위쪽에 쓰기 위해 사용하는 것을 준비구문이라고 볼 수 있습니다.
- 아래쪽에서 세가지 종류를 비교해보도록 하겠습니다.
2. 준비구문의 종류
- 준비구문은 크게 세가지 종류를 나뉩니다. 어떤 것을 사용해야할지 아래 예제들을 보고 확인해보도록 하겠습니다.
1) $(document).ready(function(){});
- 문서객체가 준비되고 나면 스크립트(제이쿼리) 명령을 실행하라는 구문입니다.
- 뒤에서 배울 load와는 다르게 DOM트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할 때 적합합니다.
- 그러니까 <body>내부에 있는 태그들만 읽으면(이미지나 동영상이 다 읽혀지지 않아도) 실행되기 때문에 속도가 빠른 편입니다.
- 그리고 자바스크립트에서 사용하는 [ window.onload = function(); ]은 한번만 작성하도록 되어 있지만 제이쿼리의 준비구문은 여러번 작성할 수 있어서 변수
## 문법
$(document).ready(function(){
//제이쿼리 명령문
});
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 준비구문</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('h1').css('color','red');
});
</script>
</head>
<body>
<h1>제목태그</h1>
</body>
</html>
## 코드 결과
- 글자색이 빨간색으로 변경된 것을 확인할 수 있습니다.
- <script> 태그가 <body> 태그의 위쪽에 써있어도 잘 적용되는 것을 확인할 수 있습니다.
2) $(function(){});
- 위의 [ $(document).ready(function(){}); ]구문을 줄여서 쓴 축약버전입니다.
- 사용은 똑같습니다. DOM Tree가 읽어지고 나면 실행됩니다.
## 문법
$(function(){
//제이쿼리 명령문
});
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 준비구문</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('h1').css('color','red');
});
</script>
</head>
<body>
<h1>제목태그</h1>
</body>
</html>
## 코드 결과
- 글자색이 빨간색으로 변경된 것을 확인할 수 있습니다.
3) $(window).load(function(){});
- 자바스크립트의 준비구문 형태를 제이쿼리 형태로 작성한 구문입니다.
- 이 준비구문은 html의 로딩 즉 화면에 필요한 모든 요소(css, js, image, iframe)들이 웹브라우저 메모리에 모두 올려진 다음에 실행됩니다.
- 그래서 [ $(document).ready(function(){}); ]에 비해 속도가 좀 느립니다.
## ready 와 load 의 차이
- 이런 흐름으로 처리되기 때문에 ready가 훨씬 빠릅니다.
- 하지만 이미지의 높이를 인식해야한다든지, 동영상의 시간을 인식해야한다든지하면 load를 사용해야 합니다.
## 문법
$(window).load(function(){
//제이쿼리 명령문 실행
});
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 준비구문</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
var h = $('img').height();
$('.ready').html(h);
});
$(window).load(function(){
var h = $('img').height();
$('.load').html(h);
});
</script>
</head>
<body>
<img src="http://placehold.it/200x200" alt="예시이미지">
<h3>ready시 이미지 높이인식 : <span class="ready"></span></h3>
<h3>load시 이미지 높이인식 : <span class="load"></span></h3>
</body>
</html>
## 코드 결과
- ready() 는 <img /> 태그의 DOM Tree만 인식하므로 인식은 하지만 높이를 처리하지 못합니다.
- load() 는 <img /> 태그가 모두 로드되어야 인식은 하므로, 높이를 처리합니다.
- 특히 이 예시는 외부이미지를 가져왔기 때문에 더 잘되지만, 내부 이미지인 경우는 빨리 인식해서 둘다 200으로 처리될 수도 있습니다. 하지만 로딩이 느리면 매번 다를수 있으므로 load() 를 쓰는 것이 더 효과적입니다.
'웹언어 > jQuery' 카테고리의 다른 글
| [jQuery강좌] 6강 문서객체 DOM Tree 이동 메서드 (0) | 2021.06.29 |
|---|---|
| [jQuery강좌] 5강 문서객체 필터(filter) 메서드 - 오쌤의 니가스터디 (0) | 2021.06.26 |
| [jQuery강좌] 4강 문서객체 메서드 문법 - 오쌤의 니가스터디 (0) | 2021.06.24 |
| [jQuery강좌] 3강 제이쿼리 문서객체 선택자 - 오쌤의 니가스터디 (0) | 2021.06.22 |
| [jQuery강좌] 1강 제이쿼리 플러그인 설치 - 오쌤의 니가스터디 (0) | 2021.06.21 |
