[JavaScript] 2021.01.22. DAY_62 브라우저_window객체
2021. 1. 22. 15:31ㆍWeb_Front-end/JavaScript
브라우저의 객체들
◎ window객체
※ prompt
prompt(출력할 메세지, default입력값);
prompt(출력할메세지); //이렇게만 사용하면 빈창이 나온다
사용자에게 간단한 문자열을 입력받을 수 있다
아래처럼 prompt를 사용해서, 사용자의 이름을 받아서 출력해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>alert and prompt</title>
<script type="text/javascript">
let name = prompt("이름을 입력하세요","default값");
alert(`반갑습니다 ${name}님`)
</script>
</head>
<body>
</body>
</html>
※ confirm
사용자에게 묻는 함수
아래처럼 실행하면, 무조건 삭제를 실행하게 한다
따라서, 사용자에게 아래와같이 삭제여부를 물어보자,
확인 : true // 취소 : false 가 반환된다
사용자가 삭제여부를 선택할 수 있는 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("btnDelete").onclick = function() {
let re = confirm("정말로 삭제하시겠습니까?");
if(re == true){//확인을 누르면 true반환
alert("삭제하였습니다");
}else{//취소를 누르면 false반환
alert("삭제를 취소하였습니다");
}
}
}
</script>
</head>
<body>
<button id="btnDelete">삭제</button>
</body>
</html>
※ window객체의 속성들
window객체의 여러 속성들을 확인해보는 코드를 작성해보자 (자세한 속성들은 w3school참고하기)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
let r = "<ul>";
//window의 모든 속성을 div안에 넣어보자
//window의 속성을 하나씩 꺼내온다
for(i in window){
r += `<li>속성명${i}=====>값${window[i]}</li>`;
}
r += "</ul>";
document.getElementById("result").innerHTML = r;
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
이외에도 다른 내장객체들의 속성들을 확인해 볼 수 있다
※ window 객체의 width, height 알아보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window객체의 width, height</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("btnOK").onclick = function() {
let r = "<ul>";
r += `<li>innerWidth: ${window.innerWidth}</li>`;
r += `<li>innerHeight: ${window.innerHeight}</li>`;
r += `<li>outerWidth: ${window.outerWidth}</li>`;
r += `<li>outerHeight: ${window.outerHeight}</li>`;
r += "</ul>";
document.getElementById("result").innerHTML = r;
}
}
</script>
</head>
<body>
<div id="result"></div>
<button id="btnOK">window크기정보 확인</button>
</body>
</html>
'Web_Front-end > JavaScript' 카테고리의 다른 글
| [JavaScript] 2021.01.22. DAY_62 브라우저_navigator객체 (0) | 2021.01.22 |
|---|---|
| [JavaScript] 2021.01.22. DAY_62 브라우저_location 객체 (0) | 2021.01.22 |
| [JavaScript] 2021.01.22. DAY_62 예외처리 (0) | 2021.01.22 |
| [JavaScript] 2021.01.22. DAY_62 JSON객체의 메소드_stringify(), parse() (0) | 2021.01.22 |
| [JavaScript] 2021.01.22. DAY_62 프로토타입에 메소드 추가하기 (0) | 2021.01.22 |