Romantic Developer : )

안녕하세요 영감을 주는 개발자 방민방민입니다. 오늘은 웹 자바스크립트에서 오브젝트 모델에 대하여 알아보도록 하겠습니다.이 부분은 많이 어려울 수 있습니다. 최대한 상세하고 어렵지 않게 설명하고자 합니다. 집중해서 잘 따라와 주시면 감사하겠습니다. 웹 브라우저에서의 구성요소들은 하나하나가 모두 객체화 되어 있습니다.JavaScript , DOM(Document Object Model), BOM(Browser Object Model) 으로 구성된 3가지의 오브젝트는 브라우저의 가장 큰 틀 3가지이기 때문에 반드시 알아두어야 합니다.(출처 : 생활코딩) 브라우저를 객체화 한다는것이 무엇일까요? 지금부터 알아보도록 하겠습니다. 1. Img tag 브라우저 위에 이미지를 하나 올려 보도록 하겠습니다. 위의 간단한..

안녕하세요, 영감을 주는 개발자 방민방민입니다. 오늘은 이전시간에 간단하게 다루었던 자바스크립트에서의 데이터타입과 참조 대하여 알아보고자 합니다.자바스크립트에는 객체 데이터 타입과, 원시 데이터 타입입니다. -숫자-문자-불리언-Null-undefined 위의 5가지 데이터 타입을 원시 데이터 타입이라고 하고, 5가지에 포함되지 않는 다른 데이터 모두를 객체 데이터 타입이라고 합니다. 1. 레퍼 객체 레퍼객체에 대하여 알아보기 위하여 아래 코드를 살펴보겠습니다. var str = 'coding'; console.log(str.length);//6 console.log(str.charAt(0));//Cstr.length 는 6을 charAt(0) 은 C 를 출력합니다. 그런데 조금 이상합니다. str 은 분..

안녕하세요~ 영감을 주는 개발자 방민방민입니다. 오늘은 자바스크립트에서 지원하는 표준 내장 객체에 대하여 알아보고자 합니다. 자바스크립트는 표준으로 내장된 객체를 제공합니다. 이러한 다양한 객체를 사용하면 프로그램의 작성을 더욱 효과적으로 할 수 있습니다. 자바스크립트는 아래의 표준 내장 객체를 제공합니다.ObjectFunctionArrayStringBooleanNumberMathDateRegExp내장객체가 가지고 있는 기능을 그대로 사용할 수도 있지만, 앞에서 배운것 처럼, Prototype 기능을 활용하여 적절하게 확장하며 사용할 수 있습니다. 표준 내장 객체의 활용과 확장, 지금 바로 시작하도록 하겠습니다! 1. 배열의 확장 배열에 저장된 도시들 중에 임의의 도시를 뽑고 싶습니다. 이럴때는 어떻게 ..

안녕하세요. 영감을 주는 개발자 방민방민입니다. 오늘은 자바스크립트에 있어서 상속에 대해서 알아보고자 합니다. 상속이란 기존 객체가 가지는 속성(프로퍼티)들을 받아 사용하는 것을 말합니다.상속을 받게되면 A 라는 객체의 a, b 속성을 상속받아, a,b, c와 같이 a,b 를 포함하며 새롭게 c 를 추가시킨 새로운 객체를 만들 수 있습니다. 예제를 통해 알아보도록 하겠습니다. 바로 시작하도록 하겠습니다. 1. 상속 먼저 아래의 예제 코드를 살펴 보겠습니다. function Person(name){ this.name = name; this.introduce = function(){ return 'My name is ' + this.name; } } var p1 = new Person('Bangmin'); ..

안녕하세요~! 영감을 주는 개발자 방민방민입니다. 오늘은 자바스크립트에서 THIS 의 활용에 대해서 알아보고자 합니다. '이것' 이라고 번역되는 this 는 하나이지만 어느위치에서 어떻게 쓰이느냐에 따라서 다양한 값을 가질 수 있습니다. 그렇기 때문에 이 this 에 대한 정확한 개념을 인지하고 가야만 합니다. 지금부터 바로 this 에 대한 학습을 시작하도록 하겠습니다!!! 1. 함수 호출에서의 this ! 기본적으로 this가 갖고있는값을 이해하기위하여 아래의 예제를 먼저 실행해 보겠습니다. function func(){ if(window === this){ alert("window===this"); } } func(); 여기서 window 는 전역에 걸쳐 모든 변수와, 함수등을 속성으로 갖는 전역객..

안녕하십니까 영감을 주는 개발자 방민방민입니다. 이전의 자바스크립트 기초문법을 통해 객체를 생성하는 방법에 대해서는 선행학습을 하였습니다.이번시간에는 그러한 객체를 생성자를 통해 자유롭게 생성하는 방법에 대해 알아보고자 합니다. 먼저 아래의 코드를 살펴보겠습니다. var o1= { name : 'Bangmin', introduce : function(){ return 'My name is ' + this.name; } } var o2={ name : 'Minseok', introduce : function(){ return 'My name is ' + this.name; } } alert(o1.introduce()); alert(o2.introduce()); o1이라는 객체와 o2 라는 객체는 name ..

안녕하세요 영감을 주는 개발자 방민방민입니다. 오늘 시간에는 자바스크립트에서 함수를 호출하는 색다를 방법에 대해서 다루어 보고자 합니다. 함수를 호출하는 기본적인 방법은 어렵지 않습니다. function functionName(arg1, ... argN) = { } 와 같이 선언된 함수는 단순하게 functionName(arg1, ... argN) 으로 호출해 주기만 하면 됩니다. 이는 가장 단순한 방법이지만 자바스크립트를 활용한 고급 프로그래밍 단계에서는 함수를 호출하는 다양한 방법을 알아 둘 필요가 있습니다 . 1.기본 함수 호출 자바스크립트에서의 함수도 기본적으로 객체의 성질을 갖습니다. 객체의 성질을 가지고 있다는 것은 그 내부에 있는 메소를 사용할 수 있다는 것을 말합니다. 예를들어 sum 이라..

안녕하세요~! 영감을 주는 개발자 방민방민입니다. 오늘은 자바스크립트 심화의 내용을 arguments 라는 것에 대해서 알아보고자 합니다.기본적으로 함수를 선언할 때에는 아래와 같은 형식으로 선언하게 됩니다. function = functionName( arg1, arg2, arg3 ... argN) 그러나 자바스크립트에서는 함수의 인자를 자유롭게 넣을 수 있도록 하는 자율성을 개발자에게 제공합니다.이러한 기능은 편리할수도 있지만 잘못하면 프로그램 전체에 알수없는 큰 오류를 만들어 낼 수도 있기 때문에 반드시 그 개념을 정확하게 이해해야만 합니다. 1. 합구하기 function sum(){ var i, _sum = 0; for(i = 0; i < arguments.length; i++){ document..

안녕하세요 ~ 영감을 주는 개발자 방민방민입니다. 오늘은 자바스크립트 심화 3번째 시간으로 클로저에 대하여 알아보고자 합니다. 클로저는 자바스크립트 고난이도 테크닉에 있어서 반드시 필요한 내용이라고 합니다!!! 어렵지만 정확한 개념을 잡고 가야합니다.!! 클로저는 내부함수가 외부함수의 맥락에 접근할 수 있음을 나타냅니다. 예를 통해 자세하게 알아보도록 하겠습니다. 1. 내부함수 내부함수와 외부함수의 개념에대해서 먼저 생각해보도록 하겠습니다. 아래의 예제를 보며 내부함수의 개념에 대해서 생각해보겠습니다. function outter(){ function inner(){ var title = 'coding'; alert(title); } inner(); } outter(); 위의 간단한 예제를 보시면, 위의..

안녕하세요 영감을 주는 개발자 방민방민입니다. 오늘은 자바스크립트 함수가 동작하는 원리를 조금더 심화해서 알아보고자합니다. 자바스크립트에서의 함수는 다른 언어와 조금 다르게 값으로의 성질을 가지고 있습니다. 그렇기 때문에 다양한 형태로 사용이 가능합니다. 함수의 심화학습! 값으로써의 함수 ! 바로 시작하겠습니다. 1.인자로써의 함수(콜백) 함수는 값과 같은 역할을 하기 때문에 다른 함수의 인자로 전달될 수 있습니다.아래의 예제를 한번 보시겠습니다. function cal(func, num){ return func(num) } function increase(num){ return num+1 } function decrease(num){ return num-1 } alert(cal(increase,1));..