안녕하세요 jQuery 강좌 첫번째 시간입니다.

jQuery 심플하게 설명하여 jquery 입문자들의 이해를 돕고자 

시작하게 되었습니다.


해당 강좌는 jQuery를 설치하지 않고 CDN을 통하여 진행하도록 하겠습니다.^^


우선은 CDN URL을 스크립트태그의 src속성에 적용을 해주시면 되겠습니다.

jquery 최초 쓰던 버전이 1.3 버전이었는데 벌써 1.11에다가 2.x 버전까지 나왔네요!! 


2.x 버전은 뭔지 추후에 확인 해봐야 겠습니다 ㅋ 


슬퍼3


우선은 간단 예제를 들기위한 것이므로 단순하게 1.11.0 버전은로 진행을 하겠습니다.

웹파일을 하나 생성 후 jQuery CDN 스크립트 태그를 include 해주는 것을 우선해주세요


위치는 <body> 태그내에 혹은 <head> 태그내에 상관은 없겠지만 

기본적으로 저는 <head></head> 태그 사이에 넣도록 하겠습니다 .


jQuery CDN INCLUDE

1
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

다음으로는 $(document).ready()에 대하여 설명을 드리겠는대요

1
2
3
$(function(){
// code insert
});

위와 같이 더욱 간결하게 사용하실수도 있습니다.


자바스크립트를 사용하셨던분이시라면 window.onload와 동일한 기능이라고 생각하시면 되겠는대요.

물론 window.onload, $(function(){}) , $(document).ready() 의 onload 스크립트 코드들은 body태그의 모든 태그들이 

출력된 다음에 호출이 되는 코드입니다.


onload 라고 해서 모두 같은 1순위인건 아닙니다.


호출순서는 


1. $(document).ready() = $(function(){}) 

2. window.onload


위 순서입니다.

즉, 둘이 동일하게 body 태그내의 모든 코드를 읽은 후 호출되는 onload 기능들이어도 

순수 window.onload 코드가 가장 나중에 호출이 된다는 것입니다.


그렇다면 HTML 태그가 읽히는 예제를 한번 들어보도록 하겠습니다.


ONLOAD 순서 이해하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
alert("HEAD ALERT 경고창");
window.onload = function(){
    alert("window.onload ALERT 경고창");
}
$(document).ready(function(){
    alert("$(document).ready ALERT 경고창");
})
</script>
</head>
<body>
<script type="text/javascript">
alert("BODY ALERT 경고창");
</script>
</body>
</html>


샘플로 작성한 HTML 코드는 위와 같습니다.

총 4개의 ALERT이 화면에 뜨도록 작성해보았는대요


결과를 미리 예상해보자면 


1차 ALERT 메시지 : HEAD ALERT 경고창

2차 ALERT 메시지 : BODY ALERT 경고창

3차 ALERT 메시지 : $(document).ready ALERT 경고창

4차 ALERT 메시지 : window.onload ALERT 경고창


코드 순서로 따지자면 결과가 위처럼 나올거 같습니다.


호출순서가 


위 -> 아래 -> $(document).ready() -> window.onload 형태라고 말씀을 드렸으니까...

그렇다면 실제로 html 코드를 실행해보도록 하겠습니다.



onload순서



블로그 이미지

532

처음 프로그래밍을 시작한 개발자들은 Hello World!를 기억 할 것이다. Hello world가 Hell World가 될 줄 몰랐던 한 개발자의 이야기. 게시글의 출처를 표기하며, 출처를 남기지 않고 펌을 하는것에 대해 법적 책임을 묻지 않습니다.

댓글을 달아 주세요