티스토리 뷰

카테고리 없음

함수/브라우저객체/history/location/navigator/screen/윈도우 객체 메서드

one-dy 2025. 5. 26. 10:01

브라우저 객체 Browser Object Model (BOM)

브라우저에 내장된 객체를 '브라우저 객체'라고 한다.

브라우저 객체의 최상위 객체는 window라고 부르며 window가 곧 브라우저를 의미한다. 

window객체 안에는 여러 하위 객체가 포함되어 있다. 즉, 계층적 구조로 이루어져 있고, 이를 브라우저 객체 모델이라고 한다. 

window객체의 하위 객체로는 document, screen, location, history, navigator가 있다.

window객체 

브라우저 객체의 최상위 객체를 말한다. 

[메서드]

1. open("url 또는 경로", "새 창 이름", "새 창 옵션") : url또는 경로의 페이지를 새 창으로 연다.

2. alert("메세지") : 경고창이라고 부르고, 사용자에게 경고 문구나 안내를 하기 위한 창. 사용자가 확인 버튼을 누르면 alert() 다음 줄의 코드를 실행한다. 

3. prompt("질문", "기본응답")

: 질의 응답창. 사용자한테 질문하여 어떤 응답을 받고 싶을 때 사용한다. 사용자가 입력한 모든 내용은 문자열로 반환된다.

4. confirm("질문")

: 컨펌창. 확인 취소창이라고 하기도 함. 확인 버튼을 누르면 true를 반환하고 취소를 누르면 false값을 반환한다.

5. moveTo(x,y)

: 지정한 새 창의 위치를 이동한다.

6. resizeTo(width, height)

: 지정한 새 창의 크기를 지정한다.

7. setInterval( function(){자바스크립트 코드;}, 시간간격)

: 일정한 시간 각격으로 자바스크립트 코드를 지속적으로 실행한다.

8. setTimeout( function(){자바스크립트 코드;}, 시간간격)

: 일정한 시간이 지나면 자바스크립트 코드를 한번 실행하고 종료한다.

윈도우 객체 메서드 

일정한 시간 간격으로 코드 실행하기 

일정한 시간 간격으로 특정 자바스크립트 코드를 실행하려면 setInterval()메서드와 setTimeout()메서드를 사용할 수 있다.

setInterval()메서드는 일정한 시간 간격으로 자바스크립트 코드를 무한히 반복한다.

특정 시점이 되면 코드를 멈추라고 해주어야 멈출 수 있다.

setTimeout()메서드는 일정 시간을 잠시 기다렸다가 자바 스크립트 코드를 한 번 실행한다.

실행한 이후에는 자동으로 메서드를 종료한다. 

setInterval()은 코드를 일정한 간격으로 반복 실행하고

clearInterval()메서드는 setInterval()메서드를 취소한다.


      [기본형]
     1. var 참조변수 = setInterval(function(){코드} , 시간간격(ms)); ★
     2. var 참조변수 = setInterval("코드" , 시간간격(ms));

     3. var 참조변수 = clearInterval(setInterval을 담고있는 참조변수)
    -->

    <script>
      var addNum = 0;
      var subNum = 1000;

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

      var auto_2 = setInterval(function () {
        subNum--;
        console.log('subNum :' + subNum);
      }, 1000);
    </script>

    <button type="button" onclick="clearInterval(auto_1)">증가 정지</button>
    <button type="button" onclick="clearInterval(auto_2)">감소 정지</button>
  </body>

문자열 객체 String 

문자를 객체로 취급하는 것으로 일반적인 문자형 데이터가 곧 문자열 객체이다.

자바스크립트에서 가장 많이 사용되는 객체이다. 

문자열 객체를 생성할 때에는 new String("문자형 데이터")를 넣어 표현할  수 있고 더 간단하게 많이 쓰는 방식은 ""(따옴표)로 표현한다.

 <title>문자열 객체 실습</title>
  </head>
  <body>
    <!--
      1. 방문자로부터 사용자의 이름을 영문으로 입력받아 소문자로 작성
         되었다면 대문자로 바꿔 화면에 출력하기

      2. 사용자에게 전화번호를 입력받아 뒤 네자리가 노출되지 않도록
         "****"로 표현해주세요.
         예시 : "0101234****" , "021234****", "0321234****"
         -->

    <script>
      var userName = prompt('영문 이름을 입력해주세요.');
      document.write(userName.toLocaleUpperCase(), '<br>');

      var userNum = prompt('전화번호를 입력해주세요.');

      var result = userNum.substring(0, userNum.length - 4) + '****';

      document.write(result);
    </script>

 

 /*
        이메일 유효성 검사
        =====================
        사용자의 이메일이 유효한 이메일인지 아닌지 판단하는 검사.
        이메일이 유효한지 검사하려면
        1. '@'가 있는지 확인해야한다.
        2. 유효한 url을 포함하고 있는지를 판단해야 한다. (.com, .net...)
      */

      var userEmail = prompt('당신의 이메일주소는?');
      //유효한 url정보들
      var arrUrl = ['.co.kr', '.com', '.go.kr', '.net', '.or.kr'];

      //유효성검사를 단계별로 진행해서 검사를 통과하면 true로 바꿈
      var check1 = false;
      var check2 = false;

      //userEmail에서 @를 찾아 인덱스번호를 반환함.
      //@가 없다면 indexOf가 -1을 반환하므로 check1은 false를 유지함
      if (userEmail.indexOf('@') > 0) check1 = true;

      // arrUrl배열 안을 인덱스 0번부터 차례로 순회한다
      for (i in arrUrl) {
        //입력한 이메일과 arrUrldml단어를 하나씩 비교해서 1개의 데이터라도
        //일치하면 check2를 true로 바꾼다.

        if (userEmail.indexOf(arrUrl[i]) > 0) {
          check2 = true;
        }
      }

      //check1도 true고 check2도 true일 경우 (유효성검사 통과)
      if (check1 && check2) {
        document.write('환영합니다.' + userEmail + '님!');
      } else {
        //유효성검사 미통과
        alert('유효한 이메일이 아닙니다.');
      }
    </script>

 

history 객체 

history객체는 사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공한다. 

[기본형]

1. history.속성;

2. history.메서드();

3. history.메서드(값);

 

[속성, 메서드 종류]

1. history.back() : 페이지 뒤로 가기 

2. history.forward() : 페이지 앞으로 가기 

3. history.go(숫자) : 음수면 페이지 뒤로가기, 양수면 앞으로 가기. -2라고 하면 2페이지 이전 사이트로 이동한다.

4. history.length : 총 방문기록의 갯수를 반환한다.

    <a href="http://naver.com">네이버로 이동</a>
    <br />
    <button type="button" onclick="history.go(1)">페이지 앞으로가기</button>

 

<title>과제</title>
  </head>
  <body>
    <!--
      '배열객체'와 '수학객체'를 이용하여 랜덤으로 점메추해주는
      코드를 작성해주세요.
      ------------------------------------------------------------
      점심시간에 "짜장면", "돈까스", "된장국", "김치찌개", "회덮밥", "마라탕"중
      어떤 메뉴로 선택할 지 랜덤으로 추천하는 코드 만들기~!
       
      [조건]
      1. 배열객체를 이용하여 위의 메뉴들을 변수 menu에 참조하기
      2. Math.random()메서드랑 배열의 데이터 총 개수를 이용하여
         배열 인덱스 값이 랜덤으로 나와야 한다.
    -->
 <script>
      var menu = ["짜장면", "돈가스", "된장국", "김치찌개", "회덮밥", "마라탕"];

      var menuNum = Math.floor(Math.random() * menu.length);

      document.write(randomMenu);

      //switch문을 쓰면 메뉴가 줄어들거나 늘어나면 대응하기 힘듦.
    </script>

스크린 객체(screen)

사용자의 모니터 정보(속성)을 제공하는 객체 

예를 들어 모니터의 넓이, 높이 또는 컬러 표현 bit를 반환한다. 

[기본형]

screen.속성;

[프로퍼티 종류]

1. screen.width : 화면의 넓이값을 반환한다.2. screen.height : 화면의 높이값을 반환한다.3. screen.availWidth : 작업 표시줄을 제외한 화면의 넓이값을 반환한다.4. screen.availHeight : 작업 표시줄을 제외한 화면의 높이값을 반환한다.5. screen.colorDepth : 사용자 모니터가 표현 가능한 컬러 bit를 반환한다.

    <script>
      document.write('화면 넓이 : ' + screen.width, '<br>');
      document.write(
        '작업표시줄 제외 화면 넓이 : ' + screen.availWidth,
        '<br>'
      );

      document.write('화면 높이 : ' + screen.height, '<br>');
      document.write(
        '작업표시줄 제외 화면 넓이 : ' + screen.availHeight,
        '<br>'
      );

      document.write('화면 컬러 : ' + screen.colorDepth + 'bit', '<br>');
    </script>

location객체 

location객체는 사용자 브라우저에 있는 주소표시줄에 관련된 속성과 메서드를 제공한다. 

현재 url에 대한 정보와 새로고침 메서드를 제공한다. 

 

[기본형]

location.속성;

location.메서드();

[속성]

1. location.href : 웹 주소 url을 변경하거나 현재 url을 반환한다.

-location.href="url주소"; ==> url을 변경

-location.href; ==> 현재 url 반환 

2. location.hash : url의 해시값(#에 명시된 값)을 반환한다.

3. location.hostname : url의 호스트 이름을 설정하거나 반환한다.

4. location.host : url의 호스트 이름과 포트 번호를 반환한다.

5. location.protocol : url의 프로토콜을 반환한다.

6. location.search : url의 쿼리 요청값을 반환한다.

 

[메서드]

location.reload() : 새로고침(F5)

    <script>
      document.write('현재 url 주소는? ' + location.href);
    </script>

navigator객체

navigator 객체는 현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체이다. 

 

[기본형]

navigator.속성

 

[속성]

1. navigator.appCodeName

: 현재 브라우저의 코드명을 반환한다. 현시점의 모든 브라우저는 "Mozilla"를 반환한다.

2. navigator.appName

: 현재 브라우저의 이름을 반환한다. 현시점의 모든 브라우저는 "Netscape"를 반환한다.

3. navigator.appVersion

: 현재 브라우저의 버전 정보를 반환한다. 현 시점의 모든 브라우저는 "5.0(Windows)"를 반환한다.

4. navigator.language

: 브라우저가 사용하고 있는 언어를 반환한다. 한국어면 "ko"를 반환한다.

5. navigator.product 

: 브라우저의 엔진 이름을 반환한다. 크롬의 경우 "Gecko"를 반환한다.

6. navigator.platform 

: 현재 컴퓨터의 운영체제 정보를 반환한다. 운영체제가 윈도우이고 시스템 종류가 64bit라도 브라우저가 32bit로 설정되어 있으면 "Win32"로 나온다. 

7. navigator.onLine

: 온라인 상태에 대한 여부를 반환한다. 만약 인터넷이 정상적으로 연결되면 true값을 반환한다.

8. navigator.userAgent

: 브라우저와 운영체제의 종합정보를 반환한다.

    <script>
      document.write('운영체제와 브라우저 정보는? ' + navigator.userAgent);
    </script>

 

함수 function

함수란 여러 동작을 묶은 하나의 코드 덩어리

변수에는 여러 줄의 코드를 저장할 수 없다. 만약 코드 여러 줄을 저장하고 싶다면 '함수'를 사용한다. 

함수의 특징은 코드를 묶어 놓으면 자바스크립트가 기억하고 있다가 실행하라는 명령을 내리는 순간 실행한다. 

즉, 코드를 바로 실행하지 않고 '실행해라!'라는 명령이 있을 경우에만 실행한다. 

함수는 미리 정의를 해두었다가, 필요할 때마다 함수 호출문을 이용하여 실행할 수 있다. 즉, 재사용할수 있다는 장점이 있다.

변수와 함수의 차이점 

[변수]

· 1개의 데이터만 저장 가능하다. 

· var, let, const라는 키워드를 이용하여 선언한다.

· 문자형, 숫자형, 논리형, 빈데이터 등을 저장한다.

· 객체를 참조한다.

· 연산식과 같은 '식'을 참조할 수 있다.

 

[함수]

· 자바 스크립트 코드를 저장한다.

· function이라는 키워드를 이용하여 선언한다.

· for문, if문, switch문이나 출력문 등 문장을 저장하고 데이터(결과값)를 반환할 수 있다.

 

일반 함수 정의문

함수는 크게 두 종류로 나눠진다. '일반 함수 정의문' / '함수 표현식'

'일반 함수 정의문'은

· 말 그대로 문장이라서 변수에 담을 수 없다. 

· 일반 함수 정의문에는 이름을 붙일 수 있다 

· "이 구역은 함수 정의문의 구역이니 '함수명'으로 코드들을 보관해줘!"라는 뜻과 같다.

· 함수 정의문({...}) 안에 작성된 코드는 즉시 실행되지 않는다.

· 함수는 메모리(ram)에 할당되어 대기하다가 함수가 호출되면 실행한다.

· 함수 호출 시 '호이스팅 기술'을 지원한다. **익명함수는 호이스팅 지원 안함!

 

***호이스팅이란 '물건을 끌어올리다'라는 뜻으로, 함수 호출문이 함수 정의문보다 위에 있더라도 함수 정의문을 최상단으로 끌어올려 함수를 실행하도록 만드는 기술을 말함. 자바스크립트 해석기는 코드를 첫 줄부터 먼저 쭉 읽어나가면서 function이라는 키워드를 만나게 되면 미리 메모리 공간 안에 저장한다. 그렇게 미리 일반 함수들을 기억하고 있다가 함수 호출문을 만나면 코드를 실행한다. 그래서 일반 함수 정의문은 함수 호출문이 함수정의문보다 먼저 등장하더라도 함수를 정상적으로 실행한다. 이것이 바로 호이스팅의 개념이다.

 

[기본형]

함수명();

 

function 함수명(){코드;} => 기능에 관련된 코드를 함수명으로 저장

함수명(); => 함수 호출문. 이 부분에서 함수를 실행한다. 

 

익명 함수 표현식 

익명함수는 이름이 없는 함수로, '식'이다. 

즉, 변수에 넣어 사용할 수 있다. 이름이 없기 때문에 이름을 대신해줄 변수에 넣어 변수명으로 호출하여 사용한다. 

일반 함수와 다르게 호이스팅 기술을 지원하지 않는다. 즉, 함수 호출문이 정의문보다 먼저 등장할 수 없다.

 

[기본형]

var 변수명 = function(){  코드; } =>익명 함수 표현식 선언 

변수명();  => 익명함수 호출문.

    <script>
      var count = 0;

      addNum(); //함수의 호이스팅. 호출문이 정의문보다 먼저 등장해도 실행한다.

      //일반함수
      function addNum() {
        count++;
        document.write('count : ' + count, '<br/>');
      }
      addNum(); //addNum 일반 함수 호출

      //익명함수

      //theFnc();   => theFnc는 익명함수이므로 호이스팅X. 함수호출문이 함수보다 먼저 등장할 수 없음

      var theFnc = function () {
        count++;
        document.write('count : ' + count, '<br/>');
      };

      theFnc(); //theFnc() 익명함수 호출
    </script>

 

 

<title>일반함수 실습</title>
  </head>
  <body id="the_body">
    <script>
      /*  배경색 바꾸기 버튼을 누를때마다 배경색이 바뀌는 함수 만들기 */
      var bgColor = ['white', 'pink', 'skyblue', 'tomato', 'seagreen', 'navy'];

      var i = 0; //bgColor의 인덱스 번호를 카운트 해줄 카운트 변수

      function changeColor() {
        i++;

        // i가 bgColor의 가장 큰 인덱스번호보다 커지면 다시 0으로 만들기
        if (i >= bgColor.length) {
          i = 0;
        }

        //id값이 'the_body'인 태그 요소를 찾아 변수 theBody안에 할당
        var theBody = document.getElementById('the_body');
        console.log(theBody);

        //body태그에 css(= .style)를 적용할건데
        // backgroundColor를 적용할 것이다.
        //적용할 값은 bgColor배열의 index번호에 해당하는 값으로 적용
        theBody.style.backgroundColor = bgColor[i];
      }
    </script>

    <button type="button" onclick="changeColor();">배경색바꾸기</button>
  </body>