개발공부/JavaScript
-
23_11_23 JS공부정리개발공부/JavaScript 2023. 11. 24. 01:22
[코딩애플] Part 3 게임만드는법 1.화면에 네모,원 그릴수 있어야함 2.프레임마다 코드실행이 가능해야함(1초에 60번) : requestAnimationFrame() 3.collision check할수있어야함(충돌시 코드실행 -JS로 간단한 게임만드는 코드 const canvas = document.querySelector('#canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth - 100; canvas.height = window.innerHeight - 100; const img1 = new Image(); const img2 = new Image(); img1.src = 'dinosaur.png' img2..
-
23_11_22 JS공부정리개발공부/JavaScript 2023. 11. 23. 00:21
[코딩애플] Part3 -커스텀 태그 Web Components : JS문법으로 구현할 수 있는 브라우저 기본 기능 의 장점 -html중복제거, 다른 페이지에서 재활용가능 class 클래스 extends HTMLElement { connectedCallback() { this.innerHTML = `이메일인풋이에요` //만든 태그가 HTML에 장착될때 실행할 코드 적는곳 } } customElements.define('custom-input', 클래스); //첫번째 자리에는 만들 태그이름, 두번째에는 클래스 *this는 여기서 새로 생성될 의 요소. -this.innerHTML대신에 document.createElement();를 쓰는게 더 빠름 let element = document.createEle..
-
23_11_21 JS공부정리개발공부/JavaScript 2023. 11. 21. 23:29
[코딩애플] Part3 -for in 반복문 for (let key in obj) { console.log(key) //키 모두 출력 console.log(obj[key]) //값 모두 출력 } -for in반복문의 특징 1.enumerable한 것만 반복해줌 *Object.getOwnPropertyDescriptor(오브젝트명, 키) : 오브젝트.키의 숨겨진 정보 출력 -사실 오브젝트 안에는 Kim이라는 정보 외에 writable, enumerable,configurable이 같이 저장됨. '데이터 속성(data property)'에 대한 속성 기술자는 네 가지 속성을 갖습니다. value: 속성에 어떤 값이 저장되어 있는지를 나타냅니다. writable: 변경할 수 있는 속성인지를 나타냅니다. enu..
-
23_11_20 JS공부정리개발공부/JavaScript 2023. 11. 21. 00:31
[코딩애플] Part3 -Promise : 성공/실패를 판정하는 기계 let Promise = new Promise(function(resolve, reject){ resolve(); //이렇게 쓰면 Promise가 성공함 reject(); //이렇게 쓰면 Promise가 실패함 }); //프로미스 = 성공/실패를 판정하는 기계 Promise.then(function() { //1번째 실행 }).then(function() { //2번째 실행 }).catch(function() { //실패할 경우 }).finally(function() { //성공이든 실패든 실행하는 함수 }) let Promise2 = new Promise(function(resolve, reject){ let 연산 = 1+1; res..
-
-
-
23_11_16 JS공부정리개발공부/JavaScript 2023. 11. 16. 22:59
[코딩애플] Part 2 -rest 파라미터 function 함수2(...rest) { //rest 파라미터. 입력되는 파라미터들을 배열로 만들겠다는 의미 console.log(rest); } 함수2(1,2,3,4,5); //[1, 2, 3, 4, 5] -argument와 차이점 arguments : 모든 파라미터를 배열에 담아줌 rest parameter : 그 자리에 오는 모든 파라미터를 배열에 담아줌 function 함수2(a,b,...rest) { console.log(rest); } 함수2(1,2,3,4,5); //[3, 4, 5] 1.함수 파라미터 자리에 붙으면 rest 파라미터 2.나머지 경우에는 spread operator rest 파라미터 주의점 1.가장 뒤에 ...rest 를 써야함. ..
-
23_11_15 JS공부정리개발공부/JavaScript 2023. 11. 15. 22:33
[코딩애플] Part 1 1.호이스팅 : 변수선언과 할당이 한줄에 같이 있으면 변수 선언을 맨 윗줄로 옮기는 방식 -JS에선 위의 코드가 아래코드처럼 실행됨 function 함수(){ console.log('hello'); var 이름 = 'Kim'; } function 함수(){ var 이름; //선언이 제일 위로 올라옴 console.log('hello'); 이름 = 'Kim'; } console.log(이름); // undefined (var 이름이 젤 위에 선언되기 때문) var 이름 = 'Kim'; console.log(이름); // "Kim" -변수선언시 여러개를 동시에 선언할 수 있음 var 이름 = 'Kim', 나이 = 29 , 성별 = "남"; -전역변수 : window.변수 window..