프로그래밍 언어 응용 29일차 (24/12/19)

CONTENTS

 

JavaScript

10.객체

1)객체 개념

2)사용자 정의 객체

3)내장객체(Array)

4)내장객체(String)

 

-------------------------------------------------------------------------

 

 

JavaScript

 

10.객체

 

1)객체 개념

-자바스크립트를 활용하여 프로그래밍하기 위해서는 객체 단위로 프로그램을 작성함. 객체는 자바스크립트에서 프로그래밍에 가장 기본적인 단위임. 

-실제 생활에 존재하는 모든 사물, 고유의 특성값과 고유한 행동을 함

 

ex)자동차는 제조사, 색상, 배기량, 주행거리 등의 다양한 고유 데이터를 갖는데 이를 속성이라고 함. 또한 출발하기, 정지하기, 회전하기, 등의 행동을 취하는데 이러한 행동을 메서드라고 함. 객체는 속성과 메서드로 구성되어 있음.

 

모든 차는 가격은 달라도 같은 속성을 가지며, 성능들에서 차이가 있지만 같은 매서드를 갖음

 

객체 맛보기

  <script>

    let objectExam = {

      //속성

      name: "홍길동",

      age: 23,

      sayHello : function(blogName) {

        alert(this.name + "의 " + blogName);

      }

    };

    objectExam.sayHello('정보 보기');

    document.write("이름: "+ objectExam.name + " ");

    document.write("나이: " + objectExam.age + " ");

  </script>

 

◎ 자바스크립트 2종류 객체

-사용자 정의 객체: 직접 객체를 정의하여 사용하는 방법

-내장 객체:자바스크립트가 제공하는 객체

 

◎ 메서드

-자바스크립트에서 모든 함수는 메서드라고 할 수 있음. 단지 차이점은 메서드는 객체가 가지고 있는 동작을 의미함. 함수가 어떤 객체의 동작을 나타내는 함수로 정의되면 그 함수를 객체의 메서드라고 함. 고로 일반 함수는 실행을 위해서 객체에 의존하지 않고 독립적으로 호출하여 실행 가능함.

-메서드의 정의방법은 함수와의 차이가 있음

메서드 이름: function() {   함수 구문 }

 

◎속성

객체에 소속된 변수임

 

 

2)사용자 정의 객체

-사용자 정의 객체를 정의하는 방법은 리터럴 객체 형태와 new 연산자를 사용한 객체 정의, 그리고 생성자 함수를 이용하는 형태로 구분됨.

 

◎리터럴 객체 정의

-가장 쉬운 객체 정의 방법임. 이 방법을 사용하면 하나의 명령문에 객체를 정의하고 만들 수 있음. 리터럴 객체를 정의하면 객체는 변수처럼 사용되며, 속성과 메서드가 객체에 바로 할당되면서 객체가 생성됨.

var 객체 이름 = { 객체 속성: 속성 값, ..., 객체  메서드: function() {    함수구문;  } };

 

리터럴 객체 정의

  <script>

    let star = {

      //속성

      color: "red",

      max_diameter: 30, //최대 지름  속성키: 속성값,

      min_diameter: 10, //최소 지름

      max_radius: function() { //메서드

        let max_x= this.max_diameter/2; //실행구문 this(본인star 객체에 대한 정보)

        return max_x;  //변수max_x에 담아서 반환

      },

      min_radius: function() {

        let min_x= this.min_diameter/2;

        return min_x;

      }

    }; //객체에 대한 내용

    star.color = 'blue'; //속성키 바꿀 수 있음

    document.write("별의 색상: " + star.color + "<br>");

    document.write(`별의 색상: ${star.color} <br>`); //` 백틱: 1번 특수기호

    document.write("별의 바깥 둘레: " + star.max_diameter + "<br>");

    document.write("별의 바깥 둘레 반지름: " + star.max_radius() + "<br>"); //함수 호출

    document.write("별의 안쪽 둘레: " + star.min_diameter + "<br>");

    document.write("별의 안쪽 둘레 반지름: " + star.min_radius() + "<br>");

  </script>

 

◎new Object()

-new 연산자와 함수를 이용하여 객체를 정의하기 위한 일반 형식임

 

var 변수명 = new Object(); 객체 속성 = 속성 값; ... 객체 매서드 = function() {함수구문};

 

new 객체 정의

  <script>

    let myCar = new Object();

    myCar.type = "BMW",

    myCar.color = "black",

    myCar.speed = 100,

    myCar.break = function() { //메서드명 = 무명함수

      this.speed = 10;

      return this.speed;

    };

    myCar.accel = function() {

      this.speed += 10;

      return this.speed;

    };

   

    // document.write("myCar: " + myCar.type + "색상: " + myCar.color + "속력: " + myCar.accel() + "<br>");

    document.write(`myCar: ${myCar.type} 색상: ${myCar.color}속력:  ${myCar.accel()} <br>`);

  // </script>

 

◎생성자 함수를 이용한 객체 정의

-같은 속성과 메서드를 가진 여러개의 객체를 정의하려면 앞선 코딩을 반복 정의해야함. 이를 위하여 먼저 객체 유형을 정의하고, 그 객체 유형에 따른 객체를 할당하는 방법이 있음. 생성자를 이용하는 방법.

-객체의 속성과 메서드를 생성자 함수로 정의하고, 객체를 생성하기 위해 'new' 연산자를 활용함

-자바스크립트는 다른 언어와 달리 'class'라는 개념이 없음. 대신 생성자 함수가 그 역할을 대신함. 이러한 생성자 함수를 이용하여 생성된 객체를 '인스턴스'라고 함.

-생성자 함수는 객체 자체가 아니라 객체들이 가지고 있는 공통된 속성과 메서드를 모아놓은 설계도임. 따라서 객체를 생성하기 위해서는 함수 형태로 객체를 호출하여 특정한 변수에 할당하면 그 변수가 하나의 객체가 됨.

 

function 객체명(매개변수1, 매개변수2. ..., 매개변수n) {   this.속성1 = 매개변수1;   ...   this.속성n = 매개변수n;    this.메서드1 = function() { 함수구문 };    this.메서드2 = function() { 함수구문 }; }

 

◎this

-자기 자신의 객체를 호출할 때 사용함

 

new 객체 정의2

  <script>

    function Car(model, speed, color) {

      this.model = model;

      this.speed = speed;

      this.color = color;

      this.break = function() {

        this.speed -= 10;

      };

      this.accel = function() {

        this.speed += 10;

      };

    }

    let myCar = new Car("BMW", 100, "black");

    let yourCar = new Car("Benz", 150, "gray");

    document.write(`myCar.model: ${myCar.model} 속도: ${myCar.speed} 색상: ${myCar.color} <br>`);

    yourCar.accel();

    document.write(`yourCar.model: ${yourCar.model} 속도: ${yourCar.speed} 색상: ${yourCar.color} <br>`);

  </script>

 

*인스턴스: 생성자대로 만들어진(메모리에 공간이 생긴) 실제 객체

 

◎기본 생성자

-기본 생성자는 자바스크립트에 내장 객체로 정의되어 있음. 기본 생성자를 사용하기 위해서는 'new'연산자를 이용하여 객체를 생성함.

-Object(), String(), Number(), Boolean(), Array(), RegExp(), Function(), Date()는 내장 객체임

 

◎객체 맴버 접근하기

-객체 멤버란 객체에 정의된 속성과 메서드를 말함. 개발자는 객체 멤버에 접근하여 속성 값을 바꾸거나 활용하고, 메서드를 활용할 수 있음. 멤버에 접근하기 위해서는 해당 객체 다음에 마침표(.)로 연산자를 사용함

 

myCar.color = 'blue'; //속성값 변경함

myCar.break(); //메서드 호출

 

◎객체 멤버 추가하기

-자바스크립트는 기존 객체에 속성과 메서드를 추가할 수 있음. 생성자의 속성과 메서드를 바꾸는게 아니라 생성된 객체의 속성과 메서드만 추가(변경)된 것임

 

객체 멤버 추가하기

  <script>

    function Car(model, speed, color) {

      this.model = model;

      this.speed = speed;

      this.color = color;

      this.break = function() {

        this.speed -= 10;

      };

      this.accel = function() {

        this.speed == 10;

      };

    }

   

    let myCar = new Car("BMW", 100, "black");

    let yourCar = new Car("Benz", 150, "gray");

    myCar.blackBox = true;

    myCar.battery = 1200;

    myCar.display = function(){alert("myCar의 배터리 양: " + this.battery)};

    myCar.display();

    document.write("내차의 블랙박스: " + myCar.blackBox + "배터리: " + myCar.battery);

  </script>

 

◎객체 멤버 삭제하기

-객체의 속성과 메서드는 delete 연산자를 이용하여 삭제할 수 있음. 삭제된 속성과 메서드는 생성자 속성과 메서드가 변경되는 것이 아닌 생성된 객체의 속성과 메서드가 변경되는 것임

 

객체 멤버 삭제하기

  <script>

    function Car(model, speed, color) {

      this.model = model;

      this.speed = speed;

      this.color = color;

      this.break = function() {

        this.speed -= 10;

      };

      this.accel = function() {

        this.speed += 10;

      }

    }

   

    let myCar = new Car("BMW", 100, "black");

    delete myCar.color;

    document.write("내 차의 색상 " + myCar.color);

  </script>

 

◎for in구문

-객체의 속성과 메서드는 for...in 구문에 의해 접근할 수 있음

 

for in 구문

  <script>

    function Car(model, speed, color) {

      this.model = model;

      this.speed = speed;

      this.color = color;

      this.break = function() {

        this.speed -= 10;

      };

      this.accel = function() {

        this.speed += 10;

      };

    }

    let myCar = new Car("BMW", 100, "black");

    for(let i in myCar) {document.write(i + ":" + myCar[i] + "<br>");}

  </script>

 

 

3)내장객체(Array)

-내장 객체는 자바스크립트가 기본적으로 제공하는 객체임. 내장 객체만 잘 활용해도 프로그램을 개발하기에 충분함.

 

Boolean(): new로 정의된 경우 객체

Number(): new로 정의된 경우 객체

String(): new로 정의된 경우 객체

Dates: 항상 객체

Maths: 항상 객체

Regular expressions(regExp): 항상 객체

Arrays: 항상 객체

Functions: 항상 객체

Objects: 항상 객체

 

◎Array 객체

-배열 객체의 속성과 메서드임

-Array는 특별한 유형의 객체임. typeOf 연산자로 Array를 사용하면 'Object'를 반환함. 객체는 속성과 메서드를 가지는데 Array는 객체지만 인덱스에 의해 배열 값을 갖음

 

*length 속성

-배열의 크기(길이)를 나타낼 때 사용함. 배열 크기(길이)는 항상 배열의 가장 큰 인텍스 값보다 1큼

메서드	설명
slice()	배열의 일부를 잘라냄
join()	배열 값을 제시된 문자로 연결하여 하나의 문자열을 만듬
concat()	두 배열을 결합
toString()	배열 값을 콤마로 구분된 문자열로 반환
splice()	지정된 배열 값을 삭제하거나 추가
shift()	배열의 첫 요소를 삭제
unshift()	배열의 첫 요소를 삽입
pop()	배열의 마지막 요소를 삭제
push()	배열의 마지막 요소를 삽입
reverse()	배열의 순서를 바꿈
sort()	배열을 오름차순/내림차순으로 정렬

 

◎toString(), join() 메서드는 배열 요소 값들을 문자열로 변환함. toString() 메서드는 각 열 요소들을 콤마(,)에 의해 구분한 문자열로 바꿈

 

Array_toString()

<body>

  <h2>toString() methods</h2>

  <p id="demo1"></p>

  <p id="demo2"></p>

  <script>  

    let fruits = [1,2,3,4];

    // var fruits = ["banana", "orange", "apple", "mango", "lemon"];

    document.querySelector("#demo1").innerHTML = fruits.toString();

    alert(typeof fruits.toString());

    document.querySelector("#demo2").innerHTML = fruits;

  </script>

</body>

 

Array_join

  <script>

    let fruits = ["banana", "orange", "apple", "mango", "lemon"];

    let eat_fruits = fruits.join();

    document.write(eat_fruits + "<br>");

    let eat_fruits2 = fruits.join(" and ");

    document.write(eat_fruits2 + "<br>");

  </script>  

 

-join()메서드도 배열 요소들을 문자열로 변환하는데 toString()이 콤마에 의해 각 요소 값을 구한다면, join()은 구분자를 인수로 제공함

 

join(separator)

 

즉, 배열 요소의 값들을 separaor로 구분하여 하나의 문자열로 연결함

 

◎concat() 메서드

-2개 이상의 배열을 하나의 배열로 묶기 위해 사용되는 메서드로, 기존 배열을 변경하는 것이 아니라 항상 새로운 배열을 생성함

 

Array_concat()

  <script>

    var oldArray = ["apple", "pear", "orange"];

    var array1 = [1,2,3];

    var array2 = [4,5,6];

    var new_array = oldArray.concat(array1,array2);

    document.write(new_array + "<br>");

    var arr1 = ["Cecilie", "Lone"];

    var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

    document.write(myChildren + "<br>");

  </script>

 

◎push(), pop()

-배열에 요소를 추가하거나 삭제할 때 사용되는 메서드임. push()는 배열 끝에 하나 이상의 요소를 추가 하는데 사용함. 추가된 요소를 포함한 배열의 크기를 할당함. 반면 pop()은 벼열 끝 요소를 제거 또는 호출할 때 사용함.

 

array.push(item1, item2,...,itemn);array.pop();

 

Array_ push(), pop()

  <script>

    let array1 = ["apple", "pear", "orange"]; //array1 초기길이: 3

    let popvar = array1.pop();

    document.write(popvar + "," + array1 + "<br>");

    array1.push(false, "another"); //push() 메서드 호출: 배열의 길이 1증가, 4를 추가

    document.write(array1.length + "," + array1 + "<br>"); //출력: 4

  </script>

 

◎indexOf()

-배열 요소 값을 가지고 배열의 인덱스를 찾음

 

Array.indexOf(searchStr, startIndex);

 

Array_indexOf()

  <script>

    var fruits = ["apple", "pear", "orange", "apple"];

    document.write(fruits.indexOf("apple") + "<br>"); //찾은 인덱스값 반환(제일 처음만)

    document.write(fruits.indexOf("ap") + "<br>"); // -1 : 값이 없다 :찾을 수 없다는 의미(값이 똑같아야함)

    document.write(fruits.indexOf("apple", 2) + "<br>"); //2번째 요소부터 찾는다.

  </script>

 

◎shift(), unshift()

-shift(), unshift()는 배열의 처음에 적용됨.

-shift()는 배열을 좌측으로 1개 요소만큼 이동하면 맨 좌측의 요소가 배열 밖으로 나오게 되어 결과적으로 배여의 크기는 줄이게 되고, 각 배열 인덱스는 좌측 방향으로 1씩 감소함.

-unshift()는 배열의 맨처음(좌측 끝)에 요소를 추가하여 추가한 수만큼 배열의 크기를 조절하고 각 인덱스는 우측방향으로 1씩 증가함.

 

array.shift();

array.inshift(item1, item2, ..., itemn);

 

array_shift(), unshift()

  <script>

    let array1 = ["apple", "pear", "orange"];

    document.write(array1.length + "," + array1 + "<br>");

   

    let loseArray = array1.shift(); //앞부분 1개 요소 사라짐

    document.write(loseArray + "<br>"); //좌측 배출된 값 반환

    document.write(array1.length + "," + array1 + "<br>");

   

    let loseArray2 = array1.unshift("mango", "strawberry");

    document.write(loseArray2 + "<br>");

    document.write(array1.length + "," + array1 + "<br>");

  </script>

 

◎splice(), slice()

- slice() 메서드는 주어진 값의 위치부터 시작하여 정의된 수만큼 배열 요소를 삭제하거나 다음에 주어진 배열 요소를 추가 함. 즉, 배열의 일부를 교체하는 역할임.

 

array.splice(start_index, delete_count, item1, item2, ..., itemn);

array.slice(start_index, end_index);

 

Array_splice()

  <script>

    var fruits = ["apple", "pear", "orange"];

    fruits.splice(2,1,"lemon","mango"); //인덱스 2부터 1개의 요소 값을 제거하고 그 자리에 2개의 요소를 추가한다.

    document.write(fruits);

  </script>

 

Array_splice()2

  <script>

    let fruits = ["apple", "pear", "orange", "pear", "kiwi"];

    let remove_fruits = fruits.splice(2,2); //인덱스 2부터 2개의 요소 값을 제거한다.

    document.write(fruits);

  </script>

 

Array_slice()

  <script>

    let fruits = ["apple", "pear", "orange", "pear", "kiwi"];

    let ear_fruits = fruits.slice(1,3); //인덱스 1부터 3이전까지 배열 요소 추출(end 미포함)

    document.write("원래 배열: " + fruits + "<br>");

    document.write("추출된 배열 요소: " + ear_fruits + "<br>");

    let eat_fruits2 = fruits.slice(3); // 3번 인덱스부터 끝까지 추출

    document.write("원래 배열: " + fruits + "<br>");

    document.write("원래 배열: " + eat_fruits2 + "<br>");

</script>

 

◎sort(), reverse()

-sort() 메서드는 배열의 모든 요소의 값을 문자로 변경한 후 문자열 유니코드 순서에 따라 정렬 실행함. (오름차순 정렬이며 영문자 소문자가 대문자보다 뒤에 나타남. 숫자의 경우 비교가 제대로 안되기 때문에 compare() 함수를 써야함)

 

Array_sort()

  <script>

    var fruits = ["apple", "pear", "orange", "banana"];

    fruits.splice(2,1,"lemon","mango"); //인덱스 2부터 1개의 요소 값을 제거하고 그 자리에 2개의 요소 추가한다.

    document.write("정렬된 결과: " + fruits.sort() + "<br>");

    document.write("원래의 결과: " + fruits + "<br>");

  </script>

 

-compare 함수는 sort() 메서드에 의해 내부적으로 호출되어 배열의 정렬 기준을 제공하는 역할을 하며, 인자를 명시적으로 제공하지 않아도 sort 메서드가 자동으로 배열 요소들을 처리하면서 compare 함수를 호출함. 이로 인해 배열이 올바르게 정렬됨.

-return b-a;로 바꾸어 적용하면 내림차순 정렬이 됨.

 

Array_compare()

  <script>

    function compare(a,b) {

      return a-b;

    }

    let score = [40, 10, 8, 90, 58, 19, 80];

    document.write(score.sort(compare));

  </script>

 

Array_reverse()

  <script>

    let fruits = ["Orange", "Pear", "Apple", "Banana"];

    let reverse = fruits.reverse();

    document.write(reverse);

  </script>

 

◎delete 연산자

-배열이 객체로 사용될 때 delete 연산자를 이용하여 배열 요소 값을 삭제할 수 있음. 삭제된 배열의 요소 인덱스는 그대로 유지됨. 즉, 값이 없는 배열 요소가 됨. 배열 크기를 줄이기 위해서는 pop(), shift(), splice() 메서드를 사용함.

 

Array_delete

<body>

  <h2>Array Methods Delething elements</h2>

  <p id="demo1"></p>

  <p id="demo2"></p>

  <script>

    let fruits = ["Banana", "Orange", "Apple", "Mango"];

    document.querySelector("#demo1").innerHTML = "두번째 요소 값: " +fruits[1]+ "<br>";

    delete fruits[1];

    document.querySelector("#demo2").innerHTML = "두번째 요소 값: " + fruits[1];

  </script>

</body>

 

◎forEach()

-배열의 요소에 순차적으로 접근하여 필요한 값을 생성할 수 있음. 배열의 메서드이므로 다른 객체에서 사용할 수 없음.

 

Array_forEach()

  <script>

    let fruits = ["Banana", "Orange", "Apple", "Mango"];

    fruits.forEach(function(value, index, array) {

    console.log(value);

    console.log(index);

    console.log(array);

    });

  </script>

 

*value: 배열의 값

 index: 인덱스값

 array: 배열자체

 

 

4)내장객체(String)

-일반적으로 문자열은 자바스크립트의 기본생성자임. 문자열은 new 키워드를 이용하여 객체로 정의할 수 있음. String 객체는 주로 문자열을 추출하거나 조작, 검색하는 기능을 갖음. String 객체의 사용 방법은 다음과 같음. 프로그램 실행 속도를 고려한다면 문자열 객체를 사용하지 않는 것이 좋지만 문자열 작업이 요구된다면 객체로 정의해야함.

var 객체변수 = new String("문자열");  -> String객체(object): 내장메서도 쓸수 있음/ 프로그램 실핼속도 느림 var 객체변수 = "문자열";  -> String자료형: 임시string 객체, 메서드를 호출 ->String 문자열 값/  프로그램 실행 속도 빠름

 

◎length

-이 속성은 문자열의 문자 개수를 반환함. 자바스크립트가 사용하는 문자열 형식은 UTF-16이며 일반적인 문자들을 표현하기 위해 16bit 코드 단위를 사용함. 일반적이지 않은 문자들을 표현하기 위해 2개의 코드 단위를 사용해야 할 수 있기에 문자열 내에 있는 문자들의 실제 총 숫자가 length 속성에 의해 반환되는 숫자와 일치하지 않을 수 있음. (문자가 없는 공백 또한 공백 문자로 길이에 포함됨) 

 

◎문자열 꾸미는 메서드

메서드	설명
string.big()	큰 글씨
string.bold()	굵은 글씨
string.fontcolor(color)	폰트 색상 지정
string.fontsize(size)	폰트 크기 지정(1~6)
string.small	작은 글씨
string.strike()	취소선
string.sub()	아래 글자
string.sup()	위 글자
string.link(url)	하이퍼링크(url)
string.anchor(name)	하이퍼링크(name)
string.italics()	이탤릭체

 

◎문자열에서 정보 가져오는 메서드

메서드	설명
charAt(n)	문자열 내의 'n'번째 있는 문자를 반환
concat('문자열')	문자열에 지정된 문자열을 합쳐서 새로운 문자열로 만들어 반환
indexOf('문자', n)	주어진 문자가 있는 곳의 인덱스 반환. 만약 n이 주어지면 n번째부터 문자를 검색함. 문자가 없을 경우 -1 반환
lastIndexOf('문자')	indexOf()와 같은 원리이나 시작이 맨 끝부터임
charCodeAt(n)	문자열 내 n번째 있는 문자의 유니코드 값을 반환
match("문자열")	지정된 문자와 동일한 문자를 찾음. 없으면 null 값을 반환
replace('문자1','문자2')	지정한 문자1을 찾아 제시된 문자2로 바꿈
search('문자')	지정된 문자를 찾아 그곳의 인덱스를 반환
slice(n,m)	문자열의 일부를 반환
split('separator')	'separator'를 콤마로 대체 문자를 반환
substring(n,m)	n번째부터 m번째까지의 문자를 반환
toLowerCase()	대문자를 소문자로 바꿈
toUpperCase()	소문자를 대문자로 바꿈
toString()	객체의 값을 출력함
valueOf()	객체의 값을 출력함