Javascript - 9. 객체

갓김치·2020년 9월 22일
0

HTML+CSS+Javascript

목록 보기
9/21
post-thumbnail

참고

  • 200922Ex3_Object.html

객체

  • 사물의 속성과 동작을 묶어서 표현하는 기법
    • 예) 자동차
      • 속성:메이커, 모델, 색상, 마력
      • 동작: 출발하기, 정지하기

종류

내장 객체 built-in object

  • 생성자가 미리 작성되어 있다

예시

  • Object: new Obeject() 대신 {}
  • Array: new Array() 대신 []
  • Date
  • Number
  • String: new String() 대신 "" 사용 가능
  • Boolean 객체: new Boolean() 대신 true 나 false
  • Function: new Function()대신 function(){}
  • Math
  • ...
    • new 키워드를 사용해서 생성 (예: var date = new Date(); )
    • Math는 전역 객체 이기 때문에 new 키워드 사용하지 않음

사용자 정의 custom object

  • 사용자가 생성자를 정의

생성방법

1. 객체 리터럴로부터 직접 생성

  • 주로 쓰는 방법임
  • 한번 만들어지면 요걸로 끗
  • var arr = [2, 4, 6];
var myCar = {
  model: "520d", //객체의 속성
  speed: 60,
  color: "red",
  brake: function () { this.speed -= 10; }, // 객체의 메소드
  accel: function () { this.speed += 10; }
}

myCar.color = "yellow";
myCar.brake();

2. 생성자 함수를 이용하여 객체를 정의하고 new 연산자 이용해 객체 생성

  • 가급적 피하는 것이 좋음. 속도 저하, 가독성 저하
//생성자도 함수, 생성자 이름은 대문자로 시작
function Car(model, speed, color) {
  //객체의 속성
  this.model = model; //this: 소유자 의미, 일반변수와 구별 용도
  this.speed = speed;
  this.color = color;

  //객체의 메소드
  this.brake = function (){ this.speed -= 10;}
  this.accel = function (){ this.speed += 10;}
}

// 생성자 함수를 호출해서 새로운 객체 생성
var myCar("BMW", 60, "white");
myCar.color = "yellow";
myCar.brake();

속성 및 메서드 추가

  • 기존에 존재하고 있던 객체에도 속성을 추가할 수 있다
  • 생성자 함수는 변경할 필요가 없다
myCar.turbo = true;
myCar.showModel = function() {
  alert("모델은 " + this.model + "입니다.")
}

속성 및 메서드 삭제

delete myCar.turbo;

객체 표시 방법

// 1. 속성 표시
myCar.model;
myCar["model"];

// 2. 배열로 변환 - Object.values()
var person = {name: "홍길동", age:30, city:"서울"};
var myArray = Object.values(person);
// myArray = ["홍길동", 30, "서울"] 이란 배열이 됨

// 3. 문자열로 변환 - JSON.stringify()
var person = {name: "John", age: 50, city: "New York"};
var myString = JSON.stringify(person);
// myString = {"name":"John", "age":50, "city":"New York"}

배열로 변환 Object.values()

문자열로 변환: JSON.stringify()

  • 자주씀

Array 객체

var myArray = new Array();
myArray[0] = "apple";
myArray[1] = "orange";
myArray[2] = "banana";
  • 배열을 담는 객체
  • 배열의 크기가 자동으로 조절됨
    • 다른 언어 에서는 배열의 크기가 고정되어 있다. 하지만 자바스크립트에서 배열의 크기는 현재 배열의 크기보다 큰 인덱스를 사용하면 자동으로 증가
  • 하나의 배열에 여러가지 자료형을 혼합해서 저장 가능
    • 정수, 문자열, date...
  • 인덱스 건너뛰고 다음 방에 저장 가능 (하지만 추천하는 방법은 아님)

속성과 메서드

속성

  • length

메서드

  • indexOf(item, start)
    • 배열에서 요소를 찾아 위치 리턴
  • lastIndexOf(item, start)
    • 역순으로 요소를 찾아 위치 리턴
  • slice(start, end)
    • start ~ end 범위의 요소를 따로 뗴어내어 새로운 배열을 만듬
  • a.concat(b,c..)
    • 여러 개의 배열 합치기
  • sort(): 사전순 정렬
    • 숫자는 스트링처럼 되기 때문에 사용불가
      • 숫자 오름차순: points.sort(function(a, b){return a - b});
      • 숫자 내림차순: points.sort(function(a, b){return b - a});
  • reverse():
    • 그냥 reverse만 하면 원래배열에서 순서만 바뀜
    • sort후 reverse해야 내림차순 정렬
  • pop() & push()
    • pop(): 마지막 요소 제거 후 리턴
    • push(): 배열 끝에 요소 추가
  • unshift(a,b,c..)
    • 배열처음에 요소 추가
  • splice(index, n, a, b, c...)
    • 배열 일부를 수정, 일정 범위를 삭제하고 새로운 요소 삽입

예제

1. 사람 이름을 계속 입력 받아 배열에 저장하고 그 저장된 이름을 출력하는 프로그램을 작성하시오.

  • (단, 입력은 prompt 명령을 이용하고, 입력의 마지막은 공백문자를 입력하거나 "취소" 버튼을 눌렀을 때로 한다. "취소" 버튼은 null 이 입력될 때이다.)

2. 서로 중복되지 않은 정수 5개를 입력 받아 출력하는 프로그램을 작성하시오.

Date객체

  • w3schools Date
  • 날짜와 시간 작업
    • new Date(): 현재날짜와 시간
    • new Date(milliseconds): 1970/01/01 이후 밀리초
    • new Date(dateString)
    • new Date(year,month, date[,hours[, minutes[, seconds[,ms]]]]
  • month: 0부터 시작,
  • 매개변수 1개면 dateString으로 인식하니 다 써줄 것

메서드

getter, setter

  • getDay(): 0(일요일) ~ 6(토요일)
  • getDate(): 1~31
  • getMonth(): 0~11
  • getFullYear(): YYYY
  • getHours(): 0~23
  • getMinutes(): 0~59
  • getSeconds(): 0~59
  • getMilliseconds(): 0~999
  • getTime(): 경과시간(milliseconds단위)
    • getTime()/1000 -> 실제 초
    • getTime(0/1000/60/60/24 -> 일

예제

구입일로 부터 7일이 경과했는지 비교하여 환불가능여부 알려주는 프로그램

String 객체

  • 스트링 내에서 "" 사용시 역슬래시 앞에 붙여준다.
  • 역슬래시를 쓰고싶을땐 앞에 한개 더 붙여준다.

속성과 메서드

속성

  • length: 문자열의 길이

메서드

원래 string이 변하는게 아니고 새 string이 생기는 것

  • substring(from-index, to-index)
    • 어디서부터 어디까지, 마지막 포함x
    • slice랑 비슷하지만 음수 계산 불가
var str = "Apple, Banana, Kiwi";
var res = str.substring(7,13); // Banana
  • substr(start, length)
    • 어디서부터 몇개, 마지막 포함o
    • 음수면 뒤에서부터 셈
  • split(separator, limit)
    • 구분자로 구분된 문자열을 분리하여 배열로 리턴, limit은 최대 몇개까지 리턴할 것인가를 지정
  • indexOf(str), lastIndexOf(str)
    • 없으면 -1 리턴
    • indexOf(str, index) 이면 index번째부터 찾기 시작
    • lastIndexOf(str)이면 index를 끝으로 두고 맨 앞부터 찾기시작
  • search(str)
    • 제일 먼저 등장하는 것의 index를 반환, 없으면 -1 리턴
    • indexOf()와의 차이
      • search(): 정규식 받아들일 수 있으나, 시작위치 지정못함
  • slice(start-index, end-index)
    • end는 포함되지 않음
var str, res;
str = "Apple, Banana, Kiwi";
res = str.slice(-12,-6); // Banana: 음수면 뒤에서부터 자름
res = str.slice(7); // Banana, Kiwi: 7부터 끝까지
res = str.slice(-12); // Banana, Kiwi: 스타팅포인트를 뒤에서부터 셈
  • replace()
    • replace하면서 새로운 string 생성
    • 처음 등장한 단어만 replace -> 전부하고싶으면 / g 이용
    • 대소문자 구별함 -> 대소문자 상관없이 하고싶다면 / i 이용
str = "Please visit Microsoft!";
n = str.replace(/MICROSOFT/i, "W3Schools");
n = str.replace(/Microsoft/g, "W3Schools");
  • toUpperCase(), toLowerCase()
  • concat()
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ", "World!"); // 둘이 같음
  • trim()
  • charAt(index)
  • charCodeAt(index)
    • index번째 방에 있는 값을 유니코드로 변환하여 반환

Math 객체

  • w3schools 참고

속성

메서드

  • abs(x): 절대값
  • random(): 0과 1사이의 난수값 반환
  • round(x): 반올림
  • ceil(x), floor(x): 실수를 정수로 올림, 내림
  • max(x,y,z,...,n), min(x,y,z,...,n): 최댓값, 최솟값
  • pow(x,y): x의 y제곱
profile
갈 길이 멀다

0개의 댓글