TIL. NO7. JAVASCRIPT(4)

1. 배열 (array)

연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다.

변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다.

• 각각의 데이터 = 원소(element)
• 배열에 지정된 값 = 색인(index)

var member = ['egoing', 'k8805', 'sorialgi']
alert(member[0]);
alert(member[1]);
alert(member[2]);

function get_members(){
    return ['egoing', 'k8805', 'sorialgi'];
}
var members = get_members();
document.write(members[0]);
document.write(members[1]);
document.write(members[2]);

function get_members(){
    return ['egoing', 'k8805', 'sorialgi'];
}
members = get_members();

for(i = 0; i < members.length; i++){
    document.write(members[i].toUpperCase()+'<br />');
}

- 배열의 제어

• 배열.length = 배열의 크기를 알아낼 수 있음
• 배열.push = 인자로 전달된 값을 배열에 추가하는 명령
• 배열.concat = 복수의 원소를 배열에 추가하는 방법

var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);
alert(li);

• 배열.unshift = 배열의 시작점에 원소를 추가하는 방법
• 배열.splice (참고)

- 제거

• 배열.shift = 배열의 첫번째 원소를 제거하는 방법
• 배열.pop = 배열 끝점의 원소를 제거하는 방법

- 정렬

• 배열.sort = 정렬
• 배열.reverse = 역순으로 정렬

2. 객체 (object)

인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 한다

1) egoing은 key가 되고, 10은 value가 된다

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

2)

var grades = {};
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

3)

var grades = new Object();
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

★배열은 저장된 데이터들이 순서를 가짐★
★객체는 저장된 데이터들이 순서를 가지지 않음★

• for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 name에 담아서 반복문을 실행한다.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {
    document.write("key : "+key+" value : "+grades[key]+"<br />");
}

- 객체지향 프로그래밍

객체에는 객체를 담을수도 있고, 함수도 담을 수 있다. 이것은 자바스크립트를 이용한 객체 지향 프로그래밍 기법의 핵심이 되는 성질로 취지에 따라서 로직을 객체에 그룹핑해서 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들 수 있게 해준다.

this : 함수가 속해있는 객체를 가르키는 변수

3. 모듈 (module)

호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다.

<script src="JS파일명.js"></script>

- 라이브러리
좋은 라이브러리를 선택하고 잘 사용하는 것은 프로그래밍의 핵심!

https://risingstars.js.org/2020/en
http://jquery.com/
http://api.jquery.com/

4. UI와 API, 문서

User Interface
Application Programming Interface

접점 : Interface

자바스크립트 API 문서
자바스크립트 사전 (생활코딩)
자바스크립트 레퍼런스 (MDN)
jscript 레퍼런스 (MSDN)\

호스트 환경의 API 문서
웹브라우저 API
Node.js API
Google Apps Script API