IT 성장일기

디스트럭처링 문법(Destructuring Assignment) 파헤치기객체에서 값을 가져와 변수에 할당하는 코드 중 처음 보는 방식이 있어 따로 조사 및 정리를 해보았습니다.궁금증이 생긴 코드는 아래와 같고 조사해 본 결과 디스트럭처링 문법이라고 합니다.const { day, area } = dayElement.dataset; 디스트럭처링(Destructuring) 문법이란?구조화된 배열이나 객체를 비구조화하여 변수에 할당하는 방식을 의미합니다.ES6에서 도입된 이 문법은 코드를 간결하고 명확하게 작성하도록 해줍니다.디스트럭처링의 기본 사용 방법1. 배열 디스트럭처링 : 배열의 요소를 순서에 따라 개별 변수로 할당합니다.// 배열 디스트럭처링const arr = [1, 2, 3];const [first..

숫자 단위에 맞춰 쉼표, 서수 표현, 단위 이니셜 추가하기 웹에서 숫자를 표시하다 보면 단위나 상황에 따라 후처리를 해주는 경우가 종종 있습니다. 예를 들면 천 단위가 넘어가는 금액을 '1000000＄'와 같이 쓴다면 가독성도 떨어지고 조금 부족해 보입니다. 자바스크립트를 이용해 숫자에 아래처럼 여러 가지 효과를 주는 코드를 공유하겠습니다.😊 쉼표 추가하기 서수로 표현하기 단위 이니셜 추가하기 쉼표 추가하기 const numberWithCommas = (number) => { if (typeof number !== 'number') { throw new Error('Input must be a number.'); } return number.toLocaleString(); // 브라우저의 언어 설정에 따..

Javascript에서 반복문 사용하기 자바스크립트에서도 코드 반복을 위한 반복문을 작성할 수 있습니다. 자바와 마찬가지로 do-while문, while문, for문 세 종류를 사용할 수 있습니다. do-while do-while문은 while의 조건이 true인 경우 do 블록 안의 코드를 반복합니다. 주로 조건의 true, false 여부와 상관없이 코드를 최소 한 번은 실행시키기 위해 사용합니다. 아래 코드는 i가 0보다 클 동안 i의 값을 알림 창으로 띄워주는 코드입니다. let i = 10; do { alert(i); i-- } while (i); while while문은 조건이 먼저 명시되고 실행코드가 나중에 나타나게 됩니다. 조건이 true인 한 코드를 반복하게 됩니다. 아래 코드의 경우는 ..

HTML 문서에 Javascript 삽입하기 HTML 문서에는 여러 가지 태그를 사용할 수 있는데 이렇게 스크립트 태그 내부에 src 속성으로 파일 경로를 입력하면 외부 스크립트 파일을 HTML 문서에 추가할 수 있습니다. 외부 스크립트를 가져오는 경우는 크게 두가지로 나눌 수 있습니다. 스크립트의 길이가 너무 길어 HTML 문서에 삽입하면 코드의 길이가 너무 길어지는 경우 여러 HTML 문서에서 공용으로 사용하게 될 스크립트인 경우 여러 개의 스크립트를 불러오고 싶다면 도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻 감사합니다.🙂

Javascript에서 데이터 형식 변환하기 자바스크립트도 데이터 형 변환을 지원합니다. 대표적으로 alert 함수는 값을 문자열의 값으로 자동 변환하고 수식 연산자는 전달받은 값을 숫자로 자동 변환합니다. 문자형으로 변환하기 alert 메서드는 매개변수로 문자형을 받기 때문에 alert 메서드가 호출될 때 괄호 안의 값은 자동으로 문자열로 변환됩니다. 또는 String() 함수를 호출해 괄호 안에 값을 전달함으로써 명시적으로 문자열 형식으로 변환할 수 있습니다. 변수에 따옴표나 큰따옴표 기호를 더하는 방식으로도 문자열로 형변환을 할 수 있습니다. 문자열 변환하기 function castingToString(){ let a = 1; let b = 1+''; let c = String(a); alert(t..

실시간으로 두 개의 input 요소의 값 비교해서 이벤트 발생시키기 예를 들면 입력한 두 개의 비밀번호 값이 일치하는지 검사해야 하는 경우는 정말 자주 있습니다. 그럴 때 값을 비교해서 이벤트를 발생시키는 방법을 기록합니다. Template 두 개의 input 요소를 추가해 줍니다. New password Enter again Script document.addEventListener("DOMContentLoaded", function() { const newPassword = document.querySelectorAll(".newPassword"); let password1 = ""; let password2 = ""; newPassword.forEach((input, index) => { input..

버튼에 값을 저장하고 클릭 시 이벤트 부여하기 jQuery를 이용해서 버튼에 값을 저장하고 이를 이용하는 방법을 기록합니다. Template 버튼입니다. jQuery 도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻 감사합니다.🙂

Checkbox 체크할 때 이벤트 발생시키기 Checkbox On Off 이벤트 발생 시 즉각적으로 이벤트를 처리할 수 있습니다. Template Script 도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻 감사합니다.🙂