Study/JavaScript
-
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에 있는 하나하나 배열에 이벤트리스너를 주..
-
APIStudy/JavaScript 2020. 5. 16. 16:22
API (Application Programming Interface)는 다른 서버로부터 손쉽게 데이터를 가져 올 수 있는 수단이다. 오직 데이터만 가져오는 것이다. 이런 웹사이트를 이용하면(weather API)(API를 제공하는) 해당 웹사이트를 통해 데이터를 얻을 수가 있는데, 우리가 가져올 것은 데이터뿐이다. 디자인이나 다른것은 필요하지 않다. 그러니까 이런 API는 특정 웹사이트로부터 데이터를 얻거나 컴퓨터(Machines)끼리 소통하기 위해 고안된 것이다. 그게 우리가 api에 아무 디자인이 필요없는 이유이다. 그리고 이 API(weather map)를 공개한 사람들 있잖아? 이 사람들은 이 api를 공짜로 사용하라고 제안하고 있다. 예컨데 여기 나온 url 예제로 request를 보내면, 데..
-
Storage.setItem()Study/JavaScript 2020. 5. 16. 11:57
The setItem() method of the Storage interface, when passed a key name and value, will add that key to the given Storage object, or update that key's value if it already exists. Syntax storage.setItem(keyName, keyValue); Parameters keyNameA DOMString containing the name of the key you want to create/update.keyValueA DOMString containing the value you want to give the key you are creating/updating..
-
The onFulfilled and onRejected FunctionsStudy/JavaScript 2020. 5. 15. 19:01
The onFulfilled and onRejected Functions To handle a “successful” promise, or a promise that resolved, we invoke .then() on the promise, passing in a success handler callback function: const prom = new Promise((resolve, reject) => { resolve('Yay!'); }); const handleSuccess = (resolvedValue) => { console.log(resolvedValue); }; prom.then(handleSuccess); // Prints: 'Yay!' Let’s break down what’s ha..
-
Consuming PromisesStudy/JavaScript 2020. 5. 15. 18:05
Consuming Promises The initial state of an asynchronous promise is `pending`, but we have a guarantee that it will settle. How do we tell the computer what should happen then? Promise objects come with an aptly named '.then()' method. It allows us to say, “I have a promise, when it settles, then here’s what I want to happen…” In the case of our dishwasher promise, the dishwasher will run then: I..