신입개발자를 희망하는 오시리엔

DOCTYPE html> 비동기통신(ajax) 아이디 체크 $(function(){ //목표 : 아이디의 입력이 완료되면 중복검사를 요청하여 결과를 출력 $("[name=memberId]").blur(function(){ var id = $(this).val(); $.ajax({ url:"http://localhost:8080/idCheck", method:"post",//전송방식 data:{//전송데이터 memberId : id }, success:function(response){ //아이디가 있으면 "Y" 없으면 "N"이 반환된다 //$(".display").text(response); if(response == "Y") { $(".display").text("이미 사용중인 아이디입니다"); } e..

DOCTYPE html> 비동기통신(ajax) // 목표 : 버튼을 누르면 43.ajax.txt를 비동기통신으로 불러와서 내용을 출력 $(function () { $(".load-btn").click(function () { //$.ajax({옵션}); $.ajax({ //url: "/.43.ajax.txt",//불러올 대상의 주소 //url: "http://localhost:8080/hello",//불러올 대상의 주소 url: "http://localhost:8080/lotto", success: function (response) { console.log(response); $(".display").text(response); } }); }); }); 불러오기

DOCTYPE html> 회원가입(jQuery) 바형태의 최종디자인 /* 진행바 디자인 */ .progressbar { width: 100%; height: 5px; } .progressbar>.guage { width: 0%; height: 100%; background: rgb(131, 58, 180); background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%); /* 스르륵 */ transition: width 0.1s ease-out; } $(function () { //최초 게이지 계산 refreshProgressbar(); //이전이나 다음버튼을 누..

function sample6_execDaumPostcode() { new daum.Postcode({ oncomplete: function (data) { // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분. // 각 주소의 노출 규칙에 따라 주소를 조합한다. // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. var addr = ''; // 주소 변수 var extraAddr = ''; // 참고항목 변수 //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다. if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우 addr = data.roadAddress; } else { // ..

DOCTYPE html> 회원가입(jQuery) /* 진행바 디자인 */ .progressbar { width: 100%; height: 5px; } .progressbar > .guage { width: 0%; height: 100%; background: rgb(131,58,180); background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); /* 스르륵 */ transition: width 0.1s ease-out; } $(function(){ //최초 게이지 계산 refreshProgressbar(); //이전이나 다음버튼을 누르면 진행상황을 파악하여 게이지 계산 $..

DOCTYPE html> 멀티 페이지 $(function(){ //페이지에 버튼이 포함되어 있으므로 DOM 탐색으로 처리 //[1] 첫페이지만 빼고 다 숨김 $(".page").hide().first().show(); $(".btn-prev").first().remove(); $(".btn-next").last().remove(); //[2] 다음버튼을 누르면 버튼이 속한 페이지를 숨기고 뒷페이지 표시 $(".btn-next").click(function(){ $(this).parents(".page").hide().next(".page").show(); }); //[3] 이전버튼을 누르면 버튼이 속한 페이지를 숨기고 앞페이지 표시 $(".btn-prev").click(function(){ $(this)..

DOCTYPE html> 전체선택과 개별체크박스에 대한 이벤트 구현 $(function(){ //전체선택과 개별체크박스에 대한 이벤트 구현 //전체선택 $(".check-all").change(function(){ var check = $(this).prop("checked"); $(".check-all, .check-item").prop("checked", check); }); //개별체크박스 $(".check-item").change(function(){ //var allCheck = 개별체크박스개수 == 체크된개별체크박스개수; //var allCheck = $(".check-item").length == $(".check-item:checked").length; var allCheck = $(".c..

DOCTYPE html> 체크박스 제어 $(function(){ //$(".ck").on("input", function(){}); //$(".ck").on("change", function(){}); $(".ck").change(function(){ //this == 체크박스 //console.log(this.checked);//JS //jQuery에서는 태그의 정보를 읽을 때 두 가지 명령이 있다 //- .prop() 은 자바스크립트에서 관리하는 태그의 정보를 읽는다 //- .attr() 은 태그에 써있는 글자를 읽는다 //- 원래 태그에 존재하는 속성은 prop(), 아니면 attr()을 사용 console.log($(this).prop("checked")); console.log($(this).a..

DOCTYPE html> 회원 가입 페이지 실습 $(function(){ //상태 객체 var status = { memberId:false, memberPw:false, memberPwCheck:false, memberNickname:false, memberContact:false, memberBirth:false, memberEmail:false, memberAddress:false, ok:function(){ return this.memberId && this.memberPw && this.memberPwCheck && this.memberNickname && this.memberContact && this.memberBirth && this.memberEmail && this.memberAddre..

DOCTYPE html> 회원가입 $(function(){ //객체를 하나 만들어서 검사 결과를 저장 //- 검사 결과를 이곳에 저장 var status = { id:false, pw:false, pwCheck:false, ok:function(){ return this.id && this.pw && this.pwCheck; }, }; //$("[name=memberId]").on("blur", function(){}); $("[name=memberId]").blur(function(){ var regex = /^[a-z][a-z0-9]{4,19}$/; var isValid = regex.test($(this).val()); $(this).removeClass("success fail"); $(this)..