객체(Object)
객체는 기능과 속성을 갖고 있다.
예를 들어 TV에는 켜다, 끄다, 음소거, 볼륨 높낮이 조절 등이 있다.
이렇듯 TV라는 객체에는 다양한 기능이 있다.
객체 안에는 메소드(Method), 속성(Property)이라는 것이 있고, 메소드는 기능인 켜기, 끄기, 음소거, 볼륨 높낮이
조절이고, 속성은 너비, 높이, 색상, 무게이다.
자바스크립트에서 객체의 메소드와 속성을 사용하는 기본형은 다음과 같다.
객체.메소드(); //객체의 메소드를 실행한다.
객체.속성; //객체의 속성값을 가져온다
또는 객체.속성=값; //객체의 속성값을 바꾼다.객체의 종류
내장객체
내장객체는 자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용할 수 있다.
내장객체로는 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있다.
가령, 오늘 날짜를 알고 싶다면 Date 객체를 생성하여 오늘 날짜를 알려준느 메소드 getDate()를 사용하면 된다.
브라우저 객체 모델
브라우저 객체모델(BOM)은 브라우저에 계층 구조로 내장되어 있는 객체를 말한다.
브라우저 객체로는 window, screen, location, history, navigator 객체 등이 있다.
브라우저(window)는 document와 loaction 객체의 상위 객체이다.
예를 들어 자바스크립트를 이용해 현재 열려있는 사이트에서 다른사이트로 이동하려면 location 객체에
참조주소(href) 속성을 바꾸면 된다. 다음과 같이 실행하면 location의 참조 주소(href)의 속성이 바뀌어
새 주소 사이트로 이동한다.
window.location.href="사이트 URL"문서 객체 모델
문서객체모델(DOM)은 HTML 문서 구조를 말한다.
HTML 문서의 기본 구조는 최상위 객체로 <html>이 있으며, 그 하위 객체로는 <head>와 <body>가 있다.
예를 들어 자바스크립트를 이용해 이미지의 src 속성을 바꾸고 싶다면 지정된 <img>를 선택해 src속성을
바꿔야 한다.
이때, 지정 요소를 제대로 선택해서 가져오려면 문서 객체의 구조를 잘 이해하고 있어야 한다.
문서객체모델에서는 HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성을 바꿀 수 있고,
선택한 문서 객체에 원하는 스타일(css)을 적용할 수도 있다.
하지만 자바스크립트의 문서 객체모델은 IE 8이하 버전에서는 호환성이 떨어지기 때문에 사용하기 힘들다는
단점이 있다.
그래서 이러한 점을 극복하기 위해 JQuery 문서 객체모델을 많이 사용한다.
내장객체
다음은 내장객체를 생성하는 기본형이다.
객체를 생성할 때는 new라는 키워드와 생성함수를 사용한다.
참조변수(인스턴스 이름) = new 생성함수()
다음 예제에서는 new 키워드와 기본객체 생성함수 Object()를 이용해 객체를 생성한다.
생성된 객체는 변수 tv가 참조하고 있으며, 이를 이용해 객체의 속성과 메소드를 생성한다.
변수를 이용해 참조를 한다는 말은 생성된 객체를 이용할 때 참조 변수를 사용하겠다는 의미이다.
<script>
var tv = new Object();
tv.color = "white";
tv.price = 300000;
tv.info = function(){
document.write("tv 색상:"+this.color, "<br>");
document.write("tv 가격:"+this.price, "<br>");
<!-- 위에서 this는 메소드의 객체(tv)를 가리킨다.-->
}
var car={
color: "black",
price: 5000000,
info:function(){
document.write("car 색상:"+this.color, "<br>");
document.write("car 가격:"+this.price, "<br>");
}
};
document.write("<h1>tv 객체 메소드 호출</h1>");
tv.info();
document.write("<h1>car 객체 메소드 호출</h1>");
car.info();
</script>
날짜 정보 객체
날짜나 시간 관련 정보를 제공받고 싶을 때 사용한다.
현재 날짜의 정보를 제공하는 Date 객체는 다음과 같이 생성한다.
참조변수=new Date();
var t = new Date();특정 날짜를 제공 받아야 할때는 다음과 같이 생성한다.
참조변수=new Date("연/월/일);
var t=new Date("2020/05/19);
참조변수=new Date(연, 월-1, 일);
var t=new Date(2020,04,19);
다음은 현재 날짜 객체와 특정 날짜 객체를 이용하여 2002년 월드컵 날짜와 관련된 정보를 출력하는 예제이다.
<script>
var today = new Date();
var nowMonth=today.getMonth(),
nowDate = today.getDate(),
nowDay = today.getDay();
document.write("<h1>오늘 날짜 정보</h1>");
document.write("현재 월:"+nowMonth, "<br>");
document.write("현재 일:"+nowDate, "<br>");
document.write("현재 요일:"+nowDay, "<br>");
var worldcup=new Date(2002,04,31);
var theMonth=worldcup.getMonth(),
theDate=worldcup.getDate(),
theDay=worldcup.getDay();
document.write("<h1>월드컵 날짜 정보</h1>");
document.write("2002월드컵 몇월:"+theMonth, "<br>");
document.write("2002월드컵 몇일:"+theDate, "<br>");
document.write("2002월드컵 무슨요일:"+theDay, "<br>");
</script>
작성한 날짜는 5월 19일 이지만 getMonth는 -1을 하기 때문에 4월로 나오는것을 확인 할 수있다.
현재 날짜부터 특정 날짜까지 몇일이 남았는지 구하는 형식은 다음과 같다.
남은일수(밀리초) = 특정 날짜 객체 - 현재 날짜 객체<script>
var today=new Date();
var nowYear=today.getFullYear();
var theDate=new Date(nowYear, 11, 31);
<!-- 올해 연말에 대한 날짜 정보 객체.
12월까지 있지만 -1을 해서 적어줘야 하므로
11로 작성.-->
var diffDate=theDate.getTime() - today.getTime();
<!-- 남은날 = 특정날짜 - 현재날짜(밀리초단위)-->
var result = Math.ceil(diffDate/(60 * 1000 * 60 * 24));
document.write("연말 D-day:"+result+"일 남았습니다");
</script>
수학객체
다음은 수학 객체의 메소드와 참조할 수 있는 상수에 대해 정리한 표이다.
다음은 수학 객체에 포함되어 있는 수학 메소드에 숫자를입력하여 결과값을 반환 받는 예제이다.
<script>
var num=2.1234;
var maxNum=Math.max(10, 5, 8, 30), //30 최대값
var minNum=Math.min(10, 5, 8, 30), //5 최소값
var roundNum=Math.round(num), //2 소수점 첫째자리 반올림
var floorNum=Math.floor(num), //2 소수점 첫째자리 내림
var ceilNum = Math.ceil(num), //3 소수점 첫째자리 올림
var rndNum = Math.random(), //0~1 0과 1사이의 난수 발생
piNum = Math.PI; //3.14 원주율 상수를 반환
document.write(maxNum, "<br>");
document.write(minNum, "<br>");
document.write(roundNum, "<br>");
document.write(floorNum, "<br>");
document.write(ceilNum, "<br>");
document.write(rndNum, "<br>");
document.write(piNum, "<br>");
</script>random()메소드를 이용하여 지정한 숫자 구간에서 난수가 발생할 수 있도록 하려면?
다음와 같이 하면 0부터 10까지 난수를 반환한다.
Math.random()*10;만일 Math.random()을 이용하여 0부터 10까지 정수로만 난수를 반환하려면 다음과 같이 Math.floor를 이용해야 한다.
floor()메소드는 값을 내리기때문에 0이 아닌 11을 사용한다.
Math.floor(Math.random()*11);
Math.random()를 이용하여 120~150 사이의 난수를 정수로만 발생하게 하려면 다음과 같이 한다.
Math.floor(Math.random()*31); <!-- 0부터 30까지 정수로 난수를 발생한다 -->
Math.floor(Math.random()*31)+120; <!-- 120부터 150까지 정수로 난수를 발생한다 -->
즉, 난수를 발생하여 자신이 원하는 구간 사이에서 정수가 발생하게 하려면 다음과 같은 공식을 적용해야 한다.
Math.floor(Math.random()*(최대값-최소값+1))+최소값;다음은 웹사이트 방문 시 나타나는 창에 방문자가 가위, 바위, 보를 적어 컴퓨터가 내려는 가위, 바위, 보를 추측해
맞추는 예제이다. 여기에서도 난수를 사용한다.
<script>
document.write("<h1>컴퓨터 가위, 바위, 보 맞추기</h1>");
var game = prompt("가위, 바위, 보 중 선택하세요", "가위");
var gameNum;
switch(game){
case "가위";
gameNum = 1;
break;
case "바위";
gameNum = 2;
break;
case "보";
gameNum = 3;
break;
default: alert("잘못 작성했습니다.");
location.reload();
}
var com = Math.ceil(Math.random()*3); <!-- 1~3에서 난수가 발생한다.-->
document.write("<img src=\"images/math_img_"+com+".jpg\">");
if(gameNum == com){ <!-- gameNum과 com이 일치하는지 검사한다 -->
document.write("<img src=\"images/game_1.jpg\">");
}else{
document.write("<img src=\"images/game_2.jpg\">");
}
</script>
배열 객체
여러개의 데이터를 하나의 저장수에 저장하려면 배열객체(Array Object)를 생성하면 된다.
배열 객체를 생성하는 기본형은 다음과 같다.
var 참조변수=new Array();
참조변수[0]=값1; 참조변수[1]=값2; 참조변수[2]=값3; .... 참조변수[n-1]=값n;
var 참조변수=new Array(값1, 값2, 값3, ...값n);
var 참조변수=[값1, 값2, 값3, ....값n];배열 객체를 생성하는 방법은 다음과 같이 세가지이며, 이 중에서 선호하는 방식을 사용하면 된다.
1
var d=new Array();
d[0]=30;
d[1]="따르릉";
d[2]=true;2
var d=new Array(30, "따르릉", true);3
var=d=[30, "따르릉", true];
배열 객체에 저장된 데이터 불러오기
배열객체에 저장된 데이터를 불러올 때는 다음과 같은 기본형을 사용한다.
참조변수[인덱스 번호];다음은 배열 객체에 저장된 값들을 모두 출력하는 예제이다.
3개의 실행문은 모두 같은 결과를 출력한다.
<script>
var arr = [30, "따르릉", true];
document.write("<h3>배열값 가져오기-1</h3>");
document.write(arr[0],"<br>");
document.write(arr[1],"<br>");
document.write(arr[2],"<br>");
document.write("<h3>배열값 가졍괴-2</h3>");
for(var i=0; i<arr.length; i++){
document.write(arr[i], "<br>");
}
document.write("<h3>배열값 가져오기-3</h3>");
for(i in arr){
document.write(arr[i], "<br>");
}
</script>
다음은 배열 객체에서 사용할 수 있는 메소드와 속성이다.
다음은 배열 객체 메소드인 join(), concat(), slice(), sort(), reverse()를 사용한 예제이다.
<script>
var arr_1=["사당", "교대", "방배", "강남"];
var arr_2=["신사", "압구정", "옥수"];
var result=arr_1.join("-");
console.log(result);
result=arr_1.concat(arr_2);
console.log(result);
result=arr_1.slice(1,3);
console.log(result);
arr_1.sort();
console.log(arr_1);
arr_2.reverse();
console.log(arr_2);
</script>
다음은 배열 객체 메소드인 splice(), pop(), push(), shift(), unshift()를 사용한 예제이다.
<script>
var greenArr=["교대", "방배", "강남"];
var yellowArr=["미금", "정자", "수서"];
greenArr.splice(2, 1, "서초", "역삼"); <!-- 2번 인덱스부터 1개의 데이터를 삭제한다. 그런다음 "서초", "역삼"을 삽입한다. -->
console.log(greenArr);
var data1 = yellowArr.pop(); <!-- yellowArr 배열 마지막 인덱스의 데이터를 data 1에 저장-->
var data2 = yellowArr.shift(); <!-- yellowArr 배열 가장 앞쪽 인덱스의 데이터를 data2에 저장한다 -->
yellowArr.push(data2);<!--data2에 저장된 데이터를 yellowArr 배열의 마지막 인덱스에 밀어 넣는다-->
console.log(yellowArr);
yellowArr.unshift(data1);<!--data1에 저장된 데이터를 yellowArr 배열의 가장 앞쪽 인덱스에 밀어 넣는다-->
console.log(yellowArr);
</script>
문자열 객체
문자열 객체는 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용한다.
문자열 객체 생성하기
문자열 객체를 생성하는 기본형은 다음과 같이 new 키워드와 String()메소드를 사용한다.
var 참조변수=new String(문자형 데이터)
var t=new String("hello javascript"); <!-- 문자열 객체 생성-->문자열 객체는 다음과 같이 참조 변수에 문자형 데이터만 입력해도 객체가 생성된다.
var 참조변수=문자형데이터
var t="hello javascript"; <!-- 문자열 객체 생성-->문자열 객체는 문자와 관련된 메소드와 속성을 제공하며, 이를 사용해 문자에 대한 다양한 정보를 얻을 수 있다.
문자열 객체의 메소드 및 속성
|
종류 |
설명 |
|
charAt(index) |
문자열에서 인덱스 번호에 해당하는 문자를 반환한다. 예) var str=”web he she”; str.charAt(2); <- “b”를 반환 |
|
indexOf(“찾을 문자”) |
문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환. 만일 찾는 문자가 없으면 -1을 반환. 예) var str=”web he she he”; str.indexOf(“he”); <- 4를 반환 |
|
lastIndexOf(“찾을 문자”) |
문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환. 만일 찾는 문자가 없으면 -1을 반환. 예) var str=”web he she he”; str.lastIndexOf(“he”) <- 11을 반환 |
|
match(“찾을 문자”) |
문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 반환한다. 만일 찾는 문자가 없으면 null을 반환. 예) var str=”web he she he”; str.match(“boy”); <-null을 반환 |
|
replace(“바꿀 문자”, “새 문자”) |
문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환한다. 예) var str=”web he she”; str.replace(“web”,”html”); <- “html he she”를 반환 |
|
search(“찾을 문자”) |
문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호를 반환. 예) var str=”web he she”; str.search(“he”); <- 4를 반환 |
|
Slice(a, b) |
a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환 예) var str=”hello javascript” str.slice(3, 7); <- “lo j”를 반환 str.slice(3, 7); 은 문자열에서 3글자 “hel”까지 자르고 7번째 이후 글자인 “j”이이부터 “avascript”를 자른후 나머지 “lo j”를 반환 예) var str=”hello javascript” str.slice(3, -3); <-“llo javascr”를 반환 여기에서 -1은 뒤에서부터 첫번째 글자를 가리킨다. |
|
substring(a, b) |
a 인덱스부터 b 인덱스 이전 구간의 문자를 반환. 예) var str=”hello javascript” str.substring(3, 7); <- “lo j”를 반환 예) var str=”hello javascript” str.substring(3, -3); <- “hel”을 반환. 여기에서 -3은 인덱스 0을 가리킨다. 그러므로 인덱스 0부터 인덱스 3 이전 구간의 문자를 반환 |
|
Substr(a, 문자개수) |
문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환. 예) var str=”hello javascript” str.substring(3,2); <- “lo”를 반환 str.str(3, 2);은 3 문자열에서 인덱스 3인 “l”부터 2글자를 가져와서 “lo”를 반환 |
|
Split(“문자”) |
지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환 예) var str=”webkmobilek2002”; (index) var arr=str.split(“k”); <- arr[0]= “web”arr[1]=”mobile” arr[2]=”2002” |
|
toLowerCase() |
문자열에서 영문 대문자를 모두 소문자로 바꾼다. 예) var str=”ABC”; str.toLowerCase(); <- “abc”를 반환 |
|
toUpperCase() |
문자열에서 영문 소문자를 모두 대문자로 바꾼다. 예) var str=”abc”, str.toUpperCase(); <-“ABC”를 반환 |
|
length |
문자열에서 문자의 개수를 반환 예) var str=”hello welcome”; str.length <- 13을 반환 |
|
concat(“새로운 문자”) |
문자열에 새로운 문자열을 결합 예) var str=”hello”; str.concat(“web”); <- “hello web”을 반환 |
|
charCodeAt(index) |
문자열 index에 해당 문자의 아스키 코드값을 반환 예) var str=”ABC”; str.charCodeAt(0) <- “A”의 아스키 코드값 65를 반환 |
|
fromCharCode(아스키 코드 값) |
아스키 코드값에 해당하는 문자를 반환 예) String fromCharCode(65); <- “A”를 반환 |
|
trim() |
문자의 앞 또는 뒤에 공백 문자열을 삭제(“hello” -> “hello”); 예) str=”hello”; str.trim(); <- 공백이 제거된 “hello”를 반환 |
다음은 문자열 객체 메소드와 속성을 사용한 예제이다. 문자열 객체에 내장되어 있는 메소드를 사용하여 현재 문자에
지정한 위치(인덱스)또는 특정 문자에 대한 정보를 불러와 출력한다.
<script>
var t="Hello Thank you good luck to you";
document.write(t.charAt(16), "<br/>"); <!--인덱스 16에 저장된 문자를 불러온다 -->
document.write(t.indexOf("you"), "<br/>"); <!-- 문자열 왼쪽에서 부터 제일 먼저 발견된 "you"의 인덱스 값을 반환-> 12-->
document.write(t.indexOf("you", 16), "<br/>"); <!--문자열 인덱스 16 위치부터 제일 먼저 발견된 "you"의 인덱스 값을 반환 ->29-->
docuemnt.write(t.lastIndexOf("you"),"<br/>");<!-- 문자열 오른쪽에서부터 왼쪽 방향으로 제일 먼저 발견된 "you"의 인덱스 값을 반환->29-->
document.write(t.lastIndexOf("you",25), "<br/>");<!--문자열 인덱스 25부터 왼쪽방향으로 제일 먼저 발견된 "you"의 인덱스 값을 반환 ->12-->
document.write(t.match("luck"), "<br/>");<!--문자열 왼쪽에서부터 제일 먼저 발견된 "luck"과 일치되는 문자를 찾아 반환-->
document.write(t.search("you"), "<br/>");<!--문자열 왼족에서부터 제일 먼저 발견된 "you"의 인덱스 값을 반환->12-->
document.write(t.substr(21,4), "<br/>");<!--문자열 인덱스 21부터 네글자를 가져온다 -> "luck"-->
document.write(t.substring(6,12), "<br/>");<!--문자열 인덱스 6부터 12이전까지의 문자를 가져온다 ->"Thank"-->
document.write(t.replace("you","me"), "<br/>");<!--문자열 왼쪽에서부터 제일 먼저 발견된 "you"를 "me"로 치환한다 -->
document.write(t.toLowerCase(), "<br/>");<!-- 문자열의 영문자가 모두 소문자로 바뀐 문자열을 반환 -->
document.write(t.toUpperCase(), "<br/>");<!-- 문자열의 영문자가 모두 대문자로 바뀐 문자열을 반환 -->
document.write(t.length, "<br/>");<!--문자열의 문자 총 개수를 반환한ㄷ. 이때 공백도 문자로 취급한다. -> 32-->
var s=t.split("");<!-- 공백 문자를 기준으로 문자를 분리. 분리된 문자열은 배열에 저장되어 s에 할당한다-->
document.write(s[0], "<br/>"); <!--s의 인덱스 0에 저장된 문자열을 출력한다 ->"Hello"-->
document.write(s[4], "<br/>"); <!--s의 인덱스 4에 저장된 문자열을 출력한다 ->"luck"-->
var str="A";
var t=str.charCodeAt(0);<!--변수에 저장된 문자열 중 0번 인덱스의 문자 "A"의 아스키 코드값을 반환.-->
document.write(t);<!--"A"의 아스키 코드 값 65를 출력-->
document.write(String.fromCharCode(65),"<br/>")<!--코드값 65에 해당하는 문자를 반환-->
</script>
(참고 : do it 자바스크립트+제이쿼리 입문)
'Java Script' 카테고리의 다른 글
| 제어문 (0) | 2020.05.19 |
|---|---|
| 연산자 (0) | 2020.05.17 |
| 변수 (0) | 2020.05.16 |
| 자바 스크립트 기초문법 (1) | 2020.05.16 |
| 자바스크립트 간단한 실행문 예제 (1) | 2020.05.16 |
