본문 바로가기

반응형

코딩/Javascript

(34)
자바스크립트 - Comment (주석 처리) 자바스크립트에서 주석 처리 방법 한 줄만 주석 처리 // console.log('hello world'); 여러 줄 주석 처리 /* var name = 'John'; console.log(name); */
자바스크립트 - null undefined 차이 null > 변수를 null 값으로 한 경우 let a = null; console.log(a); // null undefined > 변수를 선언만 한 경우 let b; console.log(b); // undefined undefined > 객체에서 선언되지 않은 프로퍼티를 접근하는 경우 let c = [1]; let d = { name: 'john' }; console.log(c[1]); // undefined console.log(d.age); // undefined null undefined 비교 타입 비교 console.log(typeof null);// object console.log(typeof undefined);// undefined 불린으로 변환 시 비교 let a = null; le..
자바스크립트 call() apply() 차이 call()와 apply() 함수들은 bind() 함수처럼 만약 객체1에서 객체2의 함수를 빌려 쓰고 싶을 때 쓸 수 있다. (상속 없이) 두 함수의 차이점은 call()는 여러 인자를 나열해서 받고 apply()는 여러 인자를 한 배열에 받는다. 두 함수 모두 첫 인자는 this를 가리킬 객체를 받는다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 const bank = { deposit: function(amount) { this.money += amount; }, deposits: function(amountOne, amountTwo) { this.money += amountOne + amountTwo; } }; const john = { money: 0 }; b..
자바스크립트 bind() 사용법 bind() 함수 사용법 1 2 3 function printName() { console.log(this.name); }; cs 위와 같은 printName라는 함수에 this라는 예약어는 현재 객체를 가리킨다. 만약 웹에서 console.log(this)를 입력하면 undefined를 출력한다 왜냐하면 this는 window라는 객체 가리키고 (Node에선 빈 객체를 출력), window 객체엔 name이라는 프로퍼티가 없기 때문. 이 함수를 그냥 쓰면 this는 언제나 window 객체를 가리키지만, bind() 함수로 this 예약어를 원하는 객체를 가리키게 할 수 있다. 예를 들어, ObjectOne의 name을 출력, ObjectTwo의 name을 출력... ObjectTen의 name을 출력..
자바스크립트 Canvas - 원 그리기 기본 세팅 링크: https://schwhitezer.tistory.com/30 자바스크립트 Canvas - 시작 세팅 자바스크립트 Canvas로 웹 2D 게임이나 시각 효과를 낼 수 있다. html 파일 생성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Javascript Canvas C.. schwhitezer.tistory.com 알림: HTML, 자바스크립트 캔버스 기본 세팅 완료 후 원활한 코딩 가능. arc() 함수로 간단한 원 그리기 1 2 3 4 5 6 7 8 // 원 그리기 시작 ctx.beginPath(); // (x, y, 반지름, 시작 각도, 끝나는 각도, 시계 반대 방향으로 그리기?) ctx.arc(100, 100, 50, 0, Math.PI * 2, false..
자바스크립트 Canvas - 선 그리기 기본 세팅 링크: https://schwhitezer.tistory.com/30 자바스크립트 Canvas - 시작 세팅 자바스크립트 Canvas로 웹 2D 게임이나 시각 효과를 낼 수 있다. html 파일 생성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Javascript Canvas C.. schwhitezer.tistory.com 알림: HTML, 자바스크립트 캔버스 기본 세팅 완료 후 원활한 코딩 가능. 간단한 가로줄 그리기 1 2 3 4 5 6 7 8 9 10 // beginPath() 함수로 선 시작 ctx.beginPath(); // moveTo(x, y) 첫 선 시작점 ctx.moveTo(100, 100); // lineTo(x, y) 이전 선 시작점과 연결 ctx.li..
자바스크립트 Canvas - strokeRect() fillRect() 크기 문제 해결 캔버스 도형 그리는 중 strokeRect()와 fillRect()로 만든 도형들을 비교하면 크기가 다르다는 것을 확인할 수 있다. 1 2 3 4 5 ctx.lineWidth = 10; ctx.fillRect(100, 100, 100, 100) ctx.strokeRect(220, 100, 100, 100); cs 자세히 보면 strokeRect() 함수로 그린 도형은 fillRect() 함수 도형에 lineWidth 절반을 밖으로 감싸고 절반은 들어갔다. 아래를 예시를 보자. 1 2 3 4 5 6 7 8 9 ctx.lineWidth = 10; ctx.fillRect(100, 100, 100, 100) ctx.strokeRect(220, 100, 100, 100); ctx.strokeRect(100, 22..
자바스크립트 Canvas - fillRect() 함수로 직사각형 & 정사각형 그리기 fillRect() 함수 사용법: fillRect(x, y, 너비, 높이) 도형 기본 색은 검은색 도형 채우는 색 변경 시 ctx.fillStyle property 값을 변경 (예: ctx.fillStyle = 'blue') 단점은 도형의 윤곽선 색 변경은 불가(하지만 rect()와 fill() 함수를 이용한 윤곽선 색 변경 가능, 맨 밑 참고) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // 너비 100, 높이 50 직사각형 ctx.fillRect(0, 100, 100, 50); // 너비 100, 높이 100 정사각형 ctx.fillRect(150, 100, 100, 100); // fillStyle property에 파란색 값을 할당 ctx.fillStyl..