CODING/⚡JavaScript

카카오맵 API 구현하기1. 카카오 맵 API 연결https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com애플리케이션 생성 및 도메인 등록 & 앱 키 발급 진행  2. 등록할 장소 찾기https://map.kakao.com/ 카카오맵당신을 좋은 곳으로 안내 할 지도map.kakao.com 카카오 맵에 등록할 장소 검색   HTML 태그 복사클릭하면 해당 JS 코드가 복사된다.  3. HTML, JS 코드 삽입JS1) 상단에 카카오 script 이용 위한 링크 import2) 복사한 JS 코드 붙혀넣기 (t..

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..

모바일 메뉴, 햄버거 버튼 만들기 🩸이슈 발생 모바일 내비게이션 바인 햄버거 버튼과 클릭 시 뜨는 메뉴를 만들어보자. 🩹이슈 해결 See the Pen Untitled by Give J (@Give-J) on CodePen. 1. HTML 메인메뉴 서브메뉴1 서브메뉴2 2. CSS /* 헤더 */ #header-subdiv{ background-color: white; height: 120px; display: flex; justify-content: space-between; } /* 로고 이미지 #logo{ width: 300px; height: 88px; padding: 16px 410px 16px 40px; } */ /* 햄버거 아이콘 */ #hamburger-menu { cursor: point..

오늘 하루 보지않기 (24시간) 팝업창 만들기 🩸이슈 발생 오늘 하루 보지않기 (24시간) 팝업창 만들기 🩹이슈 해결 See the Pen 팝업창 by Give J (@Give-J) on CodePen. 쿠키를 이용해서 24시간동안 팝업창이 보이지 않게한다. popup 쿠키 삭제 시 팝업창 다시 뜸.

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. 💡유의사항 바탕(배경)을 눌러도 툴팁 박스가 닫히도록 구현했다!