ellie의 일지

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

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 ..

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를 이용하여 접속 국가의 코로나..

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

생활코딩 MVC 디자인 패턴 MVC(Model View Controller) 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다. Controller 사용자가 접근 한 URL에 따라서 사용자의 요청사항을 파악한 후에 그 요청에 맞는 데이터를 Model에 의뢰하고, 데이터를 View에 반영해서 사용자에게 알려준다. Model 애플리케이션의 정보(데이터)를 나타낸다. 모델의 상태에 변화가 있을 때 컨트롤러와 뷰에 이를 통보한다. View View는 클라이언트 측 기술인 html/css/javascr..