본문 바로가기

Javascript15

Javascript 문자열 검색3. search(), match() search(): 문자열에서 정규 표현식과 일치하는 첫 번째 인덱스를 반환합니다. 찾지 못하면 -1을 반환합니다. match(): 문자열에서 정규 표현식과 일치하는 모든 결과를 배열로 반환합니다. 일치하는 것이 없으면 null을 반환합니다. search()사용법: string.search(regexp)문자열에서 정규 표현식과 일치하는 첫 번째 인덱스를 반환합니다.찾지 못하면 -1을 반환합니다.정규 표현식을 사용하여 복잡한 검색을 수행할 수 있습니다.const myString = "Hello, world!";console.log(myString.search(/world/)); // Output: 7console.log(myString.search(/foo/)); // Output: -1  match()사용.. 2024. 4. 28.
Javascript 문자열 검색2. indexOf(), includes() indexOf(): 문자열 또는 배열에서 특정 값의 첫 번째 인덱스를 반환합니다. 찾지 못하면 -1을 반환합니다. includes(): 문자열 또는 배열에 특정 값이 포함되어 있는지 확인합니다. 포함되어 있으면 true, 그렇지 않으면 false를 반환합니다. indexOf()사용법: string.indexOf(searchValue, [fromIndex])문자열 또는 배열에서 특정 값의 첫 번째 인덱스를 반환합니다.두 번째 매개변수 fromIndex는 검색을 시작할 인덱스를 지정합니다.찾지 못하면 -1을 반환합니다.const myString = "Hello, world!";console.log(myString.indexOf("world")); // Output: 7console.log(myString.i.. 2024. 4. 28.
JavaScript 문자열 검색. matches() 와 contains() matches()는 요소가 특정 CSS 선택자와 일치하는지 확인하는 메서드입니다. contains()는 문자열에 특정 문자열이 포함되어 있는지 확인하는 메서드입니다.  두 메서드는 서로 다른 용도로 사용됩니다. matches() 메서드 사용법: element.matches(selectorString)  요소가 지정된 CSS 선택자와 일치하는지 확인합니다.일치하면 true, 그렇지 않으면 false를 반환합니다.주로 DOM 요소의 클래스, 태그 이름, 속성 등을 확인할 때 사용합니다. const element = document.querySelector('div.my-class');if (element.matches('div.my-class')) { console.log('The element match.. 2024. 4. 28.
자바스크립트에서 인덱스를 찾는 다양한 방법 자바스크립트에서 인덱스를 찾는 일은 프로그래밍 과정에서 흔히 마주치는 일입니다. 그럼 어떻게 다양한 방법으로 인덱스를 찾을 수 있을까요? 지금부터 알아보겠습니다. 배열에서 인덱스 찾기 indexOf 메서드 indexOf 메서드는 배열에서 특정 요소의 첫 번째 인덱스를 반환합니다. 원하는 요소가 배열에 없으면 -1을 반환합니다. let fruits = ["apple", "banana", "cherry"]; console.log(fruits.indexOf("banana")); // 1을 반환합니다. findIndex 메서드 findIndex 메서드는 조건에 맞는 첫 번째 요소의 인덱스를 반환합니다. 조건을 만족하는 요소가 없으면 -1을 반환합니다. let numbers = [2, 4, 6, 8, 10]; l.. 2023. 9. 9.
사이즈 관련 속성과 함수 및 위치 값 구하기 offsetWidth / offsetHeight: 요소의 전체 너비 및 높이를 반환합니다. border, padding, 스크롤바의 크기를 포함합니다. const box = document.querySelector('#box'); console.log(`offsetWidth: ${box.offsetWidth}px`); console.log(`offsetHeight: ${box.offsetHeight}px`); clientWidth / clientHeight 요소의 내부 너비 및 높이를 반환합니다. padding은 포함하지만, border, margin, 스크롤바는 포함하지 않습니다. const box = document.querySelector('#box'); console.log(`clientWidth.. 2023. 8. 17.
Element.animate() animate() 메소드는 JavaScript에서 다양한 애니메이션 효과를 구현하는 데 사용됩니다. animate() 메소드를 사용하면 요소를 회전, 페이드인/아웃, 크기, 위치, 색상 등을 변경하는 애니메이션 효과를 만들 수 있습니다. element.animate(keyframes, options); `animate()` 메소드는 두 개의 인수를 받습니다. 첫 번째 인수는 애니메이션의 키프레임(keyframes)을 정의하는 배열입니다. 각 키프레임은 요소의 스타일을 변경하는 객체로 구성됩니다. 두 번째 인수는 애니메이션의 지속 시간, 반복 횟수 등을 정의하는 객체입니다. 이 객체는 `duration` 속성을 사용하여 애니메이션의 지속 시간을 밀리초 단위로 지정하고, `iterations` 속성을 사용하.. 2023. 7. 28.