본문 바로가기

바닐라코딩 사전학습45

Number Baseball **작성한 코드내용은 길이 관계상 GitHub에 업로드하였다. kkomabono/vanilla_practice: Practice for vanilla_prep. (github.com) 1) 게임 시작 버튼 만들기 - HTML로 작성 2) 게임 시작 버튼 클릭시 랜덤한 세 자리 숫자 만들기 - click 이벤트로 연결. Math.random()을 써서 랜덤숫자 생성, 세 자리 숫자이므로 0~9까지 출력하면 되는데 Math.floor()와 조합해서 Math.floor(Math.random())으로 0~9까지의 숫자 생성 3) 게임 시작 버튼을 누르면 2)를 수행하고 바로 숫자 입력칸이 팝업되도록 만들기 - prompt를 이용. 4) 만약 3)에서 잘못된 숫자를 입력하면 제대로 된 숫자를 입력할 때 까지 반복.. 2021. 12. 28.
underscore.js 라이브러리 Koans 퀴즈를 풀다가 var odd = _(numbers).filter(function (x) { return x % 2 !== 0 }); //.filter() _(numbers).filter ... 와 같은 _를 만나게 되었다. _는 언더바 라고 읽는데 MDN에서도 나오지 않았다. 구글링을 해보니 underscors.js라는 자바스크립트 라이브러리였다. underscore.js는 컬렉션, 배열을 처리하는데 유용한 라이브러리를 제공한다. underscore.js의 메서드들이 아래의 블로그에 잘 정리되어 있다. javascript underscore 언더스코어 정리 (tistory.com) javascript underscore 언더스코어 정리 언더스코어란? 용어설명 Context iteratee Co.. 2021. 12. 28.
Prototype 객체 프로토타입이란? JS는 프로토타입 기반 언어이다. 모든 객체는 메서드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수 있다. 그 상위 프로토타입 객체도 마찬가지이다. 이것을 프로토타입 체인(Prototype Chain)이라고 한다. 상속되는 속성과 메서드들은 정확히는 각 객체라 아니라 객체의 생성자의 prototype 속성에 정의되어 있다. JS에서는 객체 인스턴스와 프로토타입 간에 연결(생성자의 prototype속성에서 파생된 __proto__속성으로 객체 인스턴스에 구현하고 있다)이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메서드를 탐색한다. ** 객체의 prototype(Obj.. 2021. 12. 28.
JavaScript Koans-master 바닐라코딩 사전학습가이드에서 기본적인 사항을 공부 후에 Koans퀴즈를 추천하였다. Koans퀴즈를 통해 JavaScript를 확인하고 어떻게 사용되는지 학습할 수 있었다. 처음에는 갑자기 길어진 코드와 지금까지는 보지 못했던 테스트코드가 포함되어 있어서 어디서부터 봐야할지도 막막하였다. 하나씩 분석하면서 테스트코드는 어디서부터 어디까지이고 문제는 어디인지 알 수 있었고, 테스트에 대한 기본적인 사항도 알 수 있었다. Koans관련 코드는 GitHub를 통해 GIt에 업로드하였다. 이 글에서는 Koans를 공부하던 중에 더 정리해야 할 사항들을 적고 다른 글에서 정리하겠다. 1) expect expect().tobe() 시리즈 정리, 정규식 정리. https://jestjs.io/docs/expect 2.. 2021. 12. 28.
Windows 객체 Windown 객체란? windows 객체는 두 가지 역할을 한다. 브라우저 안의 모든 요소들이 소속된 객체로 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 '전역 객체' 라고도 부른다. 일반적으로 열고 있는 브라우저의 창(browser window)을 의미하고 이 창을 제어하는 다양한 메서드를 제공한다. 전역객체로써의 window window객체는 window라는 이름으로 접근할 수 있다. 콘솔에서 window를 쳐보면 window내의 다양한 프로퍼티들을 확인할 수 있다. var myName = 'Bono'; function getMyName() { return myName; } console.log(window.myName); // Bono console.log(window.getMyName(.. 2021. 12. 28.
this의 4가지 역할 이 글은 [JS/this] 자바스크립트, this의 4가지 역할 :: Code Playground (tistory.com)를 참조해서 작성하였습니다. [JS/this] 자바스크립트, this의 4가지 역할 Javascript, This. 자바스크립트에는 this라는 키워드가 있다. this는 문맥에 따라서 다양한 값을 가지는 데, this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별된다. this의 값들 im-developer.tistory.com JS에는 this 라는 키워드가 있다. this는 코드에 따라 다양한 값을 가지는데 this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구분된다. 1. 일반 함수 실행 방식 일반함수 실행 방식이란 함수를 선언한 후, 실행.. 2021. 12. 27.