내장 객체
Built-in Object
자바스크립트의 객체 종류 중 하나인 내장 객체(Built-in Object)는 자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용하는 객체이다. 내장 객체의 종류로는 문자객체(String), 날짜(Date), 배열(Array), 수학(Math)객체가 있다.
내장 객체를 생성할 때에는 new 라는 키워드와 함께 생성함수를 사용한다.
// 기본형
var 참조변수(인스턴스) = new 생성함수();
1. 보통 생성함수에 Object를 많이 쓴다.
var 참조변수(인스턴스) = new Object();생성함수에 Object를 써서 객체를 생성했을 경우에 이제 그 객체에 기능(함수)와 속성(프로퍼티)를 지정할 수 있다.
예시로 tv라는 객체를 만들어 보겠다.
** 참조변수(인스턴스), 속성(프로퍼티), 기능(함수)
new Object()로 객체로 지정된 함수 tv에게 .color와 .price로 속성과 속성값을 부여했다.
이렇게 부여된 속성들을 .info로 묶어 설명했는데, tv.color와 tv.price로 적어도 됐지만 이번에는 this 키워드를 사용해 화면에 입력해 보았다.
객체.메서드();로 입력했을 경우에는 객체의 메서드(함수)가 실행된다는 것을 기억한다면,
tv.info(); 라고 작성했을 경우 화면에 info의 내용인
document.write("tv 색상 : " + this.color + "<br/>");
document.write("tv 가격 : " + this.price + "<br/>");
가 출력되는 것을 알 수 있다.
// tv 라는 이름의 새로운 객체 생성
var tv = new Object();
tv.color = "blue"; // tv 객체에 색상이라는 속성(프로퍼티)과 값을 부여
tv.price = 300000; // tv 객체에 가격이라는 속성(프로퍼티)과 값을 부여
// tv 객체에 info라는 기능(메서드)추가
// tv 기능 : 화면에 색상과 가격을 출력한다.
tv.info = function () {
// this 키워드는 이 상황에서는 객체 tv를 가리킨다.
document.write("tv 색상 : " + this.color + "<br/>");
document.write("tv 가격 : " + this.price + "<br/>");
};
// 함수를 실행시키는 것을 함수를 호출한다고 한다.
document.write("<h3>tv 객체 메서드 호출</h3>");
tv.info();2. 혹은 간략하고 직관적으로 여러개의 속성값을 입력하는 방법이 있다.
//기본형
var 참조변수 = {
속성1 : 속성값1,
속성2 : 속성값2,
속성3 : 속성값3,
속성4 : 함수
}중괄호 안에는 콤마로 구분하고 마지막 속성에는 아무것도 붙이지 않는다.
객체의 객체의 속성값을 확인하고자 할 경우 객체(변수명).속성명;을 해주면 해당 객체의 속성의 속성값을 확인할 수 있다. 속성 값을 바꾸고 싶다면 객체(변수명).속성명 = 속성값; 으로 변경하면 된다.
// 예시 변수
var myObj = {
name: "kim",
age: 24,
gender: "female",
info: function () {
document.write("my name is " + this.name, "<br/>");
},
};
//name 속성 화면에 입력하기.
document.write(myObj.name, "<br/>");
//info 함수 호출, info의 기능이 이미 document.write이기 때문에 다시 또 감싸면 오류난다.
myObj.info();
//배열을 활용해 여러 변수와 속성 만들기.
var arr = [
{
name: "kim",
age: 24,
gender: "female",
info: function () {
document.write("my name is " + this.name, "<br/>");
},
},
{
name: "yoon",
age: 24,
gender: "female",
info: function () {
document.write("my name is " + this.name, "<br/>");
},
},
{
name: "park",
age: 27,
gender: "male",
info: function () {
document.write("my name is " + this.name, "<br/>");
},
},
];
//콘솔로그로 배열 함수 호출
console.log(arr[2]);
console.log(arr[2].info);
arr[2].info();날짜 정보 객체
Date
날짜와 관련된 작업을 할 때 유용한 객체로 관련 정보를 제공 받고 싶을 때 날짜 객체(Date)를 생성하여 사용한다.
날짜 정보 객체를 이용하면 블로그 게시글의 날짜, 시간 또는 댓글의 생성 시간을 나타내거나
d-day 계산기 같은 것을 만들 수 있다.
기본형1과 같이 함수값이 비어있을 경우에는 현재 날짜에 대한 정보를 얻을 수 있다.
기본형2와 같은 경우에는 입력한 날짜에 대한 정보값을 불러오는데 날짜 계산을 해야하는 경우 숫자 형식의 객체 문법을 사용하여 활용한다.
기본형2와 같은 경우에는 주의사항이 있는데, 모든 값을 숫자로 받는다는 것이다.
요일 같은 경우에는 숫자 0에서 6 사이의 값을 돌려주는데 0은 일요일 6은 금요일을 말한다.
월(Month)단위 같은 경우는 -1을 하여 카운트를 하기 때문에 12월을 입력하고 싶다면 11을 입력하여한다.
//기본형1
var 참조변수 = new Date();
//기본형2
var 참조변수 = new Date("연도/월/일"); // 문자열인 경우
var 참조변수 = new Date(연도, 월-1, 일); // 숫자인 경우Date 관련 메서드
날짜 관련 메서드는 날짜의 정보를 가져오는 GET 메서드와 날짜의 정보를 수정하는 SET 메서드로 나눠진다.
| get 메서드 | |
| getFullYear() | 연도값을 불러온다. |
| getMonth() | 월(month)값을 불러온다. 입력된 값에서 -1된 값으로 출력된다. |
| getDate() | 일(date)값을 불러온다. |
| getDay() | 요일 값을 불러온다. 0에서 6까지의 값이 출력되며 0이 일요일 6이 토요일값이다. |
| getHours() | 시간(hour) 값을 불러온다. |
| getMinutes() | 분(minute) 값을 불러온다. |
| getSeconds() | 초(second) 값을 불러온다. |
| getMilliSeconds | 밀리초 값을 불러온다. 밀리초는 초의 천분의 일 값을 말한다(1/1000s). 밀리초는 초단위 보다 정확하기 때문에 보통 밀리초를 많이 사용한다. |
| getTime() | 1971년 1월 1일부터 경과된 시간을 밀리초로 표기한다. |
| toGMTString() | GMT 표준 표기 방식으로 문자형 데이터로 시간을 반환한다. |
| set 메서드 | |
| setFullYear() | 연도값을 수정한다. |
| setMonth() | 월(month)값을 불러온다. 입력된 값에서 -1된 값으로 출력된다. |
| setDate() | 일(date)값을 수정한다. |
| 요일은 일(date)정보가 바뀌면 같이 수정되기 때문에 따로 메서드가 존재하지 않는다. | |
| setHours() | 시간(hour) 값을 수정한다. |
| setMinutes() | 분(minute) 값을 수정한다. |
| setSeconds() | 초(second) 값을 수정한다. |
| setMilliSeconds | 밀리초 값을 수정한다. |
| setTime() | 1971년 1월 1일부터 경과된 시간을 밀리초로 수정한다. |
| toLocaleString() | 운영 시스템 표기 방식으로 문자형 데이터로 시간을 반환한다. |
※ 문제1
: 현재 날짜 정보를 출력하시오.
today라는 변수에 new Date()로 현재 날짜정보를 입력하였다.
객체가 된 today에는 이제 관련 메서드들을 활용해 각각의 부분을 떼와서 변수에 입력할 수 있다.
예를 들어, nowYear라는 변수를 만들어 today.getFullYear()라는 값을 입력하면 today에 입력된 현재 시간에서 연도(year)부분만 떼와서 값이 지정된다.
그렇게 지정된 변수를 가져와 화면에 입력하면 내가 원하는 모습을 만들 수 있다.
// 현재 날짜 정보 객체
var today = new Date();
var nowYear = today.getFullYear();
var nowMonth = today.getMonth();
var nowDate = today.getDate();
var nowDay = today.getDay();
document.write("<h2>오늘 날짜는?</h2>");
document.write(nowYear + "-" + (nowMonth + 1) + "-" + nowDate + "<br/>");
document.write("현재 월 : " + (nowMonth + 1) + "월", "<br/>");
document.write("현재 일 : " + nowDate + "일", "<br/>");
document.write("현재 요일 : " + nowDay, "<br/>");만약 요일을 숫자 대신 문자로 받아보고 싶다면 다음과 같이 써볼 수 있다.
switch (nowDay) {
case 0:
nowDay = "일요일";
break;
case 1:
nowDay = "월요일";
break;
case 2:
nowDay = "화요일";
break;
case 3:
nowDay = "수요일";
break;
case 4:
nowDay = "목요일";
break;
case 5:
nowDay = "금요일";
break;
case 6:
nowDay = "토요일";
break;
default:
"일치하는 요일이 없습니다.";
}※ 문제2
: 연말까지 D-day 계산기 만들기.
하루는 24시간이고, 1시간은 60분이며, 1분은 60초, 1초는 1000밀리초이다.
다시말해 하루(1일)은 1000밀리초 x 60초 x 60분 x 24시간 이라는 뜻이다.
D-day를 계산하는 공식은 다음과 같다.
1s 1,000(ms) 1min 1,000 X 60 1hour 1,000 X 60 X 60 1day 1,000 X 60 X 60 X 24
우리가 평소 계산하는 방식은 1년을 365일로 계산하여 원하는 날짜에서 현재 날짜만큼을 빼는 것이 d-day 계산법이다.
자바스크립트에서는 밀리초를 활용해 날짜를 뺀 다음 다시 day로 계산하는 방식을 쓴다.
date 관련 메서드 중 .getTime() 메서드를 쓰면 지정된 객체의 날짜 정보를 1971년 1월 1일 부터 경과된 밀리초로 표기해주는데, 이렇게 나온 각각의 밀리초 값을 계산하여 빼면 지정된 객체 둘의 차이값이 나온다.
이후 밀리초(ms)의 값을 1일(day)로 만들기 위해 위의 공식을 대입해 나누면 D-day 값이 나오는 것이다.
보통 밀리초 값을 나누면 소수점까지 나오기 때문에 반올림하여 사용한다.
반올림하는 방법은 Math.ceil() 메서드를 사용하면 된다.
document.write("<h2>연말까지 남은 날짜는?</h2>");
var lastDay = new Date(nowYear, 11, 31);
var diffday = lastDay.getTime() - today.getTime();
var result = Math.ceil(diffday / 1000 / 60 / 60 / 24);
document.write("오늘부터 연말까지 " + result + "일 남았습니다.", "<br/>");수학 객체
Math
자바스크립트의 내장 객체에는 수학과 관련된 기능과 상수를 제공하는 수학객체가 있다.
앞에서 배운 산술 연산만으로는 반올림, 올림, 최댓값 등을 구할 수 없지만 수학객체를 이용하면 연산할 수 있다.
| Math.abs(숫자); | 숫자의 절댓값을 반환한다. ** 절댓값 : 0으로 부터 떨어진 거리 |
| Math.max(숫자1, 숫자2, 숫자3...) | 나열된 숫자 중에서 가장 큰 수(=최댓값)을 반환한다. |
| Math.min(숫자1, 숫자2, 숫자3...) | 나열된 숫자 중에서 가장 작은 수(=최솟값)을 반환한다. |
| Math.pow(숫자, 제곱근) | 숫자의 거듭 제곱값을 반환한다. |
| Math.random() | 0 ~ 1 사이의 난수를 반환한다. ** 난수 = 랜덤한 숫자 |
| Math.round(숫자) | 소수점 첫째 자리에서 반올림하여 정수를 반환한다. |
| Math.ceil(숫자) | 소수점 첫째 자리에서 무조건 올림하여 정수를 반환한다. |
| Math.floor(숫자) | 소수점 첫째 자리에서 무조건 내림하여 정수를 반환한다. |
| Math.sqrt(숫자) | 숫자의 제곱근 값을 반환한다. |
| Math.PI | 원주율 상수를 반환한다. |
1. Math.abs();
소괄호 안의 숫자를 절댓값으로 반환한다.
//예시1. -3의 음수를 3으로 반환한다.
var number = Math.abs(-3);2. Math.max(숫자1, 숫자2, 숫자3 ...)
소괄호 안에 나열된 여러개의 숫자 중에서 가장 큰 수를 반환한다.
//예시2. 소괄호 안의 1,3,4,5 중에 가장 큰 수인 5를 반환한다.
var number = Math.max(5,1,4,3);3. Math.min(숫자1, 숫자2, 숫자3 ...)
소괄호 안에 나열된 여러개의 숫자 중에서 가장 작은 수를 반환한다.
//예시3. 소괄호 안의 1,3,4,5 중에 가장 작은 수인 1를 반환한다.
var number = Math.min(5,1,4,3);4. Math.pow(숫자, 제곱근)
숫자의 제곱값을 반환한다.
//예시4. 2의 2제곱인 4의 값이 반환된다.
var number = Math.pow(2, 2);5. Math.random()
랜덤 메서드를 사용하면 0과 1사이의 랜덤한 수(=난수)를 반환한다.
//예시5. 랜덤한 수 반환하기.
var number = Math.random();6. Math.round(숫자)
소수점 첫째 자리에서 반올림하여 정수를 반환한다.
//예시6. 소수점 첫째자리에서 반올림하기
var number = Math.round(0.61642); //결과값 : 1
var number = Math.round(0.45253); //결과값 : 07. Math.ceil(숫자)
소수점 첫째 자리에서 올림하여 정수를 반환한다.
//예시7. 소수점 첫째자리에서 올림하기
var number = Math.round(0.61642); //결과값 : 1
var number = Math.round(0.45253); //결과값 : 18. Math.floor(숫자)
소수점 첫째 자리에서 내림하여 정수를 반환한다.
//예시8. 소수점 첫째자리에서 내림하기
var number = Math.round(0.61642); //결과값 : 0
var number = Math.round(0.45253); //결과값 : 09. Math.sqrt(숫자)
숫자의 제곱근값을 반환한다.
//예시5. 랜덤한 수 반환하기.
var number = Math.random();10. Math.PI
원주율 상수를 반환한다.
//예시5. 랜덤한 수 반환하기.
var number = Math.random();배열 객체
Array
변수에는 데이터가 하나만 저장된다.
만약 하나의 변수에 여러 데이터를 묶어 저장하고 싶을 때는 어떻게 해야할까?
이 때 사용되는 것이 '배열(Array)' 객체이다.
배열은 하나의 박스와 같은데, 그 안의 내용물을 정렬하여 번호를 붙이고 변수에 데이터로 저장된다.
변수 안에 배열이 담겨있으면 배열 안에 데이터가 수 없이 나열 될 수있다.
배열을 표기할 때 보통 [대괄호]를 이용해 표기한다.
배열 안에 들어있는 데이터는 왼쪽부터 순서대로 '인덱스 번호'를 부여받는데, 번호는 0부터 시작한다.
기본형 1
: 참조 변수를 지정하여 괄호안에 데이터를 담는다. 길이는 상관 없으며 데이터1부터 인덱스 번호 0을 부여 받는다.
기본형 2
: 변수가 이미 선언되어 있는 상황일 때 해당 변수의 인덱스 번호에 해당하는 데이터를 불러올 때 사용된다.
아래와 같은 상황에서는 기본형1에서 선언한 참조변수의 0번째 인덱스 번호에 해당하는 데이터1이 출력된다.
기본형 3
: ES6에서 새로 생긴 최신 표준 문법으로 여러개의 데이터를 지정할 때 사용하는 방법이다.
데이터를 순서대로 할당하기 때문에 변수1에는 데이터1이 변수2에는 데이터2가 할당된다.
[기본형]
1. var 참조 변수 = [데이터1, 데이터2, 데이터3...];
: 참조 변수 안에 데이터가 담긴 배열을 저장함.
2. 참조 변수 [0];
: 참조 변수의 배열 안에 인덱스 번호 0번의 데이터를 불러온다.
3. var [변수1, 변수2] = [데이터1, 데이터2];
: Destructuring 문법 ES6버전에서 새로 생긴 최신 표준문법. 여러개의 데이터를 순서대로 할당한다.예시로 변수를 지정해 보겠다.
arr1 이라는 변수에 30, 김땡땡, true 라는 데이터가 저장되어있다.
이때, arr1의 0번째 데이터인 30을 불러오록 하겠다.
화면에 출력하기 위해 document.write()메서드를 사용하였고, 괄호안에는 arr1이 들어간다.
이때 아래는 두가지 방식을 사용했는데 첫번째는 바로 arr1[0]이라는 문법을 활용하여 불러오는 방식이고,
두번째는 data1이라는 새로운 변수를 만들어 arr1[0]의 데이터를 넣은 뒤 data1을 출력하는 방식이다.
두가지 방법 모두 같은 내용이지만 이후 활용하는 방식에 따라 적절한 방식을 선택하여 사용하면 된다.
// arr1의 0번째 데이터 불러오기
var arr1 = [30, "김땡땡", true];
//방법1
document.write(arr1[0], "<br/>");
//방법2
var data1 = arr1[0];
document.write(data1, "<br/>"); //반복문과 함께 사용하기
//length 배열안 데이터의 총 갯수
//인덱스 번호는 0부터 시작하기 때문에 <=(이상)말고 <(초과)를 써야한다.
for (var i = 0; i < arr1.length; i++) {
document.write(arr1[i], "<br/>");
}
var arr2 = ["하이", true, 10, 41, "780", "안녕", "김땡땡", false];
for (var i = 0; i < arr.length; i++) {
document.write(arr2[i], "<br/>");
}배열(array) 메서드
배열 객체에 들어 있는 데이터를 다양하게 활용할 수 있도록 돕는 메서드들이 있다.
배열의 순서를 바꾸거나 합치거나 혹은 배열의 특정 구간만큼을 잘라내새 데이터를 넣거나 삭제할 수도 있다.
| 배열 메서드 | |
| 종류 | 내용 |
| .join(문자) | 배열 객체의 데이터들을 소괄호 안의 문자로 연결하여 1개의 문자형데이터로 반환한다. |
| .reverse() | 배열 객체의 데이터 순서를 거꾸로 바꾼다. |
| .sort() | 배열 객체의 데이터를 오름차순으로 정렬한다. |
| .slice(index1, index2) | 배열 객체의 데이터 중 원하는 구간만큼 잘라서 가져온다. 작성한 마지막 인덱스의 앞 데이터까지만 자른다는 특징이 있다. |
| .splice (시작 index, 삭제할 데이터 갯수, data1, data2 ...) |
배열 객체의 지정 데이터를 삭제하고, 새 데이터를 집어넣는다. |
| .concat() | 2개의 배열 객체를 하나의 배열로 합친다. |
| .pop() | 배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제한다. |
| .push(새 데이터) | 배열에 마지막 인덱스에 새 데이터를 저장한다. |
| .shift() | 배열에 저장된 데이터 중 첫번째 인덱스에 저장된 데이터를 삭제한다. |
| .unshift(새데이터) | 배열에 첫번째 인덱스에 새 데이터를 저장한다. |
| .length | 배열에 저장된 총 데이터의 갯수를 반환한다. |
// 예시로 사용할 배열객체 Arr_1과 Arr_2
var arr_1 = ["사당", "교대", "방배", "강남"];
var arr_2 = ["신사", "압구정", "옥수"];1 .join(문자)
join앞의 배열 객체안에 들어있는 데이터들을 문자형 데이터로 연결시키는 역할을 한다.
join 안의 소괄호에는 연결할 때 사용할 문자형 데이터를 쓸 수 있으며,
이렇게 연결된 데이터들은 한개로 합쳐져 하나의 문자형 데이터로 반환된다.
// arr_1 안에 들어있는 데이터들을 기호 -로 연결하여 반환한다.
var result = arr_1.join("-");
// 반환한 모습 확인하기
console.log(result);
console.log(typeof result);콘솔로그에서 확인해보면 아래와 같이 나오는 것을 확인할 수 있다.
2 .reverse()
reverse는 뒤집는다는 의미로 배열 메서드에서는 배열객체의 순서를 반대로 뒤집을 때 사용된다.
현재 arr_1은 사당, 교대, 방배, 강남 순서로 배열이 들어가 있기 때문에 반대로 뒤집었을 경우
강남, 방배, 교대, 사당 순서로 출력된다.
// arr_1 안의 데이터를 반대로 나열하기
arr_1.reverse();
// 반환한 모습 확인하기
console.log(arr_1);콘솔로그 창에서 확인하면 아래와 같이 나온다.
콘솔로그 창에서 확인할 경우 왼쪽 화살표 모양을 클릭하면 배열의 인덱스 번호와 내용, 갯수를 확인할 수 있다.
3 .sort()
배열 객체를 오름차순으로 정렬할 때 사용한다.
1,2,3,4 혹은 ㄱ,ㄴ,ㄷ,ㄹ 과 같이 배열안의 내용을 오름차순으로 정렬한다.
// arr_1 안의 데이터를 오름차순으로 정렬하기
arr_1.sort();
// 반환한 모습 확인하기
console.log(arr_1);arr_1 안에는 사당, 교대, 방배, 강남 순서로 배열이 들어가 있기 때문에
가나다 순서로 강남, 교대, 방배, 사당 순서로 나열된다.
4 .slice(시작 인덱스, 마지막 인덱스)
배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져오는 메서드이다.
이 slice 메서드에서 주의해야 할 점은, 마지막 인덱스의 바로 앞 데이터 까지만 잘라서 가져온다는 것이다.
예를 들어, .slice(0, 5)라고 쓰면 0번부터 4번까지의 데이터만 잘라서 배열 객체로 가져온다.
// arr_1 안의 1번 인덱스 부터 2번 인덱스까지 잘라오기
result = arr_1.slice(1, 3);
// 반환한 모습 확인하기
console.log(result);위의 예시에서는 arr_1의 1번 인덱스가 교대이고 3번 인덱스가 강남이기 때문에,
1번 인덱스인 교대부터 3번인덱스 이전 인덱스인 2번 인덱스 방배까지 잘라서 가져왔다.
5 .splice(시작 index, 삭제할 데이터 갯수, 추가할 데이터)
배열 객체의 지정 데이터를 삭제하고, 그 구간에 새 데이터를 집어 넣는 메서드이다.
괄호안의 첫번째 자리는 자르기 시작할 인덱스 번호이고, 두번째는 자를 인덱스의 갯수, 그 이후는 대신 입력할 데이터들을 입력하는 자리이다. 뒤에 넣고 싶은 데이터 갯수의 제한은 없으며 콤마(,)로 배열을 구분한다.
// arr_1의 2번 인덱스부터 1개의 데이터를 삭제하고 '서초', '역삼'을 추가한다.
arr_1.splice(2, 1, "서초", "역삼");
// 반환한 모습 확인하기
console.log(arr_1);2번째 인덱스인 방배부터 1개의 인덱스 이기 때문에 방배 1개만 잘려 나갔다.
그리고 그 자리에 "서초", "역삼" 이라는 데이터를 집이넣어 아래와 같이 입력되었다.
6 .concat()
2개의 배열 객체를 하나의 배열로 합치는 메서드이다.
앞쪽에 배치할 객체에 메서드를 사용하고 뒤에 붙일 객체를 괄호안에 적으면 순서대로 연결된다.
// arr_1 과 arr_2합치기
result = arr_1.concat(arr_2);
// 반환한 모습 확인하기
console.log(result);arr_1에 concat으로 arr_2를 붙였기 때문에 순서는
사당, 교대, 방배, 강남, 신사, 압구정, 옥수 순서이다.
7 .pop()
배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제하는 메서드이다.
// arr_1의 마지막 인덱스를 삭제
arr_1.pop();
// 반환한 모습 확인하기
console.log(arr_1);arr_1에서는 마지막 인덱스인 "강남"이 삭제되어 사당, 교대, 방배가 출력된다.
pop 메서드에서 주의해야할 점은 앞에 사용되는 배열 객체에 영향을 준다는 것이다.
예를들어 data라는 새로운 변수를 생성하여 arr_1의 마지막 배열을 잘라서 넣어보겠다.
// arr_1의 마지막 배열을 잘라서 data에 넣기
var data = arr_1.pop();
// 반환된 결과 확인하기
console.log(data);
console.log(arr_1);arr_1을 pop으로 잘라 data에 넣었더니 data에는 arr_1의 마지막 배열인 강남이 들어가고
arr_1에는 강남이 사라지고 나머지만 남게 되었다.
현재는 마지막 배열이 "강남"이라는 문자 메서드여서 data에도 문자메서드로 들어갔고, 만약 숫자가 들어간다면 숫자메서드로 data에 입력되게 된다.
8 .push(추가할 데이터)
배열의 마지막 인덱스에 새 데이터를 저장할 때 사용하는 메서드이다.
소괄호 안에 들어가는 내용을 객체의 마지막에 데이터로서 추가로 입력한다.
여러개의 데이터를 넣을 경우 순서대로 입력되며,
배열을 데이터로 추가할 경우 배열이 해체되는 것이 아니라 배열 자체를 하나의 데이터로 인식하여 번호가 부여되고 중첩된 배열의 형태를 띄게된다.
// arr_1의 마지막 인덱스에 수서 추가
arr_1.push(arr_2, "수서");
// 반환한 모습 확인하기
console.log(arr_1);
9 .shift()
배열에 저장된 데이터 중 첫번째 인덱스에 저장된 데이터를 삭제한다.
arr_1에서 첫번째 인덱스는 '사당'이기 때문에 이가 삭제된 교대, 방배, 강남이 출력된다.
// arr_1의 첫번째 인덱스 삭제
arr_1.shift();
// 반환한 모습 확인하기
console.log(arr_1);
10 .unshift(데이터)
배열의 첫번째 인덱스에 새 데이터를 저장한다.
아래에서는 "수서"를 가장 앞에 데이터에 입력한 모습을 확인할 수 있다.
// arr_1의 첫번째 인덱스에 수서 추가
arr_1.unshift("수서");
// 반환한 모습 확인하기
console.log(arr_1);
11 .length
배열에 저장된 총 데이터의 갯수를 반환한다.
현재 arr_1에는 총 4개의 데이터가 들어있고, arr_2에는 총 3개의 데이터가 들어있다.
배열의 갯수가 길어질 경우 length를 활용하면 빠르고 간단하게 갯수를 파악할 수 있다.
// arr_1 배열의 갯수
arr_1.length;
// arr_2 배열의 갯수
arr_2.length;
// 반환한 모습 확인하기
console.log(arr_1.length, arr_2.length);
문자열 객체
String
문자열 객체는 문자형 데이터를 객체로 취급하는 것을 말하며 자바스크립트에서 가장 많이 사용되는 객체이다.
(문자형 데이터 == 문자열 객체)
문자형 데이터는 배열과 마찬가지로 첫번째 글자부터 인덱스 번호를 부여 받고, 0번부터 시작된다.
부여받은 인덱스 번호를 이용하면 특정 문자 구간을 잘라내거나 추가하는 등 다양하게 활용할 수 있다.
문자열 객체의
메서드 및 프로퍼티
1. charAt(index) ★
문자열에서 인덱스 번호에 해당하는 '문자'를 반환한다.
2. indexOf('찾을 문자') ★★
문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아서 제일 먼저 일치하는 문자의 index 번호를 반환한다.
만약 일치하는 문자가 없을 경우 -1을 반환한다.
참고 사이트 : codingeverybody / indexof
3. lastIndexOf('찾을 문자') ★
문자열 오른쪽부터 찾을 문자와 일치하는 문자를 찾아서 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다.
만약 일치하는 문자가 없으면 -1을 반환한다.
4. match('찾을 문자')
문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아서 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다.
일치하는 문자가 없으면 null을 반환한다.
결과값이 수로 나오면 다른 코드와 함께 짤 때 쉽지만 null은 어렵기 때문에 잘 사용하지 않는다.
5. replace('바꿀 문자', '새 문자') ★
문자열 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아서 제일 먼저 찾은 문자를 새 문자로 치환한다.
6. search('찾을 문자')
문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아서 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다.
일치하는 문자가 없을 경우 아무런 값을 반환하지 않는다.
7. slice(a, b)
a번째의 데이터부터 b번째 바로 전까지의 문자를 잘라 반환한다.
참고 사이트 : codingEverybody / slice
8. substring(a, b)★
a인덱스 구간부터 b인덱스 앞에 있는 문자까지를 반환한다.
9. substr(a, 문자갯수)?? ☆
문자열에서 a인덱스 부터 지정한 문자 갯수만큼 잘라 문자열을 반환한다.
10. split('문자') ★★
지정한 문자를 기준으로 문자 데이터를 나눠서 배열에 저장하여 반환한다.
11. toLowerCase()
문자열 안에 있는 대문자를 모두 소문자로 바꾼다.
12. toUpperCase()
문자열 안에 있는 소문자를 모두 대문자로 바꾼다.
13. length()
문자열에서 문자의 개수를 반환한다. 공백과 기호도 개수에 포함된다.
14. concat('새로운 문자')
문자열에 새로운 문자를 결합한다.
15. charCodeAt(index)
문자열 index에 해당하는 아스키 코드 값을 반환한다.
16. fromCharCode(아스키 코드 값)
아스키 코드 값에 해당하는 문자를 반환한다.
17. trim()
문자의 앞이나 뒤에 붙은 공백 문자열을 삭제한다.
화면에 출력하는 메서드에서는 자동으로 삭제되기 때문에 관리자모드에서 확인 가능하다.
참고 사이트 : mdn web docs / trim
var str = "Hello Thank you good luck to you";
document.write(str.charAt(16), "<br/>"); //g
//결과 : 12, y에 해당하는 인덱스번호가 출력된다.
document.write(str.indexOf("you"), "<br/>");
//결과 : 29, 뒤쪽 you의 y에 해당하는 인덱스 번호가 출력된다.
document.write(str.lastIndexOf("you"), "<br/>");
//결과 : 29, 16번째 이후의 인덱스 중에서 you의 y에 해당하는 인덱스 번호가 출력된다.
document.write(str.indexOf("you", 16), "<br/>");
//결과 : 12, 16번째 이전의 인덱스 중에서 you의 y에 해당하는 인덱스 번호가 출력된다.
document.write(str.lastIndexOf("you", 16), "<br/>");
//결과 : null, 없는 값
document.write(str.match("lol"), "<br/>");
//결과 : Hello Thank me good luck to you, 맨 처음 발견한 you를 me로 바꾼다.
document.write(str.replace("you", "me"), "<br/>");
//결과 : thank, 6번 인덱스부터 11인덱스까지 잘라내서 출력한다.
document.write(str.substring(6, 12), "<br/>");
//결과 : HELLO THANK YOU GOOD LUCK TO YOU
document.write(str.toUpperCase(), "<br/>");
//결과 : hello thank you good luck to you
document.write(str.toLowerCase(), "<br/>");
//결과 : Hello, 공백을 기준으로 문자를 잘라서 배열로 result에 들어갔기 때문에 0번 인덱스가 Hello로 출력된다.
var result = str.split(" ");
document.write(result[0], "<br/>");
//결과 : 7
document.write(result.length, "<br/>");
//결과 : 32, 공백을 포함해서 총 32개의 문자가 들어있음.
document.write(str.length, "<br/>");
var trimstr = " hello ";
console.log(trimstr);
console.log(trimstr.trim());
document.write(trimstr.trim()); //사용자로부터 핸드폰번호를 입력 받은 후 정보가 노출되지 않도록 뒷 네자리를 ****로 표시해주세요.
var phoneNum = prompt("핸드폰 번호를 입력해주세요.", "010-1234-1234");
// document.write(phoneNum.length);
//방법 1
document.write(phoneNum.substring(0, 9) + "****", "<br/>");
//방법 2
document.write(phoneNum.slice(0, 9) + "****", "<br/>");
//방법 3
var phone = phoneNum.substring(0, phoneNum.length - 4);
document.write(phone + "****", "<br/>");
</script> var userEmail = prompt("이메일을 입력하세요.", "1234@naver.com");
var arrUrl = [".co.kr", ".com", ".net", ".or.kr", ".go.kr"];
var check1 = false;
var check2 = false;
if (userEmail.indexOf("@") > 0) {
check1 = true;
}
for (var i = 0; i < arrUrl.length; i++) {
if (userEmail.indexOf(arrUrl[i]) > 0) {
check2 = true;
}
}
if (check1 && check2) {
document.write(userEmail + "님 인증 완료되었습니다.");
} else {
alert("이메일 형식이 잘못되었습니다.");
location.reload;
}
'자바스크립트(JavaScript) > 자바스크립트' 카테고리의 다른 글
| [JavaScript] 일정한 시간 간격으로 코드 실행하고 중지시키기 / setInterval(), setTimeout() (0) | 2024.07.24 |
|---|---|
| [JavaScript] 브라우저 객체 모델(Browser Object Model) (0) | 2024.07.23 |
| [JavaScript] 자바스크립트의 객체(Object)란? (0) | 2024.07.15 |
| [JavaScript] continue 과 break 의 차이 (0) | 2024.07.12 |
| [JavaScript] 제어문 : 조건문(if, else if, else) / 선택문(switch) / 반복문(while, do while, for) (0) | 2024.07.11 |
