개발자의 끄적끄적

[ajax] 로그인 기능 Ajax 예제 Scenario: 로그인을 원래 쌩 jsp로 구성을 해보았엇는데 생각보다 많은게 필요하다. 만약 Jsp로 구성한다면 로그인 -> 로그인ok(로그인이 성공했는지 확인 page) -> 성공시 main (중간에 jsp 페이지를 안두고 구현 해볼려고했는데, 로그인 실패시 alert 창을 띄울수가 없었다.(엄청 고민해봤는데 결국 포기)) 이런식으로 중간에 jsp 페이지를 하나 더 거처야한다. 그러나 Ajax로 구현하면 동적으로 할 수있다. 그리고 페이지또한 로그인->성공시 main 실패시 그냥 alert 창 하나만 띄워주면 됐다. 아주 간편하다. Solutions: Ajax 구문 $('#btn_login').click(function() { var mid = $('#txt_..

[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기 Scenario: Ajax를 이용하여, 특정 Html 요소 불러오기 그 Html 파일내에 특정 태그 요소만 불러오고자 함 Solutions: 제일 고민됬던 부분.1. $.ajax를 써서 어떻게 태그요소만 불러올것인가?? 나는 ajax name:value를 뒤져봤는데 아무리봐도 나오지 않았다. 결국 jquery 메소드를 통해 해결 할 수 있엇다. 총 소스는 (아래) 메뉴 보기 1 메뉴 보기 2 : main 에서 불러올 html 파일 중 식 메 뉴 짜장면 짬뽕 기스면 탕수육 메뉴를 골라주세요. 출처 : https://unordinarydays.tistory.com/90

[javascript] swiper 예제 CSS .swiper-container { width:620px; height:420px; } .swiper-slide { text-align:center; display:flex; /* 내용을 중앙정렬 하기위해 flex 사용 */ align-items:center; /* 위아래 기준 중앙정렬 */ justify-content:center; /* 좌우 기준 중앙정렬 */ background-color:#fff; border:5px solid silver; border-radius:5px; box-shadow:0 0 10px silver inset; box-sizing:border-box; /* 이 설정을 하지 않으면 슬라이드드가 틀어짐 */ /* 아래에 있는 실행..

[JavaScript] $(document).on과 $(document).ready의 차이 1. 첫 번째 문제 : click() 이벤트 선언과 소스 불러오기 jQuery 셀렉터를 이용해서 버튼 클릭 이벤트를 만들어 주고 싶었는데 될 때가 있고 안 될 때가 있었다. 이 문제는 간단 했다. html 소스를 두 개의 파일로 분리해서 사용하고 있었는데, 버튼이 있는 파일이 로드가 되기 전에 클릭이벤트를 선언해버리니, 인식을 못하고 있는 것이다. 해결방법: $(document).ready() 그래서 이때 나는 $(document).ready() {} 안에 클릭이벤트를 써서 해결하였다. 근데 이렇게 해서 사용하다보니, 또 문제가 발생하였다. 2. 두 번째 문제 : 동적으로 생성되는 html 소스에 대한 click(..

[제이쿼리/jQuery] 요소 갯수 구하기 .length 요소 갯수 구하기 $("selector").length; 요소 갯수를 구하는 함수는 2가지 ( length 와 size() ) 있습니다. 현재는 3.0 버전부터 size() 함수가 사라졌기때문에 이후버전부터는 length 를 사용합니다. 사용예는 아래와 같습니다. HTML definition (특히 사전에 나오는 단어나 구의) 정의 (어떤 개념의) 의미[정의] 선명도 term 용어,말 (지속되는・정해진) 기간 기한, 만기 JS var length = $("dl").length; $("#cnt").html("정의목록 갯수 : "+ length).css("background-color","yellow"); 결과 출처: https://javacpro.t..

[jQuery] 체크박스 선택여부, checked처리 라디오버튼 선택과 해제 checked 여부 확인 1 2 $("input:checkbox[id='ID']").is(":checked") == true : false /* by ID */ $("input:checkbox[name='NAME']").is(":checked") == true : false /* by NAME */ checked/unchecked 처리 1 2 $("input:checkbox[id='ID']").prop("checked", true); /* by ID */ $("input:checkbox[name='NAME']").prop("checked", false); /* by NAME */ 특정 라디오버튼 선택 / 모든 라디오버튼 선택해제..

[JavaScript] 시간 지연 함수, 일정 시간 뒤 실행시키기, SetTimeout() [펌] 자바스크립트 함수중에서 자주 사용되는 타이머 함수가 있습니다. 바로 setTimeout()이죠! 아래는 어떻게 동작하고 사용하는지 자세히 알아보고자 합니다. # setTimeout()이란?일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 함수로 setTimeout()을 사용합니다. 앞에서도 말했지만 자바스크립트 함수 중에서도 특히 자주 사용되는 함수 중 하나입니다. 먼저 간단한 문법, 사용방법은 아래와 같습니다. setTimeout(function() { // Code here }, delay); 위 함수는 보통 두 개의 인자를 설정하여 사용합니다. i. 호출될 콜백함수 i..

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