[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문대시보드

테스크 큐와 콜백 큐는 같은 의미인 가요?

강의가많은데 보는 순서좀 알려주세요. 풀스택.

const row = target.parentNode.row; const cell = target.cell;const row = target.parentNode.rowIndex; const cell = target.cellIndex;계속 변수명 바꾸면서 왜 안 되나 싶었는데 idex가 메서드였군요.. 혹시 위 사진처럼 cellIndex를 확인 할 수 있는 방법이 있을까요?

안녕하세요. 스코프 부분을 좀 더 공부하다가 헷갈려서 질문드립니다. 강의에서 예시로 들어주신 for(var i=0; i<winBalls.length;i++){ console.log("for문 돌아가는 중",i); setTimeout(()=>{ console.log(winBalls[i],i); drawBall(winBalls[i],$result) },(i+1)*1000); }이 코드에서는 for문이 먼저 돌아가서 i의 값이 6이 된 이후 setTimeout이 각각 1초, 2초, 3초, 4초, 5초 후 실행되기 때문에 이미 for문이 돌아가고 i값이 6이되어 console.log(winBalls[i],i); 의 결과로 출력되는 값이 강의와 같이 전부 undefined와 6이 되는 것으로 이해했습니다.  제가 아직 뒷강의를 듣지 못했지만 이번 강의 내용을 듣고 스코프 부분을 더 찾아보면서 함수는 렉시컬스코프가 적용된다는 것을 알게되었습니다. 그래서 아래 코드를 테스트 해보았는데요.var arr=[]; for(var i=0; i<5; i++){ arr[i] = function(){ console.log("function 내부", i); return i; } } for(var func of arr){ console.log(func()); }결과로function 내부 55가 다섯번 출력되었습니다.  저는 for문이 돌아가는 과정이1) i=0일 때,for 문 내부에서 전역변수인 i=0이고, arr[0]=function() {..}으로 함수의 표현식이 나오는데, 렉시컬 스코프에 의해 함수 내부에서는 현재 전역변수 i에 할당되어있는 값인 0을 참조.2) i=1일 때,for 문 내부에서 전역변수인 i=1이고, arr[1]=function() {..}으로 함수의 표현식이 나오는데, 렉시컬 스코프에 의해 함수 내부에서는 현재 전역변수 i에 할당되어있는 값인 1을 참조. 이후, 각각 i=2,3,4일 때도 마찬가지일거라고 생각했습니다. 그런데, 생각과 다르게 출력되어서 제가 렉시컬 스코프와 블록스코프를 잘못 이해하고 있는 것인지 궁금합니다. 감사합니다!

for문으로 구현하고나서 문득 메소드로 중복검사를 구현할 수 있을 거 같은 느낌이 들었습니다.전체 숫자에서 하나의 값을 저장하고 모든 숫자를 한번씩 검색 하면은 find(map()) 또는 map(find()) 방법으로 구현 할 수 있을까요?아님 find 하나만으로도 구현 할 수 있을까요?

let num1; let num2; let op; let cal; let minus = 1; function onClickNumber(e) { if(!op) { $result.value += e.target.textContent * minus; num1 = parseInt($result.value); minus = 1; } else { $result.value += e.target.textContent * minus; num2 = parseInt($result.value); minsu = 1; } } function operator(e) { if (num2) { switch(op) { case '+' : $result.value = num1 + num2; break; case '-' : $result.value = num1 - num2; break; case 'x' : $result.value = num1 * num2; break; case '/' : $result.value = num1 / num2; break; } num1 = $result.value; num2 = ''; minus = 1; } if (num1 && !op) { $operator.value = e.target.textContent; op = $operator.value; $result.value = ''; } if (!num1 && e.target.textContent === '-') { return minus = -1; } if (op && !num2 && e.target.textContent === '-') { return minus = -1; } }마이너스 구현은 됐는데 빼기 할 때, 마이너스가 같이 나와요. 조건을 추가해서 더 넣어봤는데 그러면 다른 기능이 작동하질 않네요...연속계산은 잘 되다가 마이너스 구현 이후로 작동이 안 되네요.이 강좌 이후에 해설 있나요?

학습을 하는 과정에서 제로초님 블로그를 자주 참고하는데학습에 도움되는 이미지들이 모두 undefined로 나오지 않습니다. 혹시 언제 해결 될까요?

const calculate = (op) => ()=> { if(numTwo){ let num1 = Number(numOne); let num2 = Number(numTwo); switch (op) { case ('+'): $result.value = num1+num2; break; case ('-'): $result.value = num1-num2; break; case ('/'): $result.value = num1/num2; break; case ('*'): $result.value = num1*num2; break; } $operator.value = '' } else{ alert('두번째 숫자를 입력해주세요!') } } document.querySelector('#calculate').addEventListener('click', calculate(operator))고차 함수 개념을 한번 적용해 보고자 calculate함수를 고차함수를 이용해서 한번 작성해 보았습니다. 하지만 op라는 매개변수를 calculate함수 안에서 console.log 해보았을때 제대로 불러지지 않는데 이유가 무엇인지 궁금합니다. operator와 numOne numTwo를 모두 누른 상태를 가정하고 싶습니다.

안녕하세요 제로초님 강의를 보면서 느낀게 html 코드들을 어디서 가져오는지 모르겠어서 여쭤봅니다. 2년전 답글에 링크가 있어서 링크 클릭해봤는데 없다고 뜨는데 현재는 html 코드를 못가져오고 하드코딩해야할까요?

안녕하세요 제로초님틱택토 2강 중에 클릭 이벤트 부분 진행 중 질문 드립니다저는 https://playcode.io/ 라는 온라인 에디터에서 공부 중인데요 여기 환경에서 ESLint Warning 이 떠서 문의드립니다.const elemTable = document.createElement('table'); let turn = 'O'; for (let i = 0; i < 3; i++) { const elemTr = document.createElement('tr'); for (let i = 0; i < 3; i++) { const elemTd = document.createElement('td'); elemTd.addEventListener('click', (e) => { // ESLint Warning if (e.currentTarget.textContent) return; // ESLint Warning e.currentTarget.textContent = turn; // ESLint Warning turn === 'O' ? turn = 'X' : turn = 'O'; // ESLint Warning }) // ESLint Warning elemTr.insertAdjacentElement('beforeend', elemTd); } elemTable.insertAdjacentElement('beforeend', elemTr); } document.body.insertAdjacentElement('afterbegin', elemTable);'Function declared in a loop contains unsafe references to variable' -> 루프에서 선언된 함수에 변수에 대한 안전하지 않은 참조가 포함된다.라는 내용이라고 하는데 위 내용을 구글링 해보면 반복분 for에서 var 대신 let은 쓰면 해결된다는 내용뿐이라(이미 let 사용중) 어떤 부분이 원인인지 잘 모르겠어서요. 코드는 잘 실행됩니다저는 삼항연산자를 썼지만 강의 내용대로 if문을 써도 동일한 ESLint Warning이 나오고 있습니다.배포된 페이지도 공유드립니다.https://1710512.playcode.io/

 const showBall = (number, $target) => { const $ball = document.createElement('div'); $ball.className = 'ball'; $ball.textContent = number; $target.appendChild($ball); }; for (let i = 0; i < 6; i++) { setTimeout(() => { showBall(winBalls[i], $result); }, 1000 * (i + 1)); } setTimeout(() => { showBall(bonus, $bonus); }, 7000);

1. 사용자에게 로또번호 받기(form태그로 구현) 2. checkInput을 통해 입력값 통제 1. 2 자릿수까지만 입력 2. 숫자만 입력 3. 이미 입력한 숫자는 재사용 불가 4. 빈 값 입력 불가 3. 사용자 입력이 끝나면 classList를 통해 form 부분을 사라지게 만들었습니다.  4. 사용자 입력번호와 랜덤으로 추출한 번호가 일치하는지 구현 1. winningLottoNumber(보너스 번호를 제외하고 일치하는 번호가 있는지) 변수를 통해 카운트 2. winningLottoBonusNumber(보너스 번호) 변수를 통해 카운트 => 여기서 includes를 써도 카운트가 안됐습니다. 찾아본 결과 includes는 형까지 똑같아야 true로 나와서 형 변환 후 검증했습니다. 5. 랜덤 로또 번호가 다 나온 후 결과가 나오게 setTimout을 9초로 설정했습니다!혹시나 이상한 부분이나 고쳐야 할 부분이 있는지 문의 드립니다 ㅠㅠ 코드가 길어서 깃허브 주소 첨부 했습니다~!감사합니다.https://github.com/diderot7/JS-PRACTICE/blob/main/lotto.html   

제가 추가적으로 구현한건 아래와 같습니다.끝말잇기 단어를 잘못 선택하면 탈락기존에 썼던 단어를 또 사용하면 탈락참가자가 한 명 남으면 게임이 끝남=> 참가자는 number를 배열로 만들어서 틀리면 배열의 숫자를 제거하는걸로 구현했습니다.  const number = Number(prompt("몇 명이 참가하나요?")); if (number) { const $order = document.querySelector("#order"); const $word = document.querySelector("#word"); const $input = document.querySelector("input"); const $button = document.querySelector("button"); const numArray = Array(number) .fill() .map((v, i) => i + 1); let word; let newWord; const compareArray = []; let order = Number($order.textContent) - 1; const onClickButton = () => { if ( (!word || word[word.length - 1] === newWord[0]) && newWord.length === 3 ) { if (compareArray.includes(newWord) === false) { word = newWord; $word.textContent = word; compareArray.push(word); console.log(compareArray, numArray); if (numArray[order] + 1 > numArray.length) { $order.textContent = numArray[0]; order = 0; } else { $order.textContent = numArray[order + 1]; order += 1; } } else { alert("이미 있는 단어입니다. 탈락입니다."); numArray.splice(numArray.indexOf(numArray[order]), 1); $order.textContent = numArray[order]; console.log(numArray, order); } } else if (newWord.length !== 3) { alert("작성해야 할 단어는 총 3글자입니다."); } else { alert( `잘못된 단어입니다. ${numArray[order]}번 참가자는 탈락입니다.` ); numArray.splice(numArray.indexOf(numArray[order]), 1); $order.textContent = numArray[order]; console.log(numArray, order); } if (numArray.length === 1) { alert( `게임이 종료되었습니다 승리자는${numArray[0]}번 참가자입니다` ); } $input.value = ""; $input.focus(); console.log(newWord); }; const onInput = (event) => { newWord = event.target.value; }; $button.addEventListener("click", onClickButton); $input.addEventListener("input", onInput); }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script> document.addEventListener('DOMContentLoaded', () => { const $text = document.querySelector('#text'); const $textarea = document.querySelector('#textarea'); $textarea.addEventListener('keyup', () => { $text.textContent = $textarea.value.length; }); }) </script> <body> <h1 id='text'>글자수 : 0</h1> <textarea id="textarea"></textarea> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script> const $text = document.querySelector('#text'); const $textarea = document.querySelector('#textarea'); document.addEventListener('DOMContentLoaded', () => { $textarea.addEventListener('keyup', () => { $text.textContent = $textarea.value.length; }); }) </script> <body> <h1 id='text'>글자수 : 0</h1> <textarea id="textarea"></textarea> </body> </html>안녕하세요 선생님. 학습중에 궁금한 점이 생겨 질문 남깁니다왜 위 코드는 실행이 되고 아래 코드는 실행이 안되는지 궁금합니다. $textarea가 null이라고 나오는 것 같은데 스크립트 태그의 최상단에 $textarea를 dom객체로 지정해줬는데 혹시 addeventlistener가 비동기 방식으로 먼저 호출이 되기 때문인가요?브라우저 동작 방식에 관련된 문제일까요?

숙제를 못하면  샘 숙제를 생각하고 해도못하겟는데 못하면 다음강의 넘기면 안되는걸까요 ??? 

함수도 호출햇고 리턴값을 함수로호출햇는데 왜 샘이 랑 똑같이 쳣는지 버튼을 눌러도 숫자가 입력이 안되나여 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>계산기</title> <style> * { box-sizing: border-box } #result { width: 180px; height: 50px; margin: 5px; text-align: right } #operator { width: 50px; height: 50px; margin: 5px; text-align: center } button { width: 50px; height: 50px; margin: 5px } </style> </head> <!-- 계산기 버튼 구현 --> <body> <head> <meta charset="utf-8"> <title>계산기</title> <style> * { box-sizing: border-box } #result { width: 180px; height: 50px; margin: 5px; text-align: right } #operator { width: 50px; height: 50px; margin: 5px; text-align: center } button { width: 50px; height: 50px; margin: 5px } </style> </head> <!-- 계산기 버튼 구현 --> <body> <input readonly id="operator"> <input readonly type="number" id="result"> <div class="row"> <button id="num-7">7</button> <button id="num-8">8</button> <button id="num-9">9</button> <button id="plus">+</button> </div> <div class="row"> <button id="num-4">4</button> <button id="num-5">5</button> <button id="num-6">6</button> <button id="minus">-</button> </div> <div class="row"> <button id="num-1">1</button> <button id="num-2">2</button> <button id="num-3">3</button> <button id="divide">/</button> </div> <div class="row"> <button id="clear">C</button> <button id="num-0">0</button> <button id="calculate">=</button> <button id="multiply">x</button> </div> <script> let numOne=''; let operator=''; let numTwo=''; // 이두개가 왜쓰엿는지는 강의를 들으면서 알아보자 const $operator =document.querySelector('#operator'); const $result = document.querySelector('#result'); // 중복울 제거 햇기떄문에 변수로 넣어줌 const onClickNumber = (number) => // if(operator){ // numberTwo +=number; // } // else{ // numberOne += number; // } // $result.value+=number; //return undefined; /// 반환하니 반환 할놈이 없으니 나오지도 않는다 // 그래서 언디 파인드를 넣지말고 함수를 넣어야 한다 //함수를 리턴해주는거다 // 실행되는것을 함수안으러 넣어주어야 한다 (event) => { if(operator){ numberTwo +=number; } else{ numberOne += number; } $result.value += number; }; // 넘버1 에 클릭이벤트 가 발생햇을떄 함수 실행한다 //$input.addEventListener('input',writing); // 인풋 이벤트가 발생되면 안에 함수를 넣는다 // 넘버 0 인 아이디를 선택하고 클릭이벤트 발생햇을떄 이벤트 리스너를 // 추가한다 // 함수에서 중복이 발생하면 다른 부분들을 매개변수로 뺴라 document.querySelector('#num-0') .addEventListener('click', onClickNumber('0')); document.querySelector('#num-1') .addEventListener('click', onClickNumber('1')); document.querySelector('#num-2') .addEventListener('click', onClickNumber('2')); document.querySelector('#num-3') .addEventListener('click', onClickNumber('3')); document.querySelector('#num-4') .addEventListener('click', onClickNumber('4')); document.querySelector('#num-5') .addEventListener('click', onClickNumber('5')); document.querySelector('#num-6') .addEventListener('click', onClickNumber('6')); document.querySelector('#num-7') .addEventListener('click', onClickNumber('7')); document.querySelector('#num-8') .addEventListener('click', onClickNumber('8')); document.querySelector('#num-9') .addEventListener('click', onClickNumber('9')); // 이런식으로 함수의 중복이 발생이되엇을떄 중복을 함수로 뺴서 중복을 피해라; document.querySelector('#plus') .addEventListener('click', () => {} ); document.querySelector('#minus') .addEventListener('click', () => {} ); document.querySelector('#divide') .addEventListener('click', () => {} ); document.querySelector('#num-1') .addEventListener('click', () => {} ); document.querySelector('#multiply') .addEventListener('click', () => {} ); document.querySelector('#calculate') .addEventListener('click', () => {} ); document.querySelector('#clear') .addEventListener('click', () => {} ); </script> </body> </html>

function onRightClick(event) { event.preventDefault(); //도구모음 안나오게 const target = event.target; //이벤트 타겟은 내가 진짜 클릭한 대상. current target은 이벤트 리스너가 붙은 대상 console.log(target) //왜 question이 나오는지 const rowIndex = target.parentNode.rowIndex; //tr 태그에는 내부적으로 rowIndex 존재 const cellIndex = target.cellIndex;//td 태그에는 내부적으로 rowIndex 존재 const cellData = data[rowIndex][cellIndex]; if (cellData === CODE.MINE) { // 지뢰면 data[rowIndex][cellIndex] = CODE.QUESTION_MINE; // 물음표 지뢰로 target.className = 'question'; target.textContent = '?'; } else if (cellData === CODE.QUESTION_MINE) { // 물음표 지뢰면 data[rowIndex][cellIndex] = CODE.FLAG_MINE; // 깃발 지뢰로 target.className = 'flag'; target.textContent = '!'; } else if (cellData === CODE.FLAG_MINE) { // 깃발 지뢰면 data[rowIndex][cellIndex] = CODE.MINE; // 지뢰로 target.className = ''; target.textContent = ''; } else if (cellData === CODE.NORMAL) { // 닫힌 칸이면 data[rowIndex][cellIndex] = CODE.QUESTION; // 물음표로 target.className = 'question'; target.textContent = '?'; } else if (cellData === CODE.QUESTION) { // 물음표면 data[rowIndex][cellIndex] = CODE.FLAG; // 깃발으로 target.className = 'flag'; target.textContent = '!'; } else if (cellData === CODE.FLAG) { // 깃발이면 data[rowIndex][cellIndex] = CODE.NORMAL; // 닫힌 칸으로 target.className = ''; target.textContent = ''; } }우클릭을 했을 때 동작하는 함수입니다.상단에 target에 대해서 console.log 출력하는 부분이 있는데지뢰찾기 행수 열수 지뢰수를 입력하고 submit한 순간에는td에 어떠한 클래스도 주어지지 않았다고 생각합니다.그리고 최초로 우클릭을 하는 순간에도 td는 아무 클래스가 없고 우클릭이 이뤄지고 나서 그 다음 현재 cellData의 상황에 따라 target.className이 주어지니까최초 클릭시에는함수 상단 console.log(target)에 td class에는 아무것도 없어야한다 생각합니다. 그런데 왜 우클릭 시에 td class가 question으로 지정되어서 나오는지 이해가 안됩니다 ㅠㅠ

document.querySelector('#num-0') .addEventListener('click', onClickNumber('0')); 여기서 원래 이전강의에서는 .addEventListener('click',onClickNumber); 이런식으로 클릭다음에 함수자체를 호출햇는데 왜 이번에는 방식이 함수를 호출해서 인자를 전달하는 방식으로 하셧는지 궁금합니다

자바스크립트를 이 강의로 처음 공부하고 있어요.끝말잇기에 이어 쿵쿵따를 순서도 그려보며 코딩하는 중인데이틀 간 생각해보면서 구글에 검색해보면서 짠 코드가 <div><span id="order">1</span>번째 참가자</div> <div>제시어: <span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = parseInt(prompt('몇 명이 참가하나요?'), 10); const $order = document.querySelector('order'); const $word = document.querySelector('word'); let word; // 제시어 let newWord; //새 단어 if (!$word) { //제시어가 없을 때 word = newWord; $word.textContent = newWord; const order = Number($order.textContent); order ++; if (word.length == 3) { } else { } } else { //제시어가 있을 때 $word.textContent = newWord; order ++; }여기까지인데 처음이라 그런 건지 제가 머리가 안 좋은 건지 제가 어떤 걸 모르는지를 모르겠어서 진행이 안되는 상황이에요. 강의를 보는 게 맞을까요 아니면 계속 도전해봐야 될까요?

샘 직접 만들어 봣습니다 며칠 고민하면서 근데 공지에는 코드전체를 올리지말라햇는데 피드백을 받으려면 올릴수박에 없어서요 만든게 어떤지 평가나 피드백좀주실수잇나여  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div><span id="order">1</span>번쨰 쿵쿵따 참가자</div> <div>제시어:<span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = Number(prompt('몇명인지 입력을 받는다:')); const $input = document.querySelector('input'); // 인풋울 자스로 기능을 넣어야 하기떄문이다 const $button = document.querySelector('button'); // 버튼 을 자스기능으로 넣어야 하기떄문 const $order = document.querySelector('#order'); // 몇번쨰인지 자스기능으로 값을 조절해야하기떄문 이다 const $word = document.querySelector('#word'); // 제시어의 저장및 잇는지 확인 하기 위해 자스기능으로 넣어야 하기떄문이다; let word; let newWord; // 인풋에 적혓을떄 세글자인지 판단한다 // 그와반대로 버튼에 눌럿을떄 이벤트가 발생되면 // 제시어값이 잇는채로 버튼이 눌리면 #word와 끝자리가 맞는지도 확인 작업을 해야하고 // const onClick = () => //버튼을 눌럿을떄 { if(newWord.length===3) // 버튼을 누르고 세글자 일떄 { if(!word) // 세글자이면서 제시어가 비어잇다 첫사람이다 { //제시어를 입력한 상태로 그값을 저장 해주어야 한다 word=newWord; $word.textContent = word; // word 변수에 담긴 내용이 $word라는 HTML 요소의 텍스트 내용으로 들어가게 될 거예요. // 그래서 워드 안에 입력된 뉴월드 단어값이 $word. 에 저장이 되서 제시어가 저장이 되는원리이다 $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else //세글자이면서 제시어가 잇는 즉 이미 한명이 시작한단계 { if(word[word.length-1]===newWord[0]) // 세글자이면서 제시어가 잇으며 마지막 단어와 시작단어가 같을떄 //둘다 값이 같을떄 제시어를 받는다 { word=newWord; /// 워드에 인풋 입력값을 저장해놈 단어를 저장 해둠 $word.textContent = word; // 이 해석을 연구해봐야 한다; $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else // 자리수 값이 다를떄 올바르지 않는단어임을 알려준다 { alert('입력을 다시하십시오 올바르지않는단어입니다'); } } } // 세글자 일떄 실행 else // 버튼을 눌럿을대 세글자가 아닐떄 들어가지지도 못하게 하면된다 { alert('세글자가 아니므로 다시 세글자를 입력해주세요'); } } const writing =(event) => // 인풋 글자입력란 이벤트 리스너와 연결된 함수 { newWord= event.target.value; // 인풋의 값이입력되면 저장 할껏 뉴월드에 ; } $input.addEventListener('input',writing); // 인푹에 이벤트 발생됫을떄 함수로 연결해서 단어를 저장한다; $button.addEventListener('click',onClick); // 버튼 이벤트 </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div><span id="order">1</span>번쨰 쿵쿵따 참가자</div> <div>제시어:<span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = Number(prompt('몇명인지 입력을 받는다:')); const $input = document.querySelector('input'); // 인풋울 자스로 기능을 넣어야 하기떄문이다 const $button = document.querySelector('button'); // 버튼 을 자스기능으로 넣어야 하기떄문 const $order = document.querySelector('#order'); // 몇번쨰인지 자스기능으로 값을 조절해야하기떄문 이다 const $word = document.querySelector('#word'); // 제시어의 저장및 잇는지 확인 하기 위해 자스기능으로 넣어야 하기떄문이다; let word; let newWord; // 인풋에 적혓을떄 세글자인지 판단한다 // 그와반대로 버튼에 눌럿을떄 이벤트가 발생되면 // 제시어값이 잇는채로 버튼이 눌리면 #word와 끝자리가 맞는지도 확인 작업을 해야하고 // const onClick = () => //버튼을 눌럿을떄 { if(newWord.length===3) // 버튼을 누르고 세글자 일떄 { if(!word) // 세글자이면서 제시어가 비어잇다 첫사람이다 { //제시어를 입력한 상태로 그값을 저장 해주어야 한다 word=newWord; $word.textContent = word; // word 변수에 담긴 내용이 $word라는 HTML 요소의 텍스트 내용으로 들어가게 될 거예요. // 그래서 워드 안에 입력된 뉴월드 단어값이 $word. 에 저장이 되서 제시어가 저장이 되는원리이다 $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else //세글자이면서 제시어가 잇는 즉 이미 한명이 시작한단계 { if(word[word.length-1]===newWord[0]) // 세글자이면서 제시어가 잇으며 마지막 단어와 시작단어가 같을떄 //둘다 값이 같을떄 제시어를 받는다 { word=newWord; /// 워드에 인풋 입력값을 저장해놈 단어를 저장 해둠 $word.textContent = word; // 이 해석을 연구해봐야 한다; $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else // 자리수 값이 다를떄 올바르지 않는단어임을 알려준다 { alert('입력을 다시하십시오 올바르지않는단어입니다'); } } } // 세글자 일떄 실행 else // 버튼을 눌럿을대 세글자가 아닐떄 들어가지지도 못하게 하면된다 { alert('세글자가 아니므로 다시 세글자를 입력해주세요'); } } const writing =(event) => // 인풋 글자입력란 이벤트 리스너와 연결된 함수 { newWord= event.target.value; // 인풋의 값이입력되면 저장 할껏 뉴월드에 ; } $input.addEventListener('input',writing); // 인푹에 이벤트 발생됫을떄 함수로 연결해서 단어를 저장한다; $button.addEventListener('click',onClick); // 버튼 이벤트 </script> </body> </html>