본문 바로가기
반응형

JSP13

자바스크립트로 엔터키 폼 전송 막는 방법 - -웹사이트에서 폼을 작성할 때, 사용자가 실수로 **엔터키(Enter)**를 눌러 폼이 제출되는 일이 있죠?예를 들어, 로그인 폼이나 검색창에서 엔터키를 눌러서 페이지가 새로고침되거나 입력값이 전송되는 일이 생기면 당황스러울 수 있습니다.이런 문제를 해결하려면 엔터키로 인한 폼 제출을 막는 방법을 알아두면 유용해요!오늘은 자바스크립트와 jQuery를 활용해서 엔터키로 인한 폼 제출을 막는 간단한 방법을 알려드릴게요.이 방법을 사용하면 실수로 엔터키를 눌러 폼이 제출되는 상황을 예방할 수 있습니다.1. 엔터키로 인한 폼 전송 문제HTML 폼에서 사용자가 **엔터키(Enter)**를 누르면 대부분 자동으로 폼이 제출됩니다.특히 폼 안에 텍스트 입력 필드가 있을 경우, 엔터키를 눌러 검색을 하거나 로그인하.. 2024. 12. 11.
자바스크립트로 웹 페이지의 '뒤로가기' 에러와 캐시 문제 해결하기 - -웹 개발 중, 사용자가 '뒤로가기' 버튼을 클릭했을 때 페이지가 제대로 작동하지 않거나, 캐시된 내용 때문에 오류가 발생하는 문제를 겪은 적이 있나요?이 문제는 꽤 자주 발생하는데요, 그럴 때마다 답답하고 속상할 수 있죠.오늘은 그런 문제들을 자바스크립트를 이용해 해결하는 방법을 알아보려고 해요. 어려워 보일 수 있지만, 차근차근 따라오시면 쉽게 해결할 수 있습니다!1. 히스토리 API로 뒤로가기 제어하기먼저, 브라우저 히스토리 API를 활용해서 뒤로가기 버튼을 눌렀을 때 발생하는 문제를 방지할 수 있어요.히스토리 API를 사용하면, 사용자가 뒤로가기를 눌러도 이전 페이지로 돌아가지 않게 하고, 대신 페이지를 강제로 새로 고침하도록 만들 수 있습니다.Ex) 뒤로가기 버튼을 눌렀을 때 강제로 새로 고.. 2024. 12. 10.
자바스크립트로 날짜와 시간 포맷하기 - -안녕하세요! 오늘은 자바스크립트에서 날짜와 시간을 어떻게 포맷하는지에 대해 알아볼게요.웹 개발을 하다 보면 종종 날짜와 시간을 특정 형식으로 보여줘야 할 때가 많죠.자바스크립트에서는 날짜를 다루기 위한 여러 가지 방법을 제공하는데요, 그 중 하나가 Date 객체입니다.이 글을 통해 Date 객체를 사용해서 날짜와 시간을 원하는 형식으로 포맷하는 방법을 쉽게 알아보겠습니다. 1. 현재 날짜와 시간 가져오기우선, 자바스크립트에서 현재 날짜와 시간을 가져오려면 Date 객체를 사용하면 됩니다.var today = new Date();이 코드 한 줄로 today라는 변수에 현재 날짜와 시간 정보를 담을 수 있어요.이제 today 객체에서 날짜와 시간 정보를 하나씩 꺼내볼게요. 2. 날짜와 시간 값 추출하기.. 2024. 12. 3.
자바스크립트에서 날짜 및 시간 포맷팅하는 간단한 방법 - -안녕하세요! 오늘은 JavaScript에서 날짜와 시간을 원하는 형식으로 포맷하는 방법을 소개하려고 해요.웹 개발을 하다 보면, 자주 현재 시간을 특정 포맷으로 변환해야 할 때가 있죠.예를 들어, **"2024년 10월 28일 09시 05분 03초"**를 **"20241028090503"**와 같은 형식으로 변환하고 싶을 때요.그렇다면 어떻게 해야 할까요? 1. 기본적인 방법 우리는 Date 객체를 사용하여 현재 날짜와 시간을 가져올 수 있어요.그리고 이를 문자열로 변환하고 포맷을 맞추는 작업을 해야겠죠. 먼저 기존의 코드를 살펴볼까요?var today = new Date();var year = today.getFullYear();var month = today.getMonth() + 1; // .. 2024. 11. 28.
자바스크립트로 라디오 버튼 체크 제어하기 - -안녕하세요! 오늘은 자바스크립트를 이용해 라디오 버튼의 체크 상태를 제어하고, 선택된 값을 활용하는 방법에 대해 알아보겠습니다.웹 폼에서 라디오 버튼은 사용자에게 여러 옵션 중 하나를 선택하게 할 때 사용되죠.사용자가 버튼을 클릭할 때마다 선택된 값을 추출하여 다른 동작을 할 수 있도록 하면, 웹 페이지의 동적인 기능을 구현할 수 있습니다.1. 라디오 버튼 HTML 코드먼저, 라디오 버튼을 HTML로 작성해보겠습니다.여러 옵션을 제공하는 기본적인 라디오 버튼의 예는 다음과 같습니다.OneTwoThreeFour위 코드에서는 4개의 라디오 버튼을 만들었고, 각 버튼에 onclick="javascript:check();"를 추가하여 버튼이 클릭될 때마다 자바스크립트 함수 check()가 실행되도록 설정했.. 2024. 11. 28.
자바스크립트로 멀티 체크박스 다중 선택 박스 제어하기 - -안녕하세요! 오늘은 웹 페이지에서 멀티 체크박스를 제어하는 자바스크립트(jQuery) 로직을 소개하려고 해요.여러 개의 체크박스를 한 번에 제어하거나, 사용자가 선택한 항목을 배열 또는 JSON으로 처리하는 방법을 알아볼 거예요.실제로 웹 폼을 만들 때 자주 사용되는 기능이니까, 이해하고 활용할 수 있으면 유용하답니다. 1. 전체 선택 체크박스 만들기먼저, 전체 선택 체크박스를 만들어보죠.하나의 체크박스를 클릭하면, 관련된 모든 체크박스가 자동으로 체크되거나 해제되는 방식입니다.$(document).ready(function() { $("#chkAgreeAll").on('click', function() { // 전체 동의 체크박스가 체크되었으면, 나머지 체크박스도 체크 .. 2024. 11. 27.
자바스크립트에서 빈 값 체크와 기본값 설정하는 방법 - -자바스크립트에서 빈 값이나 null 값을 처리하는 건 꽤 중요한 작업이죠.예를 들어, 사용자로부터 입력을 받거나 API에서 데이터를 받아올 때, 예상치 못한 빈 값들이 있을 수 있습니다.이런 값들을 제대로 처리하지 않으면 의도치 않은 오류가 발생할 수 있죠.오늘은 이런 상황에서 유용하게 사용할 수 있는 빈 값 체크와 기본값 설정 로직을 소개하려고 해요!1. 빈 값 체크 함수: isEmpty빈 값, 즉 undefined, null, 그리고 빈 문자열 ""을 확인할 때는 isEmpty라는 함수를 사용할 수 있어요.이 함수는 주어진 값이 빈 값인지 아닌지를 정확하게 판단해줍니다.function isEmpty(str) { if (typeof str == "undefined" || str == null.. 2024. 11. 26.
자바스크립트로 숫자만 입력받는 방법 --안녕하세요! 오늘은 자바스크립트를 활용해서 웹 페이지에서 숫자만 입력 받는 방법을 알려드릴게요. 간단한 방법으로, 숫자 이외의 문자는 입력되지 않도록 제한할 수 있어요. 이 기능은 예를 들어, 전화번호나 나이, 금액 등을 입력받는 입력창에서 유용하게 사용할 수 있습니다. 자, 그럼 어떻게 구현할 수 있는지 한번 알아볼까요?1. onKeyup 이벤트로 실시간 숫자 제한하기 첫 번째 방법은 onKeyup 이벤트를 사용하는 거예요.  이 방법은 사용자가 키를 떼는 순간, 입력된 값을 실시간으로 확인하고 숫자만 남기게 해줍니다. 위 코드에서 중요한 부분은 **replace(/[^0-9]/g, "")**인데요, 이 정규식을 통해 숫자 이외의 모든 문자를 찾아서 자동으로 제거해 줍니다. 2. input 이벤트를.. 2024. 11. 21.
자바스크립트로 입력값 검증하는 방법: 아이디, 비밀번호, 이메일 체크하기 - -안녕하세요? 오늘은 프론트앤드 개발 중에서, 자바스크립트를 활용한 입력 값 검증 로직에 대해서 알아보도록 하겠습니다.웹사이트나 앱에서 회원가입을 할 때, 아이디, 비밀번호, 이메일을 입력받는 폼이 있죠?그런데 이 입력값이 잘못되면 회원가입이 제대로 되지 않거나, 보안에 문제가 생길 수 있습니다.그래서 우리는 자바스크립트를 이용해 사용자 입력을 정규식으로 검증할 수 있습니다.오늘은 아이디, 비밀번호, 이메일에 대한 입력값을 자바스크립트 정규식을 사용해 어떻게 체크할 수 있는지 알아보겠습니다. 직접 사용해볼 수 있도록 코드도 함께 공유할게요!1. 아이디 체크하기아이디는 일반적으로 영문, 숫자, 또는 영문과 숫자가 혼합된 형태로 입력받습니다.또한, 아이디는 4자리 이상 100자리 이하로 제한이 있는 경우.. 2024. 11. 14.
제이쿼리를 이용한 필수 입력 체크 -  -안녕하세요, 여러분! 오늘은 웹 개발에서 자주 사용되는 사용자 입력 필드의 유효성을 체크하는 방법에 대해 이야기해보려고 해요.  특히 자바스크립트를 이용한 간단한 함수들을 소개할게요. 1. nullCheck 함수 먼저, 사용자에게 입력을 요구하는 경우가 많죠?  이때 입력값이 비어있다면 사용자에게 친절하게 알려주는 것이 중요합니다.  그래서 만든 함수가 바로 nullCheck입니다.  이 함수는 특정 ID를 가진 입력 필드의 값을 체크하고, 값이 없으면 알림을 띄워줍니다. > function nullCheck(id, msg) { var temp = $("#" + id).val(); if (!temp) { alert(msg); $("#" + id).focus();.. 2024. 10. 31.
JavaScript로 Map과 List 클래스 구현하기 -  안녕하세요! 오늘은 JavaScript를 사용하여 Map과 List 클래스를 직접 구현하고, 이를 활용한 간단한 웹 애플리케이션을 만들어보겠습니다. 함께 살펴보시죠! 1. Map 클래스 구현먼저 Map 클래스를 만들어 보겠습니다.  이 클래스는 키-값 쌍을 저장하는 기능을 제공합니다.function Map() { this.elements = {}; this.length = 0;}Map.prototype.put = function(key, value) { this.elements[key] = value; this.length = Object.keys(this.elements).length;};Map.prototype.get = function(key) { return thi.. 2024. 10. 30.
자바스크립트 JSP 페이지 include 방법에 대하여! -- 안녕하세요? 오늘은, JSP 페이지 내에서의 페이지 include 방법에 대해서 알아보도록 하겠습니다.* JSP 페이지 내에서의 정적인 Include 사용법※ @은 Directive 라는 의미로써, 포함하는 문서에 정적으로 컴파일이 되므로, 하나의 파일로 인식하며, 변수 등을 공유합니다. * JSP 페이지 내에서의 동적인 Include 사용법※ 의 action을 이용하는 구문으로써, 파일을 각각 컴파일 한 후 두 파일의 실행 결과를 한 곳에 합쳐서 출력하므로, 변수 등을 미공유하기 때문에, Parameter를 따로 넘겨받아야 합니다. 위의 두 방법은 원격지의 페이지를 포함하지 못하므로 JSTL을 이용하기도 합니다. * In JSTL 사용법※ 태그는 좀 더 일반적이고 강력한 기능을 가진 로써, 와 .. 2024. 9. 27.
자바스크립트 EL태그와 JSTL태그의 정의와 사용법에 대하여! - -안녕하세요? 오늘은, 자바스크립트의 EL태그와 JSTL태그의 정의와 사용법에 대해서 알아보도록 하겠습니다. EL (Expression Language)과 JSTL (JavaServer Pages Standard Tag Library)은 JSP (JavaServer Pages)에서 데이터를 쉽게 처리하고 표현하는 데 사용되는 기술입니다. EL (Expression Language) : EL은 JSP 페이지에서 Java 객체의 속성에 접근하고 표현할 수 있도록 돕는 언어입니다.  문법은 기본적으로 ${} 구문을 사용하여 표현합니다. 셋팅 방법에 대해서 알아도보록 하곘습니다. 1. maven 사용시, web.xml 에 하단 라이브러리 내용 선언 or 디펜던시 추가     jstl-c     /WEB-I.. 2024. 9. 27.
반응형