Startup JavaScript4. 객체

THINKER TO MAKER

x

객체

THINKER TO MAKER

Property & Method

객체조건에 따라 처리를 분기하는 상황에서 사용하는 구조상태나 특성 등의 정보인 Property 와 객체 조작하기 위한 Method 로 구분

Array

폼의 이름Property

0 1 2 3Banana Tomato Apple Orange

id name age rolecirculus 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 instancevar str1 = 'Hello JavaScript';console.log(str1.length);

var bool1 = true;console.log(bool1);

var num1 = 10;console.log(num1);

// wrappervar str2 = new String('Hello JavaScript 2');console.log(str2.length);

var bool2 = new Boolean(false);console.log(bool2);

var num2 = new Number(15);console.log(num2);

String 객체

수치 10

Method

문자열 abc

Method

논리값 true

MethodBoolean객체

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.cir-cul.us'));console.log('10'.sub());console.log('10'.sup());

console.log(str2.concat('Thanks'));console.log(str2.length);

// start > endconsole.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 wrappervar num1 = 123;

// with wrappervar num2 = new Number(123);console.log(num1 + num2);

//number methodvar 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));

//NaNconsole.log(0 / 0);console.log(Number.NaN == Num-ber.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 자연 로그의 밑에 해당하는 수학 상수 eLN2 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,'Strawberry','Fineapple'));console.log(arr1);console.log(arr1.pop());console.log(arr1);

// change arrayconsole.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.usCONTACT.US circulus@circul.us

THINKER TO MAKER

ANYQUES-TION?

x