본문 바로가기

TIL/자바스크립트

 (7)
_.indexOf() | Lodash [자바스크립트] Lodash의 _.indexOf 간단 정리. _.indexOf = function(array, target) { var result = -1; _.each(array, function(item, index) { if (item === target && result === -1) { result = index; } }); return result; }; 일단 _.each는 _.each = function(collection, iterator) { if (Array.isArray(collection)) { for (let i = 0; i < collection.length; i++) { iterator(collection[i], i, collection); } } else { for (const key in..
addEventListener와 for, 이벤트리스너가 마지막 반복 결과값에만 붙는 문제 [자바스크립트] 카드퀴즈 만드는 중. 퀴즈의 선택지들을 찍어낸 뒤 각 선택지에 이벤트리스너를 붙이려 함. function printChoices(questionIndex) { for (let i = 0; i < data[questionIndex].choices.length; i++) { document.getElementById('choices').innerHTML += `${data[questionIndex].choices[i]}`; document.getElementById(`question${questionIndex}Choice${i}`).addEventListener('click', clickedChoice); } } 그런데 마지막 선택지만 이벤트리스너가 붙는 문제 발생. 검색해보니 똑같은 문제에 부딪혔던 사례 ..
querySelectorAll getElementsByClassName 등 복수 선택 메소드와 addEventListener [자바스크립트] 틱택토 만들기 시작. 섹션을 셀 9개로 나누고 게임시작 버튼 생성. 게임시작 버튼에 이벤트리스너 붙임.document.querySelector('.start').addEventListener('click', function() { // blah blah}); 그리고 각 셀에도 이벤트리스너를 붙이려 시도.document.querySelectorAll('.cell').addEventListener('click', function() { // blah blah}); 특정 셀들도 지정해놔야 할 것 같아서 셀 하나하나에 클래스 따로 부여하고 이벤트리스너 붙여봄.document.getElementsByClassName('_11 _12 _13 _21 _22 _23 _31 _32 _33').addEventListe..
함수를 실행하고 결과값을 담는 위치 및 시점 [자바스크립트] 아직도 숫자야구게임 만드는 중. 입력값과 난수를 비교한 뒤 점수(몇 스트라이크 몇 볼)를 화면에 표시해야 함. 최초 시도는 // 입력값과 난수 비교 var playBall = function () { strikeCount = 0; ballCount = 0; // blah blah return [strikeCount, ballCount]; } // 점수 표시 document.getElementById('button').addEventListener('click', function () { document.getElementById('forScore').innerHTML = `${playBall()[0]} Strike ${playBall()[1]} Ball` }); 하지만 playBall이라는 함수를 너무 ..
배열 섞기, 피셔-예이츠 셔플 ft. 숫자야구게임 [자바스크립트] 여전히 숫자야구게임 만드는 중. 다른 숫자 세 개로 이뤄진 세 자리 숫자를 생성해야 함. Math.floor(Math.random()*1000); 처음에 이렇게 시도해 봤으나 숫자가 중복되고 두 자리 숫자도 나와서 다른 방법 찾기로. 이 방법 저 방법 시도하고 찾아보다가 스택오버플로우에서 배열 순서를 무작위로 섞는 함수를 찾아냄. 피셔-예이츠 셔플이라고 함. 음악앱이 노래를 무작위한 순서로 재생하도록 만들 때 사용하는 방법이라고. 직접 만들어내진 못했으니 코드를 들고 와서 어떻게 배열을 섞는지 분석이나 해보려 함. function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; while (0 !== curren..
배열 slice와 splice [자바스크립트] arr.slice(n, m) // javascript slice method n에서 시작, m에서 끝. 다만 m은 포함하지 않음. 배열 인덱스보다 n이 크면 빈 배열 찍어냄. n 음수 가능. 배열의 뒤에서부터 n번째까지 찍어냄. m이 배열 인덱스보다 크면 끝까지 찍어냄. m도 음수 가능. var arr = [1, 2, 3, 4, 5, 6, 7]; arr.slice(1, -3) // [2, 3, 4] arr.slice(2, -2) // [3, 4, 5] arr.slice(3, -2) // [4, 5] arr.slice(3, -1) // [4, 5, 6] slice를 해도 원래 배열은 영향을 받지 않음. arr.splice(n, m) // splice method n번째 요소부터 m개를 삭제 n 음수 가능...
변수를 정의하는 위치, 그리고 함수 [자바스크립트] 숫자야구게임 만드는 중. 입력값이 세 자리인지 확인하려 하는데 세 자리 숫자를 넣어도 alert("nope")이 자꾸 뜸. var userNum = document.getElementById("input").value.toString().split(""); function check() { if (userNum.length !== 3) { alert("nope") } } 그래서 콘솔로그를 해 봄. var userNum = document.getElementById("input").value.toString().split(""); function check() { console.log(el); } 빈 배열이 찍힘. 입력값에 접근하지 못한다고 해석. 변수를 함수 안에서 선언하고 값을 설정해 보기로. func..

티스토리툴바