js

textarea 줄바꿈 태그 적용하기 textarea 줄바꿈 처리 전엔터로 입력한 내용이 DB 내에 특수문자로 들어가서 에러발생  textarea 줄바꿈 처리방법var TX_MEMO = $("textarea[name='TX_MEMO']").val().replace(/");- replace함수 사용하여 줄바꿈을 로 변환- "문자를 HTML 엔티티 <로 변환  textarea 줄바꿈 처리 결과 로 변환하여 들어갔다! ** 서버에서 가져와서 다시 해당 값을 엔터(줄바꿈)으로 보여져야할 경우$("textarea[name='TX_MEMO']").val(nvl(original.TX_MEMO, "").replace(//g, "\n"));서버에서 가져온 값 : original.TX_MEMO- 을 줄바꿈으로 변환해..

전화번호 입력 시 자동 하이픈 넣기 전화번호 입력 시 자동으로 하이픈을 넣게 구현했다. 1. HTML 2. JS function autoHyphen(input) { // 숫자만 남기고 모든 문자 제거 var phoneNumber = input.value.replace(/[^\d]/g, ""); // 전화번호 형식에 맞게 하이푼 추가 if (phoneNumber.length >= 4 && phoneNumber.length = 8) { input.value = phoneNumber.slice(0, 3) + "-" + phoneNumber.slice(3, 7) + "-" + phoneNumber.slice(7); } }

url 파악 후 해당 url일 때 active 클래스 주기 0. 이슈 발생 active 클래스를 주는 방법은 매우 다양하지만 해당 url 일 때 해당 아이콘에 active 클래스를 추가하게끔 구현했다. 경로에 'consult' 가 포함되어있으면 '상담하기' 버튼에 active 주기. 1. HTML 홈 상담하기 전체 2. JavaScript // 현재 url(경로) 파악하기 var currentPath = window.location.pathname; // url에 특정 문자가 포함되어 있으면 if(currentPath.includes('consult')){ document.querySelector('.nav_btn_badge:nth-child(2)').classList.add('active'); }els..

회원가입 폼에서 정규식 활용 및 데이터 유효성 검사하기 🩸이슈 발생 사용자는 개발자가 원하는 형식으로 입력하지 않기 때문에, 회원가입 폼 생성 시 데이터 유효성 검사는 필수사항이다. ▶ 정규식 (Regular Expressions) 이란? : 주로 회원가입창에서 비밀번호 사용할 때 대문자 섞는 등의 데이터 기준 설정하는 것 (1) 형식 1) var re = /ab+c/; 2) var re = new RegExp("/ab+c/"); (2) 숫자 정규식 ^ : 패턴시작 [0-9] : 괄호 안의 숫자로 범위 지정 + : 앞 문자가 하나 이상 * : 문자 수 상관없음 $ : 패턴종료 🩹이슈 해결 1. HTML 회원 가입 회원기본정보 아이디 비밀번호 비밀번호확인 이메일 @ naver.com gmail.com ka..

BOM(Browser Object Model) : window / 팝업창 / onload / screen / history/ location 사용하기 🩸이슈 발생 BOM(Browser Object Model): 브라우저 객체 모델을 사용해보자. 1. open : 새 창 만들기 (팝업) 2. close : 객체 소멸, 브라우저 닫기 3. onload : 시점차이 문제 해결 4. screen 5. history 6. location 🔎 사용 전에 알아둘 window 객체 특징 ① 브라우저 내장 객체 중에서 최상위 객체 ② 모든 전역 객체, 함수, 변수 등은 자동적으로 window 객체에 속함 ③ window. 함수(), window. 변수 등과 같은 형태로 사용이 가능 ④ window 객체를 생략한 형태로 ..

자바스크립트 랜덤 함수 및 setTimeOut 사용하기 See the Pen Untitled by Give J (@Give-J) on CodePen. 🩸이슈 발생 랜덤이지만 특정 규칙에 의해 숫자(인원수)가 변경되어야 했다. 1. 인원수 랜덤 (단, 범위 지정) 2. 변경되는 간격 랜덤 (단, 7초~15초 사이) 3. 시간대에 따라 다른 인원수 범위 🩹이슈 해결 1. HTML 지금 31 명이 보고 있어요! 2. CSS #web-only .fix_box{ position: fixed; bottom: 40px; left: 160px; width: 389px; height: 80px; margin-bottom: 80px; } #web-only .fix_box .viewElement { background: r..

자바스크립트 툴팁, 툴팁 박스 만들기 🩸이슈 발생 클릭 시 수정/ 삭제 버튼 나타나는 툴팁 박스 뜨게 하기 🩹이슈 해결 See the Pen Untitled by Give J (@Give-J) on CodePen. 💡유의사항 바탕(배경)을 눌러도 툴팁 박스가 닫히도록 구현했다!

자바스크립트 TOP 버튼 만들기 🩸이슈 발생 어디서나 볼 수 있는 자동 스크롤 업 기능(TOP) 버튼 5초 만에 만들어보기 🩹이슈 해결 1. HTML ▲ TOP 2. CSS #top-btn { display: none; position: fixed; bottom: 40px; right: 40px; z-index: 999; background-color: white; border: 2px solid #dbdbdb; outline: none; cursor: pointer; padding: 10px; border-radius: 50%; width: 90px; height: 90px; font-size: 20px; font-weight: 500; color: #333333; } 3. JavaScript $(do..

AJAX 정복하기 🩸이슈 발생 정말 모든 파일에 다 들어가있는 AJAX.. AJAX 정복이 시급했다. 🩹이슈 해결 1. AJAX 개념 - 비동기 방식으로 클라이언트-서버 간에 데이터 교환하는 기능 * 비동기 방식: 페이지 새로고침, 화면 이동 없이 작업하는 것. ex) 댓글쓰기 - 자바스크립트 + 제이쿼리 기반 2. 기본형식 $.ajax({ type:"post",//요청 메소드 방식 url : "/AjaxTest/ex01.do",//요청url data:{ //보낼 데이터 }, dataType: "text", //서버가 요청url을 통해서 응답하는 내용의 타입 //데이터 전달받을때 어떤 타입으로 줄건지 success: function(result){ //서버의 응답 데이터가 클라이언트에게 도착하면 자동실행..

자바스크립트 카테고리 기능 만들기 🩸이슈 발생 페이지 추가 안하고 한 페이지 내에서 카테고리 만들어보기. 🩹이슈 해결 See the Pen Untitled by Give J (@Give-J) on CodePen.