728x90
1. 브라우저 객체
브라우저에 내장 된 객체를 '브라우저 객체' 라고 하며, 최상위 객체는 window 이다. window 객체에는 하위 객체가 포함 되어 있다.
2. window 객체
① open( )
지정한 url 페이지를 새 브라우저 창에 나타낼 수 있다.
open("url","새창이름", "새창옵션")
window.open("http://r-0o0-j.tistory.com", 'yeriel티스토리',"width=350, height=400, left=50,top=10, scrollbars=no")
새 창의 옵션 종류
① width : 새 창의 너비 지정
② height : 새 창의 높이 지정
③ left : 새 창의 위치 지정 할 때 가로 위치 설정
④ top : 새 창의 위치 지정 할 때 세로 위치 설정
⑤ scrollbars : 새 창의 스크롤바의 숨김 / 노출을 설정 (숨김 =no, 노출 = yes)
open( ) 과 close( ) 를 이용하여 popup 쿠키 설정 하기
[1] 오늘 하루 더 이상 보이지 않기
<script type="text/javascript">
/*
실습5.
1. 아래의 popupOpen 버튼 클릭시 팝업을 띄우시오.
2. popupCall.html에서 팝업 닫기 버튼 눌렀을 경우 팝업을 닫도록 하시오.
띄울 팝업 - popupCall.html
사이즈 - 가로 : 300, 세로 : 500, 스크롤 없음
*/
</script>
</head>
<body>
<button type="button" id ="popupOpen">팝업띄우기</button>
<script type="text/javascript">
var popupOpen = document.getElementById('popupOpen');
popupOpen.addEventListener('click',function(){
var cName = getCookie('popupCheck');
if(cName != 'Y'){
window.open('popupCall.html','팝업열기','width=300,height=500,scrollbars=no')
}
});
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
</script>
</body><body>
<button type="button" id = popupClose>팝업닫기</button>
<br>
오늘 하루 더 이상 보이지 않기 <input type="checkbox"id="popupOpenCheck">
<script type="text/javascript">
var popupClose = document.getElementById('popupClose');
popupClose.addEventListener('click',function(){
var popupOpenCheck = document.getElementById('popupOpenCheck');
if(popupOpenCheck.checked){
setCookie('popupCheck','Y',1);
}
window.close();
});
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
</script>
</body>
[2] id 저장하기
<body>
<!--
실습 6. 아이디 입력 후 '아이디 저장하기' 버튼 클릭시
쿠키로 아이디를 저장하고 새로고침 이후에도 아이디가 노출 되도록 하시오.
-->
<input type="text" id = "userId" placeholder="아이디 입력">
<button type="button" id ="idSave"> 아이디 저장하기</button>
<script type="text/javascript">
var idSave = document.getElementById('idSave');
idSave.addEventListener('click',function(){
var userId = document.getElementById('userId');
var userIdValue = userId.value;
if(userIdValue !='' && userIdValue != undefined){
setCookie('userId',userIdValue,1);
}
});
var getUserId = getCookie('userId');
if(getUserId != ''){
var userId = document.getElementById('userId');
userId.value = getUserId;
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
</script>
</body>
② alert( )
경고창을 나타낼 수 있다.
alert('경고메세지');
③ prompt( )
질의응답 창을 나타낼 수 있다.
prompt('질의 내용','기본답변');
③ confirm( )
확인 / 취소 창을 나타낼 수 있다.
confirm('질의 내용');
④ setInterval( ) / clearInterval( )
일정 시간 마다 메서드 실행 시키고 종료하는 메서드
접속시간을 표기 할 때 유용
var i = 0;
var interval = setInterval(function(){
console.log(i);
if(i>10){
clearInterval(interval)
}
i++;
}, 3000);
⑤ setTimeout( ) / clearTimeout( )
일정 시간이 지나면 한 번 실행
일정 시간이 지나면 로그아웃 등을 할 때 유용
setTimeout(function(){
console.log('3초 후 실행');
},3000);3. screen 객체
사용자 모니터 정보(속성)을 제공 하는 객체
4. location 객체
사용자 브라우저(url)와 관련 된 속성과 메서드를 제공하는 객체
location.속성;
loaction.메서드();① location.href; 사용자 브라우저의 url 경로 값을 가져온다.
② location.reload( ); 현재페이지를 재갱신한다.
5. history 객체
방문자의 이동 정보를 가지고 있다.
history.속성;
history.메서드( );
history.메서드(n);① history.back( ); 이전 페이지로 이동
② history.go(숫자); 숫자에 등록된 숫자 만큼 페이지 이동 (양수 = 앞으로 , 음수 = 뒤로)
6. navigator 객체
현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체이다.
반응형
'Frontend > Javascript' 카테고리의 다른 글
| script에서 session 값 가져오기 (0) | 2021.04.27 |
|---|---|
| [javascript] 문자열 포함 확인하기 /includes/match/indexOf/lastIndexOf (0) | 2021.04.16 |
| javascript 이벤트 실습 (0) | 2020.03.17 |
| javascript 문자열 객체 (0) | 2020.03.17 |
| javascript - 문서 객체 모델 style - display, tab 버튼 만들기 (0) | 2020.03.17 |
댓글