Welcome to

Javascript 객체 1

1. 객체

2. 내장형 객체

2. String 객체

3. Number 객체

4. Math 객체

5. Array 객체

Javascript 기초 - 객체1

선수 추천 과정 HTML5 CSS3

객체 (1/2)

객체 자체가 하나의 객체이며, 내부에 포함된 요소는 그 개체의 동작이나 특성을 나타내기 위해 존재한다. 객체는 객체의 상태나 특성을 나타내는 정보인 Property 와 객체를 조작하기 위한 Method 로 구분 된다.

Javascript 기초1

Array

폼의 이름

Property

0 1 2 3

Banana Tomato Apple Orange

id name age role

circulus john 30 coding

Object 복수 요소의 집합체 복수 요소 정보를 포함

객체 : 프로그램에서 취급하는 대상 예시 : 폼을 나타내는 Form 객체

개체의 상태나 특성 정보 Method 개체의 상태나 특성 정보

폼이 송신할 곳의 url

폼이 포함된 요소군

etc...

폼을 송신하기

폼을 클리어하기

폼을 무효화 하기

etc...

객체 (2/2)

한개의 객체에 대해 여러 어플리케이션이 서로 다른 목적으로 데이터 값을 설정하면 부정합이 발생되게 된다. 그러한 이유로 객체의 복제를 만들어서(Instance 화) 각각의 전용 영역에서 객체가 사용되게 된다.

Javascript 기초1

Property

Object A

Method

Property

instance a

Method

Property

instance b

Method

각각 별개의 객체이므로 조작상의 충돌이 일어날 일이 없다

객체의 인스턴스화

Static property & method 인스턴스 없이 바로 이용가능하며, 정적 프로퍼티 메소드 혹은 클래스 프로퍼티 클래스 메소드라고 불림. 정적 메소드는 Instance 에서 호출 불가

내장형 객체 (1/2)

일반적으로 자신이 객체를 정의하여 이용하나, 내장형 객체는 Javascript 내에 미리 정의되어 있어 특별한 선언이나 정의 없이 이용할 수 있다.

Javascript 기초1

객체 개요

(Global) Javascript의 기본 기능에 접근하기 위한 수단을 제공

Object 모든 객체의 모형이 되는 기능을 제공

Array 배열을 조작하기 위한 수단을 제공

String 문자열을 조작하기 위한 수단을 제공

Boolean 진위 값을 조작하기 위한 수단을 제공

Number 숫자를 조작하기 위한 수단을 제공

Function 함수를 조작하기 위한 수단을 제공

Math 수치 연산을 실행하기 위한 수단을 제공

Date 날짜를 조작하기 위한 수단을 제공

RegExp 정규 표현에 관한 기능을 제공

Error 에러 정보를 관리

내장형 객체 (2/2)

내장 객체 중에 기본형이 문자, 숫자, 논리값을 취급하는 객체를 Wrapper 객체라 부른다. Wrapper 객체는 단순히 기본 값에 지나지 않은 기본 데이터를 포장하여 객체로서의 기능을 추가하기 위한 객체이다.

Javascript 기초1

Number 객체 String 객체 Boolean 객체

수치 10

Method

문자열 abc

Method

논리값 true

Method

Wrapper Object

표준 데이터형 객체 이외에 문자열, 숫자, 논리값을 취급하기 위한 것을 Wrapper 객체라고 부른다. 단순히 값에 지나지 않는 기본형의 데이터를 포장해서 객체로서의 기능(값을 조작하는 메소드)을 추가하기 위한 객체로, 개발시에 별도로 의식할 필요 없음

기본 데이터 형 인스턴스 없이 바로 이용가능하며, 명시적으로 생성이 가능하지만, 원칙적으로 피해야 한다.

String 객체 (1/3)

String 객체는 문자열 형의 값을 취급하기 위한 Wrapper 객체로, 문자열의 추출이나 가공, 검색 등을 위한 기능을 제공한다.

Javascript 기초1

객체 멤버 개요

검색 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 객체 (2/3)

String method 는 원본 문자열에서 부분 문자열 추출을 위하여 substring, slice, substr 의 세가지 method 를 지원하고 있는데, substring,slice 와 substr method 의 차이점에 대해 유의하여 사용할 것

Javascript 기초1

객체 멤버 개요

부분 문자열

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

일반적으로 substring 과 slice 의 동작은 같아 보이지만, substring 과 slice 의 차이는 start 지점이 end 지점 보다 큰 경우(start > end), start/end 인수에 음수를 지정한 경우 두 개의 method 의 동작이 차이를 보여주게 된다.

String 객체 (3/3)

String 객체의 멤버는 대부분 직관적으로 이해할 수 있는 것들이만, 부분 문자열을 추출하기 위한 메서드는 유의하여 사용해야 함

인수 start > 인수 end substring 메소드는 인수 start 와 인수 end 와의 관계를 바꿔서 end+1 ~ start-1 번째 문자까지를 추출, slice 는 이러한 인수의 교환 없이 그대로 공백 문자열을 되돌림

인수 start/end 에 음수 지정 substring 메소드는 무조건 0으로 인식, slice 메소드는 문자열 끝에서 부터의 문자수로 인식

Javascript 기초1

substring/slice 차이

Number 객체 (1/2)

String 객체는 문자열 형의 값을 취급하기 위한 Wrapper 객체로, 문자열의 추출이나 가공, 검색 등을 위한 기능을 제공한다.

Javascript 기초1

분류 멤버 개요

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으로 보충)

수치가 아닌 값, 0을 0으로 나누는 경우 같은 부정한 연산시의 결과

어떤 여난 결과가 Javascript 에서 표현 가능한 수치의 범위를 넘어섰을 때

NaN

INFINITY

Number 객체 (2/2)

toXxxx 메소드는 각각 수치를 지정된 형식으로 변한하거나, 특정의 행 수로 정렬하기 위해서 사용.

toFixed 소수점 이하의 행수를 지정함

toPrecision 정수부도 포함한 전체 행수를 지정

Javascript 기초1

NaN NaN 은 자기 자신을 포함한 모든 수치와 같지 않기 때문에 비교를 하면 false 값이 나옴. NaN 값을 검출하려면 isNaN 함수를 이용해야 함

Math 객체 (1/3)

Number 객체는 수치형의 값을 조작하기 위한 객체로, 지수계산, 제급근, 대수관련 연산 기능을 제공하는 것은 Math 객체임

Javascript 기초1

분류 멤버 개요

기본

abs(num) 절대값

max(num1, num2) num1, num2 중에서 큰 쪽의 값

min(num1, num2) num1, num2 중에서 작은 쪽의 값

pow(base, p) 누승 (base 값의 p승)

random() 0~1 미만의 난수

자리올림/ 자리버림

cell(num) 소수점 이하 올림(num 이상의 최소 정수)

floor(num) 소수점 이하 버림(num 이하의 최대 정수)

round(num) 소수점 이하 반올림

제곱근

SQRT1_2 ½의 제곱근

SQRT2 2의 제곱근

sqrt(num) 제곱근

삼각함수 PI 원주율

cos(num) 코사인

Math 객체 (2/3)

Math 객체가 제공하는 멤버는 모두 Static property/method 이므로, Math 객체를 직접적으로 이용하여 멤버에 접근해야 함

Javascript 기초1

분류 멤버 개요

삼각함수

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의 누승)

Math 객체 (3/3)

Math 객체는 new 연산자로 instance 화 할 수 없음.

Random 0~1 사이의 난수이므로, 정수의 난수를 발생시키기 위해서는 정수 값을 곱한 후, 자리올림/버림/반올림 함수를 이용하여 숫자 값을 얻어내야 함

Javascript 기초1

Array 객체 (1/2)

Array 객체는 배열형의 값을 취급하기 위한 객체로, 배열에 대한 요소의 추기, 삭제, 결합, 정렬 등의 기능을 제공함

Javascript 기초1

분류 멤버 개요

가공

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...] 형식의 문자열로 치환

Array 객체 (2/2)

new 연산자로 생성할 수 있으나, 의미상 난해해 지기 쉽다. 숫자로 지정하게 되면, 지정 요소로 배열을 생성하는 것이 아닌, 지정 사이즈 만큼 공백의 배열을 생성하게 됨

원래의 배열에 영향을 줌 concat, slice, join, toString 이란 메서드를 빼고는 조작 대상이 되는 원래의 배열에 영향을 끼침. reverse/sort는 반환 값, 원래 배열 모두 영향을 끼침.

배열 내용은 toString 으로 확인 toString 메소드를 사용하면 콤마로 연결된 문자열로 반환. 명시적으로 사용하지 않아도 내부적으로 toString 메소드가 호출됨

Javascript 기초1

사용자 정의 sort 메소드 독자적으로 구현할 수 있음. 기본적으로 문자열로 정렬 하지만, 숫자 정렬처리를 위해서 좌측과 같은 식으로 구현

Expand your dimension!

Let’s Start!