2024-08-29 :: 027 Java Script 활용 ⑤

   오늘은 랜덤한 숫자값을 맞추는 간단한 게임을 만들어 보았다 :)

 

let count = 0;     //사용자가 몇 번만에 맞췄는지 나타낼 변수다, 초기값은 0     let alertDiv = document.querySelector('.text_box')     //사용자가 정답을 맞추거나 틀렸을 경우 문구를 띄울 장소를 가져오기     let inputNumber = document.querySelector('input')     //사용자가 입력한 값을 받아오기 위해 input 태그를 들고오기     inputNumber.id = Math.floor(Math.random() * 100) + 1     //여기서 랜덤 값을 input의 아이디에 저장하기로 했다. 굳이 id에 줄 필요는 없고 따로 변수를 만들어 그 곳에 저장해도     똑같은 결과가 나올 것이다... (기능을 좀 더 다양하게 써보기 위해 input태그의 id 공간에 넣기로 했을 뿐)     let randomId = inputNumber.getAttribute("id")     //랜덤하게 바뀐 input 태그의 ID를 가져와서 변수에 저장했다.     //문자열로 저장되기 때문에 숫자로 바꿔줘야 한다.     let nBtu = document.querySelector('button')     nBtu.addEventListener('click', numberAnswer)     //사용자가 버튼을 눌렀을 때 기능이 실행되도록 한다     function numberAnswer() {       let userA = Number(inputNumber.value)       //input태그에 받아온 값을 지역변수로 선언       //input태그에 담기는 값은 문자열이기 때문에 숫자로 바꿔주는 작업이 필요하다.       if (userA > 0 && userA < 101) {         if (userA == randomId) {           count++           //사용자가 시도한 횟수 만큼 count 값을 증가시키기 때문에 모든 조건문에 붙는다.           alertDiv.innerHTML = `정답입니다! ${count}번 만에 맞추셨습니다!`           inputNumber.id = Math.floor(Math.random() * 100) + 1           randomId = inputNumber.getAttribute("id")           //정답을 맞춘 후, 기존 변수를 재선언함으로써 새로운 랜덤값이 생성된다.           inputNumber.value = ""             //사용자가 입력한 값을 없앤다.           count = 0;           //정답을 맞췄기 때문에 시도횟수는 초기화         } else if (userA > randomId) {           count++           alertDiv.innerHTML = `입력한 값 ${userA}보다 낮은 숫자입니다. 다시 시도해보세요.`           inputNumber.value = ""         } else if (userA < randomId) {           count++           alertDiv.innerHTML = `입력한 값 ${userA}보다 높은 숫자입니다. 다시 시도해보세요.`           inputNumber.value = ""         }       } else {         alertDiv.innerHTML = `1~100 사이의 숫자를 입력해주세요.`         //앞서 사용자가 1~100까지의 숫자를 입력했는지 확인하고 아닐시 else문을 실행한다.       }     }

 

---

   한 글자만 맞아도 검색 목록에 뜨는 화면을 만들어보자.

 

let item = [ ];     //아이템들을 담을 변수 선언     let itemList = document.querySelectorAll('#itemList > li')     let itemSearch = document.querySelector('input')     itemSearch.addEventListener('input', itemValue)     //input = form 요소의 값이 변경될 때마다 이벤트 발생     for (let i = 0; i < itemList.length; i++) {       item.push(itemList[i].innerHTML)       //배열변수에 li태그가 가지고 있는 텍스트 이름을 모두 저장     }     function itemValue() {       for(let i=0; i<item.length; i++){         let itemCode = String(item[i])          let userSerach = String(itemSearch.value)         //includes = 해당 문자열이 포함이 되어 있을 경우 true를 반환         if(itemCode.includes(userSerach)){           itemList[i].style.display = "block"         } else{           itemList[i].style.display = "none"         }       }     }

 

let itemList = document.querySelectorAll('#itemList > li')     let itemSearch = document.querySelector('input')     //keyup = 키보드를 누를 때마다 이벤트 발생     itemSearch.addEventListener('keyup', function(){       let itemText = itemSearch.value;       //지역변수에 input태그에서 받아온 값을 키보드를 누를때마다 저장       itemList.forEach(function(array){         let listText = array.textContent;         //textContent = 요소가 가지고 있는 텍스트를 가져옴         //indexOf = 해당 문자열을 가지고 있을 경우 해당 위치의 인덱스 반환, 없으면 -1을 반환함         if(listText.indexOf(itemText) !== -1){           array.style.display = "block"         } else {           array.style.display = "none"         }       })          //indexOf로 반환받은 숫자가 양수면 해당 li태그를 block 처리, 음수면 none처리     })