객체 (Window, screen, location, history, navigator)

FrontEnd/JavaScript

by H_Develop 2022. 7. 6. 08:36

window 객체 : 창에 관련된 속성
alert()

open(url, name, specs, replace)

close()

moveTo(x,y) {moveTo(100,100) px단위로 이동시킨다.}
print()

prompt()

resizeTo(x,y) {윈도우 화면 x,y의 크기를 가진다}

resizeBy(x,y) {x,y만큼 증가시킨다.}
focus()

screen 객체 : 스크린 화면에 대한 속성
availwidth()

availheigth(작업표시줄 제외)

colorDepth()

width()

height()
컴퓨터 또는 모바일 스크린, 화면의 속성.
앞에서 window 객체의 속성은 브라우저 창에 관련된 것으로 너비와 높이를 나타낸다

    <script>
        var newWindow;

        function openWin() {		// "" 안에 https://www.naver.com를 넣으면 네이버로 이동되어 창의 크기가 정해짐
            newWindow = window.open("","새창","width=250, height=80, left=230, top=100");
            newWindow.document.write("<p>새 창이 열렸어요</p>");
        }
        function resizeWin() {
            newWindow.resizeTo(300,300);
            newWindow.focus();
        }
    </script>
</head>
<body>
    <button onclick="openWin()">새창 열기</button>
    <button onclick="resizeWin()">창 크기 조절하기</button>
</body>

    <script>  
        var a = "- 화면 전체의 너비와 높이 : " + screen.width + "px X ";
        a += screen.height + "px<br>";
        document.write(a);
        var b = "- 화면에서 작업 표시줄 제외한 너비와 높이 : " + screen.availWidth + "px X ";
        b += screen.availHeight + "px<br>";
        document.write(b);
        var c = "- 브라우저 전체 창의 너비와 높이 : " + window.outerWidth + "px X ";
        c += window.outerHeight + "px<br>";
        document.write(c);
        var d = "- 브라우저 창의 내용 영역의 너비와 높이 : " + window.innerWidth + "px X ";
        d += window.innerHeight + "px<br>";
        document.write(d);
    </script>

Location 객체 : 현재 URL 주소에 관련된 정보를 가지고 있다. 브라우저 창에 보여질 URL 주소 설정 가능.
HTML의 <a> 태그처럼, 자바스크립트를 이용하여 특정 사이트의 URL 페이지로 이동 가능.
hash(URL에서 #으로 시작되는 부분), host(호스트_명이나 포트), hostname(호스트_명 설정), href(전체URL),
pathname(URL 경로), port(포트 설정), protocol(프로토콜), search(?로 시작), reload(새로고침), replace(새로운 URL로 대체)

    <script>  
        function movePage() {
            location.replace("https://www.naver.com");
            document.getElementById("1").innerHTML=onpenWin();
        }
    </script>
</head>
<body>
    <button onclick="movePage()">눌러</button>
</body>

History 객체 : 방문했던 URL 기록
length(URL 수), back(이전 URL), forward(다음 URL), go(특정 URL로 이동)

    <script>
        function goBack() {
            history.go(-1);
        }
    </script>
</head>
<body>
    <button onclick="goBack()">이전 페이지 이동</button>
</body>

Navigator 객체 : 브라우저 정보를 담고 있다.
appCodeName(브라우저의 코드_명),

appName(브라우저_이름),

appVersion(브라우저_버젼),

cookieEnabled(브라우저 쿠키 사용 여부)
language(브라우저 언어),

platform(컴퓨터 OS),

product(브라우저 엔진_명),

userAgent(사용자 브라우저가 서버에게 보낸 브라우저 헤더정보)

    <script>
        document.write(navigator.userAgent);
    </script>
Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Safari // 크롬과 호환될 수 있는 브라우저

Rendering 조합해서 변환한다. 기본 상식
HTML > JS JSP 등
브라우저 랜더링 엔진(Rendering Engine)이 나오는데,

웹 페이지를 화면에 표시하기 위해 HTML/CSS를 해석하는 프로그램.
렌더링 엔진은 표준화되어있지 않아 웹 브라우저마다 다를 수 있다.

내장 객체
별도의 객체를 정의할 필요없이 불러서 사용 가능.
숫자 Number, 배열 Array, 문자열 추출, 검색, 치환 등에 대한 String, 수학 계산 Math, 날짜와 시간 Date 객체 등

Number
정수(Integer), 실수(float)
toString(숫자를 문자열로 변환) toFixed(특정 소수점 이하 처리)

    <script>
        var a = 10;	// 정수
        var b = 20;	// 정수
        var c = a + b.toString();  // a == 정수 b == 문자열
        document.write(c);
    </script>

    <script>
        var x = 12.34567;
        document.write(x.toFixed(0)+"<br>");    // 소수점 0번째, 정수만
        document.write(x.toFixed(1)+"<br>");    // 소수점 첫째자리, 둘째자리에서 반올림
        document.write(x.toFixed(3));           // 소수점 셋째자리, 넷째자리에서 반올림
    </script>

문자열의 숫자 변환
Number(), parseInt(), parseFloat() 사용.
Number 객체의 메써드가 아닌 전역함수이다.

전역함수
메써드가 아닌, 메인 루틴을 포함한 모든 영역에서 사용 가능.
Number(객체의 값을 숫자로 변환),

parseInt(문자열을 정수로 변환),

parseFloat(문자열을 실수로 변환),
String(객체의 값을 문자열로 변환) 함수들은 전역함수이다.
이 전역함수들은 Number 객체에서 숫자나 문자열의 형 변환과 관련된다.

    <script>
        var x = "10.33";
        document.write(Number(x) +10 + "<br>");
        document.write(parseInt(x) +10 +"<br>");
        document.write(parseFloat(x)+10 +"<br>");

        var x = "apple";
        document.write(Number(x));
    </script>

NaN
Not a Number, 데이터 값이 숫자가 아니라는 것을 의미.
isNaN() 함수를 이용하여 NaN 여부를 확인할 수 있다.

    <script>
        var x = "컴퓨터";
        document.write(isNaN(Number(x)) + "<br>");	
	// true Number로 형변환 하더라도 기본 값이  String이기에 변환이 되지않아 true
        document.write(isNaN(parseInt(x)) + "<br>");	true
        document.write(isNaN(parseFloat(x)) + "<br>");	true

        var y = "123.45";
        document.write(isNaN(Number(y)) + "<br>");	false
    </script>

'FrontEnd > JavaScript' 카테고리의 다른 글

Math, Date 객체 (0)	2022.07.07
배열 Array(PUSH, Number, pop(), length, splice(), slice(), substr(), replace(), 정규 표현식 Regular Expression, String 객체 문자열) (0)	2022.07.06
객체 (내장 객체, 사용자 정의 객체, 문서 객체 모델DOM, Window브라우저 객체 모델BOM) (0)	2022.07.05
함수 사용 예제 (0)	2022.07.05
변수 스코프(scope) - 지역변수 전역변수 상수const 익명함수Anonymous Function (0)	2022.07.03