JavaScript-5일차

클로져,구조분해할당 과제 리뷰 完

 

prototype:예전타입

class: prototype을 개선

---

목차

19.WINDOW객체

20.BOM(Browser Object Model)

21.EVENT처리

---

19.WINDOW객체

window

-브라우저 최상위 객체

-탭 별로 하나씩 존재한다.

-BOM: Browser Object Model - navigator,history,screen..

-DOM: Document Object Model - document(내가 만든 html문서)

-Javascript object(객체)

-등등..

 

open

-새 창(탭/팝업)을 여는 함수.

-새 창의 window 객체를 반환. 해당 창에 대한 제어 가능.

  const newWindow = open
    ("01_hellojs.html",'hellojs','width=500,height=300,top=400,left=400');
    //("01_hellojs.html",'_self'); //현재 창에서 열기

 

Time API - setTimeout

-제공한 mills초 후에 callback 함수 실행.

-js의 시간은 스레드 스케쥴링에 의해서 늘어질 수 있다.

[실제로 콘솔창을 확인----원하는 때에 출력되지 않은 적이 있었다.]

-timeoutId : 타이머를 실행할 때마다 랜덤으로 부여 되는 id (타이머 중지 가능)

//1초뒤 실행
    const timeoutId = setTimeout(() =>{
        alert('😎😎😎🤣');
    },1000);
    console.log(timeoutId); //타이머 실행할때마다 랜덤으로 부여되는 id

 

setInterval(callbackFunction,mills)

-mills초 후에 callbackFunction을 실행

-mills초 간격으로 callbackFunction을 실행

-clearInterval(id)로 취소하기 전까지..

let intervalId;
const test4 = () =>{
    let i=1;
    intervalId = setInterval(()=>{
    console.log(i++);
    },1000);
    console.log(intervalId,'번 인터벌이 등록되었습니다..');
}

 

타이머 예제  - 초시계 

/**
 * 초시계 만들어보기
 */
const clock = () =>{
    const d = new Date();

    //두자리수로 포맷 맞추기
    const f = (n) =>n<10?'0'+n: n; //앞은 string,뒤는 number
    //그냥 getHour이렇게 쓰면 숫자 형식으로 반환되어서 10미만 한자리면 하나만 출력됨
    const hh = f(d.getHours());
    const mm = f(d.getMinutes());
    const ss = f(d.getSeconds());
    console.log(`${hh}:${mm}:${ss}`);
    return `${hh}:${mm}:${ss}`;
  
};
//계속 inerval 실행되어도 괜찮음 ㅇㅇ
const displayclock = () => document.querySelector("#clock-display").innerHTML = clock();
displayclock();
setInterval(displayclock,1000);

 

 

20.BOM(Browser Object Model)

navigator

-브라우저(항해사)정보 제공 객체

const test1 = () =>
{
    console.log(navigator);
    console.log(navigator.userAgent);//브라우저 판단
}

 

location

-주소창과 관련된 기능 제공

console.log(location)	현재 로케이션 정보 확인 가능 hostname,port 등등
location.href="주소";	해당 주소로 이동
location.reload();	페이지 새로고침

 

history

-방문기록 관련 기능 제공

-뒤로가기,앞으로가기,새로고침..

 

screen

-브라우저가 실행중인 모니터(주모니터 기준)에 대한 정보 제공

height	모니터 높이 px
width	모니터 너비 px
availHeight	가용 높이
availWidth	가용 너비
availLeft	가용 offset(왼)
availTop	가용 offest(위)

//모니터 사이즈 측정 후 한 정확히 한 가운데에 팝업창 띄우는 예제

const width=500; //팝업창 너비
const height=300; //팝업창 높이
const left=(screen.width-width)/2 + screen.availLeft; 
const top=(screen.height-height)/2 + screen.availTop;
const popUp = 
open("","",`width=${width},height=${height},top=${top},left=${left}`);

 

21.EVENT처리

 

event란?

-inline이벤트 속성의 작성내용이 미리 만들어진 핸들러 함수 안에서 실행되는 것

 

onclick	addEventListener
하나만 등록 가능	여러개 등록 가능
한 객체에 대한 onclick 이벤트가 여러개 있다면 가장 마지막에 선언된 것으로 실행됨	한 객체에 대한 핸들러가 여러개 있다면 모두 실행됨 [각 다른 아이콘,텍스트 출력시 모두 출력]

 

event 객체

-type

-target:이벤트 발생 객체

-각종 좌표..

 

event로 작성

document.querySelector("#btn4").onclick = function(e)
{
    console.log(e);
    console.log(e.target);//타겟의 속성에 접근 가능하다!
    console.log(e.target.innerHTML);

    //this용법6. 이벤트 핸들러(일반함수) 안의 this는 
    //이벤트 "발생 객체"를 가르킨다.
    //화살표함수면 부모의 this를 가르키게 되어서 즉, window가 나오게됨
    console.log(this);
    console.log(this===e.target); //true
}

//포커스 맞춰짐
document.querySelector("#nickname").onfocus = (e) =>
{
    console.log("#nickname 포커싱 되었습니다.");
}
//포커스 잃음
document.querySelector("#nickname").onblur = (e) =>
{
    console.log("#nickname 포커스를 잃었습니다..");
    //const value = e.target.value;//객체
    const {target:{value}} = e; //구조분해할당ver
    console.log(value);
    if(!value)
    {
        alert('별칭은 필수 입니다!!');
    }
}

 

key 관련 이벤트

keydown	입력값 확인 불가
keypress	한글 확인 불가
keyup	위와 같은 이슈로  주로 keyup 사용

//text type input에 엔터를 입력할 시 팝업창이 뜨는 예제

document.querySelector("#memo").onkeyup = (e) =>{
    console.log(e);// key(a) | keyCode(65) | code(keyA)
    console.log(e.target.value);
    
    //엔터확인
    if(e.keyCode==13)
    alert(e.target.value);
};

 

★제출방지

1.제출 버튼 클릭

2.submit 이벤트 발생

3.submit 이벤트 핸들러(유효성 검사) 호출

----유효성 검사에서 막힐시 제출 방지-----

4.기준을 통과했다면 실제 제출

서버단이나 다른 페이지 ,함수 간의 데이터 전달시 유효한 값을 다루는 것이 중요하다.

event.preventDefault();

//제출 버튼을 눌렀을때 아이디,비밀번호의 유효성을 검사하여 
//유효한 데이터가 될때까지 제출을 막는 예제

document.signupFrm.onsubmit=(e)=>{
    console.log('submit');
    console.log(frm);
   
   // console.log(frm,username,password,confirmPassword);

    //아이디 검사(4글자 이상)
    if(username.value.length<4)
    {
        alert('아이디는 4글자 이상이여야 합니다..');
        e.preventDefault();
        return;
    }
    //비밀번호검사 (4글자 이상)
    if(password.value.length<4)
    {
        alert('비밀번호는 4글자 이상이여야 합니다..');
        e.preventDefault();
        return;
    }

    //비밀번호 일치 여부 검사
    // if(confirmPassword.value !== password.value)
    // {
    //     alert('두 비밀번호가 일치하지 않습니다.');
    //     e.preventDefault();
    //     return;
    // }
    if(notEqualPasswords())
    {
        e.preventDefault();
        return;
    }
};

//blur 이벤트 핸들러 바인딩
//만약 notEqualPasswords()라고 하면 return값인 true or false가 들어오므로 주의
confirmPassword.onblur = notEqualPasswords;

const requestSignup=()=>{
    console.log('폼 제출 성공~~~~~~~~~~~~');
    //signupFrm의 내용출력/초기화
    //hongg/1234 회원가입을 요청했습니다.
    console.log(`${username.value}/${password.value} 회원가입을 요청했습니다.`);

    // username.value='';
    // password.value='';
    // confirmPassword.value='';

    frm.reset(); //폼 리셋
};

 

임의의 이벤트 생성

버튼5를 클릭했을 때, 버튼1의 클릭핸들러 호출하기

document.querySelector('#btn5').onclick = () =>{
    //1.click메소드 호출
    //document.querySelector('#btn1').click();
    
    //2.이벤트 객체전송
    const event = new MouseEvent('click');
    document.querySelector('#btn1').dispatchEvent(event);

};

 

bubble

-이벤트 전파 : Event propagation

-bubbling : 자식객체에서 발생한 이벤트는 부모 객체로 전파 된다.

거품이 퍼져나가는걸 연상하기

이벤트가 전파되는걸 원치 않을때 중지도 가능하다. : e.stopPropagation();

//bubble
/**
 * 이벤트 전파 Event Propagation
 * -bubbling:자식객체에서 발생한 이벤트는 부모 객체로 전파됨.
 * 맨 안의 자식객체인 3을 누르면 3-2-1로 퍼져나간다.
 * div의 부모인 body까지도 퍼져나갈수있지만 이벤트를 따로 주지않아 보이지않음.
 */
// document.querySelector("#bubble1").onclick = (e) =>{
//     console.log('#bubble1',e);
// };
// document.querySelector("#bubble2").onclick = (e) =>{
//     console.log('#bubble2',e);
//     //이벤트가 전파되는걸 원치 않을 때 전파 중지 가능
//     e.stopPropagation();
// };
// document.querySelector("#bubble3").onclick = (e) =>{
//     console.log('#bubble3',e);
// };

//하나의 핸들러로 여러 이벤트 관리
//부모 bubble1-2-3 자식
document.querySelector("#bubble1").onclick = (e) =>{
    switch(e.target.id)
    {
        case 'bubble1':console.log("#bubble1");break;
        case 'bubble2':console.log("#bubble2");break;
        case 'bubble3':console.log("#bubble3");break;
    }
    
};

 

이벤트 버블링에 관한 설명 및 예제 문서

https://ko.javascript.info/bubbling-and-capturing