모바일 부터 하드웨어까지 가능하게 하는 가장 강력한 언어, GITHUB 에서 가장 많은 프로젝트, 해커톤에서 가장 많이 사용되는 언어, 오바마 대통령도 배웠던 언어, 바로 자바스크립트입니다.

1. Welcome to
Javascript
객체 1

2. 1. 객체
2. 내장형 객체
2. String 객체
3. Number 객체
4. Math 객체
5. Array 객체
Javascript 기초 - 객체1
선수 추천 과정
HTML5
CSS3

3. 객체 (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...

4. 객체 (2/2)
한개의 객체에 대해 여러 어플리케이션이 서로 다른 목적으로 데이터 값을 설정하면 부
정합이 발생되게 된다. 그러한 이유로 객체의 복제를 만들어서(Instance 화) 각각의
전용 영역에서 객체가 사용되게 된다.
Javascript 기초1
Property
Object A
Method
Property
instance a
Method
Property
instance b
Method
각각 별개의 객체이므로
조작상의 충돌이 일어날
일이 없다
객체의 인스턴스화
Static property & method
인스턴스 없이 바로 이용가능하며, 정
적 프로퍼티 메소드 혹은 클래스 프로
퍼티 클래스 메소드라고 불림. 정적
메소드는 Instance 에서 호출 불가

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

6. 내장형 객체 (2/2)
내장 객체 중에 기본형이 문자, 숫자, 논리값을 취급하는 객체를 Wrapper 객체라 부른
다. Wrapper 객체는 단순히 기본 값에 지나지 않은 기본 데이터를 포장하여 객체로서
의 기능을 추가하기 위한 객체이다.
Javascript 기초1
Number 객체 String 객체 Boolean 객체
수치 10
Method
문자열 abc
Method
논리값 true
Method
Wrapper Object
표준 데이터형 객체 이외에 문자열, 숫자, 논리값을 취급하기 위한 것을 Wrapper 객체라고 부른다.
단순히 값에 지나지 않는 기본형의 데이터를 포장해서 객체로서의 기능(값을 조작하는 메소드)을 추
가하기 위한 객체로, 개발시에 별도로 의식할 필요 없음
기본 데이터 형
인스턴스 없이 바로 이용가능하며, 명
시적으로 생성이 가능하지만, 원칙적
으로 피해야 한다.

7. 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 ... 를 문자로 변환

8. 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 의 동작이
차이를 보여주게 된다.

9. String 객체 (3/3)
String 객체의 멤버는 대부분 직관적으로 이해할 수 있는 것들이만, 부분 문자열을 추
출하기 위한 메서드는 유의하여 사용해야 함
인수 start > 인수 end
substring 메소드는 인수 start 와 인
수 end 와의 관계를 바꿔서 end+1 ~
start-1 번째 문자까지를 추출, slice
는 이러한 인수의 교환 없이 그대로 공
백 문자열을 되돌림
인수 start/end 에 음수 지정
substring 메소드는 무조건 0으로 인
식, slice 메소드는 문자열 끝에서 부
터의 문자수로 인식
Javascript 기초1
substring/slice 차이

10. 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

11. Number 객체 (2/2)
toXxxx 메소드는 각각 수치를 지정된 형식으로 변한하거나, 특정의 행 수로 정렬하기
위해서 사용.
toFixed
소수점 이하의 행수를 지정함
toPrecision
정수부도 포함한 전체 행수를 지정
Javascript 기초1
NaN
NaN 은 자기 자신을 포함한 모든 수
치와 같지 않기 때문에 비교를 하면
false 값이 나옴. NaN 값을 검출하려
면 isNaN 함수를 이용해야 함

12. 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) 코사인

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

14. Math 객체 (3/3)
Math 객체는 new 연산자로 instance 화 할 수 없음.
Random
0~1 사이의 난수이므로, 정수의 난수
를 발생시키기 위해서는 정수 값을 곱
한 후, 자리올림/버림/반올림 함수를
이용하여 숫자 값을 얻어내야 함
Javascript 기초1

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

16. Array 객체 (2/2)
new 연산자로 생성할 수 있으나, 의미상 난해해 지기 쉽다. 숫자로 지정하게 되면, 지
정 요소로 배열을 생성하는 것이 아닌, 지정 사이즈 만큼 공백의 배열을 생성하게 됨
원래의 배열에 영향을 줌
concat, slice, join, toString 이란
메서드를 빼고는 조작 대상이 되는 원
래의 배열에 영향을 끼침.
reverse/sort는 반환 값, 원래 배열
모두 영향을 끼침.
배열 내용은 toString 으로 확인
toString 메소드를 사용하면 콤마로
연결된 문자열로 반환. 명시적으로 사
용하지 않아도 내부적으로 toString
메소드가 호출됨
Javascript 기초1
사용자 정의 sort 메소드
독자적으로 구현할 수 있음. 기본적으
로 문자열로 정렬 하지만, 숫자 정렬처
리를 위해서 좌측과 같은 식으로 구현

17. Expand your dimension!
Let’s Start!