본문 바로가기

Web Development/Front-end

(22)
[Zerocho-10] 반응속도 테스트 게임 ( 호출스택, new Date() ) 중급 강좌 부터는 따로, 코드리뷰 없이 진행합니다. -이번시간 주요 이론 내용 - 게임 코드 위와 같이 구조를 잡고 포스팅을 이어나갈 계획입니다. 1. classList.contains('class') 아래와 같은 HTML코드가 있다고 가정합시다. //HTML 웨이팅 클래스 아래 JS코드에서 classList.contains를 이용해보겠습니다. let screen = document.querySelector('#screen'); if(screen.classList.contains('waiting')){ console.log(`클래스가 waiting입니다.`); } else { console.log(`클래스가 waiting이 아닙니다.`); } 이렇게하면, 위에서 선언한 HTML 코드를 screen변수에 ..
[Zerocho-09] 지뢰찾기 (ES6 & Scope & Closure & IFFE...) 중급강좌에서는 코드가 매우 길어지므로 게임 포스팅 보다는, 다루었던 주요 이론 내용을 보충하는 방식으로 진행할 예정이니, 복습용으로만 참고하시고, 중급강좌는 제로초님의 동영상으로 시청하실 수 있도록 링크 남기겠습니다. (아래 링크 (8-1) 부터~) www.youtube.com/watch?v=Qq2IJ2iEgWA&list=PLcqDmjxt30Rtbxbh4eJREOVekql_kWVmu 1. ECMA Script6(ES6) ES 6는 ECMA 라는 국제기구에서 만든 6번째 표준 스펙입니다. 즉, Javascript의 6번째 버전이라고 생각하시면 됩니다. ES6는 2015년에 출시되어 ES2015라고도 불립니다. 2016년에는 ES7, 2017년에는 ES8 등등 이런식으로 말이죠. 그런데 왜 2015년 버전인..
[Zerocho-08] 가위바위보 (이미지스프라이트 & Object & setInterval & querySelectorAll) 안녕하세요 어느새 게임을 8개나 만들어봤네요 ㅎ_ㅎ! 가위바위보를 게임을 마지막으로 Javascirpt - 초급(응용)편은 종료됩니다. 구성이 어떤지 간략히 목차를 나열해보겠습니다. [초급] - 끝말잇기게임 (JS 기초 총정리) - 별찍기 (반복문 연습) - 화면구현 (window & DOM) - 구구단게임 (Math & 형변환) - 숫자야구게임 (배열) - 틱택토게임 (이차원배열) - 로또게임(querySelector & 배열주요메소드) - 가위바위보(이미지스프라이트/setTimeout&Interval&ClearTimeout&Object & querySelectorAll) [중급] - 지뢰찾기 (스코프&클로저&렉시컬스코프&재귀) - 반응속도테스트게임 (호출스택, 재귀&비동기와 호출스택) - 틱택토 개량..
[Zerocho-07] 로또게임 (배열 주요 메소드 & JS에서 HTML제어) 안녕하세요! 지난 시간에는 포스팅이 많이 길어져 조금 힘들었지만 ! 결국 틱택토를 완성시켰습니다 ! 이번에는 로또 게임을 만들어 보도록해요 ! 이 게임을 통해 우리는, 배열의 Array, fill, map, sort 등 새로운 메소드들을 만나게 될 것이고, 더 이상 HTML을 Javascript에 작성하지 않는 방법을 알게 될 것 입니다. 로또게임이 어떤 게임인지 좀 살펴볼까요? 로또게임 로또는 1~45 까지의 숫자중에서, 무작위 숫자 6가지를 뽑아 비교하는 복권게임(?)입니다. 그리고, 보너스볼이라는 개념도 있어서 추가적으로 1개의 숫자를 하나 더 뽑는 게임입니다. 1. 순서도 위처럼, 배열을 이용해서 45개의 숫자를 담고, 배열을 섞은 뒤, 무작위로 섞은 배열에서 총 7개의 숫자를 뽑아내는 방식으로 ..