jquery

[Spring/Ajax] Chart.js로 차트 만들기

안녕하세요 코북입니다. 이번 프로젝트에서 측정한 거북목 DB를 사용자에게 시각화하여 보여주기 위해 차트를 만들게 됐습니다. 자료를 찾아보니까 Chart.js라는 사이트에서 Javascript를 사용하여 간편하게 차트를 구현할 수 있게 오픈 소스를 제공하고 있었습니다. 세상에는 정말 많은 천재들이 있구나 하는 생각이 들었습니다. 사이트 링크와 작업 진행 순서입니다. https://www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom sca..

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

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

[Spring] 비동기 ID 중복 체크 기능

안녕하세요 코북입니다. 1차 때는 JDBC와 서블릿을 사용해서 ID 중복 체크를 구현했었는데, 이번 프로젝트에서는 스프링으로 구현해봤습니다. 흐름이 조금 더 익숙하지 않긴 하지만 확실히 스프링 프레임워크가 좀 더 코드가 짧고 간결해서 익숙해지면 훨씬 쉽게 작업을 할 수 있을 것 같습니다. 작업순서는 JSP로 view단 먼저 만든 후 ajax를 이용해 json데이터를 요청했고, 그 후 controller와 mapper를 연결시켰습니다. 작업순서 1. jsp, ajax 2. controller 3. mapper 1. JSP, AJAX 아이디 먼저 bootstrap을 이용해 id를 입력할 수 있는 입력창을 먼저 만들었습니다. 그 밑에는 사용자가 id를 사용할 수 있는지 없는지 알림을 주기위해 font 태그를 ..

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

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

[Spring] 도서 목록 조회 리스트 만들기

안녕하세요 코북입니다. 며칠 전에 학원에서 스프링 게시판 만들기 수업이 마무리됐습니다. 수업이 끝나서 간단한 테스트를 봤는데, 게시판 리스트를 두 가지 방식으로 조회하는 문제였습니다. 먼저 가장 기본적인 방법으로 클라이언트가 .do 요청 시 JSTL과 EL을 사용해 데이터를 가져오는 방식, 그리고 ajax를 사욯해 json형식의 리스트를 가져오는 방식을 구현했습니다. 작업진행 순서는 다음과 같습니다. 작업 진행 순서 테이블 설계 -> VO생성 컨트롤러 작성 + Mapper 인터페이스, SQL Mapper XML 작성 View, JSP 구현 1. 테이블 설계 ( VO 생성 ) 먼저 SQL 명령어를 통해 테이블을 생성했습니다. -- 테이블 생성 create table tbl_book( num int not ..

[jQuery] 비밀번호 재확인 기능 구현

안녕하세요 코북입니다. 오늘은 비밀번호 재확인 기능 구현했던 것을 기록하려고 합니다. ID PW PW 확인 우선 간단하게 아이디와 비밀번호를 입력할 수 있는 table을 만들었고 form태그를 사용해서 입력받은 정보를 JoinService로 보내줄 수 있게 만들었습니다. PW 확인 PW 확인에 값을 넣은 후 바로 일치 불일치 여부를 표시해주려고 합니다. 태그를 빈칸으로 만들어놓은 후, 일치 불일치 여부에 따라 값을 넣어줄 계획입니다. 이때, font태그에 접근하기 위해 id값을 설정했습니다. td값이 두 개가 되었으니 colspan으로 병합시켜주세요 PW PW 확인 사용자가 비밀번호를 입력할 때 함수가 작동할 수 있도록 하기 위해 에 id와 class를 설정해줍니다 jQuery를 이용하기 위해 pass1..

jQuery 환경 설정

안녕하세요. 코북입니다. 오늘은 jQuery 환경설정 방법에 대해서 기록할 생각입니다. 먼저 구글에 jQuery download라고 검색하세요. 체크한 부분에 들어가세요. 사용하고 싶은 버전을 다운로드하세요. 누르면 글씨가 이렇게 막 나오는데 당황하지 마시고 마우스 우클릭 후 다른 이름으로 저장을 누르시면 압축된 상태로 다운로드됩니다. 파일 형식은 JavaScript File입니다. 잘 확인하고 저장해주세요. 파일 속성에 들어가서 파일 형식을 한 번 더 확인해주세요. 밑줄 그은 것처럼 '.js' 파일이어야 사용할 수 있어요. 이제 사용하고 싶은 곳으로 가져오세요. 저는 ex0716JQuery폴더안에 있는 js폴더에 가지고 왔습니다. 가지고 온 후 스크립트 태그 안에 src를 통해 경로를 설정해줘야 사용이..