위 이미지와 같이 한개의 html 문서를 만드세요.
앞장에서 배운 jQuery를 불러오는 소스를 <head>와 </head>사이에 넣었습니다.
그리고 우리가 편집해야할 부분은 바로 5번째 라인입니다.
보통의 경우 console.log를 사용하여 콘솔에 로그를 찍어봅니다만, 확실히 확인하기 위하여 alert함수를 사용하기로 합니다.
alert함수는 알다시피 파라메터를 메시지로 경고합니다.
1 | alert('ojtiger.com'); | cs |
5번 라인에 위 소스를 추가해보세요.
저장하시고, 페이지를 실행시켜보세요.
여기 까지 따라왔다면 정말 소질이 있는분입니다.
그럼 jQuery를 사용하여 alert함수를 실행해 보도록 하겠습니다. 방금 추가한 5번째 라인을 삭제하시고 다음과 같이 입력해보세요.
1 2 3 | $(document).ready(function(){ alert('ojtiger.com'); }); | cs |
저장하시고 페이지를 새로고침 해서 다시 실행해보세요.
새삼스럽게 이미지를 올리지 않을꺼에요. 결과는 같습니다 다만 과정은 다릅니다.
앞서 alert만 호출한 경우와는 다르게 jQuery를 이용하여 호출한 alert은 ready 메소드를 사용하여 문서의 DOM이 모두 로드 되었을때 실행되었습니다.
비슷한 방법으로 다음과 같은 방법이 있습니다.
1 2 3 | $(window).load(function(){ alert('ojtiger.com'); }); | cs |
이것도 결과는 같습니다. 하지만 내부적으로 어떠한 순서의 차이가 있습니다.
브라우저가 HTML파일을 읽어오는 순서
이해가 됐나요? 우리는 특별한 이유가 없으면 첫번째 방법인 ready메소드를 사용해서 jQuery를 구현해 나갈 것 입니다.
자바스크립트 조차 몇번 다루어보지 않아서 메소드가 뭔지, DOM이 뭔지 모르시겠다구요?
아직 충분히 몰라도 좋습니다. 위 소스와 아래 호랑이의 설명을 보고 이해하려 하지마시고 그냥 외우세요.
다 외우셨으면 다음장으로 넘어가기에 충분합니다.
$ = 그냥 문법입니다. 모든 셀렉터앞에는 '$'를 사용합니다.
document = 셀렉터입니다. 괄호안에 CSS 문법을 사용해서 html문서의 요소를 선택할 수 있습니다. 다만, 여기서는 document란 값을 주어서 문서전체를 선택했네요.
.ready = 레디 메소드 입니다. "준비가 되면" 으로 이해하시면 됩니다.
function = 핸들러입니다. 핸들러가 뭘까요, 이해하려하지마세요 넘어가도록 하겠습니다.
아직 모르시겠다면 예제를 다운로드 받아보세요.
example02.zip
'Programming > HTML&CSS&JS' 카테고리의 다른 글
| 첨부파일 byte 용량 계산 [bytes, KB, MB, GB, TB, PB으로 변환] (0) | 2017.12.08 |
|---|---|
| html css 태그, div 중앙정렬 방법 6가지 (0) | 2017.11.23 |
| 애플릿위에 엘리먼트 올리기 (0) | 2017.01.05 |
| [번역] 자바스크립트 클래스를 정의하는 3가지 방법 (3 ways to define a JavaScript class) (0) | 2016.12.28 |
| 자바스크립트 객체 생성 방법 (0) | 2016.12.28 |