Javascript 50

E-mail 전송(인증번호 보내기)

DOCTYPE html> 인증번호 보내기 $(function () { //처음에 로딩아이콘 숨김 $(".btn-send").find(".fa-spinner").hide(); $(".cert-wrapper").hide(); //인증번호 보내기 버튼을 누르면 //서버로 비동기통신을 보내 인증 메일 요청 $(".btn-send").click(function () { var email = $("[name=memberEmail]").val(); if (email.length == 0) return; $(".btn-send").prop("disabled", true); $(".btn-send").find(".fa-spinner").show(); $(".btn-send").find("span").text("이메일 발..

Javascript 2023.11.20

카카오 지도 다루기 3(주소로 지도 찾기)

DOCTYPE html> 주소로 지도 찾기 #map { width:100%; height: 300px; } /* info window */ .outer { font-size: 20px; padding: 0.5em; } .outer > .inner { width: 100%; text-align: center; } $(function(){ //마커와 인포윈도우를 기억해 두기 위한 배열 var memory = { markerList: [], infowindowList: [] }; //var container = document.getElementById('map'); //var container = document.querySelector("#map"); var container = $("#map")[0]; ..

Javascript 2023.11.17

카카오 지도 다루기

DOCTYPE html> 카카오 지도 다루기 #map { width: 100%; height: 300px; } $(function () { //var container = document.getElementById('map'); //var container = document.querySelector("#map"); var container = $("#map")[0]; var options = { //지도의 중심좌표(위도-latiude 경도-longitude) center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 배율(zoom level : 1부터 14까지) level: 3 }; //변수로 만들면 범위 제한이 걸린다. // var map = new k..

Javascript 2023.11.15

파일 업로드2

DOCTYPE html> 파일 업로드 //목표 : 설정하기 버튼을 누르면 선택된 파일을 업로드 하고 이미지 변경 $(function () { $(".btn-save").click(function () { //파일 선택창을 JavaScript 형태로 불러와야함(내장API사용) //var input = document.querySelector(".file-chooser"); var input = $(".file-chooser")[0]; //input이 file일 경우에만 files라는 항목이 존재 console.log(input.files); if (input.files.length == 0) return; //비동기 통신 // -form으로 파일을 전송할때 multipart/form-data 설정을 했엇다..

Javascript 2023.11.13

이미지 슬라이더(Swiper)

DOCTYPE html> 이미지 슬라이더 :root { --swiper-theme-color:rgb(228, 107, 181); } .swiper { width: 100%; height: 300px; } $(function () { var swiper = new Swiper('.swiper', { //direction: 'vertical',//슬라이드 방향 //loop: true,//슬라이드의 순환 설정 pagination: { el: '.swiper-pagination',//적용할 요소 type: 'bullets',//페이지네이션 유형 (progressbar/bullets/fraction) clickable: true,//페이지네이션 클릭가능여부 loop: true, }, // 이동 화살표 naviga..

Javascript 2023.11.08

차트2 (ajax)

$(function () { //시작하자마자 서버로 비동기 통신을 시도하여 //차트 구현을 위한 데이터를 가져온다 $.ajax({ //url: "http://localhost:8080/rest/member/stat/count", // url: "http://localhost:8080/rest/member/stat/year", // url: "http://localhost:8080/rest/member/stat/month", url: "http://localhost:8080/rest/member/stat/date", //method:"get", //data 없음 dataType: "json",//서버에서 받기를 기대하는 형태(아니면 에러처리) success: function (response) { //co..

Javascript 2023.11.07