개발새발

html 코드모두 선택 항목 1 항목 2 항목 3 전체 선택(전체 해제)하기JavaScriptconst selectAll = document.getElementById('selectAll');const items = document.querySelectorAll('.item');selectAll.addEventListener('change', () => { items.forEach(item => item.checked = selectAll.checked);}); jQuery$('#selectAll').on('change', function() { const isChecked = $(this).is(':checked'); $('.item').prop('checked', is..

.on(event, handler): 이벤트 리스너를 동적으로 추가한다$('#checkItems').on('change', function() { console.log($(this).is(':checked'));}) .change(handler): 특정 입력 요소의 값이 변경 되었을 때 실행된다$('#checkItems').change(function() { console.log($(this).is(':checked'));}) .click(handler): 클릭 이벤트에 반응한다$('#selectAll').click(function() { console.log('모두 선택 클릭')}).on(), .click(), .change() 의 차이 1. .on()동적으로 추가된 요소에도 이벤트를 ..

jQuery는 JavaScript를 간단하고 효율적으로 작성할 수 있게 도와주는 JavaScript 라이브러리이다. 특징간결한 코드: 복잡한 JavaScript 코드를 몇 줄로 대체 가능DOM 조작: HTML 요소를 쉽게 선택하고 조작이벤트 처리: 브라우저 간 차이 없이 클릭, 입력 등의 이벤트를 처리AJAX: 비동기 요청을 간편하게 처리크로스브라우징 지원: 다양한 브라우저에서 동일하게 동작기본 문법$() 로 요소 선택$('#id') // id$('.class') // class$('tag') // 태그 DOM 조작$('#example').text('새로운 텍스트'); // 텍스트 변경$('.example').css('color', 'red'); // CSS 스타일 변경 이벤트 처리$('#button')..

html 코드체크박스체크박스 상태값 읽기JavaScriptconst checkbox = document.getElementById('checkItems')console.log(checkbox.checked); // true 또는 false jQueryconst isChecked = $('#checkItems').is(':checked');console.log(isChecked ? '체크' : '해제');체크박스 상태 변경하기JavaScriptconst checkbox = document.getElementById('checkItems');// 체크박스 선택checkbox.checked = true// 체크박스 해제checkbox.checked = false jQuery// 체크박스 선택$('#checkI..

1. 배열 (Array)순서가 있는 데이터의 집합으로, 인덱스를 통해 데이터에 접근한다길이가 동적으로 변하며, 다양한 데이터 타입을 포함할 수 있다주요 메서드push(), pop(): 끝에 요소 추가/제거shift(), unshift(): 앞에 요소 추가/제거slice(), splice(): 특정 범위의 요소를 복사하거나 수정map(), filter(), reduce(): 데이터 변환 및 처리const arr = [1, 2, 3];arr.push(4); // [1, 2, 3, 4]const doubled = arr.map(x => x * 2); // [2, 4, 6, 8]2. 객체 (Object)키-값 쌍으로 데이터를 저장하는 구조키는 문자열이나 심볼, 값은 어떤 타입이든 가능하다주요 메서드Object...

const firstElement = objectList[0]  objectList가 비어있을 수도 있으므로, 안전하게 확인하려면 다음과 같은 조건을 추가할 수 있다const firstElement = objectList.length > 0 ? objectList[0] : null;

리터럴 정규식(/.../)정규식 리터럴은 고정된 정규식을 작성할 때 사용한다코드가 간결하며, 컴파일 단계에서 정규식을 바로 생성한다const regex = /^\d+(\.\d{1,2})?%/; new RegExp()문자열로 정규식을 생성하며, 런타임에 동적으로 정규식을 만들 때 유용하다문자열로 전달하기 때문에, 역슬래시( \ )를 두 번( \\ ) 사용해야 한다const decimalPlaces = 2;const regex = new RegExp(`^\\d+(\\.\\d{1,${decimalPlaces}})?$`);특수 문자 처리리터럴 정규식정규식의 특수 문자( \d, \w, \s 등)를 사용할 때, 이스케이프 처리가 간단하다new RegExp()정규식 문자열을 전달하기 때문에, 역슬래시를 두 번 사용해..

정규식(Regular Expressions)은 문자열 패턴을 정의하는 도구로, 문자열 검색, 매칭, 추출, 치환 등 다양한 작업에 활용된다. 1. 정규식의 기본 구조1-1. 정규식 리터럴슬래시( / )로 감싸서 정의한다const regex = /abc/ 1-2. RegExp 객체new RegExp() 를 사용하여 동적으로 정규식을 생성한다const regex = new RegExp('abc'); // 'abc'라는 문자열을 찾는 정규식 2. 정규식의 주요 기능2-1. 매칭 (검색)정규식을 사용하여 문자열에서 특정 패턴을 검색한다const regex = /hello/;const str = 'hello world'console.log(regex.test(str)); // true 2-2. 문자열 추출정규식을..

1. 정규식으로 소수점 자리수 제한const regex = /^\d+(\.\d{1,2})?$/^\d+ : 숫자로 시작(\.\d{1,2})? : 소수점 이하 1~2자리 (선택적)$ : 끝validateDecimal(input) { const regex = /^\d+(\.\d{1,2})?$/; return regex.test(input);}// test examplevalidateDecimal('123'); // truevalidateDecimal('123.45'); // truevalidateDecimal('123.456'); // falsevalidateDecimal('abc'); // false 2. 동적으로 정규식 생성하기createRegex(decimalPlaces) { return..

JavaScript의 this 키워드: 스코프에 따른 동작 방식JavaScript에서 this 는 함수가 호출되는 방식에 따라 가리키는 대상이 달라지는 동적 바인딩 키워드다. 상황에 따라 this 의 참조가 바뀌기 때문에 정확한 동작 방식을 이해하는 것이 좋다 1. 전역전역에서 사용될 때, this 는 전역 객체를 참조한다.브라우저 환경에서는 window 객체, Node.js 환경에서는 global 객체를 가리킨다console.log(this) // 브라우저에서는 window, Node.js에서는 global 2. 메서드객체의 메서드에서 this 는 해당 메서드가 속한 객체를 참조한다즉, 메서드가 호출될 때만 this 는 해당 객체를 참조하므로, 호출 위치가 중요하다const person = { n..