jQuery Plugin을 이용한 form validation 1. 다운로드http://jqueryvalidation.org 에서 Download를 클릭해서 파일을 다운받습니다. 2. 인크루드 파일 및 설명 jquery.validate : 검증플러그인 (필수)cf.) jQuery 버전은 jquery-1.7.2이상에서 동작되는 거 확인되었습니다. 그 이하는 저도 잘 모릅니다. 한번 확인해보세요! 3. HTML 코드작성자E-mailcellphone제목문의내용비밀번호등록취소 4. 스크립트 코드$(document).ready(function() { $("#frm").validate({ //validation이 끝난 이후의 submit 직전 추가 작업할 부분 submitHandler: function() { va..

dataType속성을 이용한 JSON 데이터 가져오기 1. 다운로드.json 파일 자체는 json 데이터라서 따로 변환 작업을 불요하나, 자바에서는 자바데이터를 JSON 데이터로 변환하는 작업이 필요하다. 해당작업을 하기 위해서는 아래의 jar 파일을 다운받자.https://code.google.com/p/google-gson/downloads/detail?name=google-gson-2.2.4-release.zip에서 파일을 다운받는다.--> 해당 JSP 파일에 추가 2. 파일내용(1) test3.html 프로그래머 디자이너 PM 고객 ajaxReturnOutput (2) test3.jspJSON 라이브러리는 다양하게 존재하는 것 같다.하지만, 사용법은 크게 벗어나지는 않는다. 각각의 라이브러리의 메..

jQuery를 이용해 JSON 데이터 가져오기 1. 준비 파일base.css은 필수 파일이 아님. 2. 각 파일 내용(1) ex1.json[ { "term": "BACCHUS. 바쿠스", "part": "명사.", "definition": "고대인들이 술에 취할 명분으로 편의상 만들어낸 신.", "quote": [ "꼴딱꼴딱 마실수도 있고,", "꿀꺽꿀꺽 마실수도 있다.", "술독에 빠져 줄곧 마시기도 하고", "찔끔찔끔 마시다 밤새 마시기도 한다." ], "author": "애주가" }, { "term": "BACKBITE. 험담하다", "part": "동사.", "definition": "상대방에게 들킬 염려가 없을 때, 그에 관해 본 그대로를 입에담다." }, { "term": "BANG. 빵! 가..

Ajax 데이터통신 기본 1. 파일 내용(1) test.html 글번호 아이디 코멘트 ajaxReturnOutput (2) test2.jsp 글번호: 아이디: 코멘트: 실행결과)버튼 클릭시 출력되는 예제이다. cf.) serialize() 예제 반복횟수 아이디 코멘트 beforeParameter ajaxReturnOutput 출처: https://devbox.tistory.com/entry/jQuery-jQeury를-이용해-JSON-데이터-가져오기?category=578062 [장인개발자를 꿈꾸는 :: 기록하는 공간]

문서 준비 이벤트 jQuery(document).ready(function(){ code });=jQuery(function(){ code });=$(function(){ code }); jQuery에서 문서 준비 이벤트는 웹 브라우저가 HTML의 DOM을 모두 로드할 때를 알려주는 이벤트로, 태그에 jQuery 코드를 삽입할 경우에는 문서 준비 이벤트를 반드시 사용하여야 한다.에 jQuery 코드를 넣을 때에는 문서 준비 이벤트가 필요하다. 문서 준비 이벤트는 ready이다. HTML을 동적으로 조작하기 위해서는 HTML 문서를 모두 로딩해야만 그 다음에 동작을 가하는 jQuery나 JavaScript 코드가 정상적으로작동된다. jQuery에는 ready 이벤트와 똑같은 효과를 나타내는 것이 있는데, ..

Ajax 설정 cp.) 요청 매개 변수와 함께 Ajax 요청을 수행한다. data 속성을 사용하면 요청 매개 변수를 쉽게 지정할 수 있다. $ajax() 메서드의 옵션 객체에 url 속성을 입력하고 data 속성에 객체를 입력한다.ex.) url: 'Home/ActionWithData'. data: name:'rintiantta',age:21, success: function(data) .......이렇게 하면 http://localhost:8080/Home/ActionWithData?name=rintiantta&age=21로 Ajax 요청을 수행한다. 1. $ajax 설정값 (1) url HTTP 요청을 할 대상이되는 url단순히 html 페이지에 대한 주소가 될 수도 있고 WCF.ASMX 서비스에서 ..

Ajax 기초 1. Ajax란?- Asynchronous JavaScript and XML 의 약자- 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다.- 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다.- 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미. 2. 선행지식- 폼 3. $.ajax(settings)- jQuery를 이용한 ajax통신의 가장 기본적인 API- 주요속성 data : 서버에 전송할 데이터, key/value 형식의 객체 dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html) type : 서버로 전송하는 데이터의 타입 (PO..

Chain 1. Chain이란?jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다.이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. 예제1. jQuery를 이용해서 코딩하는 경우 jQuery 예제2. javascript의 DOM을 이용해서 코딩하는 경우 jQuery cp.) 보충 예제 jQuery 태그의 속성을 변경함 chain의 원리jQuery('#tutorial')--> 리턴값.attr('href', 'http://www.naver.com')--> 리턴값.attr('target', '_blank')--> 리턴값.css('color', 'green')-->사슬처럼 연속적으로 명령문을 칠 수 있다. jQuery 2. chain의 장점- 코드가 간결해진..

Animation 지금까지 학습한 effect는 기본적으로 jQuery에 내장된 함수이다.만약 height 말고 width를 조절하고 싶은 경우, 컬러를 부드럽게 조절하고 싶은 경우, 스크롤을 부드럽게 움직이게 하는 효과를 주고 싶은 경우 등 개인적으로 커스터마이징하여 요소에 효과를 주고 싶을 때,jQuery는 이러한 것들을 해결할 수 있는 함수를 제공해주는 데 그것이 바로 animate() 함수이다. .animate(properties [, duration] [, easing] [, complete])returns: jQuery- properties: 움직임을 만들어 낼 수 있는 CSS 속성들- duration: 애니메이션 시간- easing: 애니메이션에 가.감속을 조절- complete: 애니메이션..

Effects 플래시 전용으로만 생각되었던 다양한 모션 그래픽과 애니매이션 그리고 인터랙티브들을 웹 표준에서 작업할 수 있게 제공해주는 것이 바로 JQuery의 Effects와 Custom와 Custom Animations이다. 1. effect 함수의 매개변수(1) duration시간 값으로, 1/1000밀리세컨드 단위이다.문자열로 "show", "normal", "fast"를 사용할 수도 있으며, 이는 각각 200, 400, 600 밀리세컨드를 의미한다.매개변수 생략시 기본 값은 normal이며 400밀리세컨드로 움직이게 된다.(show(), hide() 제외) (2) easingeasing 함수란, 스피드를 조작하여 특별한 효과를 나타나게 하는 함수를 의미한다.jQuery가 기본적으로 가지고 있는 ..