3. javascript_객체(메서드)

티스토리 뷰

HMLT&CSS&JS/javascript

3. javascript_객체(메서드)

turfrain 2012. 9. 6. 17:14

1. Object

메소드

constructor() 객체의 생성자 함수

hasOwnProperty(name) 객체가 name 속성을 가지고 있는지 확인

isPrototypeof(object) 객체가 object의 프로토타입인지 검사

propertyIsEnumerable(name) 반복문을 사용해 열거할수 있는 지 확인

toLocaleString() 객체를 호스트 환경에 맞는 언어의 문자열로 변경

toString() 객체를 문자열로 변경

valueOf() 책체의 값

@ 배열의 filter 를통한 특정 key값을 반환 (3학년인 배열반환)
<script>
const students = [
	{ "학년" : 3, "이름" : "홍길남" },
    { "학년" : 2, "이름" : "북동쪽" },
    { "학년" : 1, "이름" : "남서풍" },
    { "학년" : 3, "이름" : "홍길여" },
    { "학년" : 2, "이름" : "북서쪽" },
    { "학년" : 1, "이름" : "남서풍" },
    { "학년" : 3, "이름" : "홍길동" },
];

var students3 = students.filter(checkAdult);
console.log(students3)

function checkAdult(item) {
  return item.학년 == 3;
}
</script>

2. window

속성

height 새 윈도우의 높이 픽셀 값

width 새 윈도우의 너비 픽셀 값

location 주소 입력창의 유무 yes, no, 1, 0

menubar 메뉴의 유무 yes, no, 1, 0

resizable 화면 크기 조절 가능 여부 yes, no, 1, 0

status 상태 표시줄의 유무 yes, no, 1, 0

toolbar 상태 표실줄의 유무 yes, no, 1, 0

메서드

moveBy(x,y) 윈도우의 위치를 상대적으로 이동

moveTo(x,y) 윈도우의 위치를 절대적으로 이동

resizeBy(x,y) 윈도우의 크기를 상대적으로 지정함

resizeTo(x,y) 윈도우의 크기를 절대적으로 지정함

scrollBy(x,y) 윈도우의 스크롤의 위치를 상대적으로 이동함

scrollTo(x,y) 위도우의 스크롤의 위치를 절대적으로 이동함

focus() 윈도우에 초점을 맞춤

blur() 윈도우에 초점을 제거

close() 윈도우를 닫음

setTimeout(function , millisecond) 일정 시간 후에 함수를 한 번 실행함

setInterval(function , millisecond)    일정 시간마다 함수를 반복 실행함

clearTimeout(id) 일정 시간 후에 함수를 한 번 실행 중지

clearInterval(id) 일정 시간마다 함수를 반복 실행 중지

window.onload = function(){} HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간이 로드완료!

window.open() 페이지열기 window.open(url, name, specs, replace)

3. screen 객체

속성

width 화면의 너비

height 화면의 높이

availWidth 실제 화면에서 사용 가능한 너비

availHeight 실제 화면에서 사용 가능한 높이

colorDepth 사용 가능한 색상수

pixelDepth 한 픽셀당 비트수

4. document

속성

title 문서제목

location 문서의 URL 주소를 표시

lastModified 문서를 마지막으로 수정한 날짜와 시간을 표시

referrer 링크한 원래 문서의 url 주소를 표시

bgColor 문서의 배경색상을 지정

fgColor 글자 색상을 지정

linkColor 하이퍼 링크가 성정된 글자 색상을 지정

alinkColor 하이퍼 링크 글자를 누르고 있는 상태의 색상을 지정

vlinkColor 하이퍼 링크를 선택하고 난 후의 글자 생성을 지정

메소드

getElementById(id) 테그 아이디 값 객체를 리턴

getElementByName(name) 테그 이름 값의 객체를 리턴

getElementsByTagName(tagName) 테그이름의 객체를 리턴

clear() 브라우저에 나타남 문서를 지워줌

open() 지정된 윈도우에 데이터를 보낼 준비를 하거나 모두 보냈다는 것을 알림

write / writeln("data") 문서에 데이터를 출럭

close() open 열린 문서 닫음

createElement(tagName) 요소 노드를 생성함

createTextNode(text) 텍스트 노드를 생성함

문서객체 속성

innerHTML document.body.innerHTML = "문자열을 할당함"; // 테그 포함
document.getElementById("id").innerHTML ="문자열을 할당함";

innerText document.body.innerText = "문자열을 할당함"; // 테그 제외
document.getElementById("id").innerText ="문자열을 할당함";

<html>

<body>

<div id="textBox"> 셈플 <b>테스트</b> </div>

<button onclick="alert(textBox.innerHTML);"> innerHTML </button>

<button onclick="alert(textBox.innerText);"> innerTEXT </button>

</body>

</html>

문서객체 메소드

appendChild(node) 객체에 노드를 연결함 => document.body.appendChild(header);

setAttribute(name,value) 객체의 속성을 지정함 => document.createElement('div').setAttribute('width',10);

getAttribute(name) 객체의 속성을 가져옴

getElementById(id) 태그의 id속성이 id와 일치하는 문서 객체를 가져옴

getElementByName(name) 태그의 name 속성이 name 과 일치하는 문서 객체를 배열로 가져옴

getElementsByTagName(tagName) tagName과 일치하는 문서 객체를 배열로 가져옴

removeChild(child) 문서 객체의 자식 노드를 제거함

5. String

속성

length 문자열의 길이를 나타냄

메소드

charAt(position) position에 위치하는 문자를 리턴

charCodeAt(position) position에 위차하는 문자의 유니코드 버호를 리턴

concat(string, ... ,string) 매개 변수로 입력한 문자열을 이어 리턴

indexOf(searchString, position) 앞에서부터 일치하는 문자열의 위치를 리턴

lastIndexof(searchString, position) 뒤에서부터 일치하는 문자열의 위치를 리턴

match(regExp) 문자열 내에 regExp가 있는지 확인

replace(regExp. replacement) regExp를 replacement로 바꾼 뒤 리턴

search(regExp) regExp와 일치하는 문자열의 위치를 리턴

slice(start, end) start부터 end index까지 문자열을 잘라서 리턴

split(separator, limit) separator로 문자열을 잘라 배열을 리턴

substr(start, count) start부터 count만큼 문자열을 잘라서 리턴

substring(start, end) start부터 end index까지 문자열을 잘라서 리턴

toLowerCase() 문자열을 소문자로 바꿔 리턴

toUpperCase() 문자열을 대문자로 바꿔 리턴

HTML관련 메서드 & ECMAScript5

anchor() a 태그로 문자열을 감싸 리턴

big() big 태그로 문자열을 감싸 리턴

blink() blink 태그로 문자열을 감싸 리턴

bold() b 태그로 문자열을 감싸 리턴

fixed() tt 태그로 문자열을 감싸 리턴

fontcolor(colorString) font 태그로 문자열을 감싸고 color 속성을 주어 리턴

fontsize(fontSize) font 태그로 문자열을 감싸고 size 속성을 주어 리턴

italics() I태그로 문자열을 감싸 리턴

link(linkRef) a 태그에 href 속성을 지정해 리턴

small() small 태그로 문자열을 감싸 리턴

strike() strike 태그로 문자열을 감싸 리턴

sub() sub 태그로 문자열을 감싸 리턴

sup() sub 태그로 문자열을 감싸 리턴

trim() 문자열의 양 끝 공백을 제거 함

trimLeft() 문자열의 왼쪽 끝의 공백을 제거함

trimRight() 문자열의 오른쪽 끝의 공백을 제거함

6. Array

속성

length 배열 요소의 개수를 알아냅니다.

메서드

concat() 매개 변수로 입력한 배열의 요소를 모두 합쳐 배열을 만들어 리턴

join() 배열 안의 모든 요소를 문자열로 만들어 리턴

pop() 배열의 마지막 요소를 제거하고 리턴

push() 배열의 마지막 부분에 새로운 요소를 추가

reverse() 배열의 요소 순서를 뒤집음

slice() 배열 요소의 지정한 부분을 리턴

sort() 배열의요소를 정렬하고 리턴

splice() 배열 요소의 지정한 부분을 삭제하고 삭제한 요소를 리턴

ECMAScript5

Array.isArray() 배열인지 확인합니다. (생성자 메서드)

filter() 특정 조건을 만족하는 요소를 추출해 새로운 배열을 만듬

forEach() 배열의 각각의 요소를 사용해 특정 함수를 for in 반복문처럼 실행함

every() 배열의 요소가 특정 조건을 모두 만족하는지 확인함

map() 기존의 배열에 특정 규칙을 적용해 새로운 배열을 만듬

some() 배열의 요소가 특정 조건을 적어도 하나 만족하는지 확인

indexOf() 특정 요소를 앞쪽부터 검색함

lastIndexOf() 특정 요소를 뒤쪽부터 검색함

reduce() 배열의 요소가 하나가 될때까지 요소를 왼쪽부터 두 개씩 묶는 함수를 실행

reduceRight() 배열의 요소가 하나가 될때까지 요소를 오른쪽부터 두 개씩 묶는 함수를 실행

@ 숫자 오름차순 array.sort( function (left , right){ return left - right; } )

@ 숫자 내림차순 array.sort( function (left , right){ return right - left; } )
@ filter 활용 : 18세 이상인 배열 반환.
<script>
var ages = [32, 33, 16, 40];

var ages18up = ages.filter(checkAdult);
console.log(ages18up);

function checkAdult(age) {
  return age >= 18;
}
</script>

7. Math

속성

E 2.718281828459045

LN2 0.6931471805599453

LN10 2.302585092994046

LOG2E 1.4426950408889633

LOG10E 0.4342944819032518

PI 3.1415922653589793

SQRT1_2 0.7071067811865476

SQRT2 1.4142135623730951

메서드

abs(x) x의 절대 값을 구함

acos(x) x의 아크 코사인 값을 구함

asin(x) x의 아크 사인 값을 구함

atan(x) x의 아크 탄젠트 값을 구함

atan2(y,x) x와 y의 비율로 아크 탄제트 값을 구함

ceil(x) x보다 크거나 같은 가장 작은 정수를 구함

cos(x) x의 코사인값을 구함

exp(x) 자연 로그의 x제곱을 구함

floor(x) x보다 작거나 같은 가장 큰 정수를 구함

log(x) x의 로그 값을 구함

max(a,b,c,d, ... ,n) 매개 변수 중 가장 큰 값을 구함

min(a,b,c,d, ... ,n) 매개 변수중 가장 작은 값을 구함

pow(x,y) x의 y 제곱을 구함

random() 0부터 1까지의 임의의 수를 구함

round(x) x를 반올림하여 구함

sin(x) x의 사인 값을 구함

squt(x) x의 제곱근을 구함

tan(x) x의 탄젠트 값을 구함

etc

parseInt(문자) 문자열을 숫자 정수형 // parseInt("15.2%") => 15

parseFloat(문자) 문자열을 숫자 실수형 // parseFloat("15.2%") => 15.2

출처 : 모던 웹을 위한 javaScript jQuery 입문

저작자표시 비영리

'HMLT&CSS&JS > javascript' 카테고리의 다른 글

# javascript tip (0)	2012.11.09
4. javascript _ Event (0)	2012.09.12
2. javascript _ function (0)	2012.07.05
1. javascript _ Array (0)	2012.07.05
# javascript _ customUtils (0)	2012.07.05

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

TRstory

티스토리 뷰

3. javascript_객체(메서드)

'HMLT&CSS&JS > javascript' 카테고리의 다른 글

티스토리툴바

constructor()	객체의 생성자 함수
hasOwnProperty(name)	객체가 name 속성을 가지고 있는지 확인
isPrototypeof(object)	객체가 object의 프로토타입인지 검사
propertyIsEnumerable(name)	반복문을 사용해 열거할수 있는 지 확인
toLocaleString()	객체를 호스트 환경에 맞는 언어의 문자열로 변경
toString()	객체를 문자열로 변경
valueOf()	책체의 값

height	새 윈도우의 높이	픽셀 값
width	새 윈도우의 너비	픽셀 값
location	주소 입력창의 유무	yes, no, 1, 0
menubar	메뉴의 유무	yes, no, 1, 0
resizable	화면 크기 조절 가능 여부	yes, no, 1, 0
status	상태 표시줄의 유무	yes, no, 1, 0
toolbar	상태 표실줄의 유무	yes, no, 1, 0

moveBy(x,y)	윈도우의 위치를 상대적으로 이동
moveTo(x,y)	윈도우의 위치를 절대적으로 이동
resizeBy(x,y)	윈도우의 크기를 상대적으로 지정함
resizeTo(x,y)	윈도우의 크기를 절대적으로 지정함
scrollBy(x,y)	윈도우의 스크롤의 위치를 상대적으로 이동함
scrollTo(x,y)	위도우의 스크롤의 위치를 절대적으로 이동함
focus()	윈도우에 초점을 맞춤
blur()	윈도우에 초점을 제거
close()	윈도우를 닫음
setTimeout(function , millisecond)	일정 시간 후에 함수를 한 번 실행함
setInterval(function , millisecond)	일정 시간마다 함수를 반복 실행함
clearTimeout(id)	일정 시간 후에 함수를 한 번 실행 중지
clearInterval(id)	일정 시간마다 함수를 반복 실행 중지
window.onload = function(){}	HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간이 로드완료!
window.open()	페이지열기 window.open(url, name, specs, replace)

width	화면의 너비
height	화면의 높이
availWidth	실제 화면에서 사용 가능한 너비
availHeight	실제 화면에서 사용 가능한 높이
colorDepth	사용 가능한 색상수
pixelDepth	한 픽셀당 비트수

title	문서제목
location	문서의 URL 주소를 표시
lastModified	문서를 마지막으로 수정한 날짜와 시간을 표시
referrer	링크한 원래 문서의 url 주소를 표시
bgColor	문서의 배경색상을 지정
fgColor	글자 색상을 지정
linkColor	하이퍼 링크가 성정된 글자 색상을 지정
alinkColor	하이퍼 링크 글자를 누르고 있는 상태의 색상을 지정
vlinkColor	하이퍼 링크를 선택하고 난 후의 글자 생성을 지정

getElementById(id)	테그 아이디 값 객체를 리턴
getElementByName(name)	테그 이름 값의 객체를 리턴
getElementsByTagName(tagName)	테그이름의 객체를 리턴
clear()	브라우저에 나타남 문서를 지워줌
open()	지정된 윈도우에 데이터를 보낼 준비를 하거나 모두 보냈다는 것을 알림
write / writeln("data")	문서에 데이터를 출럭
close()	open 열린 문서 닫음
createElement(tagName)	요소 노드를 생성함
createTextNode(text)	텍스트 노드를 생성함

innerHTML	document.body.innerHTML = "문자열을 할당함"; // 테그 포함 document.getElementById("id").innerHTML ="문자열을 할당함";
innerText	document.body.innerText = "문자열을 할당함"; // 테그 제외 document.getElementById("id").innerText ="문자열을 할당함";

appendChild(node)	객체에 노드를 연결함 => document.body.appendChild(header);
setAttribute(name,value)	객체의 속성을 지정함 => document.createElement('div').setAttribute('width',10);
getAttribute(name)	객체의 속성을 가져옴
getElementById(id)	태그의 id속성이 id와 일치하는 문서 객체를 가져옴
getElementByName(name)	태그의 name 속성이 name 과 일치하는 문서 객체를 배열로 가져옴
getElementsByTagName(tagName)	tagName과 일치하는 문서 객체를 배열로 가져옴
removeChild(child)	문서 객체의 자식 노드를 제거함

charAt(position)	position에 위치하는 문자를 리턴
charCodeAt(position)	position에 위차하는 문자의 유니코드 버호를 리턴
concat(string, ... ,string)	매개 변수로 입력한 문자열을 이어 리턴
indexOf(searchString, position)	앞에서부터 일치하는 문자열의 위치를 리턴
lastIndexof(searchString, position)	뒤에서부터 일치하는 문자열의 위치를 리턴
match(regExp)	문자열 내에 regExp가 있는지 확인
replace(regExp. replacement)	regExp를 replacement로 바꾼 뒤 리턴
search(regExp)	regExp와 일치하는 문자열의 위치를 리턴
slice(start, end)	start부터 end index까지 문자열을 잘라서 리턴
split(separator, limit)	separator로 문자열을 잘라 배열을 리턴
substr(start, count)	start부터 count만큼 문자열을 잘라서 리턴
substring(start, end)	start부터 end index까지 문자열을 잘라서 리턴
toLowerCase()	문자열을 소문자로 바꿔 리턴
toUpperCase()	문자열을 대문자로 바꿔 리턴

anchor()	a 태그로 문자열을 감싸 리턴
big()	big 태그로 문자열을 감싸 리턴
blink()	blink 태그로 문자열을 감싸 리턴
bold()	b 태그로 문자열을 감싸 리턴
fixed()	tt 태그로 문자열을 감싸 리턴
fontcolor(colorString)	font 태그로 문자열을 감싸고 color 속성을 주어 리턴
fontsize(fontSize)	font 태그로 문자열을 감싸고 size 속성을 주어 리턴
italics()	I태그로 문자열을 감싸 리턴
link(linkRef)	a 태그에 href 속성을 지정해 리턴
small()	small 태그로 문자열을 감싸 리턴
strike()	strike 태그로 문자열을 감싸 리턴
sub()	sub 태그로 문자열을 감싸 리턴
sup()	sub 태그로 문자열을 감싸 리턴
trim()	문자열의 양 끝 공백을 제거 함
trimLeft()	문자열의 왼쪽 끝의 공백을 제거함
trimRight()	문자열의 오른쪽 끝의 공백을 제거함

concat()	매개 변수로 입력한 배열의 요소를 모두 합쳐 배열을 만들어 리턴
join()	배열 안의 모든 요소를 문자열로 만들어 리턴
pop()	배열의 마지막 요소를 제거하고 리턴
push()	배열의 마지막 부분에 새로운 요소를 추가
reverse()	배열의 요소 순서를 뒤집음
slice()	배열 요소의 지정한 부분을 리턴
sort()	배열의요소를 정렬하고 리턴
splice()	배열 요소의 지정한 부분을 삭제하고 삭제한 요소를 리턴

Array.isArray()	배열인지 확인합니다. (생성자 메서드)
filter()	특정 조건을 만족하는 요소를 추출해 새로운 배열을 만듬
forEach()	배열의 각각의 요소를 사용해 특정 함수를 for in 반복문처럼 실행함
every()	배열의 요소가 특정 조건을 모두 만족하는지 확인함
map()	기존의 배열에 특정 규칙을 적용해 새로운 배열을 만듬
some()	배열의 요소가 특정 조건을 적어도 하나 만족하는지 확인
indexOf()	특정 요소를 앞쪽부터 검색함
lastIndexOf()	특정 요소를 뒤쪽부터 검색함
reduce()	배열의 요소가 하나가 될때까지 요소를 왼쪽부터 두 개씩 묶는 함수를 실행
reduceRight()	배열의 요소가 하나가 될때까지 요소를 오른쪽부터 두 개씩 묶는 함수를 실행

E	2.718281828459045
LN2	0.6931471805599453
LN10	2.302585092994046
LOG2E	1.4426950408889633
LOG10E	0.4342944819032518
PI	3.1415922653589793
SQRT1_2	0.7071067811865476
SQRT2	1.4142135623730951

abs(x)	x의 절대 값을 구함
acos(x)	x의 아크 코사인 값을 구함
asin(x)	x의 아크 사인 값을 구함
atan(x)	x의 아크 탄젠트 값을 구함
atan2(y,x)	x와 y의 비율로 아크 탄제트 값을 구함
ceil(x)	x보다 크거나 같은 가장 작은 정수를 구함
cos(x)	x의 코사인값을 구함
exp(x)	자연 로그의 x제곱을 구함
floor(x)	x보다 작거나 같은 가장 큰 정수를 구함
log(x)	x의 로그 값을 구함
max(a,b,c,d, ... ,n)	매개 변수 중 가장 큰 값을 구함
min(a,b,c,d, ... ,n)	매개 변수중 가장 작은 값을 구함
pow(x,y)	x의 y 제곱을 구함
random()	0부터 1까지의 임의의 수를 구함
round(x)	x를 반올림하여 구함
sin(x)	x의 사인 값을 구함
squt(x)	x의 제곱근을 구함
tan(x)	x의 탄젠트 값을 구함

parseInt(문자)	문자열을 숫자 정수형 // parseInt("15.2%") => 15
parseFloat(문자)	문자열을 숫자 실수형 // parseFloat("15.2%") => 15.2