오중호랑이
오중호랑이의 비밀로그
오중호랑이
전체 방문자
622,412
오늘
2
어제
13
  • 전체보기 (171)
    • 일상 (120)
    • 개발 (18)
      • 일반 (13)
      • 호랑이와 jQuery (5)
    • 외로움 상자 (33)
      • 호랑이단편집 (2)
      • 힙 to the 합 (4)

최근 글

  • 베스트필드 한줄평
    2022.11.30
    베스트필드 한줄평
  • 알림톡입니다. 많이 알려주세요.
    2022.11.30
  • 알뜰폰은 역시 모빙
    2022.10.08
    알뜰폰은 역시 모빙
  • 네이버지도 Javascript API v3 현위치 표시하기
    2022.08.23
    네이버지도 Javascript API v3 현위치 표시하기
  • 관평동 라면우에무라 첫방문 팁💡
    2022.08.16
    관평동 라면우에무라 첫방문 팁💡

최근 댓글

  • 서버쪽 맥이 잠든상태에서도 가능한건가요?
    맥
  • 글 잘보고 갑니다
    나리카페
  • 정말 고맙습니다. 덕분에 예전 노래들을 꺼낼수 있엇네요
    잠자는아이팟
  • 선생님 잘 사용중입니다! 근데 줄 개행된곳은 띄어쓰기가⋯
    오잉
  • 감사합니다
    오중호랑이
hELLO · Designed By 정상우.
오중호랑이

오중호랑이의 비밀로그

jQuery ready와 load의 차이
개발/호랑이와 jQuery

jQuery ready와 load의 차이

2013. 2. 16. 02:32

자 마음에 드는 편집기를 실행해주세요.

윈도우에서는 무료 노트패드++, 유료 에디터플러스를, 맥에서는 무료 TeextWrangler 유료coda2를 추천합니다.
무엇을 사용하던 크게 상관 없습니다.
다만 기본적으로 Syntax Highlight[각주:1]를 지원하는 편집기를 이용하세요.
가끔 "나때는~ 아무것도 없는 노트패드(메모장)로 ...어쩌고" 라고 으시대는 사람도 있지만요.

위 이미지와 같이 한개의 html 문서를 만드세요.
앞장에서 배운 jQuery를 불러오는 소스를 <head>와 </head>사이에 넣었습니다.
그리고 우리가 편집해야할 부분은 바로 5번째 라인입니다.
보통의 경우 console.log를 사용하여 콘솔에 로그를 찍어봅니다만, 확실히 확인하기 위하여 alert함수를 사용하기로 합니다.
alert함수는 알다시피 파라메터를 메시지로 경고합니다.

alert('ojtiger.com');

5번 라인에 위 소스를 추가해보세요.
저장하시고, 페이지를 실행시켜보세요.

여기 까지 따라왔다면 정말 소질이 있는분입니다.
그럼 jQuery를 사용하여 alert함수를 실행해 보도록 하겠습니다. 방금 추가한 5번째 라인을 삭제하시고 다음과 같이 입력해보세요.

$(document).ready(function(){
	alert('ojtiger.com');
});

저장하시고 페이지를 새로고침 해서 다시 실행해보세요.
새삼스럽게 이미지를 올리지 않을꺼에요. 결과는 같습니다 다만 과정은 다릅니다.
앞서 alert만 호출한 경우와는 다르게 jQuery를 이용하여 호출한 alert은 ready 메소드를 사용하여 문서의 DOM이 모두 로드 되었을때 실행되었습니다.
비슷한 방법으로 다음과 같은 방법이 있습니다.

$(window).load(function(){
	alert('ojtiger.com');
});

이것도 결과는 같습니다. 하지만 내부적으로 어떠한 순서의 차이가 있습니다.

브라우저가 HTML파일을 읽어오는 순서

 

오잉

 

이해가 됐나요? 우리는 특별한 이유가 없으면 첫번째 방법인 ready메소드를 사용해서 jQuery를 구현해 나갈 것 입니다.
자바스크립트 조차 몇번 다루어보지 않아서 메소드가 뭔지, DOM이 뭔지 모르시겠다구요?
아직 충분히 몰라도 좋습니다. 위 소스와 아래 호랑이의 설명을 보고 이해하려 하지마시고 그냥 외우세요.
다 외우셨으면 다음장으로 넘어가기에 충분합니다.

$ = 그냥 문법입니다. 모든 셀렉터앞에는 '$'를 사용합니다.
document = 셀렉터입니다. 괄호안에 CSS 문법을 사용해서 html문서의 요소를 선택할 수 있습니다. 다만, 여기서는 document란 값을 주어서 문서전체를 선택했네요.
.ready = 레디 메소드 입니다. "준비가 되면" 으로 이해하시면 됩니다.
function = 핸들러입니다. 핸들러가 뭘까요, 이해하려하지마세요 넘어가도록 하겠습니다.

아직 모르시겠다면 예제를 다운로드 받아보세요.

example02.zip
다운로드

  1. 문법에 색상을 더해주는 기능 [본문으로]
    '개발/호랑이와 jQuery' 카테고리의 다른 글
    • jQuery 숨기고 보이는 레이어
    • jQuery 폼 컨트롤 하기
    • jQuery 요소를 컨트롤 하기
    • jQuery 시작하기
    jquery, load(), ready()
    오중호랑이
    오중호랑이
    ojtiger@ojtiger.com
    댓글쓰기
    jQuery 요소를 컨트롤 하기
    다음 글
    jQuery 요소를 컨트롤 하기
    jQuery 시작하기
    이전 글
    jQuery 시작하기

    티스토리툴바