기본적인 객체 생성과 호출 예제
//기본 객체 생성 함수 new Object로 객체를 생성해 변수에 참조
let sound= new Object;
//생성한 객체에 속성 값 부여
sound.volumn="20";
sound.eq="pop";
document.write(sound.eq+"<br>"); //이렇게 변수처럼 그냥 불러서 쓸 수도 있습니다.
//객체 속성 안에 함수 만들기
sound.info= function(){
document.write("sound의 볼륨 : "+this.volumn,"<br>");
document.write("sound의 이퀄라이저 : "+this.eq,"<br>");
}
//생성한 객체의 함수 호출
sound.info();내장 객체의 종류
- 내장 객체 = 자바스크립트 엔진에 내장된 객체
- 문자 / 날짜 / 배열 / 수학 등이 있음
날짜 객체
- new Date로 생성
- 날짜의 정보를 가져오거나 수정하는 메서드를 필요에 따라 이용
- 더 많은 날짜 객체 공부하기
let today= new Date();
let thisYear= today.getFullYear(); //올해에 대한 날짜 정보 객체 생성
let theDate= new Date(thisYear,11,31); //12월은 11번째 인덱스
let diffDate= theDate.getTime()-today.getTime(); //말일-오늘의 날짜수 차이
let result= Math.ceil(diffDate / (60*1000*60*24)); //1000밀리초*60(1분) * 60(분)*24(시간) =1일 단위 표시
document.write("올해 말일 D-DAY : "+result+"일 남았습니다.");수학 객체
- 산술 연산자로 계산이 가능한 더하기, 빼기, 곱하기, 나누기, 나머지 값 구하기 이외에도 모든 수학적인 계산을 할 수 있음
수학 객체 메서드
- 숫자의 절대값 반환 : Math.abs(숫자)
- 숫자 중 가장 큰 값 반환 : Math.max(숫자1, 숫자2, 숫자3, 숫자4)
- 숫자 중 가장 작은 값 반환 : Math.min(숫자1, 숫자2, 숫자3, 숫자4)
- 숫자의 거듭제곱값 반환 : Math.pow(숫자, 제곱값)
- 0~1사이의 랜덤한 숫자 반환 : Math.random()
- 소수점 첫째자리에서 반올림한 정수 반환 : Math.round(숫자)
- 소수점 첫째자리에서 무조건 올림한 정수 반환 : Math.ceil(숫자)
- 소수점 첫째자리에서 무조건 내림한 정수 반환 : Math.floor(숫자)
- 숫자의 제곱근값 반환 : Math.sqrt(숫자)
- 원주율 상수 3.14를 반환 : Math.PI
수학 예시 1 - 소수점 처리
let num= 4.5947;
let roundNum= Math.round(num),
ceilNum= Math.ceil(num),
floorNum= Math.floor(num);
document.write("첫째자리 반올림은 "+roundNum+"<br>");
document.write("첫째자리 무조건 올림은 "+ceilNum+"<br>");
document.write("첫째자리 무조건 내림은 "+floorNum);수학 예시 2 - 랜덤 숫자 범위 발생
let randomNum= Math.ceil(Math.random()*4); //1~4발생
document.write(randomNum+"<br>");
if(randomNum==1){
document.write("1이 나왔습니다.")
}
if(randomNum==2){
document.write("2가 나왔습니다.")
}
if(randomNum==3){
document.write("3이 나왔습니다.")
}
if(randomNum==4){
document.write("4가 나왔습니다.")
}- Math.random을 Math.ceil로 감싼 것은 1부터의 정수를 발생시키기 위한 것이고, 4를 곱하면 1부터 4까지의 난수가 발생
- 1부터가 아니라 0부터로 하려면 Math.floor를 사용
- 특정한 숫자를 최소값으로 하려면, Math.ceil(Math.random)*최대값에서 최소값을 빼고 1을 더한 값)+최소값; 으로 사용
배열 객체
- 데이터를 나눠서 쭉 나열해놓은 것
배열 생성, 불러오기
//1. 한줄한줄 쓰기
let arr= new Array();
arr[0]=1;
arr[1]=2;
arr[2]=3;
document.write(arr[0]);
document.write("<br><br>");
//2. 소괄호 안에 차례로 쓰기
let arr2= new Array(4,5,6)
for(let i=0; i<arr2.length; i++){
document.write(arr2[i]);
}
document.write("<br><br>");
//3. 대괄호 안에 차례로 쓰기
let arr3= [7,8,9];
for(let k=0; k<2; k++){
document.write(+arr3[k]);
}배열 객체 메서드
- 특정 문자로 연결된 1개의 문자형 데이터 반환 : join("연결할 문자")
- 데이터의 순서롤 거꾸로 바꿔서 반환 : reverse()
- 데이터를 오름차순으로 정렬 : sort()
- 데이터를 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져오기 : slice(인덱스 번호, 인덱스 번호)
- 2개의 배열을 하나로 결합 : concat()
- 마지막 인덱스 데이터 삭제 : pop()
- 마지막 인덱스에 새 데이터 삽입 : push(새 데이터)
- 첫번째 인덱스 데이터 삭제 : shift()
- 맨 앞 인덱스에 새 데이터 삽입 : unshift(새 데이터)
- 배열에 저장된 총 데이터의 개수 반환 : length
문자열 객체
- 문자열 데이터를 객체로 취급
문자열 객체 생성
//1. 문자열 객체 생성하고 변수에 참조
let munja1= new String("문자열 객체의 내용입니다.");
document.write(munja1+"<br>")
//2. 참조 변수에 바로 문자열 작성
let munja2= "이렇게 그냥 바로 써도 문자열 객체가 됩니다.";
document.write(munja2)문자열 객체 메서드
- 인덱스 번호에 해당하는 문자를 반환 : charAt(인덱스 번호)
- 왼쪽부터 문자를 검색해 가장 먼저 일치하는 인덱스 번호 반환 : indexOf("검색할 문자") 또는 search("검색할 문자")
- 오른쪽부터 문자를 검색해 가장 먼저 일치하는 인덱스 번호 반환 : lastIndexOf("검색할 문자")
- 왼쪽부터 문자를 검색해 가장 먼저 일치하는 문자 반환 : match("찾을 문자")
- 왼쪽부터 찾을 문자를 찾아 가장 먼저 찾은 문자를 새 문자와 바꾸기 : replace("검색할 문자","새로 바꿀 문자")
- a지점부터 b지점까지 문자 또는 인덱스 번호로 문자 반환 : 전자는 slice(a,b) 후자는 substring(a,b)
- a지점부터 원하는 문자수만큼 반환 : substr(a, 문자수)
- 지정한 문자를 기준으로 문자를 나눠 배열로 반환 : split("지정할 문자")
- 알파벳을 모두 소문자로 바꾸기 : toLowerCase
- 알파벳을 모두 대문자로 바꾸기 : toUpperCase
- 문자열의 문자수 반환 : length
- 문자열에 새 문자열 결합 : concat("새 문자열")
- 문자 앞 뒤 공백 제거 : trim()
문자열 객체 예시 1 - 유효성 검사
let userEmail= prompt("이메일 주소를 입력해주세요","");
let arrURL= ["co.kr","com","net","or.kr","go.kr"];
let check1= false;
let check2= false;
if(userEmail.indexOf("@")>0){check1=true;} //@를 썼으면 체크1 통과
for(let i=0; i<arrURL.length; i++){ //5개 배열만큼 반복해서 체크
if(userEmail.indexOf(arrURL[i])>0){ //배열 주소와 입력한 메일 주소가 일치하면 체크2 통과
check2= true;
}
}
if(check1&&check2){ //체크1과 체크2를 모두 만족하면
document.write("정상적으로 입력되었습니다. "+userEmail);
}
else{
alert("이메일 형식이 잘못되었으니 다시 입력해주세요.");
}느낀점
- 아직까지는, 기초 단계라서 내장 객체 관련과 부분은 상대적으로 쉽게 다가오는 것 같다.
- 이후에 배울 브라우저 객체 모델(BOM)과 문서 객체 모델(DOM)과 같은 경우는 다른 언어에서 배운 적 없기 때문에, 빨리 만나보고 싶다.
참고
#Software Engineer #IRISH