webplacidcy

문법 replace(해당 문자열, 바꿀 문자열) 특정 문자나 문자열을 다른 문자, 문자열로 바꾼다 const str = "자바스크립트(javascript) 공부"; const text = str.replace("공부", "스터디"); const str2 = "img01.jpg"; const text2 = str2.replace("img01.jpg", "img02.jpg"); document.write(text); document.write(text2); 결과

문법 value.trim(); 문자열의 공백을 제거하는 함수 const str1 = " ' javascript ' ";// 좌우 공백 const currentStr1 = str1.trim(); document.write(currentStr1); 결과

문법 splice(start: number, deleteCount?: number): number[] 배열의 데이터를 삭제 또는 교체하거나 새로운 데이터를 추가한다, 원본 데이터를 수정한다 const arrNum1 = [100, 200, 300, 400, 500]; const result1 = arrNum1.splice(2); const arrNum2 = [100, 200, 300, 400, 500]; const result2 = arrNum2.splice(2, 3); const arrNum3 = [100, 200, 300, 400, 500]; const result3 = arrNum3.splice(2, 3, "javascript"); // javascript 데이터 추가 document.write(re..

문법 slice(start, end); start부터 end 인덱스의 전까지의 복사본을 새로 배열로 만들어 반환한다, 원본 데이터에 영향을 주지 않는다 const str = "자바스크립트(javascript) 공부"; const text1 = str.slice(1, 4); const text2 = str.slice(1); const text3 = str.slice(5, 1); // 시작 인덱스가 종료 인덱스보다 작아야 됨(실행 안됨) 결과 const str = "자바스크립트(javascript) 공부"; const text1 = str.slice(1, 4); const text2 = str.slice(1); const text3 = str.slice(5, 1); document.write(text1, "..

const cssProperty = [ {num: 1, name:"all", desc: "CSS 속성을 재설정하는데 사용하는 약식 속성이다"}, {num: 2, name:"animation", desc: "애니메이션 속성을 설정하기 위한 통합 속성이다"}, {num: 3, name:"animation-delay", desc: "애니메이션이 시작되는 시간을 설정한다"}, {num: 4, name:"animation-direction", desc: "애니메이션이 움직이는 방향을 설정한다"}, {num: 5, name:"animation-fill-mode", desc: "애니메이션이 실행 중인 시간 외에 적용되는 값을 정의한다"}, {num: 6, name:"animation-iteration-count", ..

const cssProperty = [ {view:"10", name:"all", desc: "CSS 속성을 재설정하는데 사용하는 약식 속성이다"}, {view:"10", name:"animation", desc: "애니메이션 속성을 설정하기 위한 통합 속성이다"}, {view:"10", name:"animation-delay", desc: "애니메이션이 시작되는 시간을 설정한다"}, {view:"10", name:"animation-direction", desc: "애니메이션이 움직이는 방향을 설정한다"}, {view:"10", name:"animation-fill-mode", desc: "애니메이션이 실행 중인 시간 외에 적용되는 값을 정의한다"}, {view:"10", name:"animation-..

// html 태그로 직접 입력하지 않고 배열 안에 객체를 선언해서 span 태그를 자바스크립트로 추가 const cssProperty = [ {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용하는 약식 속성이다"}, {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 통합 속성이다"}, {name: "animation-delay", desc: "animation 속성은 애니메이션이 시작되는 시간을 설정한다"}, {name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정한다"}, {name: "animation-fill-mode", de..

const searchBox = document.querySelectorAll(".search span"); // search 클래스 안의 알파벳 버튼 const cssList = document.querySelectorAll(".list ul li"); // 속성 목록(li 태그) const cssCount = document.querySelector(".count em"); // 속성 개수 // 모든 데이터 보여주기 cssList.forEach((li, index) => {// css 속성 목록에 있는 데이터들을 전부 접근 li.classList.add("show");// 속성 목록 전부에 show 클래스 이름 추가 cssCount.innerHTML = index + 1;// css 속성 개수를 배열..