목록WebFront_ (40)
YJ의 새벽
Daum Postcode Service User Guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 참고 !! ** jsp onclick="함수명" 에다가. onclick="return 함수명" 을 넣어주자 .
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cuAWV1/btsafO4mXnL/XJQxYc6zzDvtu8KvmC0xOK/img.png)
-- 서버 재실행하면 , 체크박스가 모두 풀린다 . 수정해보자 . --- window.onload 에 체크박스 N / Y 값 확인하는 ajax 추가. $.ajax({ url : "checkcheck", data : { "spanInput1" : span.innerText }, type : "POST", success: function(result){ if ( result == 1 ){ checkBox.checked=true; span.style.textDecoration="line-through"; span.style.color="gray"; count--; updateCount(); } }, error : function(result){ console.log(result); } }); --- 체크가 된..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/coj7wh/btsaeYe40H3/418MJ8Km4Xhc5DKN4dvlm0/img.png)
-- 버튼하나 만들어서 . 체크된것만 삭제 시켜보자 . -- 테이블에 체크를 확인하는 컬럼을 만들어준다 . -- 기본값 N , 체크 됐을때 Y 로 바뀌는 .ajax .js 에 추가 . -- window.onload 함수와. Add 버튼클릭 했을때 중첩되는 부분에 코드를 중복해서 넣어줬다 . checkBox.addEventListener("click",function(){ // check 시 취소선 if ( checkBox.checked ){ span.style.textDecoration="line-through"; span.style.color="gray"; count--; $.ajax({ url : "checkList", data : {"checkList" : span.innerText}, type :..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cyGE9E/btr94xtm7wv/46F8FIeZbkXSSHYoldnbK0/img.png)
-- DB 저장된 목록들이 바로 보이게된다 . -- 즉시실행함수를 만들어보자 . ( window.onload ) -- todojs.js 파일에 함수 추가 . -- Add 버튼 눌렀을때 createElement 한 Element들과 , -- 즉시실행했을때 표시되는 Element들이 똑같다. -- 복붙으로 가져왔지만.. 하나로 쓸수있는법을 찾아보자 . function select(){ $.ajax({ url : "TodoSelectAll", type : "POST", dataType : "JSON", success : function (todoList){ todoListId.innerHTML=""; $(todoList).each(function(){ if ( this!=null){ const li = doc..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/unO47/btr9NBwXk2l/O4b2ARmhTrk4VYBGUItNb0/img.png)
만든 TodoList DB 까지 연동해보자 . -- Add 버튼 눌렀을때 . -- DB 에 추가된거 확인 . -- Delete 버튼 눌렀을때 . -- DB 에서 삭제된거 확인 . -- All Delete 눌렀을때 . -- 전체삭제 확인. --- Add 버튼 눌렀을때 이벤트로 ajax 실행 ( " /addList " ) 로 Servlet 에게 패스 ! -- Add 버튼 눌렀을때 createElement 하기때문에 . -- Add버튼 눌렀을때 --> Delete버튼 눌렀을때 --> ajax 실행 ( "/deleteList" ) 로 Servlet 에게 패스 ! --- todojs.js 코드 addBtn.addEventListener("click",function(e){ // Add 버튼 눌렀을때 . if ( ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/JXAB3/btr9DUoT0n1/EswdNDHTSADob9sLGSsq10/img.png)
---- 할일을 작성후 , Add 버튼을 누르면 ?? --- 체크리스트 check 했을때 . ---- Active 버튼 눌렀을때 !! ( span 태그로 만듬 ) --- Complete 버튼 눌렀을때 !!!! --- ALL 버튼 눌렀을떄 !!! ---- All Delete 눌렀을때 !!! --- HTML 코드 . To_Do List Add 남은 할일 : ALL Active Complete All Delete ---- CSS 코드 body { font-family: sans-serif; } .container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; border-radius: 10px; } h1 { text-..
Effect 메소드 ( 시각적 효과 ) -- 요소에 애니메이션 효과를 만들기 위한 메소드 집합 - $("요소명").메소드명(); - $("요소명").메소드명([speed]); - $("요소명").메소드명([speed], [easing], [callback]); speed : 실행속도 (ms) / 숫자 or slow , fast . easing : 변경되는 지점별 속도 / linear , swing callback : 메소드 실행 후 실행할 함수 show () , hide () 메소드 -- 요소를 점점 커지게 하면서 화면에 나타나거나 요소를 점점 작게 하면서 화면에서숨기는 메소드 fadeIn() , fadeOut() -- fadeIn() : 점점 불투명해지면서 나타남 -- fadeOut() : 점점 투명해..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/WCOOJ/btr2hJvZI4v/ohCaU5RKTdheh5FkBfeuKk/img.png)
-- html() : 요소에 작성된 내용을 얻어옴 (태그포함) - html("내용") : 요소에 내용 출력 (태그인식 O) == innerHTML -- text() : 요소에 작성된 내용을 얻어옴 (태그 미포함) - text("내용") : 요소에 내용 출력 (태그인식 X ) == innerText -- val() : value 속성값을 얻어옴. - val("내용") : value 속성값을 지정 기존에 작성되어있는 요소 html() 메소드 $("#btn1").on("click",function(){ // 아이디가 area 인 요소의 내용을 모두 삭제 $("#area").html(""); //아이디가 area 인 요소에 내용 출력 (태그포함) $("#area").html("html() 메서드로 작성된 내용"..