본문으로 바로가기

객체(2)

category 웹/JavaScript,JQurey 2018. 9. 9. 13:01

브라우저 객체 모델(BOM)

 

브라우저에 내장된 객체를 브라우저 객체 모델 이라고 합니다.

즉 창을 띄우거나 등등의 역학을 합니다.

 

window가 최상위 객체입니다.

window 객체의 메서드들을 표로 봅시다.

종류 

설명 

open("URL","새창 이름","새창 옵션") 

URL 페이지를 새창으로 나타냅니다. 

alert(data) 

경고 창 

prompt("질문","답변") 

질문과 답변 질의 창 

confirm("질문 내용")

질문 내용 확인 또는 취소(true or false) 

moveTo(x,y) 

새 창 위치 이동 

resizeTo(width,height) 

새 창의 크기 변경 

setInterval(function(){코드},일정시간간격) 

지속 일정 시간 간격으로 함수 호출 

setTimeout(function(){코드},일정시간간격) 

한 번 일정 시간 간격으로 호출 

 

open()메서드

기본형은 다음과 같습니다.

open("URL","새창 이름","새창 옵션") 

window.open("http://www.naver.com","naver","width=350,height=400,left=50,top=10,scrollbars=no");

즉 width는 너비 height는 높이 left top은 새창의 수평 수직 위치 scrollbars는 스크롤 바 숨김 노출을 설정합니다.

추가적으로 location은 주소 입력 영역 status는 새창의 상태 표시줄 영역 toolbars는 새창의 도구영역 을 설정합니다.

 

<winpopup.html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> window 객체 </title>
<style>
    *{margin: 0;padding: 0;}
</style>
</head>
<body>
    <p>
        <img src="images/window_object_1.jpg" usemap="#intro"
        alt="신간 책 소개" />
        <map name="intro" id="intro">
            <area shape="rect" coords="230,368,280,390" href="#" alt="창 닫기"
            onclick="window.close();" />
        </map>
    </p>
</body>
</html>

우선 winpopup.html을 통해 스타일 지정해주고 이미지를 넣습니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> window 객체 </title>
<script>
        window.open("winpopup.html", "pop1", "width=300, height=400, \
        left=300, top=50");
</script>
</head>
<body>
<h1>이지스 퍼블리싱</h1>
</body>
</html>

이 자바스크립 코드를 통해 open메소드를 이용해서 winpopup.html을 엽니다 .

직접 실행해보시기 바랍니다.

 

alert()메소드

alert()메소드는 경고창입니다.

alert("잘못 입력했습니다")를 쓰면

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        alert("잘못 입력했습니다.");
    </script>
    
</body>
</html>

 

위와 같은 결과가 나옵니다.

 

prompt()메서드

질의 응답 창입니다.

prompt("당신의 연령은?","0"):

당신의 연령을 입력하는 창이 뜨게됩니다.

 

 

confirm()메서드

확인 or 취소 창입니다.

confirm("정말로 삭제??");

 

setInterval()/clearInterval() 메시드

setInterval()메서드는 일정간격으로 코드를 실행시키고 clearInterval()은 그 메서드를 취소합니다.

 

3초는 3000입니다.

기본형은 다음과 같습니다.

var 참조 변수=setInterval(function(){코드},시간간격(ms));

var 참조 변수=setInterval("코드",시간간격);

 

var in=setInterval(function(){i++;},3000);는 3초마다 i를 1씩 증가시킵니다.

 

clearInterval(in);

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> window 객체 </title>
<script>
    var addNum = 0;
    var subNum = 1000;

    var auto_1 = setInterval(function () {
        addNum++;
        console.log("addNum: " + addNum);
    }, 3000);

    var auto_2 = setInterval(function () {
        subNum--;
        console.log("subNum: " + subNum);
    }, 3000);
</script>
</head>
<body>
    <h1>일정 시간 간격으로 값 증감시키기</h1>
    <p> 콘솔 패널을 열어 확인하세요.</p>
    <button onclick="clearInterval(auto_1)">증가 정지</button>
    <button onclick="clearInterval(auto_2)">감소 정지</button>
</body>
</html>

addNUm은 3초마다 1씩 증가 subNUm은 3초마다 1씩 감소입니다. body태그에 증가 정지 감소 정지 버튼을 누르면 이 메소드는 취소됩니다.

 

setTimeout()/clearTimeout()메서드

 

setTimeout()메서드는 일정 간격 지나면 코드 실행후 종료됩니다.

setTimeout()메소드를 재귀호출한다면 setInterval()코드와 동일하게 사용 가능합니다.

기본형은 다음과 같습니다.

var 참조 변수=setTimeout(){코드},시간));

var 참조 변수=setTimeout("코드",시간);

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> window 객체 </title>
<script>
    var addNum = 0;
    var auto=setTimeout(function( ) {
        addNum++;
        console.log(addNum);
    }, 5000);
</script>
</head>
<body>
<h1>일정 시간 간격으로 한번만 값 증감시키기</h1>
<p> 콘솔 패널을 열어 확인하세요.</p>
</body>
</html>

이 코드는 addNum이 5초 후에 한번 실행합니다.

 

screen 객체

사용자 모니터 정보를 제공합니다.

screen.속성을 통해 이용가능합니다.

 

종류 

설명 

screen.width 

너비 값 반환 

screen.height 

높잇 값 반환 

screen.availWidth 

작업 표시줄 제외 너비 값 반환 

screen.availHeight 

작업 표시줄 제외 높잇 값 반환 

screen.colorDepth 

사용 ㅈ 모니터가 표현 가능한 컬러 bit 반환 

 

location 객체

사용자 브라우저 관련 속성과 메서드 제공합니다.

reload는 새로고침

location.href는 사용자 브라우저 URL 경로 값 반환해주고

location.href는 주소로 변경도 가능하고

location.reload()는 새로고침 역할을 합니다.

 

종류 

설명 

location.href 

주소 영역 설정 URL 반환 

location.hash 

url 해시값 반환 

location.hostname 

호스트 네임 설정 반환 

location.host 

호스트 이름 포트 번호  반환 

location.protocol 

프로토콜 반 

location.search 

location.reload()

쿼리를 반환 

새로고침(f5)

 

 

history 객체   

사용자가 방문 사이트를 남기고 다시 돌아갈 수 있는 기능을 합니다.

종류 

설명 

history.back() 

이전 방문 사이트로 이동 

history.forward() 

다음 방문 사이트로 이동 

history.go(이동 숫자) 

-1입력시 1단계 이전 사이트로 이동 

history.length 

방문 기록 저장 목록 개수 반환 

 

navigator객체

방문자가 사용하는 브라우저 정보 OS 정보 제공

 

'웹 > JavaScript,JQurey' 카테고리의 다른 글

JQuery 준비하기  (0) 2019.02.25
JavaScript 함수  (0) 2019.02.25
객체(수정)  (0) 2018.09.07
제어문(선택문과 반복문)  (0) 2018.09.06
제어문(조건문에 대해)  (0) 2018.09.05
댓글 , 엮인글
플밍장군연구소(이정찬)
블로그 이미지 플밍장군 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바