221020 Javascript #6

김혜진·2022년 10월 20일

JavaScript PORT ip 객체

Javascript

목록 보기

5/9

Number 객체

Number는 숫자형 타입 객체이다.

Number 객체의 제공 속성을 사용할 경우나 문자열을 숫자로 형변환 하는 경우 사용

사용형태

new 연산자를 사용하여 Number 객체의 인스턴스를 생성

var objNum = new Number("1234");

Number 객체의 전달인자인 ""안에 숫자만 들어와야하고, 그 외의 문자가 들어가면 숫자가 아니므로 NaN이 출력된다.

        // ──────── number() 객체 ────────
        var str1 = '8293';
        var str2 = 'abc';
        var objNum = new Number('1234');
        var num = 1234;

        document.write('문자열 + 숫자형 : ' +  (str1 + num)  + '<br/>');
        document.write('object + 숫자형
                       : ' +  (objNum + num)  + '<br/>');
        document.write('Number(문자열) : ' +  Number(str1)  + '<br/>');
        document.write('Number(문자열) : ' +  Number(str2)  + '<br/>');

연산자 오버로딩으로 인해 실행이 가능한 것이다.

Window 객체

DOM : Document Object Model
HTML을 제어하기 위해 자바스크립트에서 제공해주는 객체

개념

객체 계층 구조의 최상위에 존재
윈도우나 프렝미을 의미
Window 객체를 기점으로 document 객체, navigator 객체, Object 객체와 같은 하위 객체들이 갈라져 나온다.
alert() 함수 사용시 엄밀하게 따지만 window.alert()와 같이 사용해야 함.
계층 구조 상 window.document.write() 라고 사용해야 하지만 window는 생략하고 document.write() 라고 사용한다.

속성

윈도우 객체 속성 종류

속성 : 변수

메소드

윈도우 객체 메소드 종류

윈도우 열기 - open() 메소드

윈도우를 연다는 의미로 윈도우 팝업창을 띄운다는 의미이다.
window.open("url", "윈도우 이름", "윈도우의 특성")
첫 번째 전달인자 : 새 윈도우의 url
두 번째 전달인자 : 새로 열 윈도우의 이름을 지정
세 번째 전달인자 : 새 윈도우의 넓이나 높이, 틀바의 여부 등 설정

<body>
    <script>
        var newWin;
        function newOpen()
        {
           newWin = window.open('객체.html', '', 'width=600, height=300');
        }
    </script>
    <button onclick="newOpen()">새 윈도우 열기</button>
</body>

<body>
    <script>
        var newWin;
        function newOpen()
        {
           newWin = window.open('객체.html', '', 'width=600, height=300');
        }
        function winClose()
        {
            newWin.close()
        }
    </script>
    <button onclick="newOpen()">새 윈도우 열기</button>
    <button onclick="winClose()">윈도우 닫기</button>

시간 관련 동작 설정

시간에 맞춰 동작하는 기능 - 타이머
일회성과 주기적 반복 두가지가 있다.

일회성 시간 기능
일회성 사용 메소드로는 setTimeout()과 clearTimeout() 두가지가 있다.
setTimeout() 메소드는 설정한 시간 이후 특정 기능을 수행하도록 한다.
timerID = window.setTimeout(함수 또는 명령, 시간);
clearTimeout() 메소드는 setTimeout() 기능을 무력화 시킨다.
window.clearTimeout(timerID)

<body>
    <script>
        function timestart()
        {
            alert('5초 후에 폭탄이 폭발합니다.');
            timeId = window.setTimeout(function() {
                alert('꽝~~');
            }, 5000);
        }
        function timestop()
        {
            window.clearTimeout(timeId);
            alert('폭탄이 제거되었습니다.');
        }
    </script>
    <button onclick="timestart()">핵 폭탄 설정</button>
    <button onclick="timestop()">핵 폭탄 해제</button>
</body>

주기적 시간 기능
주기적 사용 메소드로는 setInterval()과 clearInterval() 두가지가 있다.
setInterval() 메소드는 주기적으로 수행할 시간마다 함수나 명령을 수행하도록 한다.
timerId = window.setInterval(함수 또는 명령, 시간);
clearInterval() 메소드는 주기적인 수행을 멈추게 한다.
window.clearInterval(timerId)

    <!-- 주기적인 타이머 -->
    <script>
        var timeId;
        var count = 0;

        function timestart()
        {
            timeId = window.setInterval(function(){
                document.getElementById('result').innerHTML = count++;
            }, 100)
        }
        function timestop()
        {
            window.clearInterval(timeId)
        }
    </script>

    <button onclick="timestart()">카운트 시작</button>
    <button onclick="timestop()">카운트 중지</button> <p>
    <h1><div id="result"></div></h1>

객체 이벤트

window 객채에서 제공하는 이벤트들
해당 이벤트 발생 시 이벤트 핸들러를 작성하여 처리할 수 있다.

이벤트 발생 시 이벤트 핸들러를 작성하고 등록하는 방법
<body 이벤트 = "이벤트 핸들러">

이벤트 핸들러는 여러 개 등록이 가능하다.
<body 이벤트 = "이벤트 핸들러" 이벤트 = "이벤트 핸들러" ...>

<body onload="myload()" onresize="myfocus()">
    <script>
        function myload()
        {
            alert('문서를 로드하였습니다.');
        }
        function myfocus()
        {
            alert('크기를 변경하였습니다.');
        }
    </script>

브라우저 정보 객체

location 객체

location 객체 속성

hostname이나 port와 같은 정보는 웹서버 설치 후 확인이 가능

    <script>
        document.write('<h1>' + location.protocol  + '</h1><br/>')
        document.write('<h1>' + location.host  + '</h1><br/>')
        document.write('<h1>' + location.hostname  + '</h1><br/>')
        document.write('<h1>' + location.href  + '</h1><br/>')
        document.write('<h1>' + location.pathname  + '</h1><br/>')
        document.write('<h1>' + location.port  + '</h1><br/>')
    </script>

location 객체 속성 정보를 얻어오는 것 뿐만 아니라 설정도 가능
href 속성으로 주소값만 얻어왔다면, 새로운 주소로 설정하여 이동 가능하게도 함

-location 객체 메소드
location 객체에는 두 개의 메소드가 제공

    <script>
        var currentTime = new Date();
        document.write("<h1> 현재 시간은 " + currentTime.toLocaleString() + "입니다.</h1>")

        function updateDoc()
        {
            location.reload();
        }

        function moveDoc()
        {
            location.replace("객체.html");
        }
    </script>

    <button onclick="updateDoc()">새로 고침</button>
    <button onclick="moveDoc()">문서 이동</button>

IP

IP 주소란

인터넷 상에 존재하는 호스트들을 구분하기 위한 32비트 주소 체계
점이 찍힌 십진수 표현 방식을 사용해서 IP 주소를 표현한다.
점에 의해 구분되는 값은 각각 1바이트로 표현되고, 총 4바이트를 사용한다.
각 옥탯별로 0-255 범위를 가지며 IP 전체 개수는 약 42억개이다.
4바이트 IP주소는 네트워크 주소와 호스트 주소로 나뉘며, A, B, C, D 클래스로 구분한다.
서브넷 마스크를 활용하여 네트워크 ID를 올리거나 낮출 수 있다.

네트워크 주소란 네트워크를 구분해주는 ID를 의미한다.

예를 들어 B.COM이라는 회사의 무대리에게 데이터를 전송했다고 가정하자.
이 회사는 하나의 로컬 네트워크로 이루어져있다.
이 회사의 무대리 컴퓨터에 데이터를 전송하기 위해서는 B.COM의 네트워크로 데이터를 전송해주는 것이 우선이다.
처음부터 IP주소 4바이트를 모두 참조해서 무대리 컴퓨터를 찾아가는 것이 아니라 4바이트 IP주소 중에서 네트워크 주소만을 참조해서 B.COM의 네트워크를 찾아간다.
현재 사용되는 IPv4 방식의 IP수는 한정되어있어서 모든 호스트들에게 IP 할당이 안됨.

IP는 외부에서 내 컴퓨터를 찾을 때 필요한 것.

Port

컴퓨터는 보통 물리적인 네트워크 카드를 통해서 하나의 IP 주소를 갖는다.
어떻게 수신한 데이터를 구분하여 각각의 프로그램에 전달해줄 수 있는 것일까?
IP 주소로는 인터넷 연결된 호스트를 구분할 수는 있어도 컴퓨터 안에서 실행되는 프로그램까지 구분하여 주지는 못한다.
이 때 필요한 것이 바로 Port이다.
Port는 2바이트로 표현되므로 가질 수 있는 값의 범위는 0~6555까지이다.
0~1024까지는 잘 알려진 포트(well-known ports)로 이미 예약된 포트이다.

배달 라이더가 배달 주소지까지는 도착(IP), 주문자가 누군지를 알아내는 것(Port)