국비지원 39일차 (자바스크립트)

※자바스크립트-location 객체

- 쉽게 말해서  a태그처럼 링크를 거는 객체

        1) location.reload() => 새로고침
        2) location.href="경로";
                => a태그와 동일
                   히스토리가 남는다.
                   (해당경로 들어가서 뒤로 가기 버튼 누르면 다시 초기화면으로 돌아간다.)
        3) location.replace("경로")
                => 히스토리가 안 남는다.
                    (해당 페이지로 돌아갈 수 없다.)

        
       - location.hostname => 웹 호스트의 도메인 네임
       - location.href => 현재 페이지 주소
       - location.pathname => 현재 페이지의 경로

 

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

    function href() { location.href="http://www.naver.com";}

    function replace() { location.replace("http://www.naver.com");}

1.location.href 는 경로를 통해 들어갈시 히스토리가 남기 때문에 뒤로 가기 버튼이 활성화돼있고, 버튼을 누르면 첫 페이지로 이동을 할 수 있다.

2.location.replace 는 경로를 통해 들어갈 시 히스토리가 남지 않기 때문에  뒤로 가기 버튼이 비활성화돼 있고, 버튼을 누를 수 없다. 

 

※자바스크립트-사이즈, 위치 관련 객체

- 스크린, 브라우저 전체, 브라우저 사용 가능한 영역을 구한다.

    1. 사이즈
        1) screen: 화면 전체의 크기
                avail~: 작업표시줄을 제외한 실제 사용할 수 있는 영역
        2) document.body.client~: 실제 body의 사이즈
        3) window.inner~: 윈도창 안쪽(실제 사용가능한 영역) 사이즈
                            (개발자 도구 키면 그 부분은 제외한 사이즈 확인-body 영역만)
        4) window.outer~: 윈도창 자체 경계 끝까지(개발자 도구 켜도 거기까지 다 사이즈 확인)
   
    2. 위치 
        1) window.screen~: 스크린 기준(왼쪽, 위) 현재 윈도창의 위치
        *2) 요소. offsetTop: 문서 최상단 기준 현재 요소의 위치

    document.write("=== screen ==="+"<br>")

    document.write(screen.width+"<br>")

    document.write(screen.height+"<br>")

    document.write(screen.availWidth+"<br>")

    document.write(screen.availHeight+"<br>")

    document.write(""+"<br><br>")

   

    document.write("=== body.client ==="+"<br>")

    document.write(document.body.clientWidth+"<br>")

    document.write(document.body.clientHeight+"<br>")

    document.write(""+"<br><br>")

   

    document.write("=== window.inner ==="+"<br>")

    document.write(window.innerWidth+"<br>")

    document.write(window.innerHeight+"<br>")

    document.write(""+"<br><br>")

    document.write("=== window.outer ==="+"<br>")

    document.write(window.outerWidth+"<br>")

    document.write(window.outerHeight+"<br>")

    document.write(""+"<br><br>")

    document.write("=== 창 위치 ==="+"<br>")

    document.write(window.screenLeft+"<br>")

    document.write(window.screenTop+"<br>")

    // document.write("=== 요소의 현재 위치 ==="+"<br>")

    document.write(document.getElementById('box').offsetTop+"<br>")

    document.write(document.getElementById('box').offsetLeft+"<br>")

사이즈 위치.결과값

    document.write(screen.width+"<br>")

    document.write(screen.height+"<br>")

    document.write(screen.availWidth+"<br>")

    document.write(screen.availHeight+"<br>")

@ screent객체는 화면 전체의 크기의 수치를 알 수 있다.

 - avail을 쓰면 높이값에 작업표시줄을 제외한 실제 사용할 수 있는 영역이 잡히게 된다.

 

    document.write(window.innerWidth+"<br>")

    document.write(window.innerHeight+"<br>")

@ window.inner 객체는 말 그대로 윈도창 안쪽 내부 사이즈 영역을 뜻한다. 윈도창을 줄일시 그 줄인 크기를 나타낼 수 있다.

- 개발자 도구를 사용하면 그 부분은 제외한 나머지 영역을 사이즈로 잡는다.

    document.write(window.outerWidth+"<br>")

    document.write(window.outerHeight+"<br>")

@ window.outer 객체는 말 그대로 윈도창 바깥쪽 외부 사이즈 영역을 뜻한다. 윈도창을 줄일시 그 줄인 크기를 나타낼 수 있다.

- 개발자 도구를 사용하면 그 부분은 포함해  사이즈로 잡는다.

 

    document.write(window.screenLeft+"<br>")

    document.write(window.screenTop+"<br>")

@window. screen방향값, 은 윈도 창을 전체 화면이 아닌 부분창으로 줄이고 옮긴 다고 하면 전체 스크린(화면)에서부터 방향값 얼마 정도 윈도창이 위치해 있는지 사이즈로 나타낼 수 있다.

 // document.write("=== 요소의 현재 위치 ==="+"<br>")

    document.write(document.getElementById('box').offsetTop+"<br>")

    document.write(document.getElementById('box').offsetLeft+"<br>")

@ 요소. offset방향값, 은 해당 요소에 위치를 화면전체에서 방향값 을구해 요소가 전체화면에서 어느 정도 위치해 있는지 알 수 있다.

 

※자바스크립트- 브라우저구분 객체

    let userAgent = window.navigator.userAgent.toLowerCase();

    console.log(userAgent)

    let isChrome = userAgent.indexOf('chrome');

    let isEdge = userAgent.indexOf('edg');

   

    // 익스용

    // let isIE = userAgent.indexOf('trident');

    // let isIE2 = userAgent.indexOf('msie');

    console.log("isChrome: " + isChrome);

    console.log("isEdge: " + isEdge);

브라우저 구분 결과값.

@  let userAgent = window.navigator.userAgent.toLowerCase();

- window(생략가능하다)

- let userAgent = navigator.userAgent.toLowerCase(); 로 나타낼 수 있고 브라우저가 어떤 종류인지 확인할 수 있다.

- toLowerCase() -> 해당 브라우저 정보를 소문자로 나타낼 때 쓰인다. 적용 안 할 시 기본적으로 대문자로 출력이 된다.

@let isChrome = userAgent.indexOf('chrome');

    let isEdge = userAgent.indexOf('edg');

- 해당 글자를 indexof를 통해서 브라우저 정보 안에서 몇 번째  글자에 속하는지 알 수 있고. 글자가 없을 시 -1 값을 출력하게 된다.

- if문을 통해서 (isEdge < 0 ) 이렇게 해당변수가 0 보다 작을 시 해당 값은 없는 것이라는 조건을 줄 수가 있다.

 

※자바스크립트-math객체

 

- Math 객체 - 수학적 객체
  공식 Math.random()으로 쓴다.
  *1) random: 무작위의 0.0000~0.9999
                              Math.random()     * (자릿수*10)
            //한자리 랜덤수 => 0.9999999999999999 * 10      => 9.999999999999999
            //한자리 랜덤수 => 0.0000000000000001 * 10      => 0.00000000000001

            올림: Math.ceil(9.999999999999999) => 10
            내림: Math.floor(9.999999999999999) => 9 + 1 => 10
             
            올림: Math.ceil(0.00000000000001) => 1
            내림: Math.floor(0.00000000000001) => 0 + 1 => 1
             
    2) ceil: 올림
    3) floor: 내림
    4) round: 반올림
    5) max: Math.max(숫자, 숫자, 숫자, 숫자)
            이중에 제일 큰 숫자 하나
    6) min: Math.min(숫자, 숫자, 숫자, 숫자)
            이중에 제일 작은 숫자 하나
    7) abs: 절댓값
    8) pow: 제곱 Math.pow(2,3) => 2의 3승
    9) sqrt: 루트

 

Math 결과값

    let rand = Math.random();

    console.log(rand)

    console.log("ceil: " + Math.ceil(rand * 100))

    console.log("floor: " + Math.floor(rand * 100))

1. math.rondom() 숫자를 변수 안에다가 집어넣을 수 있고 이 변숫값을 출력하면 소수점자리로 나오고, 새로고침할 때마다 값이 바뀌게 된다.

2. 이 randow() 함수의 소수점 숫자를 1의 자리까지 나타내고 싶으면 

* Math.ceil(rand * 10))

- 보통 random 숫자의 곱하기 10을 하여 소수점을 일의 자리 후에 위치하게 한 후 math.ceil이나 math.floor으로 하여 소수점 밑에 자리는 다 올림이나, 내림을 적용해 1일의 자리까지 나타낼 수 있다.

 

console.log("max: "+ Math.max(10,30,20,1,5));

console.log("min: "+ Math.min(10,30,20,1,5))

3. math.(max, min)은 해당 수 중에서 제일 큰 수, 제일 작은 수를 찾아낼 수 있다.

- 물론 배열값을 적용하여 해당 배열중에 큰 수, 작은 수를 찾을 수 있다.

 

※자바스크립트-window 객체

 

window - 창(브라우저) 관리
             팝업창 생성/삭제(탭으로 동작)
             창에서 창으로 정보 전달
             (크롬에서는 보안상의 이유로 로컬에서는 막힘)

        window.open(); - 빈탭 띄움
        window.open("경로"); - 새 탭에서 띄움
        window.open("경로", "_self"); - 현재탭에서 띄움
                            _blank(기본값)
        window.open("경로", "_blank", "자식창정보");
            자식창정보 - width, height, left, top

    
    * open - 새로운 탭을 여는 동작
      opener - 자기를 생성해 준 부모를 뜻함

 

    <input type="button" value="empty_open" onclick="empty_open()">

    <input type="button" value="blank_open" onclick="blank_open()">

    <input type="button" value="self_open" onclick="self_open()">

    <input type="button" value="child_open" onclick="child_open()">

    <input type="button" value="child_close" onclick="child_close()">

    <br>

    <br>

    <input type="text" id="parent_txt">

    <input type="button" value="자식창에 보내기" onclick="send_to_child()">

 

    function empty_open() {

        window.open();

    }

    function blank_open() {

        window.open("./210.window_자식창.html");

    }

    function self_open() {

        window.open("./210.window_자식창.html", '_self');

    }

 

1.window.open("./210.window_자식창. html");

- blank_open()이라는 함수를 클릭했을 시에 (해당 경로의 html )이 새 탭에서 창이 열리게 됩니다.

2.window.open("./210.window_자식창. html", '_self');

- self_open()이라는 함수를 클릭했을 시에 (해당 경로의 html , '_self') 이렇게 경로뒤에 어떤 방식으로 창을 열건지 정할 수 있고 _self 사용 시에는 해당 창에서 해당경로로 옮겨지게 됩니다.

 

let child;

    function child_open() {

        // 부모창 위치

        let parent_pos_x = window.screenLeft;

        let parent_pos_y = window.screenTop;

        // 부모창 가운데 위치

        let parent_x = window.innerWidth / 2;

        let parent_y = window.innerHeight / 2;

        // 자식창 크기

        let child_x = 300;

        let child_y = 300;

        // 자식창 열리는 위치

        let pos_x = parent_pos_x + parent_x - (child_x / 2)

        let pos_y = parent_pos_y + parent_y - (child_y / 2)

        // 기존에 자식창이 있으면 삭제하고 새로 생성

        // child_close();

    if (child == null) {

        child = window.open("./210.window_자식창.html", '_blank',"width="+child_x+"px, height="+child_y+"px, left="+pos_x+"px, top="+pos_y+"px");

    }

    else {

        child.window.close();

        child = window.open("./210.window_자식창.html", '_blank',"width="+child_x+"px, height="+child_y+"px, left="+pos_x+"px, top="+pos_y+"px");

    }

    }

    function child_close() {

        child.window.close();

    }

1. child_open이라는 버튼을 눌렀을 시 만약 child의 값이 null  즉 해당창이 없을 때는 창이 열리고, 그밖에 해당창이 열려있으면 열려있는 창을 (child.window, close() ) 닫고  새롭게 창을 열 수 있도록 if 조건을 정해줍니다 왜냐하면 이런 조건이 없을 시에는 중복돼서 창이 열리게 되고 아무리 close() 함수 버튼을 누른다고 해도 마지막에 열린 child의 창만 없어지게 되고 기존에 열린 창들은 남아있게 됩니다.

 

2. window.open 은('어떤 창이 열리게 되는지 해당창의 경로를 지정할 수 있고', '어떤 탭에서 열리는지 정할 수 있고', '자식창 정보-> width , height, left, top'을 정할 수 있고 이걸토대로 해당 자식창이 열릴 때 어떤 위치에 위치하게 하는지 정할 수 있다.

let parent_pos_x = window.screenLeft;

let parent_pos_y = window.screenTop;

1) 부모창위치 

- 화면에서 윈도창이 어디에 위치해 있는지 값을 구할 수 있고.

 

let parent_x = window.innerWidth / 2;

let parent_y = window.innerHeight / 2;

2) 부모창 가운데 위치

- 윈도창에 inner (내부) 창에 넓이와 높이를 구하여 /2를 하면 해당 윈도창에 절반에 적용되게 위치값을 구할 수 있을 것이다.

let child_x = 300;

let child_y = 300;

 

let pos_x = parent_pos_x + parent_x - (child_x / 2)

        let pos_y = parent_pos_y + parent_y - (child_y / 2)

3) 자식창의 가로*세로 넓이를 구하고 

4) 자식창을 현재 윈도창 중앙에 위치하게 하려면

- 부모창의 위치 + 부모창 가운데위치 -(자식창/2) 한 값을 계산을 하면 자식창은 부모창 (윈도창) 가운데에 자식창이 위치할 수 있게 될 것입니다.