Knowledge Map

자바스크립트 용어 본문

WEB/JAVASCRIPT

자바스크립트 용어

2016. 2. 28. 14:49

▼문서 객체 모델(DOM, Document Object Model)

DOM은 책, 기사, 용어집 등 구조를 띤 모모든 문서의 윤곽이 기능하는 것과 굉장히 유사한 방식으로 기능한다. DOM에는 최상위 수준의 항목, 중첩된 항목, 그룹을 형성하는 덩어리(한 장에 포함된 여러 페이지와 책 한 권에 포함된 여러 개의 장과 같이)가 있다. 이러한 항목을 노드(Node)라고 하며 DOM안의 몯느 노드는 그것을 둘러싼 노드와 관계를 맺는다. 이러한 관계는 현실세계의 가족과 마찬가지로 부모, 자식, 형테의 형태를 가진다.


  ㅇ부모

부모 노드는 다른 노드를 담고 있는 노드를 말한다. 

ex) 부모 : <body> ||| 자식 :  <p> <table> < element> <title> <div>.....


  ㅇ자식

자식노드는 부모노드 안에 위치한다.


  ㅇ형제

형제는 같은 레벨에 위치한다. 


1
2
3
4
5
6
<ul>                // 부모
    <li>John</li>   // 자식, 같은 계층간에는 형제
    <li>Jason</li>
    <li>Micheal</li>
</ul>
 

  ㅇ변수

자바스크립트의 변수(Variable)는 값, 객체, 또는 함수까지도 보관할 수 있다. 변수는 변경될 수도 있고, 정적일 수도 있으며, 비어있을 수도 있다.

변수의 기본적인 기능은 정보를 저장하는 것이다.

자바스크립트는 두가지 유형이 있는데 지역변수(local Variable)와 전역 변수(global variable) 이다.


  ㅇ지역 변수

지역 변수는 함수 안에 정의되며, 해당 함수 안에서만 사용할 수 있다. 변수가 비어 있을 때 변수를 초기화(initialize)한다고 한다.

ex) var familyMember1;


  ㅇ전역 변수

전역 변수는 자바스크립트 코드 어디서든 사용할 수 있다. 전역 변수는 세 가지 방법으로 정희할 수 있다.

  -  함수 밖에서 "var"로 정의

  -  window 객체에 직접 추가

  -  "var" 없이 아무 곳에서나 정의

전역 변수를 사용할 때 고려해야 할 점은 변수의 이름이 겹치지 않게 해야한다는 것이다. 상당한 크기의 프로젝트를 할 때 이름 충돌을 방지하는 것은 중요하다. 따라서 전역 변수는 삼가서 사용해야 하며 대개 절대 변할 일이 없는 내용이거나 디렉터리 URL이나 현재 사용 중인 ㅡㄱ별한 접두사와 같이 전체 자바스크립트 파일에 걸쳐 퍼져있어야 할 것에 사용된다. 


ex)

/* 함수 밖에서 var를 이용 */

var titleOfApplication;


/* window 객체에 추가   */

window.titleOfApplication


/* 함수 안에서 전역적으로 접근할 수 있음   */

titleOfApplication;


  ㅇ문자열

문자열은 다양한 문자의 집합 이다. 문자열은 항상 따옴표로 감싼다. 따라서 변수에 숫자를 저장했다면 자바스크립트에서 그것을 숫자가 아닌 문자열로 다룰 것이다. 자바스크립트 연산을 이용해 계산을 할 예정이라면 이러한 사실을 알아두는 것이 중요하다.


  ㅇ주석

// or /*   */ 를 사용함.

주석을 잘 작성하는 것은 좋은 개발자임을 나타내는 징표이므로 주석을 반드시 잘 작성한다. 주석을 의미있고 자세하게, 간결하게 작성해야 한다.



  ㅇ연산자

+, -, ++, --, *, /, =

자바스크립트에서 문자열로 다루는 숫자가 있다면 자바스크립트 연산자로 다룰 수 있게 실제 숫자로 변환해야 한다. 하지만 가능하다면 처음부터 숫자로 시작하는 것이 가장 좋다.


  ㅇUse Strict

"use strict" 구문은 파서가 스크립트를 실행할 때 좀 더 엄격한 규칙을 사용하게끔 함수 정의에 삽입하는 것으로서, 예전에 (X)HTML에다 엄격한 문서 형식을 지정하는 것과 같다. 엉성한 코드 작성을 방지하도록 자바스크립트에서 이것을 사용하는 것이 모범 사례로 여겨진다. "use strict"를 사용하는 것이 모범사례로 여겨진다. 이것은 장기적으로 더 깔끔하고 확장 가능한 코드를 작성하는 데 도움될 것이다.

ex) 

1
2
3
4
function getFamilyMemberName(){
"suer strict";
/* 나머지 코드 */
}


▼저장소

데이터 저장소는 자바스크립트의 주요 기능 중 하나다.


  ㅇ캐시

자바스크립트와 관련해서 브라우저 캐시가 굉장히 중요하긴 하지만 캐시라고 해서 반드시 브라우저 캐시만을 의미하지는 않는다. 자바스크립트 파일 내에서 캐싱하는 것은 대개 변수를 가리킨다. 변수를 선언하면 변수는 캐싱되고 어떤 지점에서든 해당 변수를 참조할 수 있다. 

변수는 코드 구성 측면에서도 좋지만 문자열을 딱 한 번만 사용한다면 문자열을 변수에 저장하지 않는 것이 성능에 더 좋을지도 모른다.


  ㅇ배열

간단하게 말해서 배열을 목록이다. 자바스크립트에서 배열은 아주 유연한 데이터 저장소 중 하나이며 Ajax 호출에서도 흔히 접할수 있는데, 데이터가 자주 자바스크립트에서 손쉽게 파싱할 수 있는 배열의 형태로 저장되기 때문이다.


ex)

1
2
3
4
5
6
7
8
9
ex)
/* 가족 구성원의 이름을 배열에 저장 */
var family = [
"조안",  /* "0"부터 번호가 매겨짐 */
"찰리",
"피터",
"크리스틴",
"안나"
];


  ㅇ쿠키

쿠키는 서버와 클라이 언트에서 모두 사용된다. 쿠키를 이용하면 사용자의 브라우저에 데이터를 저장해서 나중에 접근할 수 있다. 쿠키는 데이터를 저장하는 구식 방법이 돼가고 있지만 대부분의 주요 브라우저에서 완전히 지원하는 기능이기도 하다. 현재 쿠키는 사용자가 비활성화할수 있는 설정에 해당하므로 핵심적인 문제에 대해서는 이러한 유형의 저장소에 너무 의존하지 않는 것이 좋다.


▼자바스크립트 객체표기법(JSON : JavaScript Object Notation)

JSON은 자바스크립트와 손쉽게 연동할 수 있는 또 하나의 데이터 형식이다. JSON은 자바스크립트로 이용 중인 외부 서비스에 자주 사용된다. 일반적으로 JSON은 주로 독립적인 파일로 완전히 다른 서버에 존재할 것이다. JSON은 데이터 교환에서  XML의 대안으로 여겨졌으며 금방 XML의 자리를 차지했다.

선호되는 이유느 XML에 비해 가볍고손쉬운 원격 Ajax 호출을 위해 서로 다른 도메인에서도 접근할 수 있기 때문이다. Json은 자바스크립트에 기본 내장된 기능이지만 플랫폼 독립적이며 데이터를 전송하기 위한 클라이언트나 서버 측의 어떠한 기술에서도 사용될 수 있따.

ex)

1
2
3
4
5
6
7
8
9
{
"family" : [
"조안",
"찰리",
"피터",
"크리스틴",
"안나"
]
}


▼객체

자바스크립트에서는 모든 것이 객체이며, 이러한 점을 가정하고 코드를 정리하면 많은 개념들이 더 명료하고 사용하기 쉬워진다. 객체에는 어떤 것이든 저장할수 있다. 문자열, 함수도 가능하다. 


▼상호작용 생성


  ㅇ반복문

ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 가족 구성원의 배열을 변수에 저장하고 배열의 길이를 peopleCOunt 변수에 저장  */
var people = family,
    peopleCount = items.length,
    i;
 
/* 목록 안에 사람드링 있는지 확인  */
if(peopleCount > 0 ){
 
/* 각 가족 구성원을 순회하는데, i는 총 횟수이므로 이 코드는 6번 실행됨  */
for(i = 0; i < peopleCount; i= i + 1){
 
/* 이것은 1명의 사람을 나타냄  */
var person = people[i];
}
}


  ㅇ조건문

  -  if문 : 3가지 유형

-- 일반 if 문

-- 조건이 두 개인 if/else 문

-- 조건이 무한정인 if/else if/else

-- 숫자 비교할때 이용하는 연산자 ( <, >, <=, >=, !=, ==, ===, !==)


ex) /* 값이 "안나"이라는 문자열과 정확히 일치하는지 확인  */

if(person === '안나"){

alert(person + ",이게 바로 접니다.");

} else {

alert(person);

}


  -  switch문

if문과 마찬가지로 switch문도 특정 조건을 검사한다. if 문과 다른 점은 if문은 조건을 만족하더라도 진행하기 전에 다른 조건들을 모두 계속해서 검사하는 반면 switch문에서는 조건을 만족하고 나면 다른 조건을 더는 검사하지 않는다. 그래서 switch문은 조건문이 긴 경우에 좋다.


ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
switch(person){
 
case "안나" : 
alert("이게 바로 접니다.");
break;
 
case " 크리스틴":
alert("내동생");
break;
 
default:
alert(person);
}


  ㅇ함수

함수는 이벤트를 통해 실행되는 코드블록이다. 인자를 통해 함수에 변수를 전달함으로써 함수의 기능을 확장하고 유연하게 만들수 있다. 다른 함수에 전달할수 있는 변수 생성 및 반환 가능하다.


ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function getFamilyMemberNames(){
    "use strict";
    /*가족 구성원의 이름을 배열에 저장*/
 
    var family = [
        "조안",
        "찰리",
        "피터",
        "크리스틴",
        "안나",
        "팀"
    ];
 
    var peopleCount = family.length;
    var i;
 
    /*목록 안에 사람들이 있는지 확인*/
    if(peopleCount >0){
 
        for(i = 0; i< peopleCount; i = i + 1){
            var person = family[i];
 
            /*가족 구성원이 "팀"이면 특별한 작업을 수행*/
            if(person === "팀"){
                alert("This is me!");
            }else{
                alert(person);
            }
        }
    }
}
/*함수호출*/
getFamilyMemberNames();


  ㅇ익명 함수

익명 함수는 실행할 때 선언하는 함수로서 할당된 이름이 없다. 문서 내에서 함수를 참조하는 대신 코드가 실행될 때 함수를 곧바로 실행되게 할 수 있다.

익명 함수는 참조할 게 없다는 점에서 일반적으로 정의한 함수보다 성능이 더 낫다. 익명 함수는 딱 한번만 사용되며 계속해서 참조할 수 없다. 

뭔가를 익명함수로 만들면 사용 중인 변수가 모르는 사이에 전역 유효범위로 편입되는 문제를 방지할수 있다.


ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
(function (){
 
    
    "use strict";
    /*가족 구성원의 이름을 배열에 저장*/
 
    var family = [
        "조안",
        "찰리",
        "피터",
        "크리스틴",
        "안나",
        "팀"
    ];
 
    var peopleCount = family.length;
    var i;
 
    /*목록 안에 사람들이 있는지 확인*/
    if(peopleCount >0){
 
        for(i = 0; i< peopleCount; i = i + 1){
            var person = family[i];
 
            /*가족 구성원이 "팀"이면 특별한 작업을 수행*/
            if(person === "팀"){
                alert("This is me!");
            }else{
                alert(person);
            }
        }
    }
})();



  ㅇ콜백 함수

함수를 다른 함수의 인자로 전달할 경우 전달되는 함수를 콜백 함수(callback function) 라고 한다. 콜백 함수는 여러분이 직접 정의할 수도 있고 이미 자바스크립트에 기본 탑재된 것이어도 된다. 익명함수도 콜백 함수가 될 수 있다.

ex)

window.addEventListener("load", function(){

alert("콜백함수");

},false});

이 콜백함수는 기본 자바스크립트 메소드인 addEventListener에 전달되어 "로드: 이벤트에 실행된다.


  ㅇ메소드

메소드는 사실상 함수이다. 함수가 객체에 저장될 경우 이를 메소드라 한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*객체 정의(함수 그룹에 이름을 부여한다라고 함*/
var getInfomation = {
 
    /*첫번째 메소드(객체 안에 포함된 함수)는 "names"라고 함*/
    "names": function(){
        "user strict";
        alert("이름을 조회합니다.")
    },
 
    /*두번째 메소드는 "checkForTim 이라고 함*/
    "checkForTim": function(){
        "user strice";
        alert("팀인지 확인");
    }
};
 
/*로드 시 이름을 조회*/
window.addEventListener("load", getInformation.names, false);
 
/*클릭할 때 팀인지 확인*/
document.addEventListener("click", genInfromation.checkForTim, false);
 
 


  ㅇ이벤트

이벤트는 사용자에게서 피드백을 이끌어내는 방법이다. 페이지에서 자바스크립트 코드를 실행하고 싶을 경우 일종의 이벤트를 통해 코드가 실행돼야 한다. 종류가 많다.

click, fucus, dblclick, submit 등등...


/*윈도우가 로드될 때 함수를 실행*/

window.addEentListener("load", getFamilyMemberNames, false);


/*문서를 클릭할 때 함수를 실행*/

document.addEventListener("click", getFamilyMemberNames, false);


  ㅇAjax

Ajax는 전체 페이지를 다시 불러오지 않고도 HTML문서의 일부를 새로고침한다는 개념이다. 


되새기기

1. 익명함수란?

2. 어떤 함수가 콜백 함수로 간주될 때는 언제인가?

3. 사용자에게서 피드백을 어떻게 이끌어내는가?


저작자표시

'WEB > JAVASCRIPT' 카테고리의 다른 글

javascript 변수타입확인, 반올림, 날짜 설정, 삼항연산자  (0) 2016.05.24
location.replace  (0) 2016.05.18
아코디언  (0) 2016.04.18
DOM 접근  (0) 2016.03.13
점진적 기능 향상  (0) 2016.02.27
공유하기 링크
'WEB/JAVASCRIPT' Related Articles more
Comments