Study
-
async vs deferStudy/JavaScript 2020. 5. 20. 19:10
// 노드 js와 api는 모두 console에 관련된 api를 가지고 있다. 그리고 이 둘의 api들의 interface가 둘다 동일하다. 1. console api console API는 웹 API중의 하나이다. API (Appication Programming Interface). 웹 APIs 는 자바스크립트 언어 자체에 포함된 아이가 아니라 브라우저가 제공하는 브라우저가 이해할 수 있는 함수들이다. 콘솔은 언어 자체에 포함되는 아이는 아니지만, 통상적으로 사용되는 아이여서 똑같은 콘솔apis를 이용해서 node JS 로도 출력할 수 있고 브라우저 상에서도 출력되는 걸 확인 할 수 있다. 2. Dev Tools 그리고 브라우저에서 딸려나오는 이런 개발 툴을 잘 사용하면 유용하게 활용할 수 있다. i..
-
snake gameStudy/JavaScript 2020. 5. 19. 14:05
//html js코드는 아래와 같다. const cvs = document.getElementById("snake"); const ctx = cvs.getContext("2d"); //create the unit let box = 32; //load images const ground = new Image(); ground.src = "images/ground.png"; const foodImg = new Image(); foodImg.src = "images/food.png"; //load audio files const dead = new Audio(); const eat = new Audio(); dead.src = "audios/gameover.mp3"; eat.src = "audios/eat.m..
-
(게임) 구구단 구현Study/JavaScript 2020. 5. 18. 16:52
코드를 작성하기 전에 먼저 생각해본다. 컴퓨터가 랜덤한 문제를 낸다. | 내가 답을 입력한다. | 2번 (no) (yes) 1번 while (true){ let numberOne = Math.floor(Math.random() * 9) + 1; let numberTwo = Math.floor(Math.random() * 9) + 1; let result = numberOne * numberTwo; let condition = true; while (condition){ let answer = prompt(`${String(numberOne)} 곱하기 ${String(numberTwo)} 는?`) if (result === Number(answer)){ alert('올 맞췄네😊'); condition = ..
-
객체Study/JavaScript 2020. 5. 18. 16:13
객체 함수(function) 배열 숫자 문자 불린 null undefined 객체 = { 속성(프로퍼티): 값, 속성(메서드: 함수 } 호출할때, 아래와 같이 작성. 객체.속성 객체['속성'] 이 두 호출 방법의 차이 : 윗 호출방법이 편하지만, 아래 호출방법을 사용해야할 때가 있다. Array 라는 객체가 있다. 이것은 브라우저에서 만들어준 배열을 담당하는 객체이다. 그러나 배열은 아니다. 이와 같이 Math 객체, Number, window객체 등등 있다. 앞 첫글자가 대문자 인 친구들은 '생성자'이다.
-
printTriangle만들기Study/JavaScript 2020. 5. 18. 15:44
for (처음(1); 조건(2); 끝(4)){ 실행(3) } 2,3,4는 조건이 true면 계속 반복 for(let star = 1; star = 2 ; star -= 2){ console.log('*'.repeat(star)) } /* 결과 ********** ******** ****** **** ** */ 위와 같은 함수를 "등차수열"이라고 한다. 등차수열 = -2, 몇개씩 감소될때 등비수열 = 2배씩 차이날 때 for (let star = 10; star >= 2 ; star *= 2){ console.log('*'.repeat(star)) } 위 함수가 등비수열이다. (결과값이 2배씩 차이남) for (let star = 5; star >= 1 ; star -= 1){ console.log(' '..
-
save imgStudy/JavaScript 2020. 5. 17. 20:03
캔버스에서 마우스 우클릭을 하면, 두 가지를 볼 수 있는데, save img와 copy img이다. 우리가 캔버스에서 한 작품들은 이미지 저장이 된다. 무슨일이 일어난 거냐면, canvas는 pixel을 다루는 거니까 기본적으로 img를 만든다. 그래서 다운로드와 save파트는 이미 내장되어있다. 이미 canvas가 pixel을 다뤄서 img를 만들어주니까 우리가 할게 없다. 여기에 버그가 있다는 것을 알게 되었는데, filling모드를 적용하지 않으면 배경이 투명색으로 이미지가 저장된다. 즉, canvas에 배경색을 지정하지 않으면, 실제 pixel manipulator canvas에 background를 설정하지 않아서이다. 즉 우리는 배경색을 지정하지 않아도, canvas가 load 되자마자 설정되..
-
changing colorStudy/JavaScript 2020. 5. 17. 17:27
html에서 색깔들에게 class 네임으로 jsColor를 주고, const colors = document.getElementsByClassName("jsColor"); 코드를 작성한다. console.log(colors)를 하면 텍스트가 array가 아니라 HTMLcollection으로 나온다. 우리는 이를 array로 묶기 위해서 console.log(Array.from(colors)); array.from 메소드를 사용한다. 이 메소드는 object로부터 array를 만든다. 위를 활용하여 아래와 같이 코드를 작성한다. Array.from(colors).forEach((color) => color.addEventListener("click")); array에 있는 하나하나 배열에 이벤트리스너를 주..