본문 바로가기

JavaScript

(16)
참조와 복사의 차이, 사용법 📝 참조와 복사 복사(깊은복사) let 복사 = "복사하기"; let 값 = 복사; 값 = "컴퓨터"; //"컴퓨터" 복사 //"복사하기" - 원시 값인 문자, 숫자, 불린은 복사가 된다. - 값만 복사되고 이전 변수에 영향을 주지 않는다. 참조 (얉은복사) let 참조 = { 참조하기 : "참조중" }; let 값 = 참조; 값.참조하기 = "컴퓨터" //"컴퓨터" 값 //{참조하기: "컴퓨터"} 참조 //{참조하기: "컴퓨터"} - 객체, 배열은 대입하면 참조 관계가 된다. - 값, 이전 변수에 영향을 미친다. +) 참조관계가 되는 객체 or 배열을 복사만 하고 싶다면? let obj1 = {a:1,b:2}; let obj2 = {} Object.keys(obj1).forEach(function(ke..
카드 짝 맞추기 게임 | ZeroCho 🃏 JavaScript | 카드 짝 맞추기 게임 1. 카드 뒤집기 구현 1-1) 뒤집기 효과를 낼 수 있는 css는 구글링해서 적용시켰다. CSSlick.com » 카드 뒤집기 효과(card flip effect) See the Pen eBIAr by michael kwon (@tailofmoon) on CodePen. /* entire container, keeps perspective */ .flip-container { perspective: 1000px; border:2px solid rgba(0,0,0,0) !important; } /* front pane, placed above back */ .front{ z-index:2; /* for firefox uxuiz.cafe24.com 1-2) ..
지뢰찾기 | ZeroCho 💣 JavaScript | 지뢰찾기 미니 게임 만들기 1. 지뢰찾기 테이블 만들기 실행버튼 클릭시, input의 value를 받아서 사용자가 원하는 값만큼 테이블이 만들어진다. parseInt를 활용하여 받아온 value 문자를 숫자로 바꿔준다. - 2중 반복문을 만들어서 테이블을 만든다. document.querySelector("#exec").addEventListener("click",function () { const hor = parseInt(document.querySelector("#hor").value); const ver = parseInt(document.querySelector("#ver").value); const mine = parseInt(document.querySelector..
스코프(scope), 스코프체인(scope chain), 클로저(closure) ⭐스코프 let x = 'global'; function ex(){ let x = 'local'; x = 'change'; } ex(); console.log(x); //x = global let x = 'global'; function ex(){ x = 'local'; x = 'change'; } ex(); console.log(x); //x = change ⭐ 스코프체인 - 스코프간의 상하관계, 전역범위를 찾아간다. ⭐ 렉시컬 스코프 - 코드가 적힌 순간 스코프가 정해진다. = 정적스코프 ⭐ 클로저 for(let i=0; i < 당첨숫자.length; i++){ setTimeout( function (){ console.log(당첨숫자[i]); },1000) } - 함수와 함수가 선언된 정적 환경, ..
가위바위보 | ZeroCho ✌✊✋ JavaScript | 가위바위보 미니 게임 만들기 이미지 스프라이트 기법을 사용하여 left position이 특정 초마다 가위, 바위, 보 손가락 그림을 바꿔주는 setInterval 함수를 만들었다. setInterval - 1초마다 계속 실행되는 것 setTimeOut - 1초 후 한번 실행되고 마는 것 1. ~초 마다 이미지 left position 바꾸기 let left = 0; setInterval(function () { if (left === 0) { left = "120px"; } else if (left === "120px") { left = "240px"; } else { left = 0; } document.querySelector("#computer").style.back..
로또추첨기 | ZeroCho 🤑 JavaScript | 로또추첨기 미니 게임 만들기 1. 0~45까지의 숫자가 있는 배열 만들기 let 후보 = Array(45); // 후보 // [empty × 45] ( ) 괄호를 사용하여 45개의 빈 공간(empty)이 있는 배열을 만들어준다. empty는 반복문이 불가하다. 보통 이런 방법은 잘 사용하지 않는다. fill( ); let 필 = 후보군.fill(); // 필 // (45) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefin..
이벤트 버블링, 캡처링 dropmenu를 만들면서 event에 대해 많이 찾아보고 공부하게 되었다. 🚣‍♀ DOM 이벤트에서 정의한 이벤트 흐름에는 3가지 단계가 있다. 1. 캡처링 단계 - 이벤트가 하위요소로 전파되는 단계 2. 타깃 단계 - 이벤트가 실제 타깃요소에 전달되는 단계 3. 버블링 단계 - 이벤트가 상위요소로 전달되는 단계 가장 하위단계의 태그이벤트를 실행시키면 최상위에서 아래로 전파 (캡처링 단계), 이벤트가 타깃 요소에 도착해서 실행(타깃 단계), 다시 상위요소로 전달되는 (버블링 단계) 위 과정을 통해 요소에 할당된 이벤트 핸들러가 호출된다. ⭐ 이벤트 버블링 가장 안쪽에 있는 p태그를 클릭하게 되면 p → div → form 순서로 alert창이 열린다. 위 흐름을 이벤트 버블링이라고 한다. 이벤트가 제일..
'use strict' 을 선언하는 이유 📄 자바스크립트 작성 시, 상단에 'use strict'; 를 선언하는 이유 why❓ 자바스크립트 언어 만들 때 굉장히 빨리 만들어야 했다 ↓ 굉장히 유연한 언어다 ↓ 위험성이 높다 ↓ (ex) 선언되지 않은 변수에 값 할당이 가능하다, 기존에 존재하는 prototype을 변경할 수 있다.) 말도 안 되는 코드.. ↓ 위 문제 개선을 위해 ECMA5에 추가됨 BAD a=6; // - a=6; 정의되어 있지 않은 a 변수에 값을 할당했는데 에러가 생기지 않는다. (이 출력 자체가 이상한 것이다..) BAD "use strict"; a = 6; //error // use.js:2 Uncaught ReferenceError: a is not defined at use.js:2 - 'use-stict';를 선언..