📌 공 색칠하기 현재 모든 공은 흰색이다. 숫자에 따라 색을 넣어 보자. 숫자가 10 미만이면 빨간색, 20 미만이면 주황색, 30 미만이면 노란색, 40 미만이면 파란색, 40 부터는 초록색 공으로 만들자. 공이 빨간색, 파란색, 초록색일 때는 글자도 하얗게 만들자. 공을 생성할 때 색도 지정해서 넣으면 된다. 이처럼 자바스크립트로도 CSS 를 조작할 수 있다. colorize 함수가 숫자와 태그를 인수로 받아 주어진 태그의 숫자에 따라 다른 CSS를 적용한다. 📌 전체 코드 더보기 추첨 결과는? 보너스: 더보기 -(도서) Let's Get IT 자바스크립트 프로그래밍 https://thebook.io/ Let's Get IT 자바스크립트 프로그래밍 더북(TheBook): (주)도서출판 길벗에서 제공하..
📌 일정 시간 후에 실행하기 뽑은 공들을 화면에 표시하자. 1초에 하나씩 뽑을 것이다. 자바스크립트에서는 setTimeout 함수로 지정한 시간 뒤에 코드가 실행되게 할 수 있다. setTimeout(() => { // 내용 }, 밀리초); //코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍 밀리초란? 1000 분의 1초 이때 setTimeout 안에 넣는 함수는 특정 작업 ( 지정한 시간까지 기다리기 ) 이후에 추가로 실행되는 함수이므로 콜백 함수로 볼 수 있다. 두 번째 인수가 밀리초 단위이므로 원하는 초에 1000을 곱해야 한다. 첫 번째 인수로 넣은 함수는 지정한 밀리초 후에 실행된다. 첫번째 인수 밀리초 단뒤 ( 원하는 초에 1000을 곱한다 ) 두번째 인수 지정한 밀리초 후에 ..
들어가기 타이머를 사용하여 로또 추첨기를 만들 것이다. 타이머보다 비동기라는 개념을 익히는 것이 더 중요한다. Note! 비동기가 뭔가요? 비동기는 동기의 반댓말로, 실제 코딩한 순서와 다르게 동작하는 코드를 비동기 코드라고 한다. ex) 이벤트 리스너 ( 이벤트가 발동되기 전 적어둔 코드가 대기하기 때문에 ) 왜 알아야하죠? 에디터에 적은 코드 순서와 실제 동작 순서가 다르므로 어떤 원리로 동작하는지 익혀야 한다. 원리를 익히다보면 자바스크립트를 공부할 때 반드시 알고 넘어가야 하는 스코프, 클로저 같은 개념들도 함께 알게 된다. 📌 순서도 📌 첫 코드 추첨 결과는? 보너스: 공 45개를 전부 다 섞은 뒤에 7개의 공을 뽑겠다. Array 와 map 메소드 설명 자료 [ JavaScript ] 반복문 ..
📌 Self Check 아웃 만들기 지금까지 숫자만 맞히면 볼, 숫자와 자릿수까지 모두 맞히면 스트라이크 였다. 그런데 숫자를 하나도 맞히지 못하면 어떻게 될까? 문제! 정답이 '1357'인데 '2468'을 입력하는 경우. 지금까지의 프로그래밍에서는 '0볼 0스트라이크'라고 표시된다. 이 대신에 아웃으로 표시해보자. 그리고 3아웃이 되면 패배하게 된다. 📌 순서도 📌 코드 시도 횟수가 10번이 넘었거나 3번 아웃되어 패배하면 패배 메시지를 표시하는 앞의 코드가 중복이 된다. 이런 부분은 함수로 빼서 중복을 제거한다. function defeated(){ const message = document.createTextNode(`패배. 정답은 ${answer.join('')}`); //텍스트를 만들고, $l..
∎ 지금까지의 코드 확인 📌 입력값과 정답 비교하기 🤍 홈런인지 검사해서 표시하기 홈런인지 검사하는 부분과 시도 횟수가 10번을 넘겼는지 검사하는 부분을 추가하자. 시도 횟수는 tries 배열의 length를 검사하면 된다. if문이 여러개 방법이 된다. 이것을 줄여야 한다. 한번 줄여보겠다. if 문 중첩 제거하는 방법 참고. [ JavaScript ] 함수 사용하기_ 계산기_2 ( 강좌 참고 ) 📌 중첩 if 문 줄이기 지금까지 작성한 코드이다. 7 8 9 + 4 5 6 - 1 2 3 / c 0 = x 두 번째 숫자 (numTwo) 를 클릭하면 첫 번째 숫자와 합쳐지는 버그가 있다. numTwo에 값을 저장하기 전에 화면을 비우는 작 irro.tistory.com 💫 join 메소드 설명 join()..
📌 숫자야구 게임 이 게임이 뭔가요? 1. 상대편이 숫자 1~9 중에서 중복되지 않게 4 개를 고른다. 2. 10번의 기회가 주어진다. 3. 상대편이 고른 숫자 4개를 맞히면 된다. ( 이때 숫자의 순서까지 맞혀야 한다. ) 4. 틀릴 때마다 힌트를 준다. ( 맞힌 숫자의 개수( 볼 ), 순서까지 맞힌 개수( 스트라이크 ) 를 알려준다. ex) 상대편이 5728을 뽑았을 때, 플레이어가 7129를 말한다면? => 1스트라이크, 1볼 ( 2 : 숫자 and 순서까지 맞혀서 스트라이크 / 7 : 숫자만 맞혀서 볼 ) 플레이어가 7528을 말한다면? => 2스트라이크, 2볼 플레이어가 7285을 말한다면? => 4볼 플레이어가 5728을 말한다면? => 4스트라이크 ( 홈런 )가 되어 이긴다. / 10번의 기..
📌 리액트란? React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이다. ' 컴포넌트 '라고 불리는 코드를 이용하여 복잡한 UI를 구성하도록 돕는다. 컴포넌트 : 데이터와 화면을 하나로 묶어둔 덩어리. 즉, 복잡한 웹앱 ( Web Application ) 에서 데이터와 화면 일치 문제를 쉽게 풀어준다. Note! 웹 애플리케이션이 뭔가요? 인터넷이나 인트라넷을 통해 웹 브라우저에서 이용할 수 있는 응용 프로그램이다. 인트라넷 : 기업의 내부나 계열사 간이나 해외 지사와 본사 사이의 내부적 정보 교환과 정보 공유를 위해, 인터넷을 이용하여 구축한 통신망. 🤍 리액트의 장점과 단점 - 장점 - - 단점 - 1. 페이지 깜빡임 없이 자연스럽게 넘어가는 효과. 1. 검색엔진 노출이 어렵다..
📌 연이어 계산하기 앞에서 만든 계산기는 한 번만 계산할 수 있다. 한 번 계산한 후에는 C 버튼을 눌러 초기화하지 않는 이상 이어서 계산할 수 없다. 1 + 2 + 3 처럼 계산하고 싶다면 어떻게 수정해야 할까? = 버튼을 클릭할 때 계산 결과를 numOne 변수에 저장하고 numTwo 변수를 비워 놓으면 연이어 계산할 수 있다. ex ) 1 + 2 + 3 를 계산한다면 먼저 1 + 2 를 계산해 3이 되고, 그 다음에 3 + 3 를 계산한다. 1 + 2를 계산할 때 결과인 3을 numOne에 저장하고, numTwo는 초기화한다. 그 다음 + 와 3 을 누르면 각각 operator / numTwo 에 저장한다. = 를 누르면 3 과 3 이 더해진다. document.querySelector('#calc..
📌 중첩 if 문 줄이기 지금까지 작성한 코드이다. 7 8 9 + 4 5 6 - 1 2 3 / c 0 = x 두 번째 숫자 (numTwo) 를 클릭하면 첫 번째 숫자와 합쳐지는 버그가 있다. numTwo에 값을 저장하기 전에 화면을 비우는 작업이 필요하다. 코드를 수정하자. const onClickNumber = (number) => () => { if (operator){ if (!numTwo){ $result.value=''; //numTwo에 값이 없다면 화면을 비운다. } numTwo += number; } else { numOne += number; } $result.value += number; }; 코드를 보면 if 문 내부에 다시 if 문이 존재한다. 이런 상황을 if 문이 중첩됐다고 표현..
📌 계산기 🤍 순서도 그리기 이런 식으로 작성했지만 틀렸다. 계산기는 사용자가 숫자나 연산자 ( 더하기, 빼기, 나누기, 곱하기 등 ) 버튼을 클릭해 여러 계산을 하는 장치이다. 따라서 클릭 이벤트가 많이 발생한다. 또한, 사용자가 입력한 숫자나 연산자를 저장하고 있어야 = 연산자를 사용할 수 있다. 따라서 프로그램이 시작될 때 숫자 2개와 연산자를 저장할 변수를 마련해야 한다. 숫자 1 numOne 연산자 operator 숫자 2 numTwo 1을 numOne 변수에 저장한 후 + 버튼을 누르면 + 가 operator 변수에 저장된다. 그리고 2 를 누르면 operator 변수에 값이 저장되어 있으므로 numTwo 변수에 2 가 저장된다. 마지막으로 = 버튼을 누르면 numOne 에 저장되어 있는 1 ..
📌 쿵쿵따 게임 🤍 순서도 🤍 코드 1번째 참가자 제시어: 입력 더보기 -(도서) Let's Get IT 자바스크립트 프로그래밍 https://thebook.io/ Let's Get IT 자바스크립트 프로그래밍 더북(TheBook): (주)도서출판 길벗에서 제공하는 IT 도서 열람 서비스입니다. thebook.io -(강좌) 렛츠기릿 자바스크립트 https://www.inflearn.com/ [무료] [리뉴얼] 렛츠기릿 자바스크립트 - 인프런 | 강의 본 강의에서는 자바스크립트를 활용해 프로그래밍 사고력을 기르는 연습을 합니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 반응 속도 테스트, 틱택토, 로또 추첨기, 가위바위보, 카 www.inflearn.com
📌 이벤트 리스너 달기 ( 콜백함수 ) 사용자들은 웹 게임을 플레이하면서 화면과 다양한 상호 작용을 한다. 이는 HTML 태그와 상호 작용을 하는 것이다. 끝말잇기 게임도 사용자는 input 태그에 글자를 입력하고 button 태그를 누르는 것이다. 사용자가 태그와 상호 작용을 할 때 이벤트 라는 것이 발생한다. 예 ) input 태그에 글자를 입력하면 input 이라는 이벤트가 발생 / 버튼을 클릭하면 click 이벤트가 발생. 하지만 자바스크립트는 이벤트를 자동 감지할 수 없다. 그래서! 이벤트 리스너를 직접 추가해 자바스크립트가 HTML에서 발생하는 이벤트를 감지할 수 있게 하는 것이다. 앞에서 배웠던 태그 선택 함수 ( document.querySelector )를 사용해 HTML 태그들에 이벤트..
