javascript/javascript 심화지식16 Canvas 기초 한번사용해보자 HTML Canvas 오늘은 HTML 표준으로 채택되어 요즈음에는 대부분의 브라우저에서 지원하는 캔버스에 대해 살펴보도록 하겠습니다 :) 제가 Canvas 공부하게 된 이유는 바로 웹에서 자유로운 GUI(그래픽 유저 인터페이스)를 지원하는 기술이기도 하기 때문입니다. canvas 기초 사용법 html 문서에 canvas 엘리먼트를 선언한다. canvas 엘리먼트에 id 속성을 설정한다. canvas 태그 내부에 width, height를 설정한다. canvas 내장 '그리기 객체'를 취득한다. 그리기 객체에 '채우기색, 선색, 그림자, 그라데이션' 등을 설정한다. 그리기 객체를 통해 선, 사각형, 원, 텍스트 등을 그린다. 자바스크립트를 통해 다양한 효과를 구현한다. 캔버스 사이즈 설정 캔버스 사이즈 설.. 2022. 2. 5. prototype prototype prototype이란 무엇인가? 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 그러므로 생성자로 사용될 함수도 객체다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. function Ultra() {} Ultra.prototype.ultraProp = true; function Super() {} Super.prototype = new Ultra(); function Sub() {} Sub.prototype = new Super(); var o = new Sub(); .. 2021. 7. 19. 상속 상속 function person(name){ this.name = name; this.interduce = function(){ return 'My name is' + this.name; } } let p1 = new person("honey") console.log(p1) // My name is honey function person() { this.name = name; } person.prototype.name = null; person.prototype.intorduce = function () { return "My name is" + this.name; }; let p1 = new person("honey"); console.log(p1); 상속의 사용방법 function person() .. 2021. 7. 19. 전역객체(Global object) 전역객체(Global object)는 특수한 객체다. 모든 객체는 이 전역객체의 프로퍼티다. function func() { alert("Hello?"); } func(); window.func(); func();와 window.func();는 모두 실행이 된다. 모든 전역변수와 함수는 사실 window 객체의 프로퍼티다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주된다. var o = { func: function () { alert("Hello?"); }, }; o.func(); window.o.func(); 자바스크립트에서 모든 객체는 기본적으로 전역객체의 프로퍼티임을 알 수 있다. 전역객체 API ECMAScript에서는 전역객체의 API를 정의해두었다. 그 외의 API는 호스.. 2021. 7. 19. 생성자와 new 객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. 객체를 만들어보자. let person = { name: kikiki", introduce: function () { return "My name is" + this.name; }, }; 객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. 객체를 만들어보자. let person = {}; person.name = "kikiki"; person.introduce = function () { return "My name is" + this.name; }; .. 2021. 7. 19. 함수호출 apply 함수호출 (apply) 함수에 대한 기본 수업에서 함수를 호출하는 방법을 알아봤다. 아래는 함수를 호출하는 가장 기본적인 방법이다. function func() {} func(); JavaScript는 함수를 호출하는 특별한 방법을 제공한다. 본 토픽의 시작에서 함수를 객체라고 했다. 위의 예제에서 함수 func는 Function이라는 객체의 인스턴스다. 따라서 func는 객체 Function이 가지고 있는 메소드들을 상속하고 있다. 지금 이야기하려는 메소드는 Function.apply과 Function.call이다. 이 메소드들을 이용해서 함수를 호출해보자. 결과는 3이다. function sum(arg1, arg2) { return arg1 + arg2; } console.log(sum.apply(n.. 2021. 7. 17. 이전 1 2 3 다음
