JavaScript

[JavaScript/jQuery] 모달 이벤트 비교

안녕하세요 코북입니다. 이번 3월 패치에서 모달 이벤트를 많이 다루게 되었는데 개발 일정을 맞추려다 보니 대부분의 작업을 jquery로 처리했습니다. 개발 전 목표는 javascript와 적절하게 섞어서 개발하는 것이었기 때문에 아쉬움이 많이 남습니다. 다음 개발 때는 좀 더 유연하게 javascript와 jquery를 활용하기 위해 두 가지 방식으로 나누어 기술해보려 합니다. 1. 모달 열기, 닫기 이벤트 // jQuery $('#modal').modal("show"); // 열기 $('#modal').modal("hide"); // 닫기 // JavaScript var modal = document.getElementById("modal"); modal.style.display = "inline-bl..

[Swiper API] swiper display none 이슈

팝업, 배너 형식으로 swiper를 사용할 때, 페이지를 로딩한 직후에 슬라이더를 노출시키지 않게 설정해야 하는 경우가 있습니다. 다음과 같이 display:none 처리해주면 되지만 이럴 경우 swiper가 제대로 작동하지 않는 에러가 발생합니다. 이를 해결하기 위해서는 observer 매개변수를 추가해주면 됩니다. 출처 : https://swiperjs.com/swiper-api#pagination

[JavaScript] 쿠키 라이프사이클 설정 시 사용한 내장 객체 정리

▶ Date.prototype.getDate() getDate() 메서드는 주어진 날짜의 현지 시간 기준 일을 반환합니다. const birthday = new Date('August 19, 1975 23:15:30'); const date1 = birthday.getDate(); console.log(date1); // expected output: 19 ▶ Date.prototype.setDate() setDate() 메서드는 현재 설정된 월의 시작 부분을 기준으로 Date 객체의 날짜를 설정합니다. Syntax dateObj.setDate(dayValue) ▶ typeof 연산자 typeof는 변수의 데이터 타입을 반환하는 연산자입니다. 문법 typeof variable variable에는 데이터 ..

[error/javascript] Uncaught TypeError: Cannot set properties of undefined (setting 'display')

document.getElementsByClassName("클래스명")은 nodeList를 전달합니다. 따라서 접근하고자 하는 값의 위치를 명시해줘야 모호하지 않습니다. 예시는 다음과 같습니다. document.getElementsByClassName("class1").style.display = 'none'; document.getElementsByClassName("class2").style.display = 'none'; 접근하고자 하는 위치를 명시해 주지 않아 에러가 발생합니다. document.getElementsByClassName("class1")[0].style.display = 'none'; document.getElementsByClassName("class2")[0].style.dis..

[error/javascript] Failed to load resource: the server responded with a status of 404 ()

Failed to load resource: the server responded with a status of 404 () JavaScript 사용시 다음과 같은 에러가 발생하였고 확인 결과 경로 설정에 문제가 있었습니다. Welcome to Computer Shop Management Welcome to Computer Shop Management 다음과 같이 script 경로를 수정하여 해결하였습니다. 코드 출처 : https://ghchoi0427.tistory.com/41

[error/javascript] 'Uncaught TypeError: 함수명 is not a function at HTMLButtonElement.onclick'

사용한 함수가 제대로 정의 되지 않아 오류가 발생했습니다. 함수 명을 변경하여 오류를 수정했습니다. 참고 https://okky.kr/article/601317

[JavaScript] 로그인 했을 때만 사용 가능한 페이지

안녕하세요 코북입니다. 오늘은 로그인했을 때만 서비스 페이지를 이용할 수 있게 하기 위한 작업을 해줬습니다. jsp와 javascript를 이용해서 간단하게 만들 수 있었습니다. ■ jsp 서비스 이벤트 공지 서비스 페이지는 클릭 시 페이지를 이동시키는 것이 아니라 onclick으로 함수가 실행될 수 있도록 설정했습니다. ■ JavaScript signIn 변수에 로그인 시 session으로 넘어오는 값을 담아줬습니다. 값이 넘어오지 않으면(공백일 경우) 알림 창과 함께 로그인 페이지로 이동시키고, 값이 넘어오면 서비스 페이지로 이동시킵니다. 구현 화면 잘 구현됩니다. 사용 기술 JavaScript, EL 배운 점 ${signIn}으로 넘어오는 값에 따옴표("")를 해주지 않으면 값을 signIn이라는 ..

[JavaScript/jQuery] 아이디/비밀번호 입력 알림

안녕하세요 코북입니다. 로그인 파트가 거의 완성되어가는 시점이기도 하고 잠깐 쉬어가는 느낌으로 아이디/비밀번호 입력 알림을 구현해봤습니다. ■ jQuery 기존 태그에 id 값을 추가하여 jQuery로 접근했습니다. 로그인 상태 유지 로그인 ■ JavaScript JavaScript의 경우입니다. loginCheck() 함수를 실행시키기 위해 type을 submit에서 button으로 변경했습니다. form태그를 submit 해주는 작업을 처리하기 위해 아이디와 비밀번호가 모두 입력되면 수동으로 submit 처리를 해줍니다. 로그인 상태 유지 로그인 구현 화면 사용 기술 및 언어 JAVA, HTML, CSS, Bootstrap, JavaScript, JQuery, JSP 배운 점 alert에서 개행할 때..

[JQuery] 비밀번호 일치, 클래스 추가, 클래스 삭제

안녕하세요 코북입니다. 이번 프로젝트에서도 여김 없이 로그인을 구현하게 됐는데, 이번에는 클래스를 변경하는 작업까지 해봐서 기록하러 왔습니다. jquery에서 addClass와 removeClass를 사용해 손쉽게 클래스를 추가하고 지울 수 있었습니다. 말 그대로 addClass는 기존 클래스에 클래스를 추가해주고 removeClass는 기존 클래스에 있는 내용을 지워줍니다. 비밀번호 일치 여부가 변경될 경우, 기존에 있는 값을 지우고 추가해줘야 하기 때문에 removeClass를 addClass보다 앞에서 실행합니다. 아래는 코드와 구현 화면입니다. + https://yenbook.tistory.com/63 자바스크립트 vs 제이쿼리 ( JQuery ) 자바스크립트 vs jQuery, 과연 그 우위는?..

[jQuery/Ajax] 아이디 중복 체크 확인 구현

안녕하세요 코북입니다. 오늘은 아이디 중복 여부 확인 구현했던 것을 기록하려고 합니다. 비밀번호 일치와는 다르게 아이디 중복 여부는 DB에 접근하여 일치하는 값이 있는지 없는지를 확인해야 해요. 그렇기 때문에 JSP 뿐만 아니라 Controller단과 Model단을 이용했습니다. 진행 순서는 다음과 같습니다. JSP (V) DAO (M) Servlet (C) 1. JSP 화면 구성 먼저 회원가입을 위한 기본적인 JSP를 구성했습니다. 비밀번호 일치 여부와 마찬가지로 font태그를 사용해서 사용자에게 일치 여부를 전달할 계획입니다. script태그에서 ajax와 jquery를 이용해 사용자가 값을 입력하면 바로 서버로 값을 보내줍니다. 사용자가 보낸 값에 따라 font태그에 값을 변경해 결과를 알 수 있도..