Javascript의 객체와 배열
: 실세계의 객체들을 다룰 수 있도록 자바스크립트에 객체 개념이 도입되었다.
객체의 고유한 속성을 property라고 부르며 객체는 여러 property와 값의 쌍으로 표현된다.
또한 객체는 여러개의 함수를 가질 수 있는데 함수를 method라고 부른다.
메소드는 다른 객체나 코드로부터 호출되며, 주로 객체 내부의 프로퍼티 값을 조작하거나
연산을 수행하고 결과를 리턴한다.
객체
자바스크립트의 객체 유형
: 개발자가 자바 스크립트 코드로 객체를 만들어 사용할 수 있지만
브라우저는 많은 자바스크립트 객체를 만들어 제공하므로 이들을 사용하기만 하면 된다.
브라우저가 제공하는 자바 스크립트 객체는 다음 3가지 유형으로 나뉜다.
| 코어객체 | 기본객체로서 Array,Date,String,Math 타입등이 있으며 웹페이지나 웹 서버 프로그램 어디서나 사용 할 수 있다. |
| ✔HTML DOM 객체 | HTML 페이지에 작성된 HTML 태그들을 브라우져가 하나씩 객체화 한 (DOM : Document Object Model) 것들로 HTML 페이지의 내용과 모양을 제어하기 위해 사용되는 객체들이다. |
| 브라우저 관련 객체(BOM) | 브라우저의 종류나 스크린의 크기 정보를 제공하거나 새 윈도우를 생성하는 등 브라우져와 관련된 객체들로 BOM(Browser Object Model)이라고 부른다. |
DOM : table, div,hr등 태그 자체들을 객체로 보는 것이 DOM이다.
Document Object Model 즉 HTML의 document들(태그들)을 object(객체)로 보겟다는 의미
코어 객체 종류
: 코어 객체들은 자바 스크립트 언어가 실행되는 어디서나 사용 가능한 객체들로서 여러 타입이 있다.
코어 객체의 생성은 항상 new 키워드를 사용한다.
var today = new Date();
var msg = new String("Hello");여기서 today, mag 는 생성된 객체를 가르키는 래퍼런스 변수이다. 이것을 객체라고 부른다.
객체의 접근
: 객체가 생성되면 객체 내부에는 프로퍼티와 매소드가 존재하며 이들은 점(.) 연산자를 이용하여 접근한다.
obj.프로퍼티 = 값; // 객체 obj의 프로퍼티 값 변경
변수 = obj.프로퍼티 ; // 객체 obj의 프로퍼티 값 알아내기, 변수에 대입
obj.메소드(매게변수, , ...); // 객체 obj의 메소드 호출
Array
배열은 여러개의 원소들을 연속적으로 저장하고 전체를 하나의 단위로 다루는 데이터 구조이다.
배열의 각 원소는 [ ] 기호와 0에서 시작하는 인덱스를 이용하여 접근한다.
배열만드는 방법
1. []로 배열만들기
var week =["월","화","수","목","금","토","일"];
var plots = [-20,-5,0,15,20];
week[6] ="Sunday"; // week[6] 의 값을 "일"에서 "Sunday"로 변경
var p =plots[1]; // p=-5;
배열의 크기와 원소 추가
: 배열은 처음 만들어진 크기로 고정되지 않고, 원소를 추가하면 늘어난다.
2. Array 객체로 배열만들기
: 자바스크립트의 코어 객체인 Array를 이용하여 배열을 생성할 수 있다.
: 만드는 방법은 다르지만 일단 배열이 생성되면 사용되는 방법은 같다.
var week = new Array("월","화","수","목","금","토","일");
var day = week[0]; // day="월"
비어있는 배열 생성
: 초기에 배열의 원소 갯수를 예상 할 수 없는 경우 빈 배열을 생성 할 수 있다.
var week = new Array();week는 빈 배열이지만 원소를 순서대로 삽입하면 배열의 크기가 자동으로 늘어난다.
반드시 인덱스는 순서대로 삽입하여야 한다.
| 배열 생성 방법 | 의미 |
| new Array(); | 빈 배열 생성 추가할때마다 새별의 크기 자동 늘림 |
| new Array(size); | size 갯수의 배열 생성 원소 초기화 되지 않음 |
| new Array(e1,e2,~en) | n개의 원소에 대한 초기값과 함께 배열 생성 |
배열의 특징
: 자바스크립트의 배열은 [ ]로 생성하던 new Array( ) 로 생성하던 모든 Array( ) 객체로 다룬다.
그러므로 모두 아래의 Array 객체 메소드를 사용 할 수 있다.
또한 배열은 다양한 데이터가 혼재되어 저장 될 수 있다.
| 메소드 | 의미 |
| concat(arr) | 현재 배열에 배열 arr 원소들을 덧붙여 만든 새 배열 |
| join(separator) | 배열의 모든 원소들을 연결하여 하나의 문자열로 만들어 리턴 각 원소사이에 separator로 지정된 문자열 삽입. separator가 생략되면 ' , ' 가 사용 |
| reverse( ) | 원소를 역순으로 재배열하고 이를 복사한 새로운 배열 리터 |
| slice( idxA[, idxB]) | 두 인덱스 idxA,idxB 사이의 원소들로 구성된 새 배열 리턴 idxB의 원소는 포함되지 않음. idxB가 생략되면 끝 원소까지 포함 |
| toString( ) | 원소들을 모두 연결하여 하나의 문자열로 만들어 리턴 원소와 원소 사이에 ' , ' 삽입 |
Date
Date 객체는 시간 정보를 담는 객체이다.
var now = new Date(); // 현재 날짜 시간(시,분,초) 값으로 초기화된 객체 생성
실습
Date()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체의 생성 및 활용</title>
</head>
<body>
<h3> 객체의 생성 및 활용</h3>
<hr>
<script>
//Date 객체 생성
var today = new Date();
//Date 객체의 toLocaleString() 메소드 호출
document.write("현재 시간 : " + today.toLocaleString() + "<br>");
//String 객체 생성
var mystr = new String("자바스크립트 공부하기");
document.write("mystr의 내용 : " + mystr + "<br>");
document.write("mystr의 길이 : " + mystr.length + "<br>");
//mystr.length=10; 이문장은 오류이다. 길이라는 속성에는 값 대입 불가능
</script>
</body>
</html>
객체의 생성 및 활용
Array
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array 객체로 배열 만들기</title>
</head>
<body>
<h3>Array 객체로 배열만들기</h3>
<hr>
<script>
var degrees = new Array(); //빈 배열 생성
degrees[0] = 15.1;
degrees[1] = 15.4;
degrees[2] = 16.1;
degrees[3] = 17.5;
degrees[4] = 19.2;
degrees[5] = 21.4;
var sum = 0;
for (i = 0; i < degrees.length; i++)
sum += degrees[i];
document.write("평균 온도는 " + sum / degrees.length + "<br>");
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[]로 배열만들기</title>
</head>
<body>
<h3>[ ] 로 배열만들기</h3>
<hr>
<script>
var plots = [20, 5, 8, 15, 20];
document.write("var plots=[20,5,8,15,20] <br>");
plots[8]=13;
for (i = 0; i < plots.length; i++) {
var size = plots[i];
while (size > 0) {
document.write("*");
size--;
}
document.write(plots[i] + "<br>");
}
</script>
</body>
</html>
5~7번 인덱스를 건너뛰고 8번째 인덱스에 값을 넣게 되면
값을 넣어주지 않은 곳에서는 undefined가 발생한다.
Date로 현재시간 확인하기 (월은 +1 하는것에 유의)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date 객체로 현재시간 알아내기</title>
</head>
<body>
<h3>Date 객체로 현재시간 알아내기</h3>
<hr>
<script>
var now = new Date(); // 현재시간값을 가진 Date 객체 생성
document.write("현재시간 : " + now.toUTCString() + "<br><br>");
//toUTCString() : 유니버셜 표준시, 월드타임 표준에 의해 설정된 시간
document.write(now.getFullYear() + "년도<br>");
document.write(now.getMonth() + 1 + "월<br>");
document.write(now.getDate() + "일<br>");
document.write(now.getHours() + "시<br>");
document.write(now.getMinutes() + "분<br>");
document.write(now.getSeconds() + "초<br>");
document.write(now.getMilliseconds() + "밀리초<br>");
var next = new Date(2022, 8, 21, 11, 15, 18); // 8은 9월
document.write("next.toLocaleString() : " + next.toLocaleString() + "<br>");
</script>
</body>
</html>Date 객체로 현재시간 알아내기
방문 시간에 따라 배경색이 다르도록 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>방문시간에 따라 변하는 배경색</title>
</head>
<body>
<h3>페이지 방문 초시간이 짝수이면 red, 홀수이면 green 배경</h3>
<hr>
<script>
var current = new Date();
if (current.getSeconds() % 2 == 0)
document.body.style.backgroundColor = "#ff000088";
else
document.body.style.backgroundColor = "#0000ff33";
document.write("현재시간 : ");
document.write(current.getHours, "시,");
document.write(current.getMinutes, "분,");
document.write(current.getSeconds, "초<br>");
</script>
</body>
</html>| 짝수초 | 홀수초 |
 |
 |
String 메소드들
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>String 객체의 매소드 활용</title>
</head>
<body>
<h3>String 객체의 매소드 활용</h3>
<hr>
<script>
var a = new String("Boys and Girls");
var b = "!!";
document.write("a : " + a + "<br>");
document.write("b : " + b + "<br><hr>");
document.write(a.charAt(0) + "<br>");
document.write(a.concat(b, "입니다.") + "<br>"); //a+b+"입니다."
document.write(a.indexOf("s") + "<br>");
document.write(a.indexOf("And") + "<br>"); // 값이 없는 경우 -1 리턴
document.write(a.slice(5, 8) + "<br>");
document.write(a.substr(5, 3) + "<br>");
document.write(a.toUpperCase() + "<br>");
document.write(a.replace("and", "or") + "<br>"); // and를 or로 교체
document.write(" korea " + "abc <br><hr>");
var sub = a.split(" "); // 빈칸을 기준으로 짤라 배열로 저장함
document.write("a를 빈칸으로 분리<br>");
for (var i = 0; i < sub.length; i++)
document.write("sub" + i + "=" + sub[i] + "<br>");
document.write("<hr>String 메소드를 실행 후 a와 b 변함 없음<br>");
document.write("a : " + a + "<br>");
document.write("b : " + b + "<br>");
</script>
</body>
</html>
a에 b를 concat으로 붙이기도하고
and를 or로 변경해서 출력하였다. 하지만 이것은
a자체를 영원히 변화시키는 것이 아니다.
replace("and" , "or")을 한것을 보여 줄 뿐이다.
원래의 a는 변화 없음 .
String 메소드를 사용하여도 원래의 a,b는 변함이 없다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인코딩과 디코딩</title>
<script>
function ex1() {
alert(encodeURI('가나다') + "\n" + decodeURI('%EA%B0%80%EB%82%98%EB%8B%A4'));
// encodeURI : 사람이 읽을수 있는 문자를 기계가 읽을수 있는 16진수로 변경
// decodeURI는 반대 (기계어 >> 사람어)
}
function ex2() {
var x = 10, y = 15;
alert(String(x) + String(y));
}
function ex3() {
var ob1 = eval("var num=5+2");
var ob2 = eval("({'a':1, 'b':2, 'c':3})");
alert(num + "\n" + ob2.b);
}
</script>
</head>
<body>
<form name="frm">
<input type="button" onclick="ex1()" value="연습1">
<input type="button" onclick="ex2()" value="연습2">
<input type="button" onclick="ex3()" value="연습3">
</form>
</body>
</html>encodeURL : 사람이 읽을 수 있는 문자를 기계가 읽을 수 있는 16진수로 변환
decodeURL : 기계가 읽는 16진수를 사람이 읽는 문자로 변환
실행해보기
'KH > JavaScript' 카테고리의 다른 글
| JS_ 사용자 객체(Object) 생성 (0) | 2022.09.22 |
|---|---|
| JS_Math , String ,Equality,Identity (0) | 2022.09.22 |
| JS_숫자 맞추기 게임 (0) | 2022.09.21 |
| JS_내장함수 (0) | 2022.09.20 |
| JS_ Java와 비슷한 문법들 (1) | 2022.09.20 |