본문 바로가기

학교수업/웹 프로그래밍

07. 자바스크립트 코어 객체와 배열

자바스크립트 객체

프로퍼티: 객체의 고유한 속성

객체는 여러 프로퍼티와 값의 쌍

메소드: 객체 내 함수

객체는 소멸시키는 방법이 없다. >> 가비지 컬렉션: 사용하지 않는 객체 자동 수거

 

자바스크립트 객체의 종류

HTML DOM객체 >> CH8

html 페이지에 작성된 태그들을 브라우저가 하나씩 객체화한 것

html 페이지의 내용과 모양을 제어하기 위해 사용

 

브라우저 관련 객체(BOM) >> CH10

브라우저의 종류나 스크린의 크기정보 제공하는 등 브라우저 관련 객체들

 

코어객체

기본 객체

Array, Date, String, Math 타입 등

 

코어 객체 생성하기, new

var today = new Date();
var msg = new String("hello");

 

객체 접근

객체명.프로퍼티 = 값;
번수 = 객체명.프로퍼티;
객체명.메소드(매개변수값);

 

배열과 Array

배열 생성

1. [] 이용

var num = [1,2,3,4,5]

//원소 추가시 자동으로 늘어난다

num[6] = 6

r건너뛰고 원소 추가할 경우 그 사이의 값은 undefined가 됨

 

2. Array 객체 이용

var week = new Array(1,2,3,4,5);

//원소에 접근하기
var min = week[0]

//배열 객체 일단 생성하고 나중에 값 삽입하는 것도 가능
var week = new Array(7);
week[0] = 1;


// 원소 개수 예상할 수 없는 경우 빈 배열 생성도 가능
var week = new Array();

 

배열의 원소 개수 계산하기

배열이름.length;

배열 length는 사용자가 임의로 값 변경 가능

 

배열의 특징

Array 객체임

여러 타입의 데이터가 섞여서 저장될 수 있다.

 

Array객체의 메소드

concat(arr) 현재 배열에 배열 arr의 원소들을 덧붙여 만든 새 배열 리턴.
현재 배열은 변하지 않음
join([separator]) 배열의 모든 원소들을 연결해 하나의 문자열로 만들어서 리턴.
각 원소 사이 지정된 seperator 삽입. 생략시 ","
reverse() 원소 역순 재배열한 새로운 배열 리턴
slice(idxA,idxB) 두 인덱스 idxA idxB 사이의 원소들로 구성된 새 배열 리턴.
단 idxB의 원소는 포함안됨
sort() 문자열 사전순 정렬한 새 배열 리턴
toString() 원소들 모두 연결하여 사이에 "," 삽입하고 하나의 문자열로 리턴

 

Date 객체

//현재 날짜와 시간(시,분,초)로 초기화된 객체 생성
var now = new Date();

//2017년 3월 1일 기억하기 위해 date 객체 생성
var day = new Date(2017, 2, 1);

date 객체에서 월 값은 0부터 시작함.

 

String 객체

문자열을 객체로 만들어 다루기 쉽게 해줌

문자열 리터럴은 자동으로 string 객체가 된다.

//두 코드는 동일
var hello = new String("hello");
var hello = "hello";

string 객체는 수정할 수 없다.

문자열의 길이 확인, length

[]를 이용해 배열처럼 문자열의 각 문자에 접근 가능

 

string메소드

indexOf(str): 문자열 검색해 str의 처음 시작 인덱스 리턴. 없으면 -1 리턴

 

서브스트링 리턴, slice, substr, substring

이중 substr(a,b)는 인덱스a 부터 b개의 문자로 구성된 문자열 리턴

 

문자열 변경, replace(a,b)

 

대소문자 변경, toUpperCase, toLowerCase

 

문자열 분할, split()

 

문자열 앞 뒤 공백 제거, trim()

 

특정 위치에 있는 문자열 알아내기, charAt()

 

 

Math 객체

수학적 계산 위함

new Math로 객체 생성하지 않고 Math.프로퍼티/메소드 형식으로 사용

 

random(): 0~1사이의 난수 생성

abs: 절대값

pow(x,y) x의 y승

floor(x): 내림

round(x): qksdhffla

sqrt(x), 제곱근

 

사용자 객체 만들기

프로토 타입 없이 간단하게 사용자 객체 만들기

//사용자 객체 생성
var account = new Object();

//객체 내 프로퍼티 생성
account.owner = "이름";
account.code = "111";

//프로퍼티 사용
var name = account["owner"];
account["code"] = 1000;
account.code += 100;

//메소드 만들기
function deposit(money){
	this.code += money;}
account.deposit = deposit;

리터럴 표기법으로 {}내에 프로퍼티와 메소드를 한번에 만들 수도 있다.

var acount={
    owner : "이름",
    code : "111",
    balance:35000,
    
    inquiry : function() {return this.balance;},
    deposit : function(money){this.balance += money;}
    withdraw : function(money){
    		this.balance -= money;
            return money;
    }
};

 

'학교수업 > 웹 프로그래밍' 카테고리의 다른 글

9. 이벤트 기초 및 활용  (0) 2022.06.08
08. HTML DOM과 Document  (0) 2022.06.08
6. 자바스트립트 언어  (0) 2022.06.08
5. CSS 고급활용  (0) 2022.06.07
4. CSS  (0) 2022.06.06