반응형 javascript31 JavaScript에서 랜덤 난수를 생성하는 방법 JavaScript에서 30자리 랜덤 난수를 생성하는 방법을 아래에 정리했습니다.빠른 방법 (숫자만)function generateRandomNumber(length = 30) { let result = ''; const digits = '0123456789'; for (let i = 0; i 특징숫자만 포함길이 지정 가능 (기본 30자리)더 안전한 방법 (crypto 사용)function secureRandomNumber(length = 30) { const array = new Uint8Array(length); window.crypto.getRandomValues(array); // 보안 난수 생성 return Array.from(array, byte => (byte % 10).toSt.. 2025. 3. 21. JavaScript에서 특정 배열 값을 찾아 새로운 값으로 변경 JavaScript에서 특정 배열 값을 찾아 새로운 값으로 변경하는 방법은 여러 가지가 있습니다. 상황에 따라 아래 방법 중 하나를 선택하면 됩니다.1. map 메서드 사용 (추천)배열을 반복하며 특정 조건일 때만 값을 변경합니다.const fruits = ["apple", "banana", "orange"];const updatedFruits = fruits.map(fruit => fruit === "banana" ? "grape" : fruit);console.log(updatedFruits); // ["apple", "grape", "orange"] 설명map은 새 배열을 반환하며 기존 배열은 변경하지 않습니다.특정 값만 조건(fruit === "banana")으로 교체할 수 있습니다.불변성을 유지.. 2025. 3. 19. JavaScript에서 특정 배열 값을 찾아 삭제하는 방법 JavaScript에서 특정 배열 값을 찾아 삭제하는 방법은 여러 가지가 있습니다. 사용 목적(원본 배열 유지 여부, 단일/다중 값 삭제)에 따라 적절한 방법을 선택하세요. 1. filter 메서드 사용 (가장 추천)특정 값을 제외한 새 배열을 반환합니다.불변성 유지 → React/Next.js 프로젝트에서 안전하게 사용 가능const fruits = ["apple", "banana", "orange", "banana"];const updatedFruits = fruits.filter(fruit => fruit !== "banana");console.log(updatedFruits); // ["apple", "orange"] 설명filter는 조건(fruit !== "banana")에 맞는 요소만 새 배.. 2025. 3. 17. addEventListener 기능 addEventListener는 JavaScript에서 이벤트를 요소에 등록할 때 사용하는 메서드입니다. 사용자가 클릭, 키보드 입력, 마우스 이동 등 특정 이벤트를 발생시킬 때 지정된 함수를 실행합니다.기본 문법element.addEventListener(event, listener, options); 매개변수 설명element: 이벤트를 등록할 DOM 요소event: "click", "mouseover", "keydown" 등 이벤트 이름 (문자열)listener: 이벤트 발생 시 실행할 콜백 함수options (선택): boolean 또는 객체로, 이벤트 처리 방식 지정 (capture, once, passive 등) 간단한 예시const button = document.querySelector('.. 2025. 3. 15. JavaScript의 배열 메서드 pop() jQuery에는 직접적으로 pop() 함수가 존재하지 않지만, JavaScript의 배열 메서드인 pop()을 사용할 수 있습니다. JavaScript의 배열 메서드 pop()은 배열의 마지막 요소를 제거하고 해당 요소를 반환합니다. 이를 jQuery와 함께 사용할 수 있는 예제와 함께 설명하겠습니다. pop()의 기능배열에서 마지막 요소를 제거합니다.제거된 요소를 반환합니다.배열의 길이가 줄어듭니다. 사용 예제 1: 순수 JavaScript에서 pop()let arr = [1, 2, 3, 4];let lastElement = arr.pop(); // 배열의 마지막 요소 제거console.log(lastElement); // 출력: 4console.log(arr); // 출력: [1.. 2024. 12. 11. jQuery의 click() 이벤트를 실용적으로 활용하는 기본적인 예제 jQuery의 click() 이벤트 함수는 사용자가 HTML 요소를 클릭할 때 특정 작업을 수행하도록 JavaScript 코드를 실행하는 데 사용됩니다. 아래는 가장 일반적으로 사용되는 click() 이벤트 함수 예제 입니다. 1. 버튼 클릭 시 텍스트 변경 클릭하세요 이곳의 텍스트가 변경됩니다. 2. 리스트 항목 추가하기 리스트 항목 추가 기존 항목 1 기존 항목 2 3. 토글 버튼으로 요소 보이기/숨기기 토글 이 텍스트는 토글됩니다. 4. 특정 클래스의 모든 버튼에 이벤트 적용 버튼 1 버튼 2 버튼 3 이 예제들은 jQuery의 click() 이벤트를 실용적으로 활용하는 데 기본적인 시작점이 될 것입니.. 2024. 11. 18. jQuery를 이용한 부모 창 특정 아이템 호출 jQuery를 이용한 부모 창 특정 아이템 호출 팝업 창에서 jQuery를 사용하여 부모 창의 특정 아이템(예: 특정 HTML 요소)을 호출하거나 조작하고 싶다면, window.opener 객체를 이용하여 부모 창의 DOM에 접근할 수 있습니다. 이를 통해 부모 창의 특정 아이템에 접근하고, 이를 조작할 수 있습니다. 예제 코드1. 부모 창 (parent.html)부모 창에서는 조작할 아이템(예: 특정 요소)을 정의합니다. 부모 창 이 텍스트가 팝업 창에서 변경될 것입니다. 팝업 창 열기 2. 팝업 창 (popup.html)팝업 창에서는 부모 창의 특정 아이템을 조작합니다. 팝업 창 팝업 창 닫기 설명window.opener: 팝업 창에서 부모 창을 참조합니다.wind.. 2024. 9. 8. jQuery를 이용한 새창에서 부모창 함수 호출 jQuery를 이용한 새창에서 부모창 함수 호출 jQuery와 JavaScript를 사용하여 새 창(팝업 창)에서 부모 창의 함수를 호출하려면 window.opener 객체를 활용할 수 있습니다. 이 객체는 새 창이 부모 창을 참조할 수 있게 해주며, 이를 통해 부모 창에 정의된 함수를 호출할 수 있습니다. 예제 코드1. 부모 창 (parent.html)부모 창에서는 호출될 함수를 정의합니다. 부모 창 팝업 창 열기 2. 팝업 창 (popup.html)팝업 창에서는 부모 창의 함수를 호출합니다. 팝업 창 팝업 창 닫기 설명window.opener: 팝업 창을 열어준 부모 창을 참조합니다.window.opener.parentFunction('Hello from the popup!.. 2024. 9. 6. jQuery 새 창에서 부모 창 새로 고침 팝업 창에서 부모 창 새로고침 jQuery를 사용하여 새 창(팝업 창)에서 부모 창을 새로고침하는 방법은 다음과 같습니다. 이 방법은 팝업 창이 부모 창과 동일한 도메인에서 열려 있을 때 작동합니다. 팝업 창에서 부모 창을 새로고침하려면 window.opener 객체를 사용할 수 있습니다. // 부모 창을 새로고침하는 코드if (window.opener && !window.opener.closed) { window.opener.location.reload(); // 부모 창 새로고침 window.close(); // 팝업 창 닫기 (선택 사항)} 설명window.opener: 팝업 창을 열어준 부모 창을 가리킵니다. 팝업 창에서 부모 창에 접근할 때 사용됩니다.window.opener.. 2024. 9. 2. Simple Modal Box Snippet - 모달 html, css, javascript로 만들어진 모달 바로가기 2017. 5. 26. Switchy checkbox - 체크박스 html, css, javascript로 만들어진 체크박스 바로가기 2017. 5. 25. Happy little checkboxes - 체크박스 html, css, javascript로 만들어진 체크박스 바로가기 2017. 5. 17. 이전 1 2 3 다음
