madori4 madori4

제이슨은 자바스크립트 데이터를 JSON 객체가 처리할 수 있는 데이터 형태로 변환하는 것이라고 이해하면 된다. 인터넷 익스플로러를 제외한 브라우저들은 JSON 객체를 포함하고 있어 다운받지 않아도 parse 등의 함수를 사용할 수 있다. 다운 방법 포스팅1. 구글에 json2.js 검색하면 제이슨 개발한 더글라스 크로포드의 깃허브 페이지가 나온다. 클릭해 접속2. Clone or download 클릭3. 집파일 압축 푼다.4. json2 파일을 자바스크립트와 같이 Context Root 하위에 넣어주면 된다.json 코드 열어보면 주석에 JSON 객체가 없는 경우에만 생성한다고 적혀 있음을 볼 수 있다. 그 구현부가 아래 있고, "JSON의 타입이 object가 아니면 JSON을 객체화 하겠다" 는 의미..

제이슨은 데이터의 전송형태이다. 각종 브라우저 뿐 아니라 모든 언어에서 제이슨 객체(JSON)를 지원하기 때문에 서버에서 데이터를 제이슨 형태로만 전송한다면 클라이언트의 언어에 구애받지 않고 parse 함수를 이용해 데이터를 추출해 사용할 수 있는 것이다. 데이터 전송 형태의 표준정도로 생각해도 큰 무리가 없다고 생각한다. 에이작스 또한 제이슨을 이용해 데이터를 제어하는 대표적 비동기통신 기법이다. 에이작스는 Asynchronous JavaScript And XML의 약어로 자바스크립트를 이용해 서버와 비동기통신을 지원하기 위한 클라이언트 통신기법이다. 비동기통신이란 일반적으로 코드의 라인대로 실행되는 함수들과 달리 실행되는 때를 알 수 없는 경우를 제어하기 위해 제공되는 통신기법을 말한다. 대표적인 것..

체크박스 예외처리에 이어 전체선택, 해제 예제 포스팅 다음과 같이 jsp파일에 체크박스 하나 추가 후 id 부여한다. 이후 다음과 같이 Script 코드 작성 $("#checkAll").click(function(){ // 전체 선택 버튼 클릭시 var checked = $(this).prop("checked"); if(checked){ $(":checkbox[name=checkbox]").prop("checked", true); } else { $(":checkbox[name=checkbox]").prop("checked", false); } }); prop은 property의 약자로 속성을 의미하고, 태그의 attr 값들의 getter / setter 역할을 수행한다. 다음과 같이 checked 변수..

체크박스, 셀렉터를 함께 포스팅했던 예제가 있다. 그 예제에서는 아무것도 체크하지 않고 요청을 하는 경우 예외처리를 위해 서블릿에서 getParameterValues를 통해 받은 String 배열이 null인지 확인하는 절차가 필요했다. 공부하면서 이를 jQuery를 통해 서블릿에 요청 보내기 전에 확인할 수 있는 방법에 대해 포스팅 좌상단 '선택 사진 삭제' 버튼에 클릭이벤트를 작성한다. 작성자는 id를 delete로 해두었기 때문에 $("#delete").click 을 호출한다. $("#delete").click(function(){ if( $("input[type=checkbox][name=checkbox]:checked").length == 0 ){ alert("삭제할 항목을 하나이상 체크해요."..

앞서 jQuery 사이트에서 이벤트 동작법에 대해 학습했다면 코드를 통해 키보드 이벤트 실습. ※모든 jQuery 예제는 아톰(atom)으로 작성했고, 오페라 브라우저를 통해 확인했다. html 문서 작업이 굉장히 편하기 때문에 사용을 권하고, 브라우저는 크롬이나 오페라를 권장한다. 인터넷 익스플로러에서는 같은 결과가 나오지 않는 경우가 굉장히 많을 것이다. ( 브라우저들의 DOM 작성 방법이 표준화되지 않았기 때문) Vacations jQuery Travels - Trip Planner Packages Hawaiian Vacation $399.99 per ticket Tickets: Total Price: $399.99 Call us at 555-25937 to make a reservation tod..

앞서 포스팅한 클릭 이벤트 제어와 마찬가지로 마우스와 키보드의 동작에 대해 학습법 포스팅. 코드 작성법은 거의 유사하기 때문에 사용 빈도 높은 이벤트와 동작 방법에 대해 알아보자. 1. http://jquery.com 접속 2. API Documentation 클릭3. 마우스 내리면 이벤트에 대한 문서들 나온다. Mouse Events 클릭4. .mouseenter() 클릭샘플 코드 맨 아래에 데모창에 마우스를 움직이면 동작법의 차이에 대해 파악할 수 있다. mouseover / mouseout : 해당 공간 내에서 움직여도 숫자가 증가됨. 이벤트 인식이 중복된다. mouseenter / mouseleave : 해당 공간에 한번 들어가면 나올때까지 한번만 인식됨. 이벤트 인식을 정확히 한다. mouseo..

버튼을 클릭했을 때 p태그가 나타나도록 하기 이전 포스팅과 같은 html파일이고 모두 같은 button 태그로 등록되어 있다. 이 버튼들을 클릭했을 때 가격을 보여주고 싶다면 해당 태그들에 클릭이벤트를 주면 된다. 다음의 코드처럼 말이다. ※모든 예제는 아톰(atom)으로 작성했고, 오페라 브라우저를 통해 확인했다. html 문서 작업이 굉장히 편하기 때문에 사용을 권하고, 브라우저는 크롬이나 오페라를 권장한다. 인터넷 익스플로러에서는 같은 결과가 나오지 않는 경우가 굉장히 많을 것이다. ( 브라우저들의 DOM 작성 방법이 표준화되지 않았기 때문) Vacations Vacation Packages jQuery Travels Hawaiian Vacation Comments on this deal: "Ama..

특정 태그를 기준으로 Element를 첨부하고 싶을 때 Selector와 다음 함수들을 사용한다. 코드 먼저 보도록 하자. ※모든 예제는 아톰(atom)으로 작성했고, 오페라 브라우저를 통해 확인했다. html 문서 작업이 굉장히 편하기 때문에 사용을 권하고, 브라우저는 크롬이나 오페라를 권장한다. 인터넷 익스플로러에서는 같은 결과가 나오지 않는 경우가 굉장히 많을 것이다. ( 브라우저들의 DOM 작성 방법이 표준화되지 않았기 때문) Vacations Vacation Packages jQuery Travels Hawaiian Vacation Comments on this deal: "Amazing Deal!" "Can't wait to take this trip!" GET PRICE Call us at ..