728x90 반응형 Front-end/JavaScript24 [Modal] css로 간단하게 모달창 만들기 CSS로 간단하게 모달 창 만드는 코드 공유 드립니다. X버튼과 CANCLE버튼으로 모달창 닫기 가능합니다. 😎HTML 모달 오픈 버튼 ADD Add label name X Name Description CANCLE SAVE 😎 Script // click on 라벨 추가 모달 열기 $(document).on('click', '#add-btn', function (e) { console.log("click event"); $('#modal').addClass('show'); }); // 모달 닫기 $(document).on('click', '#close_btn', function (e) { console.log("click event"); $('#modal').removeClass('show'); });.. 2022. 9. 20. [JS] Nullish coalescing operator 자바스크립트 '??' 연산자 물음표 두개 Nullish 병합 연산자(??) nullish 병합 연산자( ??) 는 왼쪽 피연산자가 null또는 이면 오른쪽 피연산자를 undefined반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다. 이것은 왼쪽 피연산자가 or 뿐만 아니라 거짓 값 이면 오른쪽 피연산자를 반환하는 논리 OR( ||) 연산자 의 특별한 경우로 볼 수 있습니다 . 즉, 를 사용 하여 다른 변수에 일부 기본값을 제공하는 경우 일부 잘못된 값을 사용 가능한 것으로 간주하면(예: 또는 ) 예기치 않은 동작이 발생할 수 있습니다 . nullish 병합 연산자는 5번째로 낮은 연산자 우선 순위 를 가지며 조건부(삼항) 연산자 보다 바로 낮고 ||바로 높습니다 . const foo = null ?? 'default strin.. 2022. 9. 7. 웹 창 크기에 따른 페이지 우회 window.innerWidth / setInterval 윈도우창 사이즈 체크는 간단하게 가능 let winSize = window.innerWidth 아래 코드의 경우 1025사이즈를 기준으로 페이지 우회를 하였다. 자바스크립트는 리액트 useEffect처럼 해당 값이 변화하면 실행하는 로직이 존재 하지않음으로 setInterval 사용하여 초마다 윈도우 창의 크기를 체크해야한다. clearInterval(checked); 를 해주지 않은 이유는 페이지를 이동하기 때문이다. 페이지를 이동하지않고, setInterval 을 멈춰야한다면, clearInterval 을 사용해줘야한다. 2022. 8. 31. 접속 기기 [모바일,태블릿,웹 등등] 체크 사이트를 접속한 기기가 컴퓨터(웹)인지 모바일(핸드폰,태블릿)인지~ 간단한 코드로 확인 가능하다. var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); or var isMobile = /Mobi/i.test(window.navigator.userAgent); isMobile 값은 TRUE / FALSE 로 나온다. if(isMobile){ location.href="../mobile/index.html"; } 첫 접속 화면이 모바일 일시, 모바일 반응형 페이지로 우회 2022. 8. 30. [JavaScript]소수점 반올림하는 방법 toFixed() 함수 toFixed() 함수 toFixed() 함수는 인수로 전달된 소수 자릿수로 반올림된 숫자를 문자열 타입으로 반환한다. 다음은 toFixed() 함수 사용 예제. (123.678).toFixed(); // 124 (123.678).toFixed(1); // 123.7 (123.678).toFixed(2); // 123.68 (123.678).toFixed(3); // 123.678 (123.678).toFixed(4); // 123.6780 typeof (123.678).toFixed(4); // string toFixed() 함수의 반환 결과를 숫자로 변환하기 위해 Number() 함수를 사용할 수 있다. 2022. 7. 4. 랜덤 숫자 출력 - 범위 지정 Math.random() 함수는 0이상~1미만의 난수를 생성한다. (예 : 0.579541) Math.random(); Math.floor() 함수는 해당숫자와 같거나 해당숫자 보다 더 작은 정수를 반환 한다. Math.floor(2.5); //결과 2 Math.floor(-2.5); //결과 -3 Math.random() 함수를 이용하여 범위지정을 할 수 있는 함수를 만든다. var min = 1//범위지정 최소값 var max = 10//범위지정 최대값 let randNum = Math.floor(Math.random()*(max-min+1)) + min; 2022. 6. 30. moment.js 사용 방법 - JavaScript 날짜 라이브러리 😎 설치 npm install moment 😎 import import moment from "moment"; 😎 사용법 현재 날짜 및 시간 - moment() var now = moment(); now.format(); // 2021-10-09T00:01:13+09:00 moment() 함수를 사용해 현재 날짜와 시간 객체를 생성할 수 있습니다. 날짜 지정 생성 - moment() var date = moment("2021-10-09"); date.format();// 2021-10-09T00:00:00+09:00 var date = moment("2021.10.09", "YYYY.MM.DD"); date.format();// 2021-10-09T00:00:00+09:00 var date = momen.. 2022. 4. 26. [javaScript] 날짜 일자 차이 / 개월수 차이 구하기 😎일자 차이 구하기 - 문제 : 2월의 경우 데이터 정확성 떨어짐 //날짜 최대 31일 세팅 const start_date_arr = startDate.split("-"); const end_date_arr = endDate.split("-"); const s_date = new Date(start_date_arr[0],start_date_arr[1],start_date_arr[2]); const e_date = new Date(end_date_arr[0],end_date_arr[1],end_date_arr[2]); const btMs = e_date.getTime() - s_date.getTime() ; const btDay = btMs / (1000*60*60*24) ; //일수차이 문제: 2월의 경.. 2022. 4. 25. 옵셔널 체이닝 '?.' 최근에 추가됨 스펙에 추가된 지 얼마 안 된 문법입니다. 구식 브라우저는 폴리필이 필요합니다. 옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. 😎 옵셔널 체이닝이 필요한 이유 이제 막 자바스크립트를 배우기 시작했다면 옵셔널 체이닝이 등장하게 된 배경 상황을 직접 겪어보지 않았을 겁니다. 몇 가지 사례를 재현하면서 왜 옵셔널 체이닝이 등장했는지 알아봅시다. 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해봅시다. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다. let user = {}; // 주소 정보가 없는 사용자 alert(user.a.. 2021. 12. 30. 이전 1 2 3 다음 728x90 반응형
