[jQuery 1장] $(document).ready 가 모예요?

* 해당 내용은 본인의 생각으로 작성하는것으로... 잘못알고 있는 부분들은 댓글이나 쪽지를 통해 알려

   주시면 감사하겠습니다 ^^

 

jquery는 http://jquery.com 에 들어가셔서 다운받으시면 되고요.

 

저는 1.9 버전으로 진행을 하도록 하겠습니다.

 

우선은 환경은 에디트플러스나 메모장이나 모든지 상관이 없습니다.

저는 jsp 환경으로 샘플작업을 하므로 이클립스로 작업했습니다.

 

$(document).ready(function(){

 

});

 

저게 무엇이냐! 자바스크립트의 onload와 같은 기능을 하는놈으로 알고 있습니다.

모든 html 페이지가 화면에 뿌려지고 나서 저 ready안에 서술된 이벤트들이 동작준비를 하는것이죠.

저 위의 놈을 다음과 같이 줄여서 해주셔도 같습니다.

 

$(function(){

 

});

 

더 간결 해졌죠? ㅎㅎㅎ

뭐 어찌됏든... 버튼 클릭시, helloworld 를 화면에 찍어보도록 하겠습니다.

 

 

첫번째, onload안에 기술을 안하고 click 이벤트를 작성할경우

 

 

 

 

어라? 클릭을 했는데 안먹힙니다. 왜그런거지???

이유는 $("#clickButton").click << 이거 설명을 풀어 설명을 하자면

​

1) # - (태그 id가)

​2) clickButton - (clickButton라고 지정되있는태그를)

3) click - (클릭이벤트를 주었을때)

4) alert("HelloWorld!!")  - HelloWorld!! 라는 경고창을 화면에 뿌려준다 입니다.

​

하지만 html 소스 흐름은 위에서 아래로 순차적으로 진행이 되는걸로 알고 있습니다.

그래서 clickButton 아이디를 가진놈은 밑에있죠? 그래서 위에서는 이미 clickButton 아이디를 가진놈에 한 클릭이벤트를 정의를 해주었으나 clickButton 아이디가 없는 상태로 기술된거라 버튼클릭할때 인식을 못하는거예요

 

이게 중요합니다 위에서 -> 아래로... ㅎ

 

그렇다면~ 저 스크립트 소스를 id가 clickButton이 태그밑에다 기술을 해볼게요

 

 

짜잔~ 경고창이 떳군요!! ㅋ 저런식으로 해도 결과물은 나오긴 하지만 본인은 이벤트들은 onload를 통해서 진행을 해야한다고 생각을 해서 onload 안에 넣기로 했습니다!

​

자 첫번째랑 같은 소스인대 click이벤트가 onload 안에 넣었을뿐입니다.

아까는 안나왔는데 이번에는...??? 

 

경고창이 잘나왔네요 ㅎㅎㅎ

 

도대체 onload가 뭐길래 나오는거냐! 라고 궁금해하시는 분들을 위해서 제가 생각하는 흐름을 말씀드릴게요

 

소스는 위 --> 아래라고 아까도 말씀 드렸었죠?

​

추가내용을 붙이자면...

위 -> 아래 -> 스크립트 onload 입니다.

 

혹시 당신말대로 위->아래면 위-> onload -> 아래 아니냐? 이러실 분이 계실거 같아서 흐름을 한번 찍어봤습니다.

 

 

 

아 -> 아아 -> 아아아

이런 순서로 console.log가 찍혔죠?

onload가 제일 마지막에 호출이 된다는것이 확인이 됐습니다.

 

이제 $(document).ready(function(){})  이놈이 왜 필요한지 감이 오시나요?

안오신다면 계속 연습만 살길입니다 ㅎㅎ

 

다음에는 정확한 명칭이 무엇인지 기억은 안나지만 태그? 들을 찾는 방법을 작성하겠습니다~

끝

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!