JQuery 시작하기(좀더 자세히 알아 보기)

앞의 <1. JQuery 시작하기> 설명을 조금 자세히 보겠다.

5. 설명(자세히)

위 코드가 실행되는 과정을 전체적으로 살펴보면.

_1. 브라우저에서 lecture.html의 로딩이 끝나면

_2. $(document).ready()가 실행되고 정의된 함수 function(){...}이 실행되면

 이것은 일반적인 자바스크립트 프로그램에서 BODY태그안에 onload='start()' 등으로 호출하는것이나 document.onload=function(){....} 등으로 선언하는것과 대응한다. 이때 JQuery가 이것들과 다른점은 JQuery의 경우 ready()를 여러번 선언할경우 선언된 모든 내용이 실행되는 반면 document.onload=function(){....} 는 마지막 선언된것만 실행된다..

   여기서 $(document)는  JQuery는 객체를 참조하는 방법중에 하나로 직접 $()안에 직접 객체를 넣는방법이다. 이것은 document객체를 참조하여 JQuery오브젝트를 반환한다.

_3. id가 data인 TEXTAREA에서 내용을 읽어서 data변수에 넣는다.

$("#data") JQuery는 객체를 참조하는 방법중에 하나로 CSS식 방법으로 id가 data인 앨리먼트를 참조할때 이렇게 한다.

$("#data").val() 이경우 $("#data")는 TEXTAREA컨트롤인데 JQuery객체는 val()함수로 HTML FORM컨트롤의 값을 가져올 수있다. 반대로 값을 설정할 때는 $("#data").val("값")처럼 val()함수의 인수에 값을 넣어주면 된다.

_4. data 내용을 쪼개서 배열로 만들고 for를돌면서 테이블로 만들어서 str변수에 넣고.

이것은 일반적인 자바스크립트 프로그램이다.

_5. 이것을 id가 output 인 DIV에 넣으면 테이블이 보여지게 된다.

$("#output").html(str) 여기서 $("#output")는 위 $("#data")와 마찬가지로 아이디가 output인 앨리먼트에 해당하고 html()함수에 인수를 넣어서 해당 엘리먼트의 내용을 변경할 수 있다. 이것은 일반 자바스크립트 프로그램에서 innerHTML()함수에 대응한다. html()함수에 인자를 넣지안고 호출하면 값을 설정하지않고 HTML을 가져오게 된다.

정리해보면 TEXTAREA에서 데이터를 읽어 이것을 테이블로 변환하여 DIV 'output'에 넣은 것이다.