study 코딩하자

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect05.html const cssProperty = [//cssProperty에 데이터 저장 {view:"10", name: "all", desc: "all 속성은 CSS 속성 을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {view:"20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {view:"15", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {view:"11", name: "animati..

템플릿 리터럴(Template Literal) 템플릿 리터럴은 S6부터 새로 도입된 문자열 표기법으로 문법적으로 더 편하게 문자열을 생성하는 방법입니다. 문자열 생성 시 따옴표 대신, 백틱(`)을 사용합니다. 템플릿 리터럴의 기능 1. 줄바꿈 일반적인 문자열에서 줄 바꿈은 허용되지 않으며 공백(white-space)을 표현하기 위해서는 백 슬래시(\)로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용하여야 합니다. 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 공백은 있는 그대로 적용됩니다. let str01 = `Hi I am GYChoi!`; console.log(str01); 2. 문자열 인터폴레이션(String Inter..

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect04.html const cssProperty = [//cssProperty에 데이터 저장 {name: "all", desc: "all 속성은 CSS 속성 을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {name: "animation-direction", desc: "animation-direction 속성..

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect03.html const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //속성 리스트들 const cssCount = document.querySelector(".count em"); //속성 갯수 //모든 데이터 보이기 cssList.forEach((li, index) => {//cssList의 li(CSS속성 리스트들), index(CSS속성 갯수) 값 설정 li.classList.add("show");//..

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect02.html const searchBox = document.querySelector("#search-box");// searchBox 변수에 저장 const cssList = document.querySelectorAll(".list ul li");// 다수의 li를 cssList에 저장 const cssCount = document.querySelector(".count em");// em을 cssCount에 저장 cssList.forEach((element, index) => {//cssList의 element, index 값 설정 element.classList.add("s..

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect01.html const searchBox = document.querySelector("#search-box");//search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li");//다수의 li를 변수에 저장 searchBox.addEventListener("keyup", () => {//input 클릭했을 때 이벤트 설정 const searchWord = searchBox.value;//사용자가 입력한 데이터 저장소 변수에 저장 cssList.forEach(el=>{// 다수의 li한테 적용 const css..

배열 메서드 filter() : 조건에 만족하는 배열 요소 검색(반환:배열) { const arrNum = [100, 200, 300, 400, 500]; const result = arrNum.filter(el => el === 300); const arrNum2 = [100, 200, 300, 400, 500]; const result2 = arrNum2.filter(el => el === 600); const arrNum3 = [100, 200, 300, 400, 500]; const result3 = arrNum3.filter(el => el >= 300); } 기본값 메서드 결괏값 [100, 200, 300, 400, 500] .filter(el => el === 300) 300 [100, 20..

배열 메서드 indexOf() : 배열 요소 검색(반환:숫자) lastIndexOf() : 배열 요소 끝에서 검색(반환:숫자) includes() : 배열 요소 검색(반환:불린) { const arrNum = [100, 200, 300, 400, 500]; const arrIndex = arrNum.indexOf(200); const arrNum2 = [100, 200, 300, 400, 500]; const arrIndex2 = arrNum2.indexOf(300); const arrNum3 = [100, 200, 300, 400, 500]; const arrIndex3 = arrNum3.indexOf(600); const arrNum4 = [100, 200, 300, 400, 500]; const a..