웹/Javascript 4

[JavaScript]_guessingGame

guessingGame 숫자 맞추기 게임이다. 숫자는 1부터 100까지 기회는 10번 숫자를 입력하면 맞추었는지, 틀렸는지 알려줘야 함 틀렸다면 입력한 숫자가 정답보다 큰지 작은지 알려줌 플레이어가 숫자를 맞추던가, 기회를 모두 소진하면 게임 종료 문제 쪼개기 1과 100사이의 숫자 중 무작위로 추출한다. 1부터 플레이어의 차례를 기록한다. 플레이어에게 숫자를 맞출 수 있게 한다. 숫자를 맞추면 어딘가에 저장하고, 사용자는 이전의 추측한 숫자를 볼 수 있도록 한다. 그다음, 숫자가 일치한지 확인한다. 만약 일치한다면: 축하 메시지를 표시한다. 더 이상 숫자를 맞출필요가 없다. 플레이어가 다시 게임을 할지 묻는다. 숫자가 틀렸고, 차례가 남아있다면: 틀렸다고 알린다. 다른 숫자를 입력할 수 있도록 한다. ..

웹/Javascript 2021.02.26

[JavaScript]_todo + weather + corona_code

backGround.js - 새로고침하면 배경이 랜덤 설정된다. const body = document.querySelector("body"); // 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element 반환. 일치하는 요소 없으면 null 반환 const IMG_NUMBER = 5; // 다섯개의 이미지 function paintImage(imageNum){ const image = new Image(); image.src = `images/${imageNum}.jpg`; image.classList.add("bgImage"); body.prepend(image); // body의 첫 번째 자식 이전에 image를 삽입 } function randomNum(){ const num ..

웹/Javascript 2021.02.16

[JavaScript]_todo + weather + corona

html, css, js로 todo 리스트를 만들었다. 기본적인 todo 리스트에 날씨 정보와 코로나 정보를 추가했다. 만들면서 자바스크립트를 공부한거라 제대로 숙지하고 넘어가야 할 개념들이 많다. 앞으로 작성한 코드를 보면서 정리를 해보려고 한다. 만든 자바스크립트 파일은 총 6개이다. 1. backGround.js - 새로고침을 할 때마다 배경화면이 랜덤으로 바뀐다. 2. clock.js - 현재시간 3. welcome.js - 이름을 입력하면 저장해서 새로고침을 해도 전에 입력한 이름을 보여주면서 환영해준다. 4. check.js - todo 리스트 5. weather.js - 오픈 api를 이용하여 접속 지역의 날씨를 알려준다. 6. corona.js - 오픈 api를 이용하여 접속 국가의 코로나..

웹/Javascript 2021.02.16

[JavaScript]_classList

classList은 element.className을 통해 element의 class 목록에 접근하던 방식을 대체할 수 있는 더 간편한 방법이다. element.classList 자체는 읽기 전용 프로퍼티지만 메서드를 이용하여 변형할 수 있다. 형식 : element.classList.method 메서드 add( String [, String [, ...]] ) : 지정한 클래스 값을 추가한다. remove( String [, String [, ...]] ) : 지정한 클래스 값을 제거한다. item( Number ) : 콜렉션의 인덱스를 이용하여 클래스 값을 반환한다. toggle( String [, force] ) : 하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고..

웹/Javascript 2021.02.05