프로그래밍 삽질 중

* 출처 : https://thebook.io/080270/ 더북(TheBook): Let's Get IT 자바스크립트 프로그래밍 thebook.io * 두 장의 색이 다른 카드 맞추기 - 색상이 같은 것 2개 이상 = 색상.concat(색상.splice(index(Math.random된 것), 1); - 클릭한 경우 clicked 배열에 넣기 - 카드를 뒤집을 때 초반 카드 공개 시 각각의 카드에 시간차 둘 것, 카드 감출 때도 마찬가지 - onClickCard에서 this는 클릭한 카드가 됨(onClickCard는 startGame 내 card의 이벤트 리스너의 콜백함수) * 카드 뒤집기 중 버그 존재 1) 처음 카드 보여줬다가 다시 뒤집는 동안 카드를 클릭할 수 없어야 하는데, 카드를 클릭하면 카드..

*출처 : https://ko.javascript.info/array-methods 배열과 메서드 ko.javascript.info * arr.slice([start], [end]) - start 인덱스부터 end 인덱스까지의 요소를 복사한 새로운 배열 반환 - start, end가 둘 다 음수 일때 배열 끝에서 요소 개수 의미 - str.slice와 유사한데 차이점 : 서브 배열(subarray) 배열 반환 - arr.slice()는 인수를 하나도 넘기지 않고 호출하여 arr의 복사본을 만들 수 있음 let arr = ['t', 'o', 'p', 'g', 'u', 'n']; console.log(arr.slice(1, 3)); //['o', 'p'] console.log(arr.slice(-2)); /..

* 출처 : https://thebook.io/080270/part02/ch10/ Let's Get IT 자바스크립트 프로그래밍: 10장 클래스 다루기_텍스트 RPG thebook.io * 얕은 복사 & 깊은 복사 (참고 : https://bbangson.tistory.com/78) - 얕은 복사 : 객체의 참조값(주소 값)을 복사, 중첩된 객체가 있을 때 가장 바깥 객체만 복사, 내부 객체는 참조 관계 유지 - 깊은 복사 : 객체의 실제값 복사 - JSON.parse(문자열을 객체로) 과 JSON.stringify(객체를 문자열로)를 조합 시 대상 객체를 깊은 복사가 가능 (단 Math, Date 같은 객체는 복사 불가능) - 참조값 : 여러 자료형으로 구성되는 메모리에 저장된 객체 ex) object..

* 출처 : https://thebook.io/080270/part02/ch09/ Let's Get IT 자바스크립트 프로그래밍: 9장 이차원 배열 다루기_틱택토 게임 thebook.io * 이차원 그리기 - 배열 안에 배열이 들어가 있는 형태 //5(줄) × 4(칸) 이차원 배열을 만들어 보세요. 배열의 요소는 모두 1로 만듭니다. const rows = []; //들어갈 자리 for (let i = 1; i < 6; i++) {//행 const cells = []; for (let j = 1; j < 5; j++) {//열 cells.push(1); } rows.push(cells); } console.log(rows); //결과 //0: (4) [1, 1, 1, 1] //1: (4) [1, 1, 1..

* 출처 : https://thebook.io/080270/part02/ch08/ Let's Get IT 자바스크립트 프로그래밍: 8장 Date 사용하기_반응속도 테스트 thebook.io 반응속도 - 파랑 : 초기화면 - 빨강 : 초 시간 제기 전 대기화면, 성급하게 눌렀을 경우 경고 표시 - 초록 : 초 시간 잰 결과물 화면 [반응속도 테스트] 클릭해서 시작하세요 [상위 5개만 보여주기] 클릭해서 시작하세요 * 상위 5개 선택 - sort 함수 사용 * sort 함수 설명 글 : https://change-words.tistory.com/64 [JavaScript] .sort(function(a, b) { return a - b; })가 작동하는 원리? 우선 이 포스팅은 내용에 대한 이해가 완전히 되..

* 출처 : https://thebook.io/080270/part02/ch04/01/ Let's Get IT 자바스크립트 프로그래밍: 4.1 순서도 그리기 thebook.io 계산기 - 계산할 값 두 개 입력 - 연산자(+,-,/,*) 입력 - 값 입력 후 '=' 추가 계산기 순서도 코드 더보기 7 8 9 + 4 5 6 - 1 2 3 / C 0 = x * 결과 * 연속 계산 추가 - 위의 계산기는 1+2=3만 되는 상황, 1+2+3=6을 하려면? - 1+2+3=6에서 1+2의 값인 3이 나오고 3+3=6이 화면에 나오려면? - +3 부분의 '+'에서 계산(사칙연산)을 한 번 더 할 것 - 연산자를 눌렀을 때 계산이 되면서 numOne의 값이 화면에 표시되고 나중에 추가되는 numTwo의 값이 초기화 될..

* 출처 https://thebook.io/080270/part02/ch03/01-03/ Let's Get IT 자바스크립트 프로그래밍: 3.1 순서도 그리기 - 3 thebook.io 끝말잇기 - 참가자 수 결정 - 참가자가 말하는 말의 마지막 글자로 이어서 연결 - 참가자 수 반복 (예를 들어 3명일 경우 3 -> 2 -> 1 -> 3 -> 2로 반복) 끝말잇기 순서도 * 콜백함수 - 특정 작업이 실행되고 난 뒤 추가로 실행되는 함수 - EX) 버튼이 클릭되고 실행되는 함수 -> onClickButton, onInput 같은 함수 * onInput 함수 내 매개변수로 event 존재 - event.target (이벤트가 처음 발생한 대상 (출처 : https://developer.mozilla.org..

[1분 퀴즈 첫 번째] * 출처 : https://thebook.io/080270/part01/ch02/03/05-01/ Let's Get IT 자바스크립트 프로그래밍: 2.3.5 var 알아보기 - 1 thebook.io [1분 퀴즈 두 번째] https://thebook.io/080270/part01/ch02/06/01-12/ Let's Get IT 자바스크립트 프로그래밍: 2.6.1 배열 - 12 thebook.io 1분 퀴즈 a와 b라는 변수에 어떠한 값이 들어 있습니다. 두 변수의 값을 서로 바꿔 보세요. 힌트 두 값을 바꾸기 위해서는 변수 하나를 더 만들어야 합니다. 정답 let a = "sunny" let b = "rain" let change = a; //이 부분 추가 해야 함 a = b;..