DevelUpTree

유틸리티 메소드 코딩의 시작, TCP School 타입 검사 메소드 타입 검사 메소드 인수로 전달받은 값의 타입 확인 메소드 $.type() $.isArray() $.isFunction() $.isNumeric() $.isEmptyObject() $.isPlainObject() $.isWindow() $.isXMLDoc() $.type() 메소드 자바스크립트의 typeof 연산자는 값에 따라 부정확하거나 모순된 타입 검사 결과를 반환. 제이쿼리는 전달받은 값을 자바스크립트의 내부 클래스와 비교하여 더욱 정확한 타입 검사를 제공하는 $.type() 메소드를 제공. $(function() { $("button").on("click", function() { $("#text") .append($.type(tr..

Ajax 코딩의 시작, TCP School Ajax의 개요 Ajax란? Ajax란 Asynchronous JavaScript and XML을 의미. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 가능 Ajax는 백그라운드 영역에서 서버와 데이터를 교환하여 웹 페이지에 표시. $(function() { $("#requestBtn").on("click", function() { $("#text").load("/examples/media/jquery_ajax_data.txt"); }); }); Ajax 프레임워크 Ajax를 사용하여 손쉽게 개발할 수 있도록 미리 여러 가지 기능들을 포함해 놓은 개발 환경 제이쿼리와 Ajax 제이쿼리에서는 Ajax 기능을 손쉽게 사용할 수 있도록 여러 메..

이펙트 효과 코딩의 시작, TCP School 요소의 표시와 숨김 이펙트 (effect) 효과 이러한 이펙트 효과는 기본 설정으로 바로 사용할 수도 있고, animate() 메소드를 통해 설정을 변경해서 사용할 수도 있다. 요소의 표시와 숨김 (.hide(), .show()) .hide() 메소드 선택한 요소를 순간적으로 사라지게 한다. .hide() 메소드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정 .show() 메소드 선택한 요소를 순간적으로 나타내게 한다. $(function() { $("#showBtn").on("click", function() { $("#text").show(); // id가 "text"인 요소를 나타나게 함. }); $("#hideBtn").on("..

이벤트 처리 코딩의 시작, TCP School 이벤트의 개념 이벤트(event) 란? 마우스를 클릭한다거나, 텍스트 박스에 글을 쓰는 등의 수많은 동작들이 event를 발생시킨다. 이벤트가 발생했다는 것은 웹페이에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미. 이벤트 핸들러(event handler) 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야만 한다. 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행 $(function() { $("button").on({ // 모든 요소에 mouseenter: function() { // mouseente..

스타일 설정 코딩의 시작, TCP School 프로퍼티 설정 CSS 스타일 설정 제이쿼리를 사용하면 선택한 요소의 스타일에 관한 속성값을 쉽게 받아오거나 설정 가능 .css() 메소드 .css() 메소드를 사용하여 선택한 요소의 CSS 스타을 간단하게 설정 가능 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정 $(function() { $("button").on("click", function() { $("p").css("fontSize", "25px"); // 모든 요소의 글씨 크기를 25px로 설정 $("#text").html($("p").css("fontSize")); // 첫 번째 요소의 글씨 크기를 반환 // .css() 메..

요소의 영역 요소의 크기 선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있다. inner와 outer 이미지 참조, TCP School 접두사로 inner가 붙은 메소드 : 선택한 요소의 크기에 padding 영역 포함 접두사로 outer가 붙은 메소드 : padding 영역을 포함하여 border 영역까지 포함된 크기 인수로 true값을 전달 할 시 : padding + border + margin 메소드 반환값 .width(), .height() 요소의 크기 .innerWidth(), innerHeight() 요소 + padding의 크기 .outerWidth(), .outerHeighT() 요소 + padding + border의 크기 .outerWidth(true), .outerH..

요소의 탐색 트리 탐색 (Tree Traversing) 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM 트리를 검색해 나아가는 과정 트리 탐색의 세 가지 영역 조상(Ancestor) 요소 탐색 형제(Sibiling) 요소 탐색 자손(Descenant) 요소 탐색 조상 요소의 탐색 DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메소드 .parent() .parents() .parentsUntil() .closest() 메소드 설명 .parent() 선택한 요소의 부모(parent) 요소를 선택함. .parents() 선택한 요소의 조상(ancestor) 요소를 모두 선택함. .parentsUntil() 선택한 요소의 조상 요소 중에서..

목차 jQuery 요소의 조작 코딩의 시작, TCP School 요소의 추가 제이쿼리는 새로운 요소나 콘텐츠를 쉽게 추가 가능하다. 기존 요소의 내부에 추가 .apeend() .prepend() appendTo() prependTo() .append() 선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가 $(function() { $("button").on("click", function() { $("#list").append(" 새로 추가된 아이템"); }); }); .prepend() 선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 추가 $(function() { $("button").on("click", function() { $("#list").prepend(" 새로 추가된 아이템"); });..

목차 jQuery 기본 코딩의 시작, TCP School jQuery 문법 제이쿼리를 사용하면 간편하게 HTML요소를 선택하고 선택된 요소에 손쉽게 특 동작을 설정 가능 $(CSS선택자).동작함수이름(); $ 제이쿼리를 의미, 제이쿼리에 접근할 수 있게 해주는 식별자 선택자를 이용하여 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정 $() 함수 $() 선택된 HTML 요소를 제이쿼리에서 이용 가능한 형태로 생성해 주는 역할 인수(parms) : HTML 태그 이름 or CSS 선택자를 전달하여 특정 HTML 요소를 선택 가능 $() 함수를 통해 생성된 요소를 제이쿼리 객체라고 표현 Document 객체의 ready() 메소드 보통 자바스크립트코드는 웹 브라우저가 문서의 ..

목차 jQuery 코딩의 시작, TCP School jQuery Open Source JavaScript Library Simple and Short jQuery의 장점 Prototype Dojo Google Web Toolkit MochiKit 주요 웹 브라우저 구버전을 포함한 대부분의 브라우저에서 호환 쉽게 HTML DOM 조작, 간단한 CSS 스타일 가능 애니메이션 효과, 대화형 처리를 간단하게 적용 같은 동작을 하는 프로그램을 더 짧은 코드로 대체 가능 jQuery Version jQuery Version 1 Explorer 6, 7, 8 버전에서의 동작까지 모두 지원 jQuery Version 2 Version 1에서 지원하는 Explorer 6,7,8 버전에 대한 지원을 중단 jQuery Ve..