Small Grey Outline Pointer 'Dev./JavaScript' 카테고리의 글 목록
본문 바로가기

Dev./JavaScript26

[인간 JS 되기] promise, async/await promise const condition = true; //true이면 resolve, false면 reject const promise = new Promise((resolve, reject)=>{ if(condition){ resolve('성공'); }else{ reject('실패'); } }); //다른 코드가 들어갈 수 있음 promise.then((message)=>{ console.log(message); //성공(resolve)한 경우 실행 }).catch((error)=>{ console.log(error); //실패(reject)한 경우 실행 }) 📌promise : 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체 Then을 붙이면 결과를 반환함 실행이 완료되지 않았으면 완료된 .. 2023. 8. 6.
let과 var의 차이 let 과 var의 차이 let for(let i =0; i{ console.log(winBalls[i], i); addBall(winBalls[i] ,$result); }, (i+1)*1000); } var for(var i =0; i{ console.log(winBalls[i], i); addBall(winBalls[i] ,$result); }, (i+1)*1000); } 📌var는 함수 스코프, let은 블록 스코프를 가진다 a는 함수 안에 선언된 변수이므로 함수 바깥에서는 접근할 수 없다 함수를 경계로 접근 여부가 달라지는 것이 함수 스코프 var는 함수 스코프(함수만 신경 씀)라서 if 문 안에 들어 있으면 바깥에서 접근할 수 있다 하지만, let은 그렇지 않다 let이 블록 스코프(블록을 신경.. 2023. 7. 17.
[레츠기릿JS] 로또 추첨기 순서도 그리기 전체 공 개수를 45개로 하고 이 중에서 보너스 공까지 총 7개를 뽑는다 (마지막 공이 보너스 공) 단, 공 45개를 전부 다 섞은 뒤에 7개의 공을 뽑는다 const candidate = Array(45).fill().map((v, i) => i+1); //Array(45) 빈배열 45개 만들고, fill() : undefined로 채운다 //map()으로 리턴값 i + 1인 새 배열을 반환 // 1~45까지의 숫자가 담긴 배열이 생성 된다 자바스크립트 배열 만드는 방법 배열 리터럴 [] 대괄호로 배열 생성 var arr = []; Array() 생성자 함수로 배열 생성 var arr = new Array(); 피셔 예이츠 셔플 유한 수열의 무작위 순열을 생성하기 위한 알고리즘 (값을 랜.. 2023. 7. 17.
[노마드코더] 바닐라JS로 그림앱 만들기 #01 캔버스 기본 동작 const canvas = document.querySelector('canvas'); //컨버스에 그림 그릴 때 사용 context //컨버스의 좌표 시스템을 이용해서 그림을 그린다 const ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 800; //좌표의 0,0 부터 시작한다 //한 경로로 연결되어 있기 때문에 컬러 변경 시 모든 사각형이 변경 됨 => 새 경로 만들어줘야 함 /* ctx.rect(50, 50, 100, 200); ctx.rect(150, 150, 100, 100); // ctx.stroke(); ctx.fill(); ctx.beginPath(); //새 경로 만들기 ctx.rect(350, .. 2023. 7. 1.
[레츠기릿] 숫자야구 게임 만들기 (반복문 사용하기) 숫자야구 룰 https://thebook.io/080270/0265/ Let's Get IT 자바스크립트 프로그래밍: 5장 반복문 사용하기_숫자야구 게임 더북(TheBook): (주)도서출판 길벗에서 제공하는 IT 도서 열람 서비스입니다. thebook.io 무작위 숫자를 뽑는 과정 Math.random()을 사용하여 랜덤으로 4개의 숫자를 추출한다 • Math.floor 내림 • Math.ceil 올림 • Math.round 반올림 Math.random()// 0 2023. 5. 14.
[레츠기릿JS] 중첩if문 제거하기 / 계산기 만들기 if문 중첩 제거하기 1. if 문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다. 2. 분기점에서 짧은 절차부터 실행하게 if 문을 작성한다. 3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for 문 내부의 경우)로 중단한다. 4. else를 제거한다(이때 중첩 하나가 제거된다). 5. 다음 중첩된 분기점이 나오면 1~4의 과정을 반복한다. const onClickNumber = (event) => { if(operator){ //연산자 비어 있지 않을 때 if(!numTwo){ $result.value=''; //numTwo에 값 저장하기 전 화면 비우기 } numTwo += event.target.textContent; }else { //연산자 비어 있을 때 numO.. 2023. 5. 1.
[레츠기릿JS] 계산기 만들기 / event 객체로 중복 제거하기 const onClickNumber = (number) => (event) => { if(operator){ //연산자 비어 있지 않을 때 numTwo += number; }else { //연산자 비어 있을 때 numOne += number; }$result.value += number; } event 객체는 event.target.value 화면상에서 입력 받은 값을 가져오기 위해 사용하는데 여기서 event는 어디서 나온 것인가 => 브라우저가 넣어주는 것이다 const a = () => {} document.querySelector('#plus').addEventListener('click', a); 함수 자리에 a라는 함수를 넣었기 때문에 문제 없다 const a = (event) => { con.. 2023. 4. 23.
[레츠기릿JS] 계산기 만들기 / 고차함수로 중복 제거하기 함수가 함수를 반환하는 경우 const func = () => { return () => { console.log('hello'); }; }; func함수를 호출하면 함수를 반환한다 반환된 함수는 다른 변수에 저장될 수 있고 변수에 저장된 함수를 다시 호출할 수 있다 const innerFunc = func(); innerFunc(); // hello func() 부분을 반환값(retunr문) 으로 대체해보면 이해하기 쉽다 const innerFunc = () => { console.log('hello'); }; innerFunc(); // hello 반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다 바꾸고 싶은 자리를 매개변수로 만들어 주면 된다 const func = (msg) => { return.. 2023. 4. 23.
[레츠기릿JS] 계산기 만들기 순서도를 먼저 그린다 사람이 계산기를 사용할 때 어떤 순서로 쓰는지 생각해본다 하지만 사람이 계산기를 이용할 때는 예를들어 100을 입력하려고 하면 100을 한꺼번에 바로 입력하는게 아니다 1, 0, 0 이렇게 숫자를 한자리씩 입력하는 것이다 그 후, 연달아 계산하는 방법들의 절차도 하나씩 생각해 본다 하지만 자바스크립트 프로그램의 순서도를 만들 때 사용자 이벤트를 기준으로 순서도를 끊어야 한다고 했다 입력한 숫자를 저장할 변수와 선택한 연산자를 저장할 변수도 생성해야 한다 사용자의 입력 직전에는 항상 대기가 걸린다는 것을 유념해야 한다 앞으로 순서도를 짤 때는 처음처럼 간단하게 짜도 되지만, 코드로 옮기려면 언제 대기가 걸리는지 체크해서 이벤트를 더 작은 단위로 쪼개주는 것이 좋다 10 - 5를 예를 .. 2023. 4. 23.
[레츠기릿JS] 배열 기본 const fruits = ['사과', '오렌지', '배', '딸기']; 배열의 자릿수는 0부터 시작 인덱스(index) : 배열의 자릿수 요소(element) : 배열 내부의 값 const fruits = ['사과', '오렌지', '배', '딸기']; console.log(fruits[0]); //사과 console.log(fruits[1]); //오렌지 console.log(fruits[2]); //배 console.log(fruits[3]); //딸기 배열안에 있는 값들의 자료형이 모두 같지 않아도 된다 배열 안에 다른 배열이나 변수를 넣을 수 있다 const arrayOfArray = [[1, 2, 3], [4, 5]]; arrayOfArray[0]; // [1, 2, 3] const a = 10.. 2023. 4. 17.

티스토리툴바