본문 바로가기
[jQuery] css 가져오기 변경하기 css 가져오기 $("div").css("스타일 속성"); //$("div").css("width"); css 변경하기 $("div").css("스타일 속성". "변경할 값"); //$("div").css("width", "200px"); 예시코드 사이드바의 버튼 클릭시 토글과 같이 나왔다 사라졌다는 하는 기능입니다. $('.btn').click(function() { if ($('aside').css('left') == '0px') { $('aside').css('left', '-200px') } else { $('aside').css('left', '0') } }) 구현 화면
[jQuery] 페이지마다 해당 메뉴명 스타일 주기 페이지 접근시 해당 메뉴명에 컬러를 주려고 하였으나, 페이지가 이동할 때마다 새로고침을 하여 onclick 이벤트로 불가하여 다른 방법으로 기능 구현을 하였습니다. document.location.pathname으로 링크 주소를 가져와서, 변수에 담음 a[href*='"+link+"']: a href='xxx' xxx 에 link 의 문자열이 포함되었는지 찾기 포함되었을 경우, 클래스를 추가하여 style 적용 jQuery: $(".menu ul li a[href*='"+link+"']") javascript: document.querySelectAll(".menu ul li a[href*='"+link+"']") [attr*=value] attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문..
[js] 브라우저 종류 확인 (navigator.userAgent) 브라우저 종류 확인 (navigator.userAgent) const mobileTypeFn = () => { const uagent = navigator.userAgent.toLowerCase() const android_agent = uagent.search("android") const iphone = uagent.search("iphone") const ipad = uagent.search("ipad") if (android_agent > -1) { //안드로이드 return 'android' } else if (iphone > -1 || ipad > -1) { //아이폰 return 'iphone' } else return 'pc' }
[js] 자주 쓰는 정규식 함수 만들기 휴대폰 번호 정규식 함수 export const regMobile = (value) => { let mobile = /^010([0|1|6|7|8|9]?)-?([0-9]{4})-?([0-9]{4})$/; if (mobile.test(value)) { return true } else { return false } } 비밀번호 정규식 export const regPass = (value) => { //영문, 숫자만 포함 6자리-20자리 let regPass1 = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,20}$/; //영문, 숫자 포함 6자리 이상 let regPass2 = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+@\#$%&\\\=\(\'\"]/g; //특수 문자 체크 if (..
[js] 페이지 리다이렉트 (location.href vs location.replace) 페이지 리다이렉트 하는 두가지 방법에 대해 알아보겠습니다. window.location.href 새로운 페이지로 이동 속성 내부 히스토리에 주소 기록 저장 setTimeout(function(){ window.location.href="move.html" }, 100); window.location.replace() 기존 페이지를 새로운 페이지로 변경 메서드(함수 호출) 내부 히스토리에 주소 기록이 안됨 setTimeout(function(){ window.location.replace('move.html')}, 100); window.location.replace() 예시 window.location.replace('이동할 주소', '_blank') setTimeout(() => {window.clos..
[js] 숫자가 정수인지 소수점인지 체크 (ft. inInteger(), parseInt()) 숫자가 정수인지 소수점인지 체크하기 Number.inInteger() 예제 Number.isInteger(3) //true Number.isInteger(0.8) //false 문자열 숫자로 반환하기, 소수점 정수로 변환하기 parseInt(value) 예제 parseInt('11') //문자열 > 숫자 11 parseInt(5.333) //소수점 > 정수 5 parseInt('-5') //문자열 -> 숫자 -5 parseInt(' ') //숫자가 안들어간 문자열, 공백의 경우, NaN 반환 NaN
[js] input 이벤트 (ft. input 박스) input박스가 이벤트 onchange focus 발생 전 후 비교하여 변화가 일어났을때 발생하는 이벤트 ... } /> onfocus focus 되었을때 발생하는 이벤트 ... } /> onblur focus가 해제 되었을때 발생하는 이벤트 ... } /> onkeypress 문자 값을 생성하는 키보드의 키를 눌렀을때 발생하는 이벤트 ... } /> 모바일웹앱(안드로이드)의 키패드에서 이동을 눌렀을 경우 if (e.key === 'Enter' || e.keyCode === 13) { //함수 코드 }} /> onkeydown 키보드의 키를 눌렀을때 발생하는 이벤트 ... } /> onkeyup 키보드의 키를 눌렀다가 떼었을때 발생하는 이벤트 ... } />
[js] 숫자 여부 확인 isNaN() is not a number의 약자 true 일 경우 숫자가 아니고, false일 경우 숫자 isNaN(value) isNaN() 예제 isNaN(50) //number //false isNaN('goddino') //string //true
[jquery] 아코디언 기능 구현 쇼핑몰에서 상품 목록 상세내역에 많이 사용되는 아코디언을 제이쿼리로 구현하였습니다. 구현 화면 구현 영상 제이쿼리 스크립트 및 css 아코디언 jQuery 코드 html 구조 title ... subtitle1 .../ subtitle2 .../ subtitle3 .../
[js] 자바스크립트 null 이지만 0은 아닐 때 자바스크립트에서 변수가 null 이지만 0은 아닐 때를 찾는 방법입니다. 자바스크립트 null 이지만 0은 아닐 때 null이지만 0을 걸러낼 경우 if (!foo && foo !== 0)
[js] 서버 없이 form에서 데이터 전송 기능 구현 (ft. Google Apps Mail) 웹사이트에서 서버 없이 프론트에서 contact 기능을 구현 합니다. 웹사이트에서 본인의 이름, 연락처, 메일, 메시지를 보내는 컨택트 기능을 사용할 때, 보통 백엔드를 이용해 서버에 데이터를 저장합니다. 하지만 서버가 없는 간단한 랜딩페이지로 구성된 사이트의 경우. 서버 없이 프론트에서 바로 데이터를 전송하고, 저장하는 방법이 있습니다. 참고 사이트: https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#how GitHub - dwyl/learn-to-send-email-via-google-script-html-no-server: An Example of using an HTML form (e.g: "Contact Us..
[js] 배열과 배열의 비교 (compare arrays in javascript) 배열과 배열이 같은지 여부를 확인하는 방법입니다. 배열과 배열을 === 로 비교하였을 때 값은 false 입니다. let arr1 = [1,2,3]; let arr2 = [1,2,3]; console.log(arr1===arr2); //false 배열과 배열의 비교 두 배열의 길이가 같은지 비교 한 배열의 각 요소가 다른 비교 대상의 배열에도 존재하는지 여부 let arr1 = [1,2,3]; let arr2 = [1,3,2]; const result = arr1.length === arr2.length && arr1.every((value, idx) => value === arr2[idx]); console.log(result) //false
[js] 디데이 카운더 기능 라이브러리 웹 디데이 카운터 표시할때 유용한 라이브러리 입니다. Time and Date https://www.timeanddate.com/ timeanddate.com 5 Planets queue up along with the Moon, a Super Strawberry Moon shines in the night sky, and the June solstice marks the beginning of summer in the Northern Hemisphere. www.timeanddate.com 먼저 구글에서 time and dat를 검색하거나 위의 링크를 눌러 사이트로 이동하세요. 메인 화면에서 오른쪽 상단 메뉴에서 Free Fun > Free Countdown For Your Site 선택. 여기서 카운..
[js] 팝업창 오픈 후 배경 스크롤 방지 자바스크립트에서 팝업창 오픈 후 뒤의 배경의 스크롤 막는법입니다. 팝업창 오픈 후 배경 스크롤 방지 const body = document.querySelector('body') const onOpenGuide = () => { //팝업창 오픈시 body.style.overflow = 'hidden' body.style.width = '100%' } const onCloseGuide = () => { //팝업창 닫을때 body.style.removeProperty('overflow') body.style.removeProperty('width') }
[js] 천자리 콤마 적용 (천자리 점찍기) 자바스크립트를 이용하여 숫자에 천자리 콤마 찍는 방법입니다. toLocaleString() 추천하는 방법입니다. toLocaleString() 함수는 숫자를 로컬의 language format에 맞는 문자열로 세팅해줍니다. 파라미터가 빈 값이면 사용자 로컬 환경의 locale을 default로 사용합니다. Number(no)?.toLocaleString('en') 정규식 사파리 환경 지원을 하지 않아 아이폰 개발을 원한다면 사용하면 안됩니다. num.toString().replace(/\B(?
[js] 페이지내 특정 위치로 스크롤 이동하기 제이쿼리를 이용해 버튼 클릭시 특정위치로 스크롤 이동하는 방법입니다. 주로 랜딩페이지 상단 메뉴바에 많이 사용되는 기능합니다. 버튼 클릭시 페이지내 특정 위치로 스크롤 이동합니다. 아래의 코드를 사용하기 전에 jquery.min 스크립트 파일 태그 내에 삽입합니다. easing 효과를 위해 jquery.easing 스크립트 파일을 태그 내에 삽입합니다. easing 효과를 원치 않으면 easeInOutExpo 부분만 삭제하면 됩니다. html 버튼 script //네이게이션 menu click시 easing기능으로 부드럽게 이동 $(".btn").click(function(event){ event.preventDefault(); //이전의 이벤트를 기본값 x = $(this).attr("href"); /..
[js] 문자열 특정 문자 추출하기 substring을 사용하여 특정문자열만 추출합니다. url path에서 특정 구간만 추출하여야 할 경우, substring을 이용해 특정문자열만 추출할 수 있습니다. 원본 코드: 아래 코드에서 EncodeData= 뒤에 복호화된 코드만 추출할 경우입니다. http://localhost:3000/success?EncodeData=AgAFQlg5MTRIeXp/kL... 애프터 코드: AgAFQlg5MTRIeXp/kL 문자열 특정 문자 추출하기 let url = http://localhost:3000/success?EncodeData=AgAFQlg5MTRIeXp/kL let data = url.substring(url.indexOf('=') + 1) // = 다음 문자열부터 끝까지 추출 console.log..
[js] 배열 map으로 object에 key 추가하기, value 추가 map으로 object에 key 추가하는 방법입니다. before //datas 0: {day: '2022-05-10'} 1: {day: '2022-05-11'} 2: {day: '2022-05-12'} 3: {day: '2022-05-13'} 4: {day: '2022-05-14'} 5: {day: '2022-05-15'} 6: {day: '2022-05-16'} 가공 후 after 0: {day: '2022-05-10', data: ''} 1: {day: '2022-05-11', data: ''} 2: {day: '2022-05-12', data: ''} 3: {day: '2022-05-13', data: ''} 4: {day: '2022-05-14', data: ''} 5: {day: '2022-0..
[js] 자바스크립트 debugger 활용 자바스크립트에서 디버깅시 debugger 기능을 활용할 수 있습니다. debugger debugger문을 삽입한 시점이 breakpoint가 되어 디버깅을 할 수 있음 Call Stack 내역을 통해 호출 스택의 진행 순서를 알 수 있음 실행 흐름을 따라가면서 코드를 체크하여 검증할 수 있음 debugger 코드 사용 debugger; 라고 코드 중간에 삽입하여 사용하면 debugger 실행 시점일때 개발자 도구가 source로 바뀌면서 화면이 멈춥니다. debugger; 사용 화면 디버깅 버튼을 누르며 한줄씩 코드를 실행드가 실행해보면 각 변수에 할당되는 값이 우측에 표시되기 때문에 디버깅을 위해 console이나 alert로 값을 일일이 찍어서 확인할 필요가 없습니다. 오른쪽에 도돌이표처럼 생긴 버튼..
[js] 자바스크립트 함수 선언과 함수 호출 자바스크립트 함수와 함수 호출에 관한 설명입니다. 함수 선언 코드 형식1 es6 함수 문법: 화살표 함수 아래 함수에서 { } 는 객체가 아니라 블럭 객체를 리턴할때는 바디를 ( ) 감싸 주어야 함 -> const add = () => ({ ... }) const add = () => a+b; //함수 선언 //const add = () => {return a+b} 위의 함수와 같음 //const add = () => ({a+b}) 객체를 리턴할때는 바디를 ( ) 감싸 주어야 함 코드 형식2 매개변수를 넣어 다양한 함수 활용 가능 function cal(func,a,b) { //함수 선언 return func(a,b) //명령 } //conts cal = (func,a,b) => func(a,b) 와 위..
[js] onclick 이벤트 링크 넣기 onclick 이벤트를 이용해 링크를 넣는 방법입니다. html에서 링크를 연결할 때는 주로 를 연결하는데 다른 방법으로 태그에 onclick 이벤트를 걸어 링크를 삽입할 수 있습니다. onclick 이벤트 링크 넣기 onclick="location.href='';" onclick 이벤트 링크 예제 ...
[js] html 이미지 저장하기 기능 구현 (ft. html2canvas) html 라이브러리를 통해 이미지 저장하기 기능입니다. html2canvas html을 canvas로 변환하여 캡처된 화면을 이미지 저장해주는 라이브러리 입니다. https://www.npmjs.com/package/html2canvas html2canvas Screenshots with JavaScript. Latest version: 1.4.1, last published: 2 months ago. Start using html2canvas in your project by running `npm i html2canvas`. There are 1381 other projects in the npm registry using html2canvas. www.npmjs.com html2canvas 적용 코..
[js] 단어 filtering 다중 단어 filtering (ft. includes, some) 원하는 단어 또는 다중 단어 한번에 필터링하기 입니다. 배열 안에서 특정 단어 또는 text가 들어간 요소만 추출하거나 제외시키는 작업이 필요할 경우 사용합니다. filtering에 자바스크립트의 includes와 some 메소드를 사용하여 구현합니다. includes는 true, false를 반환합니다. some은 한가지라도 참일 때 true를 반환하고 빈 배열이면 false를 반환합니다. 단어 필터링 배열 안에 "AA"가 들어가는 단어를 필터링할 때 Array.filter(el => el.includes('AA')) Array.filter(el => el.includes('AA')).map(el => {el}) 배열 안에 "AA"가 들어가는 단어만 빼고 필터링 할때 Array.filter(el => ..
[js] 반응형 이미지 맵 구현 (ft. image-map 라이브러리) js 또는 react에서 라이브러리를 이용해 반응형 이미지 맵을 구현합니다. react에서 resposive image map 구현을 시도할때 가장 유명한 라이브러리는 jQuery를 이용한 rwdimagemap 라이브러리인데 react에서 jQuery 을 설치하고 싶지도 않았고, 설치하였구나 작동이 안되고 오류 메시지가 출현하였습니다. 그래서 react에서 할 수 있는 다른 javascript responsive image map 라이브러리를 찾았습니다. 반응형 이미지 맵 구현 하기 구현 화면 image-map 라이브러리 image-map 이라는 라이브러리고 구글에서 image-map을 검색하여 npmjs 사이트에 가면 자세한 자료를 볼 수 있습니다. image-map 라이브러리 사용법 image 좌표 ..
[js] 두가지 배열 합치기, 중복되는 요소 찾기 두가지 배열 합치기(배열 합집합) 배열 합치기 예시 전개 연산자 spread operator(...)를 이용해 두 배열을 그대로 합칩니다. 여기서 중복된 요소를 제거하기 위해 new Set으로 한번 묶어줍니다. let arr1 =[1,2,3,9] let arr2=[2,4,6,9] let newArr = [...arr1, ...arr2] console.log([...new Set(newArr)]) //결과 (6) [1, 2, 3, 9, 4, 6] 두가지 배열 중복되는 값 찾기(배열 교집합) 배열 중복되는 요소 찾기 예시 filter와 includes를 이용하여 중복되는 값을 찾을 수 있습니다. let arr1 =[1,2,3,9] let arr2=[2,4,6,9] let newArr = [...arr1, ...
[js] find includes 차이 array에서 사용하는 메소드 find()와 includes()의 비교입니다. array.find() find() 메서드는 주어진 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefinded를 반환합니다. 찾은 요소의 값 대신 인덱스를 반환하는 것은 findIndex() 요소의 위치를 찾고자 하는 경우에는 indexOf() 배열 요소가 해당 배열에 존재하는지 확인하고자 하는 경우에는 Array.prototype.indexOf() 또는 Array.prototype.includes()를 사용세요. array.find() 예시 const arr1 = [5, 30, 7, 120, 45]; const found = arr1.find(el => el > 10); console.log(f..
[js] 자바스크립트 코드 줄이는 방법 js 코드를 더 짧게 줄이는 몇가지 방법입니다. 자바스크립트 코드 축약 방법 1. or 조건문 (||) 2. and 조건문 (&&) 3. null, undefined, ' ' 체크 4. 삼항연산자 5. 숫자 형변환 1. or 조건문 (||) || 대신 includes()를 사용하면 끝없이 긴 조건문을 짧게 줄일 수 있습니다. before if (a === 'hi' || a === 'hello' || a === 'hallo') { code... } after if (['hi', 'hello', 'hallo'].includes(a)) { code... } 2. and 조건문 (&&) ?. 연산자인 optional chaining operator를 사용하여 객체의 속성값을 접근합니다. 속성 값이 없을 경우 u..
[js] button submit 막기 (ft. form) button의 submit 방지하는 방법입니다. form 태그에서 내에 위치하는 button은 클릭 시 항상 onSubmit 속성의 함수를 실행하는데요. button에 뒤로 가기 또는 취소의 기능을 원할때는 onSubmit 기능을 막아야 합니다. button submit 방지 button type 속성을 button으로 설정합니다. 버튼 form 태그 안의 button 사용법 저장 //submit 실행 취소 //submit 방지
반응형