변수 선언, 문자열\/숫자, 조건문, 반복문 -> 생략 (Java와 동일)

함수 정의 방법들

var numbering = function(){
 i=0;
 while(i < arg){
   document.write(i);
   i += 1;
 }
}

익명함수 -> 함수 선언 후 바로 call

(function (){
  .... 
})();

일반적 함수선

function numbering(){
 ....
}

배열

.length : 배열 길이
.push() : 배열에 값 1개 추가 (맨뒤)
.concat() : 배열 복수의 값 추가 (맨)
.unshift() : 배열 맨 앞에 추가
.shift() : 맨앞원소제거
.pop() : 맨 뒤 원소 제거
.sort(), .reverse() : 정

객체(dictionary) - index가 숫자가 아니라 문자인 데이터 타입

var grades = {'egoing':10, 'k8805':6};

-> key는 egoing, k8806이고 각 key에 해당하는 값이 10, 6

var grades = {};
grades['egoing'] = 10;
grades['k8806'] = 6;

var grades = new Object();
grades['egoing'] = 10;
grades['k8806'] = 6;

-> 객체를 선언하는 다른 방법들

접근법 : grades['egoing'] or grades.egoing

활용 : for(key in grades) {}

※ 객체에는 객체를 담을 수도 있고, 함수를 담을 수도 있다.

var grades = {
    'list' : {'egoing':10, 'k8806':6},
    'show' : function(){
        for(var name in this.list){
            document.write(this.list[name]);
        }
    }
};
grades.show();

설명 -> grades라는 객체 안의 'list' 라는 key에 객체가 들어가 있고, 'show'라는 key에는 함수가 들어가 있다.

모듈

프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 이 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. 그 중의 하나가 코드를 여러개의 파일로 분리하는 것이다. 이를 통해 얻을 수 있는 효과는 다음과 같다.

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

자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다. 이 수업에서는 자바스크립트의 대표적인 호스트 환경인 웹브라우저에서 로직을 모듈화하는 방법에 대해서 알아볼 것이다.

※호스트 환경이란?

호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다. 자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다. 예를들어 node.js는 서버 측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의 문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다. 또 구글의 제품 위에서 돌아가는 Google Apps Script 역시 자바스크립트이지만 google apps script가 동작하는 환경은 구글 스프레드쉬트와 같은 구글의 제품 위이다. 여러분은 자바스크립트의 문법을 이용해서 PHP와 같은 서버 시스템을 제어(node.js)하거나 구글의 제품(Google Apps Script)을 제어 할 수 있다. 지금 당장은 어렵겠지만, 언어와 그 언어가 구동되는 환경에 대해서 구분해서 사고 할 수 있어야 한다. 이를 위해서는 다양한 언어를 접해봐야 한다.

가장 간단한 모듈의 사용

greeting.js

function welcome() {
 return 'Hello world';
}

main.html

<html>
<head>
    <meta charset="utf-8"/>
    <script src="greeting.js"></script>
</head>
<body>
    <script>
        alert(welcome());
    </script>
</body>
</html>

상황 : welcome이라는 함수를 수많은 페이지에서 호출한다고 하면, 필요할 때마다 이 함수를 정의해서 사용하는 것은 유지보수도 어렵고 낭비가 된다. 이럴 때 greeting.js와 같이 함수를 따로 분리하여 모듈을 만든다.

라이브러리

모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합. (ex, Jquery)

라이브러리를 받아오는 것과 해당 라이브러리에서 제공하는 기능 (API)이 무엇인지 아는 것(->API documentation)이 핵심이다.

자바스크립트의 API

자바스크립트 언어 자체의 API (http:\/\/www.ecma-international.org\/publications\/standards\/Ecma-262.htm) -> 어떤 호스팅 환경이든 사용가능
호스팅 환경(Web browser, Node.js, GA 등)의 API -> 호스팅 환경별로 사용할 수 있는 API

정규표현식 (Regular Expression)

정규표현식은 컴파일, 실행의 두 단계로 이루어진다. 컴파일은 우리가 필요한 대상을 찾는 것. 즉, 패턴을 찾는 것. 실행은 우리가 찾은 대상 (패턴)에 대해 어떠한 작업을 하는 것

컴파일 방법
정규표현식 리터럴
- var pattern = \/a\/ -> a라는 값을 찾겠다!
정규표현식 객체 생성자
- var pattern = new RegExp('a') -> 찾고자 하는 패턴(a라는 문자)을 만드는 정규표현식 객체 생성

실행 방법
RegExp.exec(), RegExp.test()
String.match(), String.replace()

정규표현식 옵션

i : 대소문자를 구분하지 않겠다 (ex, var xi = \/a\/i;)
g : 검색된 모든 결과를 리턴한다. (ex, var xi = \/a\/g;)

정규표현식 예제

\w : A~Z, a~z의 모든 문자

+: 앞의 문자가 1개 이상인 경우 (ex, \w+ 인 경우 'A'는 해당, 'AA'도 해당, 그러나 문자가 아닌 '#'은 해당하지 않음)

( ) : Group을 의미 ( $1 $2 : 패턴에서 첫 번째 그룹, 두번째 그룹을 의미 )

\s : 공백

정규표현식 시각화 도구 : https:\/\/regexper.com\/

Javascript

results matching ""

No results matching ""