Javascript 기본(2)

빈 객체의 생성 
Javascript 에서 빈 객체를 만드는 것은 비어 있는 블록괄호 {} 를 지정하는 것으로 표현된다.

var people = {};

변수의 추가
-객체안에 추가되어 있는 변수를 멤버변수 혹은 프로퍼티라고 한다. 
-변수를 추가하기 위해서는 “객체이름.변수명 = 값;”의 형식을 사용한다. 
-선언을 위한 별도의 var 키워드는 사용되지 않는다.

people.name = "김영회";
people.gender = "남자";

Javascript 함수의 다른 생성 방법(1)
-Javascript의 변수는 선언시에 데이터 형이 결정되지 않기 때문에 함수를  대입하는 것이 가능하다. 
-이렇게 생성된 변수는 함수와 동일한 사용 방법을 갖는다. (변수와 함수가 동급이다.)

// 일반적인 함수의 선언
function myFunction() {
document.write("<h1>Hello. Javascript</h1>");
}
// Javascript는 함수와 변수가 동급이다.
// 따라서 함수의 이름을 변수에 대입할 수 있다.
var value = myFunction;
// 함수가 대입된 변수는 그 자신이 함수처럼 동작한다.
value();

Javascript 함수의 다른 생성 방법(2)
// 함수를 변수에 대입할 수 있기 때문에,
// 처음부터 변수에 함수의 내용을 대입하는 것이 가능하다.
var value = function() {
document.write("<h1>Hello. Javascript</h1>");
}; ---> 변수에 값을 대입하는 과정이므로 마지막에 세미콜론(;)이 필요하다.
value();

객체의 작성 이유 
-객체를 만드는 이유는 자주 사용하는 함수나 변수들을 기능(혹은 용도)별로 하나의 그룹으로 묶어 놓고 재사용하기 위해서이다. 
-코드를 재사용하기 위하여 Javascript의 객체는 일반적으로 별도의  .js 파일에 기술되고 HTML 파일에 의해서 참조된다. 
-멤버변수는 객체 안의 함수들끼리 공유하기 위한 목적으로 사용된다. 

 

Javascript 내장객체 배열(Array)
프로그램에서 이야기하는 변수를 그룹으로 묶은 형태의 한 종류로서, 사물함 같은 형태를 갖고 있다. 
대부분의 프로그래밍 언어에서 하나의 배열안에는 같은 종류(데이터 형)의 값들만 저장될 수 있지만, Javascript는 데이터 형의 선언을 별도로 하지 않기 때문에 데이터 형에 대한 제약은 없다. (하지만 웹 브라우저의 메모리 관리상의 이점을 이유로, 배열 안에는 한 종류의 값들만 저장하는 것이 바람직하다.) 

배열은 만드는 법(두 방법의 차이는 없다)
var myarray = new Array(값1, 값2, ... , 값n);

var myarray = [값1, 값2, ... , 값n];

배열의 사용
값 읽기
var weblanguage = myarray[0];

값 대입
myarray[0] = “XHTML/CSS2”;

빈 배열 만들기
-배열은 사물함 안에 변수를 처음부터 채워 넣는 방식으로 만드는 것이 일반적이지만, 아무런 값이 저장되어 있지 않은 형태로 만든 후 하나씩 값을 채워 나가는 것도 가능하다. 
-체크박스에 대한 사용자 체크 내역을 저장하기 위하여 빈 배열을 만들고, 사용자들이 체크한 항목들을 차례대로 배열에 채워 넣는다.

방법1
var myarray = new Array();

방법2
var myarray = [];

JSON 표기법
-JSON(Javascript Object Notation)은 경량의 데이터교환형식으로 언어 로부터 완전히 독립적이기 때문에, 서로 다른 프로그래밍언어간에 데이터를 교환하기위해 현재 가장 널리 사용되는 표기법이다. 
-xml이 표준이지만, JSON이 더 많이 사용된다.
-JSON은 jQuery에서는 기본 문법 체계로, ajax에서는 데이터 규격으로써 사용한다.

JSON형식의 데이터 만들기
var 객체이름 = { 이름: 값, 이름: 값, ... 이름: 값 };

할당된 데이터에 접근하기 위해서는 “객체명.이름”의 형태로 접근한다. 
var value = 객체이름.이름; // 저장된 값을 읽기
객체이름.이름 = "새로운 값"; // 새로운 값을 대입
 
이름은 쌍따옴표로 반드시 묶을 필요는 없지만, 숫자값과의 구별을 위해서 가급적  쌍따옴표로 묶어 주는 것이 좋다.

JSON 데이터에서의 배열 사용
var 객체이름 = { 이름: 배열, 이름: 배열, ... 이름: 배열 };
var json = { "nation": ["대한민국", "미국", "중국" , "일본"] };

장점 : 하나의 이름안에 배열로 구성된 여러개의 데이터를 포함시킬 수 있다.
단점 : 하나의 데이터는 오직 하나의 값으로만 구성되기 때문에, 단순한 키워드의 나열과 같은 경우밖에 사용할 수 없다.

계층형 JSON 데이터
var 객체이름 = {
하위객체이름: { 이름: 값, 이름: 값 },
하위객체이름: { 이름: 값, 이름: 값 }
};

장점 : 데이터가 계층적으로 구성될 수 있기 때문에, 데이터간의 포함관계를 표현하기 쉽다.
단점 : 하위 객체로 포함된 JSON의 이름들이 독립적이기 때문에, 하나의 객체 안에 존재하는 하위 객체들간의 연관성이 적다.

두 방식간의 장점만을 조합한 형태
JSON 안에서 하나의 이름에 대한 배열을 구성하고, 각 배열의 요소를 새로운 JSON으로 표현
var rank = {
    "keyword": [
         {"name": "HTML5", "desc": "차세대 웹 표준"},
         {"name": "CSS3", "desc": "다양한 효과의 표현"},
         {"name": "jQuery", "desc": "손쉬운 자바스크립트 구현”}
   ]
};

함수를 포함하는 JSON
Javascript의 문법적 특징은 함수가 값으로서 사용될 수 있기 때문에, 변수에 함수를 대입할 수 있다는 점이다. 
그러므로 “이름: 값”의 형식으로 구성되는 JSON 데이터는 “이름: 함수”의 형식으로도 구성이 가능하다.
var hello = {
    "sayKor": function() { … },
    "sayEng": function() { … }
};

JSON 내부의 함수의 호출
hello.sayKor();

값과 함수가 공존하는 JSON
하나의 JSON 안에 존재하는 함수가 자신과 공존하는 변수를 함수 자신의 내부에서 활용하기 위해서는 “this”라는*키워드를*함께*사용해야 한다.
var hello = {
    "msg": "안녕하세요",
    "sayHello": function() { alert(this.msg); }
};