본문 바로가기

웹개발6

자바스크립트로 라디오 버튼 체크 제어하기 - -안녕하세요! 오늘은 자바스크립트를 이용해 라디오 버튼의 체크 상태를 제어하고, 선택된 값을 활용하는 방법에 대해 알아보겠습니다.웹 폼에서 라디오 버튼은 사용자에게 여러 옵션 중 하나를 선택하게 할 때 사용되죠.사용자가 버튼을 클릭할 때마다 선택된 값을 추출하여 다른 동작을 할 수 있도록 하면, 웹 페이지의 동적인 기능을 구현할 수 있습니다.1. 라디오 버튼 HTML 코드먼저, 라디오 버튼을 HTML로 작성해보겠습니다.여러 옵션을 제공하는 기본적인 라디오 버튼의 예는 다음과 같습니다.OneTwoThreeFour위 코드에서는 4개의 라디오 버튼을 만들었고, 각 버튼에 onclick="javascript:check();"를 추가하여 버튼이 클릭될 때마다 자바스크립트 함수 check()가 실행되도록 설정했.. 2024. 11. 28.

자바스크립트로 숫자만 입력받는 방법 --안녕하세요! 오늘은 자바스크립트를 활용해서 웹 페이지에서 숫자만 입력 받는 방법을 알려드릴게요. 간단한 방법으로, 숫자 이외의 문자는 입력되지 않도록 제한할 수 있어요. 이 기능은 예를 들어, 전화번호나 나이, 금액 등을 입력받는 입력창에서 유용하게 사용할 수 있습니다. 자, 그럼 어떻게 구현할 수 있는지 한번 알아볼까요?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.

자바스크립트로 HTML 색상 코드 다루기 - 안녕하세요, 여러분! 오늘은 웹 개발에서 색상을 다루는 방법에 대해 이야기해보겠습니다. HTML과 CSS에서 색상 코드를 사용하는 것은 기본적이지만, 자바스크립트를 통해 색상을 동적으로 변경하거나 처리하는 방법을 배우면 웹 페이지를 더욱 매력적으로 만들 수 있습니다. 색상 코드란?HTML에서 색상 코드는 두 가지 주요 형식으로 제공됩니다:Hexadecimal (Hex) 코드: #RRGGBB 형식으로, 예를 들어 #FF5733은 빨간색과 주황색이 섞인 색입니다.RGB 코드: rgb(R, G, B) 형식으로, 각 색상의 값은 0부터 255까지의 숫자로 표현됩니다. 예를 들어 rgb(255, 87, 51)은 동일한 색상을 나타냅니다. 자바스크립트로 색상 변경하기자바스크립트를 사용하면 HTML 요소의 색상.. 2024. 10. 30.

이전 1 다음

티스토리툴바