[JS] 자바스크립트 4일차 요점정리

-객체-

하나의 변수 안에 또 다른 변수들과 함수들을 기능의 성격에 따라 하나의 그룹으로 묶어서 포함시켜 놓은 형태.

• 객체는 웹 페이지에 보여지는 모든 것이 될 수 있다.

HTML 태그가 JS에서는 객체로 인식될 수 있다.

즉, HTML 태그 안에는 변수와 함수가 내장되어 있다는 의미가 된다.

• 객체 안에 포함된 변수를 프로퍼티 혹은 멤버변수라고 한다.
• 객체 안에 포함된 함수를 메서드(method)라고 한다.
• 메서드 안에서 같은 객체 내의 프로퍼티나 다른 메서드에 접근하기 위해서는 this 키워드를 사용한다.

...js

//비어있는 임의의 변수 = 객체

var foo = {};

//프로퍼티 정의

foo.num1 = 100;

foo.num2 = 200;

//메서드 정의

foo.sum = function() {

    return this.num1 + this.num2;

};

//객체 내의 메서드 호출

var result = foo.sum(); //300이 리턴된다.

-함수 정의의 또 다른 방법-

함수는 변수와 동급이다. 즉, 변수에 함수가 대입될 수 있다.

...javascript

function hello() {

    alert("안녕하세요.");

}

var world = hello;    //변수에 함수를 대입한다.

world();              //함수가 대입된 변수는 그 자체가 함수가 된다.

...

위의 형태는 다음과 같이 축약 표현이 가능하다.

...javascript

//대입문이므로 {} 뒤에 세미콜론이 존재해야 한다.

var world = function() {

    alert("안녕하세요");

};

world();

-내장 객체-

웹 페이지 제작에 필요한 기본 기능들이 정의되어 있는 객체. 브라우저에 내장되어 있기 때문에 개발자는 별도의 객체 정의 과정을 생략하고 내장객체에 포함된 프로퍼티와 함수들의 기능을 파악하여 활용할 수 있다.

사전에 객체 이름과 함수 이름들을 통일하여 구현한 뒤 브라우저 안에 내장시켜 놓음

[1] String(문자열)

-문자열 데이터는 그 자체가 하나의 객체가 된다.

1. 문자열: 메서드(함수), 프로퍼티(변수)가 포함된 하나의 객체

2. 문자열 파싱(Parssing): 메서드 기능들을 조합하여 문자열을 제어하는 과정

[문자열의 선언] (대소문자 섞여있음)

var url = "http://WWW.ITPAPER.CO.KR/index.php";

1. length : 글자 총 길이를 조회할 수 있는 프로퍼티

...javascript

var name = "Javascript";

int word_count = name.length;

...

var len = url.length;

2. charAt(int position) : 파라미터로 설정된 위치의 글자 리턴

var str2nd = url.charAt(2);

3. indexOf("string search") : 파라미터로 전달된 글자가 처음 나타나는 위치

var position1=url.indexOf("/");

4. indexOf("string search" [,int position]) :position은 검색할 위치. 그 위치부터 검색하고 만약 search를 찾지 못한 경우 -1을 리턴한다.

특정 내용이 포함되어 있는지 검사하는데도 사용

var position2 = url.indexOf("/", position1 +1);

5. lastIndexOf("string search" [,int position]) : 

마지막부터 파라미터로 전달된 글자를 탐색

문자열의 탐색은 뒤에서부터 진행되지만 검색된 내용의 위치는 처음부터 카운트.

position은 검색을 시작할 위치

search를 찾지 못한 경우 -1을 리턴

var position3 = url.lastIndexOf("/");

6. substring(int start, int end) : int start와 int end 사이의 글자만 잘라내 리턴

var substring1 = url. substring(0, 5);

7. substring(int start) : int start번째 글자부터 끝까지 잘라내서 리턴.

var substring2 = url.substring(7);

8. toUpperCase() : 모든 글자를 대문자로 변환

var up = url.toUpperCase();

9. toLowerCase() : 모든 글자를 소문자로 변환

var low = url.toLowerCase();

ex)

var url = "http://www.itpaper.co.kr/index.php";

#도메인 얻기

var p1 = url.indexOf("://");

var p2 = url.indexOf("/", p1 +3);

var domain = url.substring(p1 +3, p2);

#파일이름 얻기

var p3 = url.lastIndexOf("/");

var p4 = url.lastIndexOf(".");

var file = url.substring(p3+1, p4);

#확장자 얻기

var p5 = url.lastIndexOf(".");

var ext = url.substring(p5+1);

[2] Array(배열)

: 같은 종류의 변수를 캐비넷 같은 공간에 그룹화 한 형태

변수를 그룹으로 묶은 형태의 한 종류.

한 배열 안에는 같은 종류(데이터 형)의 값들만 저장하는 것이 바람직함.

var 객체 이름(myarray) = new Array(값1, 값2, ..., 값n);

또는

var 객체 이름(myarray) = [값1, 값2, ..., 값n];

↓↓↓↓

값1

값2

...

값n

값을 읽거나 대입할 때 객체이름(myarray)[일련번호] 형태로 접근한다.

ex) 

var a = myarray[0];              ---> 0번째 칸에 있는 값을 a라는 변수에 복사

document.write(myarray[0]); ---> 0번째 칸에 있는 값을 화면에 출력

myarray[0] = "abc";              ---> 0번째 칸에 있는 값을 abc로 변경

cf) 배열 내용이 문자열일 경우 상관이 없지만 

숫자일 경우에는 var 객체 = [   ]; 이 형태만 사용해야 한다!

# 배열의 특성

- 생성된 배열은 0부터 순차적으로 증가하는 index값을 갖는다.

이 특성 때문에 배열은 일반적으로 반복문과 함께 사용한다.

- 데이터의 접근은 index를 통해서 이루어진다.

값을 읽기: var a = myarray [0]

값을 저장하기: myarray [1] = 100;

# 빈 배열 사용하기:값이 몇 개가 들어갈 지 모를 때 씀.

1. 빈 배열 만들기

배열은 항상 처음부터 데이터를 갖는 상태로 생성할 필요는 없다. 

데이터가 저장되지 않은 상태의 빈 배열을 생성한 후, 순차적으로 index를 증가시키면서 값을 추가할 수 있다.

var myarray = new Array( );

var myarray = [ ];

2. 값을 대입하기

myarray[0] = "안녕";

myarray[1] = "Hello";

myarray[3] = "Bonjour";

---> myarray[2]를 건너뜀 ---> 2번째 칸은 자동으로 값이 undefined로 저장됨.

3. 배열의 길이(크기) 조회

모든 배열은 그 자체가 하나의 객체가 된다. 배열 객체가 갖는 프로퍼티 중 length는 배열의 길이(칸수)를 조회하는 기능을 갖는다.

배열객체이름.length;   ---> 칸 수

...javascript

var data = [1, 2, 3];

int count = data.length;

cf) 마지막 Index는 length-1 번이 됨.

4. 반복문 사용

// 빈 배열 생성

var myarray =[];

// 반복문을 통하여 배열의 칸을 확장하고 값을 저장

for (var i=0; i<10; i++) {

    myarray[i] = i;

}

// 반복문을 배열의 길이만큼 반복하도록 설정하고 값을 출력

for (var i=o; i<myarray.length; i++) {

    document.write("<p>"+myarray[i]+"</p>");

}

5. 배열 정렬하는 함수! 

배열이름.sort(function(a, b) {

        return a-b;        //낮은 가격순, 낮은 값순으로

      //return b-a; --->   //높은 가격순, 높은 값순으로

});

# 2차 배열 / 다차원 배열   ---> JSON이라는 형태를 더 많이 씀

하나의 배열에서 각 원소가 또 다른 배열로 구성된 경우

var myarray = new Array ([Day16] 자바스크립트 4일차 요점정리

    new Array(값1, 값2, ..., 값n),    ---> myarray[0]

    new Array(값1, 값2, ..., 값n)     ---> myarray[1]

);

값1 ---> myarray[0][0]

값1 ---> myarray[1][0]

또는

var myarray = [

    [값1, 값2, ..., 값n],

    [값1, 값2, ..., 값n]

];

 * 크기 조회하기

• 행의 크기를 조회: 배열객체이름.length;
• n번째 행에 대한 열의 크기를 조회: 배열객체이름[n].length;

* 배열의 데이터는 행, 열 형태로 구성된다.

• 행: 1차 데이터
• 열: 2차 데이터

* 2중 반복문으로 배열을 탐색할 경우 바깥의 반복문이 행을 처리하고 안쪽의 반복문이 열을 처리한다.