본문 바로가기

JavaScript228

[ JavaScript ] Lodash 라이브러리 사용해보기. 안녕하세요, 오늘은 Lodash 라는 라이브러리를 사용해보겠습니다. Lodash는 자바스크립트 라이브러리로 객체, 배열 등의 데이터의 구조를 쉽게 변환하여 사용하게끔 도와주며, _ 라는 기호를 사용하여 lodash 라고 라이브러리명이 지어진 것 같습니다. 데이터를 다룰 때 복잡한 자바스크립트 코드 대신에 이 라이브러리를 사용함으로써 좀더 효율적인 코드를 작성할 수 있게 됩니다. 설치방법 : - CDN 사용 https://www.jsdelivr.com/package/npm/lodash - npm 사용 npm install --save lodash 먼저 간단한 예제를 통해 Lodash 라이브러리를 사용해보겠습니다. 다음은 fruits 라는 배열에서 값이 '복숭아'인 요소를 제거한 후 나머지 요소들을 출력하는.. 2022. 12. 2.
[ JavaScript ] 이메일 인증 화면 예제 오늘은 HTML CSS JAVASCRIPT를 사용해서 이메일 인증 화면을 만들어보겠습니다! 먼저 예제가 실행된 모습입니다! 유효 시간 변경, 인증코드 정규식 변경을 하면서 활용하시면 될 것 같습니다! 전체 코드입니다! 이메일 인증 인증코드 발송 [email 메세지] 이메일을 잘못 입력하셨나요? [이메일 변경] 인증 코드 인증코드 확인 인증코드를 받지 못하셨나요? [인증코드 재발송] [인증코드 메세지] 2022. 11. 30.
[Javascript] 템플릿 리터럴 (Template Literals) 안녕하세요. 오늘은 템플릿 리터럴에 대해 알아보려고 합니다. ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였습니다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용합니다. 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(String Interpolation)이라 합니다. 템플릿 리터럴의 기본 문법은 `string text` // 문자열 표현 `string text line 1 string text line 2` // 개행된 문자열 표현 var expression; `string tex.. 2022. 11. 19.
[ JavaScript ] 게시판 만들기 예제 오늘은 HTML CSS JAVASCRIPT를 사용해서 게시글을 출력하고, 페이지를 이동해보겠습니다! 먼저 예제가 실행된 모습입니다! 게시글의 형식, 게시글 데이터, 게시글 총 갯수를 바꾸면서 다양하게 활용하시면 될 것 같습니다! 전체 코드입니다! 반응형 게시판 목록 만들기 번호 제목 작성자 작성일 조회 좋아요 이전 다음 2022. 10. 24.
[JavaScript] 자식 창에서 부모 창으로 데이터 전송하기 부모 창에서 자식 창을 열고, 자식 창에서 부모 창으로 데이터를 전달하는 방법을 알아보겠습니다. test_parent.html 자식 창 열기 받아온 데이터 : test_child.html 데이터 보내기 test_parent.js //자식 창 열기 버튼 클릭 이벤트 document.querySelector('#btn_open_child').addEventListener("click", () => { window.open("test_child.html", "_blank", `width=1000, height=600, toolbars=no, scrollbars=yes`); }); //자식창에서 받아온 데이터 처리 window.call = function (data) { document.querySelector.. 2022. 10. 22.
[JavaScript] Web Notification 구현하기 자바스크립트로 웹 알림 보내기를 구현해보겠습니다. noti_test.html 알림 보내기 noti_test.js askNotificationPermission(); function makeNoti() { // 사용자 응답에 따라 단추를 보이거나 숨기도록 설정 if (Notification.permission === "denied" || Notification.permission === "default") { alert("알림이 차단된 상태입니다. 알림 권한을 허용해주세요."); } else { let notification = new Notification("test", { // "test" => 제목 body: "웹 알림 입니다.", // 메세지 icon: `/lib/img/novalogo_copy.p.. 2022. 10. 6.
[Javascript] scrollIntoView를 사용해 화면 하단으로 이동하기 오늘은 scrollIntoView를 사용해서 화면 하단으로 이동해보겠습니다! scrollIntoView(false) 를 사용하면 스크롤이 하단으로, scrollIntoView(true) 를 사용하면 스크롤이 상단으로 이동합니다. * 결과 * 전체코드 입력 안녕하세요~ 2022. 9. 24.
[JavaScript] addEventListener 한 번만 동작하게 만들기 안녕하세요. addEventListener로 어떠한 타겟에 이벤트를 등록할 때 한 번만 동작하게 만드는 방법을 알아보겠습니다. 1. addEventListener(type, listener); 2. addEventListener(type, listener, options); 보통은 이벤트를 등록할 때 1번처럼 코드를 작성하는데, 2번과 같이 옵션을 부여할 수 있습니다. document.querySelector("엘리먼트 아이디 또는 클래스명") .addEventListener('click', (e) => { listener 함수 또는 실행 코드 }, { once: true }); { once : true } 이렇게 지정하면 리스너가 발동한 후에 제거가 됩니다. 더 많은 옵션은 아래 문서에서 확인하실 수 .. 2022. 9. 21.
[JavaScript] 문자열 모든 공백 제거하기 안녕하세요! 오늘은 split() 과 join()을 사용해서 문자열의 모든 공백을 제거해보려고 합니다! 문자열.split(구분 기호)는 구분 기호를 기준으로 문자열을 분리하고 배열로 만들어줍니다! ex) var a = '바람+비+불' var myVar1 = a.split('+'); => myVar1 = ['바람', '비', '불']; var a = '바람,비,불' var myVar2 = a.split(', '); => myVar2 = ['바람', '비', '불']; 배열.join(구분 기호)는 구분 기호로 배열의 각 요소를 이어 붙여 하나의 문자열로 만들어줍니다! ex) var a = ['바람', '비', '불']; var myVar1 = a.join(); => myVar1 = '바람비불' var myV.. 2022. 9. 2.

티스토리툴바