반응형 JAVASCRIPT & JQUERY 반응형 60 [JavaScript] 날짜 계산 함수 영상 소개 (현재일/해당월/전달/다음달) 웹 사이트를 제작할 때 게시판에서 가장 중요한 조건은 날짜라고 볼수 있습니다. 오늘은 간단히 버튼을 통해 제공할 수 있는 스크립트 날짜 함수를 정리해보겠습니다. 정리 함수는 현재일/해당월/전달/다음달 입니다. [JavaScript] 날짜 계산 함수 영상 소개 (현재일/해당월/전달/다음달) HTML 1 2 3 4 cs HTML에서는 input type에 버튼을 선언하고 onclick 속성에 함수를 집어 넣으면 됩니다. JavaScript 현재일 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function today(){ var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = .. 2024. 3. 8. [JavsScript] Performance 객체를 이용한 성능 측정 방법 자바스크립트의 Navigation Timeing API을 통하여 Performance객체 이용하여 성능을 측정하는 코드를 소개해보려합니다. Navigation Timing API란 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이터를 제공합니다. 제가 준비한 성능 측정 항목입니다. 전체 소요시간 요청 소요 시간 응답 데이터를 모두 받은 시간 서버에서 페이지를 받고 페이지를 로드하는데 걸린 시간 리소스 로딩 시간 출력 (단위: 밀리초) 리소스 크기 출력 (단위: MB) 실무에서 자주 사용하는 코드이니 도움이 되었으면 좋겠습니다. [JavsScript] Performance 객체를 이용한 성능 측정 방법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22.. 2024. 1. 30. [JavaScript] CheckBox 전체 선택 및 해제 방법 자바스크립트를 이용하여 웹 개발을 할 경우 체크박스를 전체 선택하거나 전체 해제해야하는 상황이 발생하게 됩니다. 구현화면은 아래 이미지로 확인하시면 되고, 이를 간략하게 정리해보았습니다. CheckBox 전체 선택 및 해제 구현화면 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 No Colored by Color Scripter cs 보통 리스트 형태는 대부분 테이블 태그를 사용하게 됩니다. 여기 thead 부분에서 type을 checkbox / id를 check_all를 넣어주고 tbody에서는 type checkbox / name값을 chk_box로 통일해줍니다. JavaScript 1 2 3 4 5 6 7 8.. 2024. 1. 4. [JavaScript] 실시간 타이머 구현 방법 웹 개발 도중에는 동적인 표현을 위해 실시간 기능을 구현해야할 경우가 생기게 됩니다. 따라서, 이를 해결하기 위해 자바스크립트를 이용한 실시간 타이머 기능을 정리해보겠습니다. 구현 방법은 설명보다는 아래 영상으로 준비해보았습니다. 실시간 타이머 구현 영상 60초 기준으로 시간이 지나면서 0초가 된다면 경과시간이 업데이트되는 로직입니다. 이를 자바 스크립트로 구현하였으며 이에 대한 구현 방법을 시작해보겠습니다. 실시간 타이머 구현 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 [갱신 시간 60초 ] 리스트 등록시간 경과시간 Colored by Color Scripter cs HTML에서는 평범하게 테이블 형태의 리스트에서 구현해보았.. 2024. 1. 4. [Javascript&JQuery] 비밀번호 Caps Lock 설정 방법 (영상) 흔히 비밀번호 사용시에 Caps Lock이 눌려 비밀번호가 틀리다는 메세지를 많이 접하게 됩니다. 그래서 최근 사이트에서는 비밀번호 입력시에 Caps Lock의 활성화 여부를 알려줍니다. 생각보다 간단히 구현이 가능한 이 Caps Lock를 포스팅을 하려합니다. 제가 구현한 결과 영상입니다. Caps Lock을 누르는 순간 Caps Lock이 켜졌다는 메세지가 나오게 되어 비밀번호를 틀릴 가능성을 낮춰주게 됩니다. 우선 Caps Lock 기능을 만들기 위해선 자바스크립트에서 제공하는 몇개의 메서드를 알아야하니다. querySelector : 하위 엘리먼트 요소 중에 첫번째 요소만 반환합니다. addEventListener : 여러개의 이벤트 핸들러를 등록할 수 있습니다. (click / mouseover.. 2023. 1. 1. [JavaScript/JQuery] 동적변수 사용 방법 안녕하세요. 오늘은 자바스크립트에서 동적 변수를 생성하는 방법에 대해 포스팅해보겠습니다. 일반적인 다중 변수 1 2 3 4 5 6 7 8 9 10 var test1 = 1; var test2 = 2; var test3 = 3; var test4 = 4; var test5 = 5; var test6 = 6; var test7 = 7; var test8 = 8; var test9 = 9; var test10 = 10; cs 스크립트에서 로직을 설계하게되면 위와같이 많은 변수들이 필요할 경우가 생기게 됩니다. 이를 개선하기 위해서 변수명을 동적으로 생성하여 효율적으로 코드를 짤 수가 있습니다. eval()란 함수를 사용해서 동적 변수를 생성할 수 있으나 성능이나 보안 디버깅의 어려움등의 단점이 있으며, 가장 .. 2022. 12. 23. submit 후 HttpServletResponse 응답 받는법 일반적으로 뷰 단에서 submit와 같이 동기방식을 할 경우, 서버에 요청을 하고 응답을 받을 수가 없는 문제점이 있습니다. 예를 들어 로딩바 같은 경우 서버에서 실행되고 난 다음 응답 여부를 모르니 로딩바를 제어할 수가 없는 상황인거죠. AJAX를 사용하면 되지만 OutputStream를 사용하는 경우에는 getWrite를 사용할 수가 없기 때문에 응답 메세지를 받기에는 어려움이 있습니다. 이를 해결하기 위해서는 제이쿼리의 filedownload를 사용하면 됩니다. filedownload의 기능은 form의 submit 방식을 iframe으로 지정하고, 서버에서 response의 header에 쿠기를 생성하여 체크하는 방식입니다. 아래 코드를 정리해보았습니다. JS 적용 우선 filedownload에 .. 2022. 11. 30. [JQuery] 이용약관 동의 라디오/체크박스 유효성 검사 (영상) 흔히들 회원가입전에 이용약관이나 동의 페이지에서 라디오, 체크박스에 대한 유효성 검사를 합니다. 쉽게할 수 있는 방법이 있어 소개하니 이럴때마다 사용하셔도 괜찮을 것 같습니다~ Script 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function validation(){ var checkbox = $(":checkbox[value='Y']"); for(var i = 0; i 2022. 8. 19. [Jquery] 실시간 정규식 체크 예제 및 모음 정규식 예제와 종류를 정리해보았습니다. 간혹 저처럼 필요하신 분들이 유용히 쓰였으면 합니다. 구현영상입니다. 실시간 정규식 체크를 위해 blur keyup 로 설정을 해 놓았습니다. 아래 기타 정규식을 참고하여 입맛에 맞게 사용하시면 될 것 같습니다. blur keyup 키보드를 눌렀다 떼었을 경우 발생하는 이벤트로써, 정규식에 많이 사용되고 있습니다. 대신, 한글자씩 반응하기때문에 이메일이나 휴대폰 검사는 다른식으로 구분해야합니다. https://chobopark.tistory.com/147 [JQuery] 핸드폰번호 정규식 하이픈 추가 방법 데이터베이스에서 뷰로 나타낼때 데이터베이스에 저장되어 있는 휴대번호 값이 '01068795421' 이라면 '010-6879-5421' 로 하이픈을 넣어 화면에 보.. 2022. 6. 20. 이전 1 2 3 4 ··· 7 다음
