본문 바로가기

개발/자바스크립트 및 프론트25

JSP, JS ) 네비게이션(Navigation) 탭 active 만들기 navigation.jsp A탭 B탭 C탭 D탭 2023. 7. 17.
자바스크립트 ) 부트스트랩에서 Modal 닫기 버튼 무력화 하기 HTML 자바스크립트 document.addEventListener("DOMContentLoaded", function () { var modalOptions = { backdrop: 'static', // background 클릭 시 모달이 꺼지지 않도록 설정 keyboard: false // ESC 키 누를 때 모달이 꺼지지 않도록 설정 }; var modalElement = document.getElementById("modal-bldsel"); var modal = new bootstrap.Modal(modalElement, modalOptions); var closeButton = document.getElementById("modalCloseButton"); closeButton.removeA.. 2023. 6. 21.
자바스크립트 ) Modal 영역 밖 클릭 여부 확인 document.addEventListener("DOMContentLoaded", function () { var modalElement = document.getElementById("modal-bldsel"); modalElement.addEventListener("click", function (event) { if (event.target === modalElement) { alert("건물을 선택해주세요."); // 메시지 띄우기 } }); )}; 도움되길 바랍니다. 2023. 6. 20.
제이쿼리) parent 지옥에서 탈출하기, closest 사용하기 parent를 여러번 써야 할 경우 코드 확장성이 떨어질 수 있다. (예를들어 중간에 다른 태그를 추가해야 할 경우) var $addBldElement = $(this).parent().parent().parent().parent().parent(); if ($addBldElement.find("[name='xxxxx']").val() == "") { $addBldElement.remove(); } else { $addBldElement.find("[name='delYn']").val("Y"); $addBldElement.hide(); } 이럴 경우 하기 코드처럼 closest 을 사용하자 closest : 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택하는 함수 var $addBldElement.. 2023. 4. 8.
자바스크립트 ) ForEach에서 this 사용하기 ForEach에서 this 사용해보자 잘못된 예시 해당 함수 상위에 있는 전역객체 window 출력 var arrTest = { names: ["aaa", "bbb", "ccc"], thisTestFunc: function () { console.log(this); //names 배열 출력 arrTest.names.forEach(function () { console.log(this); //window 객체 출력 }); }, }; arrTest.thisTestFunc(); 잘된 예시 1. forEach( function( … ){ … }, this ) var arrTest = { names: ["aaa", "bbb", "ccc"], thisTestFunc: function () { console.log(.. 2023. 1. 27.
(HTML) 테이블 세로 중앙 정렬 인라인 CSS CSS { vertical-align:middle } 2022. 9. 6.
자바스크립트 ) 화면 -> 화면으로 데이터 전송하기 form에 input type을 hidden으로 설정하여 전달 할 데이터를 Element에 담아 setAttritube에 설정한 서비스(action)으로 submit 한다. 보내는 화면 var form = document.createElement('form'); var objs; objs = document.createElement('input'); objs.setAttribute('type', 'hidden'); objs.setAttribute('name', 'memId'); // 받을 네이밍 objs.setAttribute('value', memId); // 넘길 파라메터 form.appendChild(objs); form.setAttribute('method', 'get'); form.setAttr.. 2022. 8. 31.
자바스크립트) 무한스크롤 - 스크롤 최하단 Check 생각보다 간단하다. window의 창 크기를 비교하는 함수와 속성을 이용하여 스크롤의 맨 아래 일 경우에 해당 div에 데이터를 append 시키면 된다. 근데 내 경우는 좀 이상한 값이 도출 되었다. outerHeight 값보다 innerHeight 값이 더 큰 값이 도출된다. 이론상 outerHeight는 브라우저 전체 height값이라 더 크게 나와야하는데.... 일단 도움이 될 수도 있으니 참고용으로만 적어두겠습니다. if (window.outerHeight + $(window).scrollTop() -100 > $(document).height()) { ... ... ... //$.ajax 통신으로 동적 생성! } -100을 해준 이유는 얼추 맨 하단 쯤 갔을 때 다시 뿌려주기 위해 작성하였음... 2022. 8. 29.
CSS) 줄 바꿈( word-wrap / word-break ) 줄바꿈을 할 건데, 글자 단위로 자름 word-wrap: break-word; word-break: break-all; 줄바꿈을 할 건데, 단어 단위로 자름 word-wrap: break-word; word-break: keep-all; 2022. 8. 22.
(제이쿼리) 게시글 전체 선택 체크박스 만들기 $(document).on("click", "#checkAll", function(){ //전체 선택 클릭 if($("#checkAll").is(":checked")){ $(".checkSingle").prop("checked", true); }else{ $(".checkSingle").prop("checked", false); } }) //단일 선택 클릭 $(document).on("click", ".checkSingle", function() { var total = $(".checkSingle").length; var checked = $(".checkSingle:checked").length; console.log("total " , total) console.log("checked " , che.. 2022. 8. 16.
Ajax(Json) -> Controller(Map)로 값 넘기기 (Key/Value 형식으로) - input type="text" 의 value 값을 가져와서 Json 형태로 Controller에 넘기기 - Mybatis에서 vo 사용하지 않고 hashmap으로 파라미터 전달하기! JavaScript 방법1 - 조금 복잡한 방법) text 타입의 input들을 each 반복문을 돌림 Key 값으로 사용 될 input type의 id를 'dataId' 변수로 저장 Value 값으로 사용 될 input type의 value를 dataValue 변수로 저장 'allData' 배열에 Key, Value 형식으로 저장 (Key 값은 무조건 "큰 따옴표" 로 묶어야함, 왜? 규칙임) Join 함수를 이용하여 배열을 쉼표(,) 구분자 기준으로 잘라서 하나의 String 배열로 만듦 해당 배열을 중괄호( { }.. 2022. 8. 11.
(자바스크립트 ) 카카오 로그인 카카오 로그인 - 로그인 폼 띄우기 Kakao.Auth.loninForm({ scope:"기 설정한 동의항목", success:function( .... ){ .... } }) - 로그인 요청 Kakao.API.request({ url: "/v2/user/me", success:function( .... ){ .... } }) 사용자 동의항목 설정 관련 코드 카카오 로그인 카카오 로그인 성공 후 - 기 설정한 '동의 항목' 리턴 확인 (이메일, 닉네임) 2022. 8. 10.
(자바스크립트) 카카오 맵 연동하기 카카오 디벨로퍼 (지도 API 이용해보기) 1. 카카오 디벨로퍼 홈페이지로 가서 개발자 등록 https://developers.kakao.com/ 2. 애플리케이션 추가하기 3. 키 값 반환 됨 4. 플랫폼 설정 (Web) 5. 카카오맵 API 사용 https://apis.map.kakao.com/ 더보기 카카오 맵 연동 JavaScript 페이징 처리 완료 해당 테이블 tr클릭 시 Marker 생성 캠핑장명 주소 위도 경도 2022. 6. 27.
CSS 개념들 정리 CSS (Cascading Style Sheet) 선택자 { 프로퍼티 : 값 ; 프로퍼티 : 값 .... ..... ....} --- 예시 --- 스타일 시트 파일 불러오는 방법 2가지 1. 첫번째 방법 2. 두번째 방법 인라인 스타일 태그 안에 직접 스타일을 작성 css에서 # 과 .(dot) /// ID, CLASS 찾기 # - id를 선택할 때 사용 . (dot) - class를 선택할 때 사용 #title, li{ color:brown; } .addr{ color:blue; } id가 'list' 중에서 'span 태그' 찾기 #list span{ color:forestgreen; } 'boby' 태그에서 'main' class를 찾기 body.main{ background: aliceblue }.. 2022. 5. 16.
HTML 태그 (tag) HTML5 페이지의 기본 구조 본문, 이미지, 테이블, 자바스크립트 코드, 동영상 등 HTML 태그의 속성은 대소문자 구분하지 않음 기본 TAG 헤드라인을 위한 태그(h1~h6) 'h1'의 글자 크기가 가장 크고 'h6'이 가장 작다 단락 나누기 (p) 단락을 나눌 수 있음 .. .. .. 줄 바꾸기(br) 줄을 바꿀 수 있음 기호 표현 태그 수평선 긋는 태그 IMG 태그 이미지를 표현할 때 사용 img 의 alt 속성 안에 텍스트를 넣었을 경우 이미지가 존재하지 않을 때 해당 텍스트가 출력 됨 리스트 (ul, ol, dl) ul, ol 안에 li 태그를 사용하여 값을 입력 ol 은 순서있는 리스트로 type을 붙일 수 있음 (1, 2, 3, 4 식으로 표현 가능) 물을 끓인다 라면과 스프를 넣는다 파를.. 2022. 5. 16.
반응형

티스토리툴바