JQuery 코드의 형식
JQuery 코드의 형식
■ 지난 글에서 JQuery 라이브러리를 연결하는 과정을 알아봤었는데요. 이번에는 JQuery 코드의 기본 형식을 살펴보겠습니다. JQuery(document).ready() 명령어를 먼저 살펴볼 텐데요.
■ 이 코드는 HTML 문서가 로딩되면 실행되는 명령어입니다. 즉, 브라우저가 실행되면서 HTML 문서가 모두 열리고 나면 실행되는 코드예요. JQuery에서 제공하는 많은 함수와 메서드가 이 명령어에 의존해서 실행하게 되는데요. 이 명령어의 최종 단축 형태는 아래와 같습니다.
$(function(){
실행될 함수 및 메서드;
});
■ 너무 갑자기 확 바뀌어 버렸네요.ㅎㅎ 어떻게 바뀌어 가는지 천천히 확인해볼게요. 먼저 기본 형태부터 다시 보겠습니다.
JQuery(document).ready(function(){
실행할 함수 및 메서드;
});
여기서 맨 앞에 JQuery는 누가 봐도 JQuery에서 제공되고 있다는 점을 나타내기 위한 코드입니다. 그런데 코드를 작성할 때마다 이 녀석을 적어주면 여러 가지로 낭비잖아요. 그래서 [JQuery ▶ $] 이렇게 치환 문자를 제공하고 있습니다.
$(document).ready(function(){
실행 코드;
});
■ 한결 깔끔해졌네요. ^^ 앞에서 이 함수가 하는 역할을 알아봤잖아요? HTML 문서의 로드가 모두 끝나면 실행되는 함수인데요. 모든 JQuery 파일은 이 코드로 시작한다고 해도 과언이 아닙니다. 그래서 이 코드를 더 단축해서 사용할 수 있도록 만들었는데요. 형태는 다음과 같습니다.
$(function(){
실행할 코드;
});
JQuery(document).read(function(){}); 코드가 $(function(){}); 로 바뀌게 된 것입니다. 그럼 마지막으로 예제를 하나 만들어서 HTML 문서가 로드되면 alert를 띄어서 $(function(){});이 제대로 실행되는지 확인해보겠습니다.
■ 지난 글에서 JQuery 라이브러리만 연결해 놓은 HTML 문서입니다.
■ js 파일에 앞에서 알아본 형식으로 함수를 입력하고 실행할 내용은 alert를 띄우는 내용입니다. 브라우저에서 실행해보겠습니다.
■ 본문은 아무 내용도 없지만, HTML 문서가 로드되고 $(function(){}); 함수가 실행되고, 입력한 코드대로 alert 함수가 실행되고 있습니다.
이렇게 해서 JQuery의 기본 코드에 대해서 알아봤습니다. 수고하셨어요.^^