리피아

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다. 내부함수 자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다. 아래의 예제를 보자. 결과는 경고창에 coding everybody가 출력될 것이다. function outter(){ function inner(){ var title = 'coding everybody'; alert(title); } inner(); } outter(); 위의 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있다. 함수 inner를 내부 함수라고 한다. 내부함수는 외부함수의 지역변수에 접근할 수 있다. 아래의 ..

값으로서의 함수 JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다. 거의 모든 언어가 함수를 가지고 있다. JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다. 다음 예제를 통해서 그 의미를 알아보자. function a(){} 위의 예제에서 함수 a는 변수 a에 담겨진 값이다. 또한 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다. a = { b:function(){ } }; 함수는 값이기 때문에 다른 함수의 인자로 전달 될수도 있다. 아래 예제를 보자. function cal(func, num){ return func(num) } function increase(num){ ret..

유효범위(Scope)는 변수의 수명을 의미한다. 아래의 예제를 보자. 결과는 global이다. var vscope = 'global'; function fscope(){ alert(vscope); } fscope(); 함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 그렇기 때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것이다. 아래 예제를 보자. 결과는 '함수안 local'과 '함수밖 global'이 출력된다. var vscope = 'global'; function fscope(){ var vscope =..

함수지향 카테고리의 하위 수업들은 함수형 언어로서 자바스크립트의 면모를 다룬다. 자바스크립트의 핵심적인 도구는 함수다. 자바스크립트의 함수는 매우 강력하다. 함수에 대한 이해 없이는 자바스크립트를 잘 다루기 어렵다. 또한 자바스크립트에서 함수는 객체를 이해하는 데 가장 중요한 기초를 이룬다. 하지만 난이도가 조금 있는 내용이다. 기초수업을 이수했다면 구체적인 자바스크립트의 호스트 환경에 대한 학습으로 넘어가도 된다. 함수에 대한 고급 내용을 다루는 본 카테고리는 나중에 학습해도 좋다. 하지만 언젠가는 꼭 정복해야 할 부분이다. 사실 그렇게 어렵지도 않다. 다만 코드를 처음 다루는 입문자라면 함수와 관련된 기능들의 취지에 공감이 잘 안될지도 모르겠다.

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다. 정규표현식은 하나의 언어라고 할 수 있다. 그러므로 본 수업에서 정규표현식의 모든 것을 다루는 것은 불가능하다. 본 수업은 아래와 같은 전략을 취하고 있다. 입문자에게 정규표현식이 무엇인가에 대한 개념을 알려준다. 초심자에게는 사용법까지 공부하는 것은 무리다. 나중에 문자를 처리해야하는 상황이 생겼을 때 이곳을 찾아오거나 본 수업을 완주했을 때 마지막 단계로 본 수업을 공부한다. 정규표현식을 이미 알고 있는 개발자에게는 정규표현식을 자바스크립트에서는 어떻게 사용하는가를 알려준다. 정규표현식 자체에 대한 학습이 필요하다면 정규표현식 수업을 공부하자. ..

API란? Application Programming Interface의 약자로 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다. 이 조작 장치는 프로그래밍 언어를 통해서 조작할 수 있다. 아래 영상은 UI와 API의 차이점을 설명하기 위한 자료이다. (원본) UI와 API - 생활코딩 UI와 API 2014-02-18 09:05:04 opentutorials.org 레퍼런스와 튜토리얼 프로그래밍을 공부하기 위한 자료는 크게 레퍼런스(reference)와 tutorial(안내서)가 있다. 통상 튜토리얼은 언어의 문법을 설명하고, 레퍼런스는 명령어의 사전을 의미하다. 본 수업은 자바스크립트에 대한 일종의 안내서라고 할 수 있고, 자바스크립트 사전은 레퍼런스라고 할 수 있다. Ja..

자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다. 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당) 우선 모듈이 없는 애플리케이션을 하나 만들어보자. 파일의 이름은 main.html 이다. 위의 코드는 아무런 문제가 없다. 하지만 welcome 함수가 자주 사용되는 것이라고 가정해보자. 이런 경우 이것이 필요할 때마다 이 함수를 정의해서 사용하는 것은 유지보수도 어렵고 낭비가 될 것이다. 이럴..

객체(Object) 배열 : 아이템에 대한 식별자로 숫자 사용(인덱스) 인덱스로 문자를 사용하려면 객체(Object)를 사용 다른 언어에서 연관배열(associate array) 또는 맵(map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당 객체의 생성 var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; 객체 생성방법 1 egoing은 key, 10은 value var grades = {}; grades['egoing'] = 10; grades['k8805'] = 6; grades['sorialgi'] = 80; 객체 생성방법 2 var grades = new Object(); grades['egoing'] = 10; grades['k8..

배열 배열(array) : 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것 var name = 'egoing' alert(name); 변수 name에 문자 egoing 할당 name을 호출하면 문자 egoing을 사용가능 배열의 생성 여러 개의 데이터를 하나의 변수에 담아서 관리 대괄호([])는 배열을 만드는 기호 대괄호 안에 데이터를 콤마(,)로 구분해서 나열 var member = ['egoing', 'k8805', 'sorialgi'] 하나의 변수에 3개의 데이터 각각의 데이터를 원소(Element)라고 부름 데이터를 꺼내올 때 var member = ['egoing', 'k..

함수 함수(function) : 하나의 로직을 재실행 할 수 있도록 하는 것. 코드의 재사용성을 높여줌 함수의 형식 function 함수명( [인자...[,인자]] ){ 코드 return 반환값 } 함수의 정의와 호출 function 뒤에 함수이름, 소괄호 소괄호 안에 인자라는 값이 차례로 들어옴 인자는 함수를 호출할 때 함수의 로직으로 전달할 변수 인자는 생략 가능 함수를 호출했을 때 실행하게 될 부분이 중괄호 안에 옴 function numbering(){ i = 0; while(i < 10){ document.write(i); i += 1; } } numbering(); //numbering이라는 이름의 함수 호출 //결과 0123456789 함수 이름 : numbering 내용 : 0부터 9까지를..