이 장에서는 반응속도가 얼마나 빠른지 확인하는 반응속도 테스트 프로그램을 만든다. 시간 측정을 위해 Date 객체를 사용한다. 반응속도를 기록하고 평균을 내어 화면에 표시한다. 8.1 순서도 그리기 사용자는 처음에 대기 화면인 파랑 화면을 보게 된다. 여기서 화면을 한 번 클릭하면 빨강 화면으로 전환되는데, 빨강 화면은 준비 화면을 의미한다. 준비 화면에서는 임의의 시간이 지난 후에 초록 화면으로 자동 전환된다. 초록 화면을 보자마자 클릭하면 초록 화면이 뜬 시각과 클릭한 시각의 차이를 구해 반응속도를 측정한다. 만약 준비 화면(빨강)일 때 클릭하면 성급했다는 메시지가 나오고 다시 클릭하도록 대기 화면(파랑)으로 보낸다. 화면과 관련해서 생각해 볼 점이 있다. 테스트할 때 파랑 화면, 빨강 화면, 초록 ..
컴퓨터와 가위바위보를 해서 몇 번 이겼는지 점수를 기록한다. 객체의 사용법을 익히고 타이머를 멈췄다가 재개하는 방법을 배운다. 7.1 순서도 그리기 가위, 바위, 보 버튼을 누르면 승부를 표시하기 위해 돌아가는 그림을 1초 동안 멈추도록 한다. 코드 작성 가위 바위 보 0 실행 결과 7.2 객체로 변수 묶기 IMG_URL 변수에 주어진 이미지는 다음과 같다. 이미지가 가위, 바위, 보로 각각 분리된 것이 아니라 하나의 이미지로 합쳐 있다. 서버에 이미지를 요청하는 횟수를 줄이기 위한 기법이다. 이렇게 이미지가 합쳐져 있는 것을 이미지 스프라이트(image sprite)라고 한다. 다만, 이미지가 하나로 합쳐져 있으므로 CSS와 Javascript로 적절히 잘라서 화면에 표시해야 한다. background..
이 장에서는 비동기를 소개한다. 비동기는 동기의 반대말로, 실제로 코딩한 순서와 다르게 작동하는 코드를 비동기 코드라고 한다. 지금껏 사용했던 이벤트 리스너가 대표적인 비동기 코드이다. 비동기를 이용하여 로또 추첨기를 만들어보자 6.1 순서도 그리기 로또 추첨기의 순서도는 간단하다. 1~45까지의 숫자를 중복되지 않게 7개를 뽑으면 된다. 그리고 뽑은 순서와 갯수에 따라 등수가 달라진다. 뽑은 공을 한 번에 보여주는 것이 아니라, 1초에 하나씩 보여주는 방식으로 구성한다. 6.2 무작위로 공 뽑기 1에서 45까지 숫자를 추첨하는 코드를 작성한다. candidate 배열에서 무작위로 뽑은 숫자를 shuffle 배열로 하나씩 옮긴다. candidate 배열의 길이가 0이 될 때까지 이를 반복한다. 이것이 피..
ChatGPT 과연 축복일까 저주일까? 새로운 발전에 의해 사라지는 직업과 새로 생기는 직업이 있는데, 컴퓨터의 보급, 스마트폰의 보급으로 인해 시대는 빠르게 발전하였다. 과거에는 정보라는 것을 찾기 어려운 시대였기에 지식을 많이 가지고 있는 사람이 가장 유리한 삶을 살았을 것이다. 하지만 지금은 검색하면 정보라는 것들이 순식간에 쏟아져나온다. 물론 그 많은 정보에서 자기에게 필요한 정보인지 판단하고 신뢰가 있는 정보인지 분별할 능력이 있어야 한다. 하지만 ChatGPT가 등장하고 나서는 검색을 통해 일일이 정보들을 찾아다닐 필요가 없어지게 되었다. 하지만 아직 신뢰성에 문제가 있을 수 있다. ChatGPT가 모르는 것은 마치 있는 사실인 양 지어내기도 한다. ChatGPT에게 스스로를 축복인지 저주인지..
반복문 사용하기 _숫자야구 게임 숫자야구 게임을 간단히 설명하면 다음과 같다.. 먼저 상대편이 숫자 1~9 중에서 중복되지 않게 네 개를 고른다.(더 어렵게 만들려면 0을 포함) 10번의 기회가 주어지고 상대편이 고른 숫자 네 개를 맞히면 된다. 숫자만 맞히는 것이 아니라 숫자의 순서까지 맞혀야 한다. 틀릴 때마다 힌트를 준다. 맞힌 숫자의 개수(볼), 숫자뿐만 아니라 순서까지 맞힌 개수(스트라이크)를 알려준다. 예를 들어, 상대편이 5728을 뽑았다고 가정해 보자. 플레이어가 7129를 말한다면, 상대는 1스트라이크, 1볼이라고 말해준다. 7은 숫자만 맞혀서 볼이고, 2는 숫자에 순서(세 번째)까지 맞혀서 스트라이크이다. 마찬가지로 플레이어가 7528을 말한다면, 2스트라이크 2볼이 되고, 7285를 ..
함수 사용하기 _계산기 4.1 순서도 그리기 단순히 생각하면 위와 같이 그릴 것이다. 자바스크립트 프로그램의 순서도를 만들 때 사용자 이벤트를 기준으로 순서도를 끊어야 한다고 했다. 계산기는 사용자가 숫자나 연산자 버튼을 클릭해 여러 가지 계산을 하는 장치이다. 따라서 클릭 이벤트가 많이 발생한다. 그리고 사용자가 입력한 숫자나 연산자를 저장하고 있어야 = 버튼 클릭 시 결과를 계산할 수 있다. 각각의 경우를 고려해 만든 순서도는 아래와 같다. '숫자를 변수에 저장한다' 절차에서 숫자 1과 숫자 2중에 어떤 숫자에 저장해야 하는지 판단해야 하는 절차의 순서도는 아래와 같다. 10 - 5를 생각해 보자. 먼저 1을 누르면 숫자 1에 저장하고 연산자를 누르기 전까지 숫자 1에 추가로 저장해야 한다. 문자열 ..
