[本]278-26日目JavaScriptコードフォーミュラ
32193 ワード
実習
検索ウィンドウに入力したテキストと一致する検索結果を作成します.
index.html
スクリプト関数を使用して整理
スクリプトコードを関数のコードに整理します.関数を機能別に分類することで、コードの可読性が向上します.
script.js
検索ウィンドウに入力したテキストと一致する検索結果を作成します.
index.html
<header>
<h1>과일 이름을 입력해주세요.</h1>
<div class="search-bar">
<label>검색: </label>
<input id="search-word-input" type="text">
</div>
</header>
<div id="prefecture-list">
<button data-name="석류" data-phonetic="Pomegranate">석류</button>
<button data-name="감" data-phonetic="Persimmon">감</button>
<button data-name="포도" data-phonetic="grape">포도</button>
<button data-name="배" data-phonetic="ship">배</button>
<button data-name="레몬" data-phonetic="Lemon">레몬</button>
<button data-name="사과" data-phonetic="apple">사과</button>
<button data-name="파인애플" data-phonetic="Pineapple.">파인애플</button>
<button data-name="아로니아" data-phonetic="Aronia.">아로니아</button>
<button data-name="복숭아" data-phonetic="Peach">복숭아</button>
<button data-name="구아바" data-phonetic="Guava.">구아바</button>
<button data-name="코코넛" data-phonetic="Coconut.">코코넛</button>
<button data-name="칼라만시" data-phonetic="Calamansi.">칼라만시</button>
<button data-name="유자" data-phonetic="Citron">유자</button>
<button data-name="자몽" data-phonetic="Grapefruit">자몽</button>
<button data-name="수박" data-phonetic="Watermelon">수박</button>
<button data-name="멜론" data-phonetic="Melon">멜론</button>
<button data-name="블랙베리" data-phonetic="Blackberry.">블랙베리</button>
<button data-name="블루베리" data-phonetic="Blueberry">블루베리</button>
<button data-name="암바렐라" data-phonetic="Ambarella.">암바렐라</button>
<button data-name="무화과" data-phonetic="Fig">무화과</button>
</div>
style.css .search-bar {
font-size: 0;
}
label {
font-size: 20px;
}
input {
vertical-align: top;
height: 21px;
}
#prefecture-list {
width: 500px;
padding: 20px 0;
}
#prefecture-list button {
padding: 6px;
margin: 6px;
}
#prefecture-list button.hide {
display: none;
}
script.js window.onload = function () {
const searchWordText = document.querySelector('#search-word-input');
const prefectureList = document.querySelectorAll('#prefecture-list button');
searchWordText.addEventListener('keyup', () => {
const searchWord = searchWordText.value
prefectureList.forEach((element) => {
if (!searchWord || searchWord === '') {
element.classList.remove('hide');
return;
}
const prefectureName = element.dataset.name;
const phonetic = element.dataset.phonetic;
if (prefectureName.includes(searchWord) === true || phonetic.includes(searchWord) === true) {
element.classList.remove('hide');
} else {
element.classList.add('hide');
}
});
});
}
スクリプト関数を使用して整理
スクリプトコードを関数のコードに整理します.関数を機能別に分類することで、コードの可読性が向上します.
script.js
window.onload = function () {
const searchWordText = document.querySelector('#search-word-input');
const prefectureList = document.querySelectorAll('#prefecture-list button');
function listItem(searchWord) {
prefectureList.forEach((element) => {
start(element, searchWord);
search(element, searchWord);
});
};
function start(element, searchWord) {
if (!searchWord || searchWord === '') {
element.classList.remove('hide');
return;
}
};
function search(element, searchWord) {
const prefectureName = element.dataset.name;
const phonetic = element.dataset.phonetic;
if (prefectureName.includes(searchWord) === true || phonetic.includes(searchWord) === true) {
element.classList.remove('hide');
} else {
element.classList.add('hide');
}
};
searchWordText.addEventListener('keyup', () => {
const searchWord = searchWordText.value
listItem(searchWord);
});
}
Reference
この問題について([本]278-26日目JavaScriptコードフォーミュラ), 我々は、より多くの情報をここで見つけました https://velog.io/@kodok/책-자바스크립트-코드-레시피-278-26일차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol