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

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..

DOCTYPE html> Kakao 지도 시작하기 var container = document.getElementById('map'); var options = { center: new kakao.maps.LatLng(33.450701, 126.570667), level: 3 }; var map = new kakao.maps.Map(container, options);

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 설정을 했엇다..

DOCTYPE html> 파일 업로드 전송

써머노트(Summernote) $('#summernote').summernote({ placeholder: 'Hello stand alone ui', tabsize: 2, height: 120, toolbar: [ ['style', ['style']], ['font', ['bold', 'underline', 'clear']], ['color', ['color']], ['para', ['ul', 'ol', 'paragraph']], ['table', ['table']], ['insert', ['link', 'picture', 'video']], ['view', ['fullscreen', 'codeview', 'help']] ] });

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..

$(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..

DOCTYPE html> 차트 $(function () { //canvas 제어 방식 // - canvas는 Javascript API로 제어한다 // - canvas의 그림 그리는 도구를 context 또는 graphics라고 부름 var canvas = document.querySelector(".sketch"); var context = canvas.getContext("2d") context.fillStyle = "rgb(200,0,0)"; context.fillRect(10, 10, 50, 50); context.fillStyle = "rgb(0,200,0)"; context.fillRect(30, 30, 50, 50); }); 캔버스 태그

DOCTYPE html> ajax 템플릿 $(function(){ $(".load-btn").click(function(){ //[2] 템플릿을 가져와서 원하는 데이터로 치환한 다음 추가 //목표 : #template을 복사하여 컨테이너 하단에 추가 var template = $("#template").html(); var htmlTemplate = $.parseHTML(template);//문자열 --> HTML //jquery를 이용하여 htmlTemplate의 특정 값을 변경 $(htmlTemplate).find(".name").text("라이츄"); $(htmlTemplate).find(".no").text("27"); $(htmlTemplate).find(".type").text("벼락"); /..

DOCTYPE html> 닉네임 체크(ajax) $(function(){ $("[name=memberNickname]").blur(function(e){ var nickname = $(this).val(); if(nickname.length == 0) return; $.ajax({ url:"http://localhost:8080/nicknameCheck", method:"post", data:{//post일 경우만 사용 가능 memberNickname : nickname }, success:function(response){ //(주의) 여기서의 this는 ajax 실행 객체(태그가 아님) $(e.target).removeClass("success fail"); if(response == "Y") { $..