Effect/Search Effect7 [자바스크립트 응용하기] 검색 이펙트07_게임만들기 검색 효과07 검색 효과 여섯번째 시간입니다. 속성 찾기 게임을 해보도록해요. 원본 소스 보기 원본 사이트 JS 소스 // 내용소스는 아이프레임 참조해주세요. const serachTime = document.querySelector(".time span"); const serachList = document.querySelector(".search__list"); const searchAnswers = document.querySelector(".search__answers"); const searchMissAnswers = document.querySelector(".search__missAnswers"); const searchStart = document.querySelector(".search_.. 2022. 10. 23. [자바스크립트 응용하기] 검색 이펙트06_ 정렬 검색 효과 검색 효과 여섯번째 시간입니다. 다양한 방법으로 정렬해 봅시다 . 원본 소스 보기 원본 사이트 JS 소스 // 내용소스는 아이프레임 참조해주세요. // 데이터 출력하기 const updateList = () => { let listCSS = ""; cssProperty.forEach((data, index)=>{ listCSS += `${data.num}. ${data.name} : ${data.desc} `; }); cssList.innerHTML = listCSS; } updateList(); // 반대로 정렬 function sortReverse(){ cssProperty.reverse(); updateList(); } // 오름차순 정렬 function sortAscending(){ c.. 2022. 10. 23. [자바스크립트 응용] 검색 효과 05_ 중요도 순 검색 효과 검색 효과 다섯번째 시간입니다. 중요도 순으로 보는 방법을 만들어 보겠습니다. 원본 소스 보기 원본 사이트 JS 소스 const cssProperty = [ { name: "accent-color", desc: " 일부 요소가 생성하는 사용자 인터페이스 컨트롤의 강조색을 지정합니다."}, { name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 교차축(flex박스) 또는 블록축(grid)을 따라 배치할지 속성할 수 있습니다."}, ...이하 생략 ]; // 출력하기 const searchInfo = document.querySelector('span.num'); const searchList = document.querySelector('.search__.. 2022. 10. 3. [자바스크립트 응용] 검색 효과 04_ 버튼 방식 검색 효과 검색 효과 네번째 시간입니다. 속성들을 각각 버튼형식처럼 만든 뒤 클릭하면 해당 속성의 설명이 나타나게 해보겠습니다. 원본 소스 보기 원본 사이트 ■ n줄 요약 ▶ 기존의 검색방식을 유지하되, 속성값들을 클릭할 수 있게 만들어 주는 기능을 추가합니다. find()메서드를 활용하므로 검색의 경우는 정확히 일치하지 않는 경우 속성값은 검색되지 않습니다. JS 소스 const cssProperty = [ { name: "accent-color", desc: " 일부 요소가 생성하는 사용자 인터페이스 컨트롤의 강조색을 지정합니다."}, { name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 교차축(flex박스) 또는 블록축(grid)을 따라 배치할지 속성할 수.. 2022. 10. 3. 서치 이펙트03 검색 효과 저번시간에 이어서 또 검색 사이트를 만들어보겠습니다. 이번엔 일치하는 단어를 찾는것이 아니라 알파벳 순으로 찾기를 만들어 볼게요. 또 알파벳순으로 검색된 이후에 나타난 검색 속성값의 갯수를 구해보겠습니다. 원본 소스 보기 원본 사이트 ▶ 이 사이트에 사용된 charAt()의 특징에 대해 간단하게만 알아보고 가겠습니다. includes()는 문자열에서 지정한 index(위치값)에 해당하는 값을 문자열로 출력합니다. const str1 ="javascript reference"; const currentStr1 = str1.charAt(); //j const currentStr2 = str1.charAt("0"); //j const currentStr3 = str1.charAt("1"); //a .. 2022. 8. 22. 서치 이펙트02 검색 효과 저번시간에 이어서 또 검색 사이트를 만들어보겠습니다. 저번 시간에는 indexOF()를 사용했었죠? 이번엔 includes()를 이용해서 만들어보겠습니다. 원본 소스 보기 원본 사이트 ▶ 이 사이트에 사용된 includes()의 특징에 대해 간단하게만 알아보고 가겠습니다. includes()는 문자열 포함 여부를 검색해서 불린(true/false)을 반환합니다. const str1 ="javascript reference"; const currentStr1 = str1.includes("javascript"); //true const currentStr2 = str1.includes("j"); //true const currentStr3 = str1.includes("b"); //false 크.. 2022. 8. 17. 서치 이펙트01 검색 효과 이번시간에는 키워드검색을 할 수 있는 사이트를 만들어 보겠습니다. 원본 소스 보기 원본 사이트 ▶ 이 사이트에 사용된 indexOf()의 특징에 대해 간단하게만 알아보고 가겠습니다. indexOf()는 문자열에서 특정 문자의 위치를 찾고 인덱스값을 반환하는 메서드입니다. const str ="javascript"; const currentStr = str.indexOf("javascript"); //0 위의 예시처럼 'javascript'라는 문자열을 찾는 경우 변수에서 시작점이 0번째부터 시작되므로 출력값은 0이 반환되는 것입니다. JS 소스 분석하기 const searchBox = document.querySelector(".search__box input"); //input 박스(검색영역.. 2022. 8. 16. 이전 1 다음 반응형
