자바스크립트 객체 #1

jjinny_0609·2023년 1월 17일

JavaScript

목록 보기

7/9

생성자를 이용한 객체 생성

속성
생성자 이름은 항상 대문자로 시작해야함, 아니면 그냥 함수로 인식해버림

ex)
function Car{

}

예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	function Car(model, speed, color){
		// 객체의 속성
		this.model = model;
		this.speed = speed;
		this.color = color;
		
		
		// 객체의 메서드
		this.brake = function(){
			speed -= 10;	//this.speed = this.speed - 10
		}
		this.accel = function(){
			speed += 10;	//this.speed = this.speed + 10
		}
	}

// Car 생성자 호출	
	myCar = new Car("520d", 60, "red");
	document.write("모델 : " + myCar.model + "속도 " + myCar.speed +" "+ myCar.color +"<br>");
	myCar.accel(); 
	document.write("모델 : " + myCar.model + "속도 " + myCar.speed +" "+ myCar.color +"<br>");
	myCar.brake();
	document.write("모델: " + myCar.model + "속도 " + myCar.speed +" "+ myCar.color +"<br>");
    
// 생성자를 이용하면 호출할때 값만 변경시켜주면 간단하게 값을 변경할 수 있다.
	myCar = new Car("780s", 70, "yellow");
	document.write("모델 : " + myCar.model + "속도 " + myCar.speed +" "+ myCar.color +"<br>");
	myCar.accel(); 
	document.write("모델 : " + myCar.model + "속도 " + myCar.speed +" "+ myCar.color +"<br>");
	myCar.brake();
	document.write("모델: " + myCar.model + "속도 " + myCar.speed +" "+ myCar.color +"<br>");
    </script>
</head>
<body>

</body>
</html>
    
결과 
모델 : 520d속도 60 red
모델 : 520d속도 60 red
모델 : 520d속도 60 red
모델 : 780s속도 70 yellow
모델 : 780s속도 70 yellow
모델 : 780s속도 70 yellow

생성자를 이용한 예제

Calculator 객체를 생성하고 더하기 빼기 곱하기 나누기를 할수있는 함수를 선언한 후 호출하여
결과를 출력하는 프로그램을 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>생성자</title>
<script>
// calculator 객체를 생성하고 더하기 빼기 곱하기 나누기를 할수있는 함수를 선언한 후 
// 호출하여 결과를 출력하는 프로그램을 작성

// 생성자를 정의
	function Calculator(sum, min, mul, div){
		this.sum = function(x,y){
			this.sum = x + y;
		}
		this.sub = function(x,y){
			this.sub = x - y;
		}
		this.mul = function(x,y){
			this.mul = x * y;
		}
		this.div = function(x,y){
			this.div = x / y;
		}
	}
	//result 객체를 생성
	result = new Calculator();
	
	//객체의 멤버를 사용, 출력
	result.sum(30,10);
	document.write("sum : "+result.sum+"<br>");
	
	result.sub(30,10);
	document.write("sub : "+result.sub+"<br>");
	
	result.mul(30,10);
	document.write("mul : "+result.mul+"<br>");
	
	result.div(30,10);
	document.write("div : "+result.div+"<br>");
	
</script>
</head>
<body>

</body>
</html>

결과

프로토타입

속성

생성자이름.prototype.함수명 = function(){
}

ex 
Point.prototype.getDistance = function(){
	
}

getDistance함수를 써서 값을 공유하는 공간을 만들고,
prototype은 같은 값을 계산하기 위해 같은 계산식을 객체당 하나씩 가지고 있을때
메모리 낭비하는것을 줄이기 위해서 사용

ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function Point(xpos, ypos){	//P가 대문자이므로 생성자(아래에 있는 두 변수의 초기화 시키는 기능)
		this.x = xpos;	//변수
		this.y = ypos;	//변수
		Point.prototype.getDistance = function(p){	// 함수
			return Math.sqrt(this.x * this.x + this.y * this.y);
		};		//Math 함수 sqrt(루트)
	}
	
	var p1 = new Point(10,20);
	var d1 = p1.getDistance();
	var p2 = new Point(30,40);
	var d2 = p2.getDistance();
	document.writeln(d1 + "<br>");
	document.writeln(d2 + "<br>");
</script>
</head>
<body>

</body>
</html>

프로토타입 체인

객체 안에 속성이나 메서드가 정의되어 있는지 체크
객체 안에 정의되어 있지 않으면 객체의 prototype이 속성이나 메서드를 가지고 있는지 체크한다.
원하는 속성/메서드를 찾을 때까지 프로토타입 체인을 따라서 올라간다.

자바스크립트 내장 객체

Date 객체

날짜와 시간 작업을 하는데 사용되는 가장 기본적인 객체
속성
new Date() //현재 날짜와 시간
new Date(년,월,일,시,분,초) //본인이 원하는 날짜 시간
new Date(milliseconds) //1970/01/01 이후의 밀리초
new Date(dateString) //다양한 문자열
new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])
여기서 주의할점 월은 0이 1부터 시작임.
-> 5입력하면 6월

ex)
var today = new Date();	//현재 날짜를 가진 객체를 생성
var today = new Date(2022,10,25,18,30,20);	//2022.11.25 18시 30분 20초

Date의 메서드

getDate() (1~31) // Date에 작성한 해당 일에 해당하는 값을 가져옴
ex) var date = new Date(2022,5,25,18,30,20); getDate() : 25값을 가져오게됨
getDay (0~6) // 해당 날짜의 요일을 가져옴 숫자 0 일요일 1 월요일 ... 5 금요일 6 토요일

ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<div id ='remaining'></div>
	<script>
		function datesUntilNewYear(){
			var now = new Date();	//오늘 날짜
			var newYear = new Date('January 1, ' + (now.getFullYear() + 1))
			// 다음해 1월1일
			var diff = newYear - now;
			var milliseconds = Math.floor(diff % 1000);
			diff = diff / 1000;	//Date()를 쓰면 밀리초가 들어가기때문에 
			var seconds = Math.floor(diff % 60);
			diff = diff / 60;
			var minutes = Math.floor(diff % 60);
			diff = diff / 60;
			var hours = Math.floor(diff % 24);
			diff = diff / 24;
			var days = Math.floor(diff);
			
			var outStr = '내년도 신정까지 ' + days + '일, ' + hours + '시간, ' + minutes;
			outStr += '분, ' + seconds + '초'  + '남았습니다.';
			
			document.getElementById('remaining').innerHTML = outStr;

			setTimeout("datesUntilNewYear()", 1000);// 1초마다 datesUntilNewYear()함수 실행
				
		}	
		datesUntilNewYear();	//함수 실행해줘야 안에서 작동하기때문에 작성
	</script>
</head>
<body>
	
</body>
</html>

innerHTML : 태그와 태그사이 영역을 innerHTML, input타입같은 여는태그만 있는 있는 곳에는 사용 불가능

Number 객체

Number : 수치형 값을 감싸서 객체로 만들어 주는 랩퍼(wrapper) 객체이다.
랩퍼 객체란 수치값을 직접 사용할 수는 없고 반드시 객체가 필요한 경우에 사용된다.

ex) 다음 코드는 숫자 7을 가지고 있는 Number객체를 생성한다.
var num = new Number(7)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var count1, count2;
	
	count1 = new Number(1.237);
	count2 = 1.238;
	if(count1.toFixed(2) === count2.toFixed(2))	//소수점 둘째자리까지 같은지 체크
		alert("소수점 2째 자리까지 같습니다.");
</script>
</head>
<body>

</body>
</html>

String 객체

length : 문자열의 길이를 알고싶을때 사용
ex)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	function checkID(){
		var i = document.getElementById("id").value;
		var p = document.getElementById("pw").value;
		if(i.length < 6){
			alert("아이디는 6글자 이상이어야 합나다.");
		}
		if(p.length < 6){
			alert("패스워드는 6글자 이상이어야 합나다.");
		}
	}
</script>
</head>
<body>
	아이디 : <input type="text" id="id" size=10>
	패스워드 : <input type="password" id="pw" size=10>
	<button onclick="checkID()">검사</button>
</body>
</html>

대소문자 변환

toUppercase() : 문자열의 글자를 대문자로 변환
toLowerCase() : 문자열의 글자를 소문자로 변환

ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var s = "aBcDeF"
	var result1 = s.toLowerCase();	//소문자로 변경
	var result2 = s.toUpperCase();	//대문자로 변경
	document.writeln(result1);	//출력 abcdef 
	document.writeln(result2);	//출력 ABCDEF
</script>
</head>
<body>
</body>
</html>

문자열 붙이기

concat()
두개의 문자열을 합쳐준다. +연산자랑 동일한 결과를 얻을수 있음.
(주소 이어붙일때 사용하면 좋음)

ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var s1 = "문자열1";
	var s2 = "문자열2";
	
	var s3 = s1.concat(s2);
	document.write(s3 + "<br>");
	//결과 : 문자열1문자열2
</script>
</head>
<body>
</body>
</html>

문자열 검색

indexOf() 메서드는 문자열 안에서 주어진 텍스트가 처음 등장하는 위치를 반환한다.
속성
indexOf("찾고싶은 텍스트"); // 0부터 시작해서 찾음 띄어쓰기 포함
ex)

var s = "자바스크립트에 오신 것을 환영합니다.";
	var n = s.indexOf("환영");
	document.write(n+"<br>");

문자열 매칭

match(/찾을문자 /옵션)
ex)

<script type="text/javascript">
	var str = "Like father, like son.";
	
	result = str.match(/like/ig);
	// like를찾는다. i와 g는 옵션으로 insensitive, globally 를 의미한다.
	// insensitive : 대소문자 구분 없음    
    // globally : 문자열 내의 모든 패턴을 검색(위 예제에서 g가 없으면 뒤에 like는 출력되지 않음)
	document.writeln(result + "<br>");

참고한곳 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC

문자열 대체

replace()
문자열 안에서 주어진 값을 다른 값으로 대체한다. replace()도 정규식 사용가능함.

ex)
	var s = "Hong's number is 123-4567.";
	result = s.replace("Hong's", "Kim's");	//Hong's를 Kim's로 변경
	num = s.replace("-","");	//전화번호의 -를 뺄수도 있음
	document.writeln(result);
	document.writeln(num);

결과 : 
Kim's number is 123-4567.
Hong's number is 1234567.

문자열 쪼개기

split(delimiter[, limit])
문자열을 분리한 후에 각 항목을 가지고 있는 배열을 반환한다. split()를 이용해 문자열을 배열로 변환할 수 있다.

ex)
s = "One,Two,Three,Four,Five";
	array = s.split(',');	// ,(콤마)를 기준으로 문자를 자른다.
	for(i = 0; i < array.length; i++){	//자른 결과를 배열의 길이만큼 반복(배열로 반환받아서 저장되었기 때문)
		document.writeln(i + '-' + array[i] + '<br>');
	}
결과 :
0-One
1-Two
2-Three
3-Four
4-Five

문자열 리터럴과 문자열 객체

문자열(String)에는 2가지 종류가 있다.
문자열 리터럴(String Literal) : 데이터(값) 그자체를 리터럴이라고함 즉, 변수에 넣는 변하지 않는 데이터를 의미하는 것.
리터널 표기법 : 변수를 선언함과 동시에 그 값을 지정해주는 표기법을 말함.
문자열 객체(String Object) : object 타입의 문자열 객체

ex)
	var sLiteral = "문자열 리터럴";
	sObject = new String("문자열 객체");
	
	function change(strlit, strobj){
		strlit = 'Hello world';
		strobj = 'Hello world';	
	}
	
	change(sLiteral, sObject);
	document.writeln(sLiteral + "<br>");
	document.writeln(sObject + "<br>");

결과  :
문자열 리터럴
문자열 객체

Math 객체

Math객체안에 함수로 만들어져있으니 확인하고 사용하면됨.

ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script>
		function calc(type){			
			x = Number(document.calculator.number1.value);
			//calculator폼 안에 있는 input 태그의 number1 객체의 value값을 Number을 이용해 정수로 변환
			if(type == 1)
				y = Math.sin((x * Math.PI) / 180.0);
			else if(type == 2)
				y = Math.log(x);
			else if(type == 3)
				y = Math.sqrt(x);
			else if(type == 4)
				y = Math.abs(x);
			document.calculator.total.value = y;
		}
	</script>
</head>
<body>
	<form name="calculator">	
<!-- 	form태그를 이용해 name을 지정해주면 onclick 사용할때 편하게 값을 넘길수있음   -->
		입력 : <input type="text" name="number1"><br>
		계산결과 : <input type="text" name="total"><br>
		<input type="button" value="SIN" onclick="calc(1);">
		<input type="button" value="LOG" onclick="calc(2);">
		<input type="button" value="SQRT" onclick="calc(3);">
		<input type="button" value="ABS" onclick="calc(4);">
	</form>
</body>
</html>

Array

Array 객체 선언방법 정리

ex)
	var myArray1 = new Array();
	myArray1[0] = "apple";
	myArray1[1] = "banana";
	myArray1[2] = "orange";
	
	var myArray2 = new Array("apple","banana","orange");
	
	var myArray3 = ["apple","banana","orange"];

ex2)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function printArray(a){	//var a = myArray1;
		document.write("[ ");
		for(var i=0; i<a.length; i++){
			document.write(a[i]+" ");	
		}
		document.write(" ]<br>");
	}

	var myArray1 = new Array();
	myArray1[0] = "apple";
	myArray1[1] = "banana";
	myArray1[2] = "orange";
	
	var myArray2 = new Array("banana","orange","apple");
	
	var myArray3 = ["orange","apple","banana"];

	printArray(myArray1);
	printArray(myArray2);
	printArray(myArray3);
</script>
</head>
<body>

</body>
</html>

Array의 속성과 메서드

concat()
속성
concat(value1[value2[value...]])
전달된 인수를 배열의 끝에 추가한다. 인수는 배열일 수도 있다.

ex)
<script>
	var x = [1,2,3];
	var y = [4,5,6];
	var joined = x.concat(y);
	
	document.writeln(x);	//1,2,3
	document.writeln(joined);	//1,2,3,4,5,6
</script>

indexOf() 요소의 인덱스의 위치를 찾을때 사용
속성
indexOf(searchStr[, startIndex])
push(value), pop()
스택(stack) : LIFO(Last In First out)방식으로 가장 마지막에 삽인된 자료가 가장 먼저 삭제되는 '후입선출' 구조를 가짐.
데이터를 삽입할때 push,
데이터를 꺼낼때 pop
shift(), unshift()
shift() : 배열의 첫 번째 요소를 반환하고 이 첫 번째 요소를 배열에서 제거한다.
unshift와 함께 사용하면 자료구조 중의 하나인 큐를 구현할 수 있다.

큐(Queue) : FIFO(First In First Out)방식으로 먼저 들어온 것이 먼저 나가는 '선입선출' 구조를 가짐
삭제연산이 수행되는곳을 프론트(front)
삽입 연산이 이루어지는 곳은 리어(rear)
리어(rear)에서 이루어지는 삽입 연산을 인큐(Enqueue) 라고 부르고 프론트에서 이루어지는 삭제연산을 디큐(Dequeue)라고 부름

sort() : 배열을 알파벳순으로 정렬한다.
속성

sort(배열명);
sort(function(a,b){return a - b}); 숫자 정렬 함수

ex)
<script>
	var myArray1 =['z','a','b','e','f','n','y'];
	var myArray2 =[10, 7, 23, 99, 169, 19, 11, 1];
	
	myArray1.sort()
	document.writeln(myArray1+"<br>");
	myArray2.sort(function(a,b){return a - b});
	document.writeln(myArray2);
</script>

Array.slice([begin[, end]])
배열의 일부를 복사해서 새로운 배열로 반환함.
시작 인덱스가 없으면 0으로 가정하고, 종료인덱스가 없으면 배열의 끝까지 복사한다.

ex)
	var numbers = [1,2,3,4,5,6,7,8,9,10];
	var newArray = numbers.slice(5,8);
	document.writeln(newArray+"<br>"); 	결과 : 6,7,8

join(delimeter)
배열의 요소들을 하나의 문자열로 출력한다. 이 기능은 배열을 서버로 보낼 때, 아주 유용하다.

ex)
<script type="text/javascript">
	var fruits = ["apple","banana","peach"];
	var s = fruits.join("+");
	document.writeln(s + "<br>");	// 출력 : apple+banana+peach
</script>

filiter()
어떤 조건에 부합하는 요소만을 선택하여 새로운 배열로 만들어서 반환한다.

ex)
	var numbers = [10,20,30,40,50];
	function isBigEnough(element,index, array){
		return(element >= 30);
	}
	
	var filtered = numbers.filter(isBigEnough);
	document.write("필터링 된 배열: " + filtered);

2차원 배열
여러줄에 여러칸으로 이루어진 배열을 2차원 배열이라고 함.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2차원 배열</title>
	<script>
		//2차원 배열
		var matrix = [
			[1,2,3],	
			[4,5,6],
			[7,8,9]
		];
		
		document.write(matrix[0][0]+","+matrix[0][1]+","+matrix[0][2]+"<br>");
		document.write(matrix[1][0]+","+matrix[1][1]+","+matrix[1][2]+"<br>");
		document.write(matrix[2][0]+","+matrix[2][1]+","+matrix[2][2]+"<br>");
		
		document.write("matrix의 길이: "+ matrix.length+"<br>");
		document.write("matrix 열1의 길이: "+ matrix[1].length+"<br>");
		document.write("matrix 열2의 길이: "+ matrix[2].length+"<br>");
		
// 		matrix.splice(4,0,[10,11,12]);
// 		matrix.push(5,0,[40,50,60]);
// 		matrix.pop();		// 상위 배열 맨 끝 요소 삭제
// 		matrix.shift();		// 상위 배열 맨 앞 요소 삭제
		
		for(var i=0; i<3; i++){
			for(var j=0; j<3; j++){
				document.write(matrix[i][j]);
				if(j<2){
					document.write(",");
				}
			}
			document.write("<br>");
		}
		

	</script>
</head>
<body>

</body>
</html>

자바스크립트에서의 오류 처리

try-Catch 구조

자바스크립트에서는 오류를 예외(exception) 라는 이름으로 부른다.
즉 예외는, 프로그램의 실행중에 발생하는 이벤트라는 의미.

예외 발생 원인

개발자의 타이핑 오류
브라우저마다 지원하는 특징이 달라서 발생
사용자로부터 잘못된 입력값을 받아서
인터넷 서버 오류

속성
try
{
	// 예외가 발생할 수 있는 코드
}
catch(error)
{
	error.message;// 예외를 처리하는 코드
}
ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	var msg = "";
	function test(){
		try{	//오류가 없을때 정상적으로 try문 안에 있는게 실행됨 -> catch는 그럼 실행안됨
			aleert("Hello World!");
		}
		catch(error){	//오류가 있을때 catch문 안을 실행 -> try는 실행 x 
			//catch문 안에는 오류에 대한 설명을 보통 적어줌
			msg = "다음과 같은 오류가 발생하였음: " + error.message;
			alert(msg);
		}
	}
</script>
</head>
<body>
	<input type="button" value="try-catch 시험" onclick="test()" />
</body>
</html>

throw 문장

throw : 예외가 있던 없던 catch문으로 throw 뒤에 적힌 데이터를 전달

끝.

jjinny_0609

뉴비 개발자 입니다. velog 주소 : https://velog.io/@jjinny_0609 Github 주소 :