자바 스크립트의 기본: Array, String, Date, Math, DOM, 브라우저 객체

JavaScript 2016. 2. 15. 10:35

7. 기본 내장 객체

A. Array()

1) 배열 기본 설명
배열은 객체 중 하나입니다. 대괄호([])를 사용해 생성합니다.
var arr1 = new Array();
var arr2 = new Array(10);
var arr3 = new Array(10,20,30);

예제)

//1차원 배열

var arr = new Array();

// 아래와 같이 선언도 가능

// var arr = Array(5);

// var arr = new Array(3,7,8,1,3);

arr[0] = 10;

arr[1] = 20;

arr[2] = 30;

for(var i=0;i<arr.length;i++) {

document.write(arr[i]+'<br />');

}

document.write(arr+'<br />'); // 이렇게도 출력 가능

// 2차원 배열

var arr2 = new Array();

arr2[0] = new Array(3);

arr2[1] = new Array(3);

arr2[0][0] = 10;

arr2[0][1] = 20;

arr2[0][2] = 30;

arr2[1][0] = 40;

arr2[1][1] = 50;

arr2[1][2] = 60;

for(i = 0; i< arr2.length; i++) {

for(var j = 0; j < arr2[i].length; j++) {

document.write(arr2[i][j] + '');

}

document.write('<br />');

}

</script>

결과)

10,20,30

102030

405060

2) Array 객체의 메서드
concat(배열) 두 개의 배열을 합쳐서 하나의 배열로 만들어 준다.
join() 배열 안의 모든 요소를 문자열로 만들어 리턴.
pop() 배열의 마지막 요소를 제거하고 리턴.
push() 배열의 마지막 부분에 새로운 요소를 추가.
reverse() 배열의 순서를 역순으로 바꾸어 준다.
slice(start,end) 배열요소의 지정한 부분을 리턴.
sort() 배열의 요소를 정렬하고 리턴 (비교함수를 지정하거나 생략하면 알파벳 순으로 정렬)
slice() 배열 요소의 지정한 부분을 삭제하고 삭제한 요소를 리턴.

예제) sort. 배열이 순서대로 정렬이 된다.

var arr = new Array('가메뉴','다메뉴','나메뉴');

arr = arr.sort();

for(var i = 0; i < arr.length; i++) {

document.write(arr[i]+'<br />');

}

예제) sort를 이용한 최대값, 최소값 찾기

var arr2 = new Array(9,6,8,3,13,1);

arr2 = arr2.sort(); // sort를 하면 가장 작은 수가 맨 앞, 가장 큰 수가 맨 뒤로 간다

document.write('max = ' + arr2[arr2.length-1]+'<br />'); // 최대길이보다 1 작은 수가 맨 끝의 수

document.write('min = ' + arr2[0]); // 0 위치의 가장 작은 수 출력

결과)

1,13,3,6,8,9 // 문자열로 인식하므로 1 다음 숫자로 13이 오는 문제가 있다.

max = 9

min = 1

아래와 같이 수정하면 정상 출력된다.

var arr2 = new Array(9,6,8,3,13,1);

arr2 = arr2.sort(function(a,b){return a-b}); // return b-a를 하면 내림차순도 가능

document.write('max = ' + arr2[arr2.length-1]+'<br />');

document.write('min = ' + arr2[0]);

결과)

1,3,6,8,9,13

max = 13

min = 1

Math 객체의 max, min 메소드에 apply 메소드를 이용하여 숫자배열을 파라미터로 전달

var mathmax = Math.max.apply(null, arr2); // 최대값

var mathmin = Math.min.apply(null, arr2); // 최소값

document.write('math max = ' + mathmax+'<br />');

document.write('math min = ' + mathmin+'<br />');

B. String 객체

1) String 기본메소드
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) 특정 위치의 문자열을 추출해 리턴
split(separator, limit) separator로 문자열을 잘라 배열을 리턴
substr(start, count) start부터 count만큼 문자열을 잘라서 리턴
substring(start, end) start부터 end까지 문자열을 잘라서 리턴
toLowerCase() 문자열에 알파벳을 소문자로 변환해서 리턴
toUpperCase() 문자열에 알파벳을 대문자로 변환해서 리턴

2) String 속성

① length : 문자열의 길이

예제) substring, split

var name = '"my name is kim';

var sname = name.substring(8); // substring으로 8번째 이후부터 리턴

document.write('sname:' + sname);

var arr = name.split(' '); // 공백을 이용해 잘라냄

for(var i=0;i<arr.length;i++) {

document.write(arr[i]+'<br />');

}

document.write('name.length: ' + name.length);

</script>

결과)

sname: is kim"my

name

kim

name.length: 15

예제) charAt

var msg = "adfg-1233";

for(var i=0;i<msg.length;i++) {

var ch = msg.charAt(i); // 해당 위치 문자를 리턴.

if(ch >= 'a' && ch <= 'z') {

document.write(ch + ': 소문자 <br />');

}

else if(ch >= 'A' && ch <= 'Z')

document.write(ch + ': 대문자 <br />');

}

결과)

a: 소문자

d: 소문자

f: 소문자

g: 소문자

C. Date

Date 객체는 날짜와 시간을 표시하는 객체입니다.
getFullYear()년 /getMonth() 0~11 월/ getDate()일 / getDay()요일 0:일요일,6:토요일 /
getHour() 시 / getMinutes() 분 / getSeconds() 초 / getTime() 70/01/01 00:00:00 으로부터 경과 밀리초

setFullYear() 년/setMonth() 월 / setDate()일 / setDay() 요일 / setHour() 시 / setMinutes() 분 / setSeconds() 초 / setTime() 70/01/01 00:00:00 으로부터 경과 밀리초

예제) Date 객체의 기본

var now = new Date();

var y = now.getFullYear();

var m = now.getMonth();

var d = now.getDate();

document.write(y + "년" + (m+1) + "월" + d + "일"); // 월은 0부터 계산되므로 +1해야 한다.

</script>

예제) Date 객체의 비교

var now = new Date();

var someDay = new Date(2016,1,20);

var y = someDay.getFullYear();

var m = someDay.getMonth();

var d = someDay.getDate();

document.write(y + "년" + (m+1) + "월" + d + "일");

if(now > someDay){

document.write("someDay는 now보다 작다");

}else {

document.write("someDay는 now보다 크거나 같다 ")

}

</script>

문제) Date 객체를 생성해서 오늘의 요일을 출력하고 2013년 3월 2일에 해당하는 Date객체를 생성해서 해당 요일을 출력하시오.

var week = new Array('일','월','화','수','목','금','토');

var now = new Date();

var todayWeek = now.getDay();

document.write('오늘은 ' + week[todayWeek] + '요일<br />');

var someDay = new Date(2013, 2, 2); // 월은 0부터 카운트되므로 2가 사실상 3월이 된다.

var someDayWeek = someDay.getDay();

document.write('2013년 3월 2일은 ' + week[someDayWeek] + '요일<br />');

</script>

D. Math 객체
Math.round() 반올림
Math.ceil() 소수점 이하 올림
Math.floor() 소수점 이하 버림
Math.random() 0~1 사이의 난 수
기타 수학함수들이 존재합니다.

예제) 게시판에서 페이지 계산

전체 게시물 개수 125, 한 페이지에 보여줄 게시물 개수 10개일 때 나와야 할 페이지 수는?

function msg() {

var cnt = 125; // 전체 게시물 수

var pageRow = 10; // 한 페이지에 출력할 게시물 수

list = cnt / pageRow;

list1 = Math.floor(cnt/pageRow); // floor 버림

list2 = Math.ceil(cnt/pageRow); // ceil 올림으로 계산해야 나와야 할 페이지 수가 맞음

list3 = Math.round(cnt/pageRow); // round 반올림

alert(list1);

alert(list2);

alert(list3);

}

msg();

</script>

8. 문서 객체 모델 DOM (Document Object Model)

html 페이지에 태그를 추가, 수정, 제거할 수 있습니다.
문서 객체는 텍스트 노드를 갖는 문서 객체와 텍스트 노드를 갖지 않는 문서로 구분한다.
* innerHTML , header.style.border = '2px solid black';

A. 문서 객체 모델 관련 메소드

1) createElement(tagName) 요소 노드를 생성합니다.

2) createTextNode(text) 텍스트 노드를 생성합니다.

3) appendChild(node) 노드를 추가합니다.

4) setAttribute(name, value); 객체의 속성 지정합니다.

5) getAttribute(name); 객체의 속성을 리턴 합니다.

6) getElemetById(id) 태그의 id 속성이 id와 일치하는 문서 객체를 가져옵니다.

7) getElementsByName(name) 객체의 name이 일치하는 문서 객체를 가져옵니다.

8) getElementsByTagName(tagName) 객체의 태그 네임이 일치하는 문서 객체를 가져옵니다.

9) removeChild(child) 문서 객체의 자식 노드를 제거합니다.

예제) <a href="http://naver.com">네이버로 이동</a> 이 태그를 DOM으로 만들어보자!

window.onload = function() { // 브라우저 창이 열리자마자 일어나는 window.onload

var aTag = document.createElement('a'); // aTag 객체에 a 태그 요소 노드 생성하여 넣기

aTag.setAttribute('href', 'http://naver.com'); // aTag 객체에 속성을 넣음

var textNode = document.createTextNode('네이버로 이동'); // textNode 객체에 텍스트 노드 넣음

aTag.appendChild(textNode); // aTag 객체에 appendChild로 textNode를 붙임

document.body.appendChild(aTag); // body 태그 내에 appendChild로 aTag 객체 붙여 완성!

}

</script>

예제) 버튼을 누르면 특정 id의 객체를 찾아 삭제

function delH1(idStr) {

var delObj = document.getElementById(idStr);

document.body.removeChild(delObj);

}

</script>

</head>

<body>

<h1 id="will_remove">Header1</h1>

<h1 id="will_remove2">Header2</h1>

</body>

예제) 배열로 h1들을 읽어와 innerHTML을 이용하여 h1 앞에 번호를 붙이기

window.onload = function() { // 문서의 객체를 가져옴

var headers = document.getElementsByTagName('h1'); // 배열로 h1 가져옴

for(var i=0;i<headers.length;i++) {

headers[i].innerHTML = (i+1)+":"+headers[i].innerHTML // h1 앞에 i+1로 숫자를 붙임

}

</script>

9. 브라우저 객체 모델

A. 네비게이터 객체

1) appCodeName 브라우저 코드 이름을 알려줍니다.

2) appName 브라우저의 이름을 알려줍니다.

3) appVersion 브라우저의 버전정보를 알려줍니다.

4) userAgent 브라우저의 User Agent를 알려줍니다.

5) platform 사용 중인 시스템 정보를 알려줍니다.

예제) 브라우저 정보 보기

document.write("navigator.appCodeName:" , navigator.appCodeName , "<br>");

document.write("navigator.appName:" , navigator.appName , "<br>");

document.write("navigator.appVersion:" , navigator.appVersion , "<br>");

document.write("navigator.userAgent:" , navigator.userAgent , "<br>");

document.write("navigator.platform ==> " , navigator.platform , "<br>");

document.write("사용중인 언어는 ==> " , navigator.language , "<br>");

document.write("Mime Type 의 갯수는 ==> " , navigator.mimeTypes.length , "<br>");

document.write("설치된 플러그인의 갯수는 ==> " , navigator.plugins.length , "<br>");

</script>

결과)

navigator.appCodeName:Mozilla

navigator.appName:Netscape

navigator.appVersion:5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.109 Safari/537.36

navigator.userAgent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.109 Safari/537.36

navigator.platform ==> Win32

사용중인 언어는 ==> ko

Mime Type 의 갯수는 ==> 7

설치된 플러그인의 갯수는 ==> 5

B. window 객체 생성

1) 관련 메소드

① open(URL, name, features, replace) 새로운 창을 열어 준다.
name : 내용이 없으면 ""로 _blank, _self 를 사용한다.(프레임의 name을 적을 수도 있다)
features : status, resizable(yes/no or 1/0) width height left top
replace : true 히스토리 목록에서 현재 문서를 대체 false 히스토리 목록에서 새 항목은 만듦

② moveBy() 상대적 좌표로 창을 이동합니다.

③ moveTo() 절대 위치로 창을 이동합니다.

④ resizeBy() 상대적 크기를 이용해서 창의 크기를 변경 합니다

⑤ resizeTo() 절대크기로 창 크기를 변경 합니다

⑥ scroll() 창을 스크롤 시킵니다

⑦ scrollBy() 상대적 좌표로 창을 스크롤 시킵니다

⑧ scrollTo() 절대적 좌표로 창을 스크롤 시킵니다

예제) 팝업창 만들기

function popup() {

window.open('popup.html', 'popup', 'width=100, height=200');

}

</script>

</head>

<body>

</body>

예제) 스크롤바 만들기

function sDown(){

window.scrollBy(0, 100);

}

</script>

</head>

<body>

<p>테스트 데이터1

</body>

</html>

2) 관련 속성

① document html문서 자체를 의미한다.

② history 페이지 이동 내역을 저장하고 있는 객체
current : 현재 문서의 url, next : 다음 문서의 url, previous : 이전 문서의 url
back() : 전 단계로 이동, forwrad() 앞 단계로 이동, go() 지정한 단계로 이동

③ location 현제 페이지의 위치를 저장하고 있는 객체

④ opener 현재창을 열어준 윈도우

⑤ self 현재 창 자신

예제) 백, 포워드, 현재 주소 출력

// history.back()는 history.go(-1)과 같으며

// history.foward()는 history.go(1)과 같다

</script>

</head>

<body>

</body>

</html>

예제) 팝업 창에서 input에 입력한 내용을 원본 창의 input로 불러오기

크롬에서 opener가 안되는 경우는 다음과 같다.

1. 안전하지 않은 자바 스크립트 시도하는 경우

2. 액세스 상태가 도메인, 프로토콜 및 포트가 일치하지 않는 경우

웹서버가 아닌 일반 pc에서 구동하면 작동하지 않으므로 웹서버에서 파일을 실행하면 된다.

run on server로 구동 후 해당 주소를 크롬에 입력하여 테스트하자.

부모 html)

function popup() {

window.open('popup.html', 'popup', 'width=200, height=200');

}

</script>

</head>

<body>

</form>

</body>

팝업 html)

function upCheck() {

var userIdObj = document.f1.userId; // 아래의 userId를 가져옴

opener.f1.userId.value = userIdObj.value;

// opener로 나를 열어준 form에 현재 html의 form을 가져옴

userIdObj.value = "";

self.close();

}

</script>

</head>

<body>

</form>

로그인 체크

</body>

C. window 객체의 타이머 메서드

1) setTimeout(function, milisecond) 시간이 지나면 function 한번 실행

setInterval(function, milisecond) 시간 마다 function 실행
clearTimeout(id)
clearInterval(id)

예제) setTimeOut, setInterval

window.onload = function(){

var clock = document.getElementById('clock');

setInterval(function() {

var now = new Date();

clock.innerHTML = now.toString();

} , 1000);

setTimeout(function(){

var msg = document.getElementById('msg');

msg.innerHTML = '2초 후의 타이머 메세지';

}, 2000);

}

</script>

</head>

<body>

</body>

2) screen
width : 브라우저의 전체 화면 너비
height : 브라우저의 전체 화면 높이
availWidth : 브라우저에서 툴바 메뉴바 등을 제외한 순수한 화면의 너비
availHeight : 브라우저에서 툴바 메뉴바 등을 제외한 순수한 화면의 높이
colorDepth : 색상수
pixelDepth : 픽셀당 비트수

예제) screen

<title>Insert title here</title>

document.write('screen.width:'+ screen.width+'<br>');

document.write('screen.height:'+ screen.height+'<br>');

document.write('screen.availWidth:'+ screen.availWidth+'<br>');

document.write('screen.availHeight:'+ screen.availHeight+'<br>');

document.write('screen.colorDepth:'+ screen.colorDepth+'<br>');

document.write('screen.pixelDepth:'+ screen.pixelDepth+'<br>');

</script>

</head>

3) location 객체
브라우저의 주소 표시줄과 관련된 객체입니다.
location.href = ’regProduct.jsp’; // 현재 페이지를 변경

① 속성
href 문서의 url 주소
host 호스트이름과 포트
hostname 호스트 이름
port 포트번
pathname 디렉토리 경로
protocol 포로토콜 종류

② 메서드
assign(link) 페이지를 이동
reload() 새로 고칩니다.
replace(link) 페이지를 바꾼다.

예제) url

function goUrl(url) {

location.href = url;

}

</script>

</head>

<body>

</body>

function goUrl(url) {

location.href = url;

}

</script>

</head>

<body>

</body>

저작자표시

'JavaScript' 카테고리의 다른 글

ECMA 스크립트에서의 배열 (0)	2016.05.24
자바스크립트로 회원가입시 문자 체크 (0)	2016.02.15
자바스크립트로 간단한 덧셈 뺄셈 연산 (0)	2016.02.15
자바 스크립트의 기본: 이벤트 처리 (0)	2016.02.15
자바 스크립트의 기본: 제어문, 함수 function (0)	2016.02.15