Startup JavaScript 4 - 객체

Startup JavaScript
4.객체
THINKER TO MAKER
x

객체
THINKER TO MAKER
Property & Method

객체
조건에 따라 처리를 분기하는 상황에서 사용하는 구조
상태나 특성 등의 정보인 Property 와 객체 조작하기 위한 Method 로 구분
Array
폼의 이름
Property
0 1 2 3
Banana Tomato Apple Orange
id name age role
circulus john 30 coding
Object복수 요소의 집합체 복수 요소 정보를 포함
객체 : 프로그램에서 취급하는 대상 예시 : 폼을 나타내는 Form 객체
개체의 상태나 특성 정보 Method 개체의 상태나 특성 정보
폼이 송신할 곳의 url
폼이 포함된 요소군
etc...
폼을 송신하기
폼을 클리어하기
폼을 무효화 하기
etc...

객체 생성
한개의 객체에 대해 여러 어플리케이션이 사용하면 부 정합이 발생하게 됨
객체의 복제를 만들어서(Instance 화) 각각의 전용 영역에서 객체가 사용
Property
Object A
Method
Property
instance b
Method
각각 별개의 객체이므로 조작 상의
충돌이 일어날 일이 없다
객체의 인스턴스화
//-- Instance of Object using 'New'
//var variableName = new
ObjectName(arguments)
var date = new Date();
//-- property and method
//variableName.propertyName = value;
//variableName.methodName(arguments);
date.setDate(11);
console.log(date);
//-- static property/method
//objectName.propertyName = value;
//objectName.methodName(arguments);
console.log(Math.PI);
console.log(Math.round(Math.PI));
Property
instance b
Method

내장형 객체
일반적으로 자신이 객체를 정의하여 이용하나,
내장형 객체는 미리 정의되어 있어 특별한 선언이나 정의 없이 이용 가능
객체 개요
(Global) Javascript의 기본 기능에 접근하기 위한 수단을 제공
Object 모든 객체의 모형이 되는 기능을 제공
Array 배열을 조작하기 위한 수단을 제공
String 문자열을 조작하기 위한 수단을 제공
Boolean 진위 값을 조작하기 위한 수단을 제공
Number 숫자를 조작하기 위한 수단을 제공
Function 함수를 조작하기 위한 수단을 제공
Math 수치 연산을 실행하기 위한 수단을 제공
Date 날짜를 조작하기 위한 수단을 제공
RegExp 정규 표현에 관한 기능을 제공
Error 에러 정보를 관리

Wrapper 객체
기본형이 문자, 숫자, 논리값을 취급하는 객체를 Wrapper 객체 라 부른다.
기본 값에 지나지 않는 기본 데이터를 포장하여 객체 기능을 추가하기 위함임
// without instance
var str1 = 'Hello JavaScript';
console.log(str1.length);
var bool1 = true;
console.log(bool1);
var num1 = 10;
console.log(num1);
// wrapper
var str2 = new String('Hello
JavaScript 2');
var bool2 = new Boolean(false);
console.log(bool2);
var num2 = new Number(15);
console.log(num2);
String
객체
수치 10
Method
문자열 abc
Method
논리값 true
Method
Boolean
객체
Number
객체
Wrapper Object

내장형 객체
THINKER TO MAKER
String, Number, Math, Array

String 객체 실습
String 객체의 멤버는 대부분 직관적으로 사용 가능
부분 문자열을 추출하기 위한 메서드는 유의하여 사용해야 함
var str1 = 'Good day to study day the
JavaScript day!';
console.log(str1.indexOf('day'));
console.log(str1.lastIndexOf('day'));
console.log(str1.indexOf('day', 10));
console.log(str1.lastIndexOf('day'),
10);
console.log(str1.indexOf('hello'));
var str2 = 'Circulus Project';
console.log(str2.charAt(5));
console.log(str2.slice(5,8));
console.log(str2.substring(5,8));
console.log(str2.substr(5,8));
console.log(str2.split('u'));
console.log(str1.split('day',3));
console.log('upper'.anchor('top'));
console.log(str2.link('http://www.circ
ul.us'));
console.log('10'.sub());
console.log('10'.sup());
console.log(str2.concat('Thanks'));
// start > end
console.log(str2.substring(8,5));
console.log(str2.slice(8,5));
// negative number;
console.log(str2.substring(5,-2));
console.log(str2.slice(5,-2));

String 객체
String 객체는 문자열 형의 값을 취급하기 위한 Wrapper 객체로,
문자열의 추출이나 가공, 검색 등을 위한 기능을 제공.
객체 멤버 개요
검색
indexOf(subtr, [,start]) 문자열 전방(start+1번쨰)부터 부분문자열 substr 을 검색
lastIndexOf(substr, [,start]) 문자열 후방(start+1번째)부터 부분문자열 substr을 검색
문자수식
anchor(name) 문자열을 Anchor 화 (<a name=‘name’>을 적용)
link(url) 문자열을 Link 화 (<a href=‘url’>을 적용)
sub() 아랫첨자로 한다 (<sub>를 적용)
sup() 윗 첨자로 한다 (<sup>를 적용)
정규표현
match(reg) 수치 연산을 실행하기 위한 수단을 제공
replace(reg, rep) 날짜를 조작하기 위한 수단을 제공
search(reg 정규 표현에 관한 기능을 제공
대소문자
toLowerCase() 소문자로 치환
toUpperCase() 대문자로 치환
코드변환
charCodeAt(n) n-1 번째의 문자를 Latin-1 코드로 변환
fromCharCode(c1, c2..) Latin-1 코드 c1, c2 ... 를 문자로 변환

String 문자열 추출
String method 는 원본 문자열에서 부분 문자열 추출을 위하여
substring, slice, substr 의 세가지 method를 지원하고 일부 차이가 있음
객체 멤버 개요
부분
문자열
charAt(n) n+1 번째의 문자를 추출
slice(start [,end]) 문자열로부터 start+1 ~ end 번째 문자를 추출
substring(start [,end]) 문자열로 부터 start+1 ~ end 번째 문자를 추출
substr(start [,cnt]) 문자열로 부터 start+1번째 문자부터 cnt 수만큼 문자를 추출
split(str [, limit]) str로 분할하여 그 결과를 배열로 반환 (limit은 최대 분할 수)
그 외
concat(str) 문자열 뒤쪽에 문자열 str을 연결
length 문자열의 길이를 취득
시작 위치 ~ 종류 우치의 범위에서 추출 장소를 지정
시작 위치로 부터의 문자수 지정으로 추출 장소를 지정
substring/slice
substr

Number 객체 실습
toFixed 는 소수점만, toPrecision 은 정수부를 포함함
NaN 은 자기 자신과도 같지 않으므로, 비교 시는 isNaN 함수를 이용해야 함
// without wrapper
var num1 = 123;
// with wrapper
var num2 = new Number(123);
console.log(num1 + num2);
//number method
var num3 = 255;
console.log(num3.toString());
console.log(num3.toString(16));
console.log(num3.toString(8));
var num4 = 123.45678;
console.log(num4.toExponential(2)
);
console.log(num4.toFixed(3));
console.log(num4.toFixed(7));
console.log(num4.toPrecision(10));
console.log(num4.toPrecision(6));
//NaN
console.log(0 / 0);
console.log(Number.NaN ==
Number.NaN);
console.log(isNaN(Number.NaN));

Number 객체
Number 객체는 수치 형의 값을 조작하기 위한 객체임
수치를 정형화하거나 무한대/무한소, 최대/최소 값을 알 수 있음
분류 멤버 개요
Property
MAX_VALUE 이용할 수 있는 최대 값
MIN_VALUE 이용할 수 있는 최소 값(0에 가장 가까운 값)
NaN 숫자가 아니다 (Not a Number)
NEGATIVE_INFINITY 음수의 무한대
POSITIVE_INFINITY 양수의 무한대
Method
toString(rad) rad 진수 값으로 변환(rad 는 2~36)
toExponential(dec) 지수형식으로 변환(dec는 소수점 이하의 행수)
toFixed(dec) 소수점 이하의 행 수 dec 사사오입
toPrecision(dec) 지정 행 수로 변환 (행 수가 부족한 경우에는 0으로 보충)

Math 객체 실습
Math 객체가 제공하는 멤버는 모두 Static property/method 임
즉, new 로 Instance화 하여 사용할 수 없음.
console.log(Math.abs(-15));
console.log(Math.max(10,15));
console.log(Math.min(-10,0));
console.log(Math.pow(2,3));
console.log(Math.random());
console.log(Math.ceil(1.58));
console.log(Math.floor(1.58));
console.log(Math.round(1.58));
console.log(Math.SQRT1_2);
console.log(Math.SQRT2);
console.log(Math.sqrt(3));
console.log(Math.PI);
console.log(Math.cos(1));
console.log(Math.sin(1));
console.log(Math.tan(1));
console.log(Math.acos(1));
console.log(Math.asin(1));
console.log(Math.atan(1));
console.log(Math.E);
console.log(Math.LN2);
console.log(Math.LN10);
console.log(Math.LOG2E);
console.log(Math.LOG10E);
console.log(Math.log(Math.E));
console.log(Math.exp(1));

Math 객체
수학의 연산 기능을 제공하는 객체
지수계산, 제급근, 대수관련 연산 기능등을 제공함
기본
abs(num) 절대값
max(num1, num2) num1, num2 중에서 큰 쪽의 값
min(num1, num2) num1, num2 중에서 작은 쪽의 값
pow(base, p) 누승 (base 값의 p승)
random() 0~1 미만의 난수
자리올림/
자리버림
ceil(num) 소수점 이하 올림(num 이상의 최소 정수)
floor(num) 소수점 이하 버림(num 이하의 최대 정수)
round(num) 소수점 이하 반올림
제곱근
SQRT1_2 ½의 제곱근
SQRT2 2의 제곱근
sqrt(num) 제곱근
삼각함수
PI 원주율
cos(num) 코사인

Math 객체
Math 객체의 멤버 명이 대문자인 경우 읽기 전용 임
즉 단순히 값을 가져올 수만 있음
삼각함수
sin(num) 절대값
tan(num) 탄젠트
acos(num) 아크 코사인
asin(numm) 아크 사인
atan(num) 아크 탄젠트
atan2(y, x) 2변수의 아크 탄젠트
로그/
지수함수
E 자연 로그의 밑에 해당하는 수학 상수 e
LN2 2의 자연로그 값
LN10 10의 자연로그 값
LOG2E 제곱근
LOG10E 원주율
log(num) 코사인
exp(num) 지수함수(e의 누승)

Array 객체 실습
concat, slice, join, toString, reverse, sort는 원 배열에 영향을 줌
기본 sort 대신 직접 정렬 방식을 구현하여 사용할 수도 있음.
var a = new Array('A','B','C');
console.log(a);
var b = new Array(2);
console.log(b);
var arr1 =
['Tomato','Apple','Blueberry','Orange'
,'Melon'];
var arr2 =
['Mozart','Schubert','Bach'];
console.log(arr1.concat(arr2));
console.log(arr1.join('_'));
console.log(arr1.splice(1));
console.log(arr1.splice(1,2));
console.log(arr1.splice(1,2,'Strawberr
y','Fineapple'));
console.log(arr1);
console.log(arr1.pop());
console.log(arr1);
// change array
console.log(arr1.push('Strawberry'));
console.log(arr1);
console.log(arr1.shift());
console.log(arr1);
console.log(arr1.unshift('Strawberry',
'Fineapple'));
console.log(arr1);
console.log(arr1.reverse());
console.log(arr1);
console.log(arr1.sort());
console.log(arr1);
console.log(arr1.length);
console.log(arr1.toString());
var arr3 = [5,10,25];
console.log(arr3.sort());
console.log(arr3.sort(function(x,y){
return x-y;
}));

Array 객체
Array 객체는 배열 형의 값을 취급하기 위한 객체로,
배열에 대한 요소의 추기, 삭제, 결합, 정렬 등의 기능을 제공함
가공
concat(arr) 지정 배열을 현재의 배열에 연결
join(item) 배열 내의 요소를 구분문자 del로 연결
slice(start [,end]) start ~ end-1 번째의 요소를 빼냄
splice(start, cnt [,rep [, ...]])
배열 내의 start+1 ~ start+cnt+1 번째 요소를 re, ... 치
환
추가/삭제
pop() 배열 끝의 요소를 취득하여 삭제
push(item) 배열 끝에 요소를 추가
shift() 배열 선두의 요소를 취득하여 삭제
unshift(data1, [, data2, ...) 배열 선두에 지정 요소를 추가
정렬
reverse() 역순으로 정렬 (반전)
sort([fnc]) 요소를 오름차순으로 정렬
기타
length 배열의 길이
toString() [element, element...] 형식의 문자열로 치환

W www.circul.us G group.circul.us
S social.circul.us C cafe.circul.us
CONTACT.US circulus@circul.us
THINKER TO MAKER
ANY
QUESTION?
x

Startup JavaScript 4 - 객체

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Startup JavaScript 4 - 객체 (20)

More from Circulus (10)

Startup JavaScript 4 - 객체

Editor's Notes