자바스크립트
confirm() 함수
객체
객체(object)는 사물의 속성과 동작을 묶어서 표현하는 기법
객체의 2가지 종류
내장 객체(bulit-in object): 생성자가 미리 작성되어 있다.
사용자 정의 객체(custom object): 사용자가 생성자를 정의한다.
내장 객체들은 생성자를 정의하지 않고도 사용이 가능하다.
Date, String, Array와 같은 객체들이 내장 객체이다.
new Array(“apple”, “Orange”);
New Array();
객체 생성 방법
객체를 생성하는 2가지 방법
객체를 객체 리터럴로부터 직접 생성한다.
생성자 함수를 이용하여 객체를 정의하고 new 연산자를 통하여 객체의 인스턴스를 생성한다.
var arr=[ 2, 4, 6, 10,34 ]
var arr = new Array(1, 3, 4, 5, 6);
객체 상수로부터 객체 생성
생성자를 이용한 객체 생성
람다함수에서 this는 람다함수 자신을 가리킴.
객체의 함수는 this를 사용하려면 람다함수로 쓰면 안됨.
필드에 선언된 객체는 var를 쓰던 안쓰던 전역변수가 됨
Array 객체의 메소드
속성 - length
메소드
indexOf(item, start) 배열에서 요소를 찾아 위치를 리턴한다.
lastIndexOf(item, start) 역순으로 요소를 찾아 위치를 리턴한다.
push(a,b,c,…) 배열 끝에 요소를 추가한다.
pop() 마지막 요소를 제거하고 리턴한다.
shift() 배열 처음의 원소를 제거하고 리턴한다.
unshift(a,b,c,…) 배열 처음에 요소를 추가한다.
reverse() 배열을 거꾸로 뒤집는다.
sort(sortfunction) 배열을 정렬한다. 인수로 값을 비교하는 함수를 지정할 수 있으며 생략시 사전순으로 정렬된다.
** 많이 쓰임 slice(start, end) start ~ end 범위의 요소를 따로 떼어내어 새로운 배열을 만든다.
splice(index, n, a, b, c, …) 배열 일부를 수정한다. 일정 범위를 삭제하고 새로운 요소를 삽입힌다.
a.concat(b,c…) 여러 개의 배열을 합친다.
join(deli) 배열 요소를 하나의 문자열로 합친다. 구분자를 지정할 수 있으며 생략시 콤마로 구분한다.
Confirm 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
proc1 = () => {
out = document.getElementById('result1');
str = "";
while(true){
dan = prompt("단수를 입력...");
str += `${dan} 단----<br>`
for(k=1; k<=9; k++){
str += `${dan} * ${k} = ${dan*k} <br>`;
}
out.innerHTML = str;
//
cont = window.confirm("계속하시겠습니까?")
if(!cont)break;
}
// for(i=1; i<=3; i++){
// dan = prompt("단수를 입력하세요");
// str += dan + "단----<br>"
// for(k=1; k<=9; k++){
// str += `${dan} * ${k} = ${dan*k} <br>`;
// }
// out.innerHTML = str;
// }
}
</script>
</head>
<body>
<div class="box">
confirm()함수<br>
사용자로부터 대답을 요구한다<br>
리턴 값을 true/false<br>
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
</body>
</html>객체 리터럴 Rect
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
//객체 정의 ---------------------------------------
rect = {
width : 10,
height : 9,
getArea : function() {
return this.width * this.height;
},
getCircum : function(){
return (this.width + this.height) * 2;
}
}
//------------------------------------------------
function proc1(){
//객체 사용 -
str = "가로 : " + rect.width + "<br>";
str += `세로: ${rect.width} <br>`;
area = rect.getArea();
str += "면적 : " + area + "<br>";
dulre = rect.getCircum();
str += "둘레 : " + rect.getCircum() + "<br>";
document.getElementById('result1').innerHTML = str;
rect.width
rect.height
area = rect.getArea()
dulre = rect.getCircum();
}
function proc2(){
//객체 사용 -
//가로, 세로 값을 입력받는다
garo = parseInt(prompt("가로 입력.."));
sero = parseInt(prompt("세로 입력.."));
rect.width = garo;
rect.height = sero;
//name속성 추가
rect.name = "네모";
//면적 둘레 구하기 - str출력내용 속에서 직접 호출
//출력 내용
str = "이름 : " + rect.name + "<br>";
str += "가로 : " + rect.width + "<br>";
str += `세로: ${rect.height} <br>`;
area = rect.getArea();
str += "면적 : " + rect.getArea() + "<br>";
//dulre = rect.getCircum();
str += "둘레 : " + rect.getCircum() + "<br>";
document.getElementById('result2').innerHTML = str;
}
</script>
</head>
<body>
<div class="box">
객체 생성 리터럴<br>
rect(사각형)정의<br>
속성 : width, height<br>
메소드 : 면적구하기, 둘레구하기<br>
new를 이용하여 객체를 생성하지 않는다<br>
rect.width rect.height <br>
rect.getArea(), rect.getCircum()<br>
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
<div class="box">
객체 생성 리터럴<br>
rect(사각형)정의<br>
객체는 동적으로 속성이나 메소드를 추가할 수 있다<br>
rect.name = "네모"
<br>
<button type="button" onclick="proc2()">확인</button>
<div id="result2"></div>
</div>
</body>
</html>객체 리터럴 Circle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/circleprint.js"></script>
<script type="text/javascript">
//객체 정의
var circle = {
rad : 3,
getArea : function(){//면적 구하기
return this.rad * 3.14
},
getCircum : function(){//둘레 구하기
return this.rad * 2 * 3.14
}
}
function proc1(){
//객체 사용
//출력
print('result1')
}
function proc2(){
//출력
}
</script>
</head>
<body>
<h3>외부 스크립트 작성 참조</h3>
<script src="경로/파일이름"></script><br>
<div class="box">
객체 리터럴 - Circle
속성 : 반지름:rad
메소드 : 면적구하기, 둘레구하기
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
</body>
</html>
객체 생성자 Rect
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/rectobject.js" type="text/javascript"></script>
<script type="text/javascript">
//외부 스크립트에 정의
//function Rect(width, height, name){}
function proc1(){
//객체생성
rect = new Rect(6, 10, "네모");
//출력
print('result1');
}
function proc2(){
rect = new Rect(3,10, "사각형");
print('result2');
}
</script>
</head>
<body>
Rect객체를 외부 스크립트에서 정의
<div class="box">
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1"></div>
</div>
<div class="box">
<br>
<button type="button" onclick="proc2()">확인</button>
<div id="result2"></div>
</div>
</body>
</html>