2017-05-17-P

JQuery 응용하기

이렇게 적엇을때 마우스 오버라는 뜻은 마우스를 여기로 움직엿을때를 말한다.

실행 결과를 보면

실행결과는 이런식으로 숫자가 계속 올라가게끔 만들어진것이다.

다음으로

이와같이 적어줬을떄는 첫번째 아이디 입력하는 값이 blur(포커스 되지 않았을때)

길이가 4보다 작으면 name을 입력하세요 라는 글이 뜨도록 만들어놓은것이다

실행결과를 보면

이런상태였던 것이 아이디에 입력된게 4보다 작게 되면

이런식으로 결과가 나오게 되는것이다.

다음은 animate에 관련된 내용이다 animate는 효과를 주는것이다.

먼저 아래의 사진과 같이 글을 작성한다.

바디의 내용을 다읽고 준비를 한후 id가 puppy인걸 보여달라는 뜻이 9번 라인이다 

10번줄의 주석은 id가 puppy를 보이지 않게 해달라는 뜻이다

그후 11번 라인과 같이 var = flag 변수를 선언하고 그 값을 false 로 만들어준다

그리고 버튼 태그를 클릭하였을때 아래의 function 함수를 실행해 달라는것이다

만약에 flag의 값이 true면 아래 id puppy를 가진것이 animate를 해주게 되는데 0px 만큼 움직여 달라는 뜻이고 또한 여기서는 1개의 값만 넣어준것이다.

또 클릭햇을때 만약 flag의 값이 true가 아닌 다른 값이 나오면 id puppy를 가진것이

animate 되고 21번문과 같이 움직이면서 알림창이 뜨게 된다.

opacity 0.5 라는 값은 불투명도를 말하는것이다.

22번에서 26번의 주석문은 읽어보는것이 좋다.

그리고 13번의 문은 느리게 보여주고 14번의 문은 느리게 토글 버튼으로 보달라는것이다

여기서 토글은 누르면 켜지고 다시 그 버튼을 누르면 꺼지는 이런 방식이다.

그리고 18번 문과 27번문을 통해서 계속해서 flag의 값을 ture false로 계속해서 바꿔주게 되므로

누를때마다 사진이 움직이게 되는것이다.

다음은체이닝에 관련한 내용이다

이런식의 DTO 가 있다 그런데 여기서 전역변수에 값을 셋팅하기 위해서는 main이라는 부분에서 set 메서드를 통해서 2개의 메서드를 통해서 셋팅하여야한다. 하지만 여기서 체이닝을 통해서 자기자신을 리턴받아서 체이닝해주게 되면

이런식의 문이 된다 여기서 set 메서드의 리턴타입을 A 으로 받고 리턴해준값을 this 통해 자기 자신을 리턴해주게 되면 맨 아래와 같이 a.setX(10).setY(20); 의 문과같이 한번에 체이닝해서 값을 셋팅할수 있게 된다.

다음으로는 append와 empty 에 관한 내용이다.

아래와 같이 문장을 만들어준다

이런식으로 적어주게 되면 2개의 버튼이 있다 하나는 append 라는 버튼과 empty 라는 버튼이 생기고

script를 통해서 id가 append 인것을 클릭하면 i의 값이 계속 늘어나면서 id가 result인 것에 append안에 문장을 계속 추가해주는 개념이라고 생각하면된다 append는 추가라는 개념을 가지고 있고

만약 append 부분에 html 이 들어가게되면 숫자는 계속 올가면서 같은 <li>가 계속해서 바뀌게 되는것이다.

실행 결과를 보여주게 되면

이런식의 결과가 보여지게 되는것이다.

그리고 15번과 16번문을 설명하자면 

id가 empty인 것을 클릭하면 id가 result인것을 empty 해달라는 것이다.

즉 empty는 선택된 요소의 안에 있는것들만 삭제한다.

만약 remove를 적게 되면 선택된 요소와 안에있는것들 모두가 삭제된다.

이제 실행결과를 보게 되면

이런식으로 내용이 삭제가 되는것이다.

그런데 이때 다시 append를 눌러주게 되면 다시 끊어진 숫자부터 시작하기 때문에

16번문 안에 i=0; 을 추가해주면 다시 i의 값은 0 이 되어서 append를 눌렀을때 다시 1부터 시작하게 된다.

모든문을 이용해서 예제를 만들어본다면

이런식으로도 작성을 할수 있게 된다.

3장의 사진이 <<< >>> 버튼을 통해 계속해서 순환 하게 끔 만드는것이다.

9번문에서 i 의 값을 1 로 설정해주고 

그다음 10번문을 통해 id가 pic것을 attr 을 이용해 이미지를 불러온다

그후  id가 prebtn 인것을 클릭햇을때 i 숫자가 계속 증가하고 만약 i 의 값이 3보다 커지면 다시 i의 값을 1로 바꿔 주게 만들고 마찬가지고 10번문을 붙여주게 되면 사진의 이름이 1,2,3 이라고 저장되있으면

클릭햇을때 i는 증가하므로 i=2가 되고 2번의 사진이 나오게 된다,그리고 3보다 커진 4가 되었을경우

1번 사진이 나오게 된다.

마찬가지로 id가 nextbtn 인것을 클릭햇을때 i 숫자가 계속 감소하고 i의 값이 1보다 작아질경우 i의 값이

3이 되게끔 만들어 주면 순환하게 되어 1보다 작은 0 이되면 다시 3번 사진이 나오게 된다.

Ajax 이용하기 Ajax는 페이지와 페이지가 아닌 페이지에 데이터만 불러오는 기술방식이라고 생각하면된다. 예를들면 네이버 실시간 검색같은 경우는 페이지에서 페이지로 넘어가면서 가지고있던 데이터가 모두 사라지고 이동하는게 아니라 원래 있던 페이지에 Ajax 기술을 통해서 데이터만 가지고 와서 업데이트 되는 형식이라고 생각하면 된다. 활용해서 만들어보자면

이런식의 파일을 만들고 채워준다

설명을 하자면 버튼 태그 안에 있는 output 버튼을 클릭하면 10번 문 안에 있는 함수가 실행된다

여기서 데이터를 요청하겟다는 문에 get 문이다 $.get을 통에 그 안에 있는 문을 studentList.json 안에 내용을 뒤에 function의 매개변수로 입력하여 요청하겠다는 소리이다.

그런다음 json 매개변수로 받은값을 받아서 each 를 통해서 함수를 실행하고 그안에 ul태그안에 append로 저걸 추가하겠다는 뜻이된다.

지금은 ./studentList.json 파일이 없기때문에 만들어준다.

file 을 통해 그냥 저 이름의 파일을 만들어주고 안을 이렇게 채워주고 실행하게 되면

이런식으로 나오게 된다.

이제 이걸 DB에서 가지고온 데이터를 자바 객체로 만들고 그 자바객체를 다시 json문자열로 다시 바꿔주는걸 해보자

먼저

java 파일로 Board.java 를 만들고 그안을 그림과 같이 채워줍니다.

그후 studentList.jsp파일을 만들어줍니다.

그다음 그안을

이렇게 만들어주게 되면 21번에서 29번까지를 보면 Board라는 DTO에 받아온 값들을 set메서드호출하는데 rs.get 메서드들을 통해 값을 받아서 board 내에 셋팅한다. 그전에 미리 20번문을 통해 Board라는 배열을 만들어 놓고 주소값을 받는다.

그리고 http://www.mvnrepository.com 페이지에 들어가서 검색어를 Gson 이라고 치고 맨위에꺼를 클릭해 들어가 2.8버전을 다운로드하고 파일을

이안에 추가해줍니다. 그후 31번문에서 34번문을 완성시켜줍니다. gson.toJson 을 통해서 

ArrayList 안에 배열을 json 문자열로 변환해 줍니다. 그런다음 출력해줍니다. out.println를 통해서

그후 ajax.html 파일을만들고 아래와같이 채워줍니다.

설명을 하자면 output이라는 id를가진 버튼을 클릭하게 되면 아래와 같이 요청을합니다. 

./studentList.jsp 를 매개변수로 받아 함수를 안에 함수를 실행해 요청합니다.

17번문에서 받은 매개변수값을 통해서 each 로 값을들 tbody안에 append를 활용해 뿌려줍니다.

(* each 는 배열이 있어야만 사용할수 있다. 배열 군집의 배열 횟수 만큼 반복한다.)

실행결과를 보면

output 버튼 클릭시 이런식으로 결과값이 화면에 뿌려지는걸 볼수있습니다.