[2일차] DO IT 자바스크립트/ P142~193/ 이벤트

리소스 이벤트

이벤트 명   

error               리소스를로드하지 못했습니다.

abort               리소스로드가 중단되었습니다.

load                리소스 및 해당 종속 리소스가로드를 완료했습니다.

beforeunload    창, 문서 및 리소스가 언로드됩니다.

unload              문서 또는 종속 리소스가 언로드됩니다.

네트워크 이벤트

이벤트 명   

online  브라우저가 네트워크에 액세스했습니다.

offline 브라우저가 네트워크에 액세스 할 수 없습니다.

포커스 이벤트

이벤트 명   

focus        요소가 포커스를 받았습니다 (버블 링 안 함).

blur         요소가 포커스를 잃었습니다 (버블 링되지 않음).

focusin      요소가 포커스를 받으려고합니다 (버블 표시).

focusout         요소가 초점을 잃으려고합니다 (버블 표시).

 

WebSocket 이벤트

이벤트 명   

open         WebSocket 연결이 설정되었습니다.

message      WebSocket을 통해 메시지가 수신됩니다.

error        WebSocket 연결이 편견으로 종료되었습니다 (예 : 일부 데이터를 보낼 수 없음).

close        WebSocket 연결이 닫혔습니다.

세션 기록 이벤트

이벤트 명   

pagehide                세션 기록 항목이 순회되고 있습니다.

pageshow    세션 기록 항목이 통과 중입니다.

popstate                세션 기록 항목을 탐색 중입니다 (특정 경우).

CSS 애니메이션 이벤트

이벤트 명   언제 해고

animationstart  CSS 애니메이션 시작했다.

animationcancel CSS 애니메이션을 중단했다.

animationend    CSS 애니메이션이 완료되었습니다.

animationiteration  CSS 애니메이션 을 반복한다.

 

CSS 전환 이벤트

이벤트 명   언제 해고

transitionstart CSS 전환은 실제로 (지연 후 해고) 시작했다.

transitioncancel    CSS 전환이 취소되었습니다.

transitionend   CSS 전환이 완료되었습니다.

transitionrun   CSS의 전환 (지연이 시작되기 전에 해고)를 실행하기 시작했다.

 

양식 이벤트

이벤트 명   언제 해고

reset   재설정 버튼을 눌렀습니다.

submit  제출 버튼을 눌렀습니다.

 

이벤트 인쇄

이벤트 명   언제 해고

beforeprint 인쇄 대화 상자가 열립니다.

afterprint      인쇄 대화 상자가 닫힙니다.

텍스트 구성 이벤트

이벤트 명   

compositionstart               텍스트 구절의 구성이 준비됩니다 ( keydown키보드 입력 과 유사 하지만 음성 인식과 같은다른 입력과 함께 작동).

compositionupdate            작성중인 텍스트 구절에 문자가 추가됩니다.

compositionend                텍스트 구절의 구성이 완료 또는 취소되었습니다.

 

이벤트보기

이벤트 명   

fullscreenchange                요소가 전체 화면 모드로 전환되었습니다.

fullscreenerror                   기술적 인 이유로 또는 권한이 거부되어 전체 화면 모드로 전환 할 수 없었습니다.

resize                              문서보기의 크기가 조정되었습니다.

scroll                               문서보기 또는 요소가 스크롤되었습니다.

클립 보드 이벤트

이벤트 명   

cut                  선택 항목이 잘라내어 클립 보드에 복사되었습니다.

copy                선택 항목이 클립 보드에 복사되었습니다.

paste               클립 보드의 항목을 붙여 넣었습니다.

키보드 이벤트

이벤트 명

keydown          아무 키나 누름

keypress           ANY 키 (단 Shift, Fn나  CapsLock)가 눌려진 위치에있다 (연속 소성).

keyup              모든 키가 해제됩니다.

마우스 이벤트

이벤트 명   

auxclick                요소에서 포인팅 장치 버튼 (기본이 아닌 모든 버튼)을 눌렀다 놓았습니다.

click                    요소에서 포인팅 장치 버튼 (ANY 버튼, 곧 기본 버튼으로 만 제공됨)을 눌렀다 놓았습니다.

contextmenu         마우스 오른쪽 버튼을 클릭합니다 (컨텍스트 메뉴가 표시되기 전).

dblclick                포인팅 장치 버튼이 요소에서 두 번 클릭됩니다.

mousedown          요소에서 포인팅 장치 버튼을 누릅니다.

mouseenter           포인팅 장치는 리스너가 연결된 요소로 이동됩니다.

mouseleave           포인팅 장치는 리스너가 연결된 요소에서 이동합니다.

mousemove          포인팅 장치가 요소 위로 이동합니다 (마우스가 움직일 때 계속 실행 됨).

mouseover            포인팅 장치는 리스너가 연결된 요소 또는 하위 요소 중 하나로 이동됩니다.

mouseout             포인팅 장치는 리스너가 연결된 요소에서 제거되거나 자식 중 하나에서 제거됩니다.

mouseup              포인팅 장치 버튼이 요소 위에 놓입니다.

pointerlockchange   포인터가 잠겨 있거나 해제되었습니다.

pointerlockerror     기술적 인 이유로 또는 권한이 거부 되었기 때문에 포인터를 잠그는 것이 불가능했습니다.

select                   일부 텍스트가 선택되었습니다.

wheel                   포인팅 장치의 휠 버튼은 임의의 방향으로 회전합니다.

드래그 앤 드롭 이벤트

이벤트 명   

drag                  요소 또는 텍스트 선택이 드래그되고 있습니다 (350ms마다 계속 실행 됨).

dragend             드래그 작업이 종료됩니다 (마우스 버튼을 놓거나 Esc 키를 눌러).

dragenter           끌어온 요소 또는 텍스트 선택이 유효한 놓기 대상에 들어갑니다.

dragstart            사용자가 요소 또는 텍스트 선택 드래그를 시작합니다.

dragleave           드래그 한 요소 또는 텍스트 선택은 유효한 드롭 대상을 남깁니다.

dragover            요소 또는 텍스트 선택이 유효한 놓기 대상 위로 드래그되고 있습니다 (350ms마다 계속 실행 됨).

drop                 요소가 유효한 놓기 대상에 놓입니다.

미디어 이벤트

이벤트 명   

audioprocess        입력 버퍼를 ScriptProcessorNode처리 할 준비가되었습니다.

canplay               브라우저는 미디어를 재생할 수 있지만 콘텐츠의 추가 버퍼링을 위해 중지하지 않고 미디어를 끝까 지 재생하기에 충분한 데이터가로드되지 않은 것으로 추정합니다.

canplaythrough     브라우저는 콘텐츠 버퍼링을 중단하지 않고 미디어를 끝까지 재생할 수 있다고 추정합니다.

complete             렌더링 OfflineAudioContext이 종료됩니다.

durationchange     duration속성이 업데이트되었습니다.

emptied              미디어가 비어 있습니다. 예를 들어,이 이벤트는 미디어가 이미로드 된 경우 (또는 부분적으로로드  된 경우) 전송되고 load()이를 다시로드하기 위해 메서드가 호출됩니다.

ended                 미디어 끝에 도달했기 때문에 재생이 중지되었습니다.

loadeddata           미디어의 첫 번째 프레임로드가 완료되었습니다.

loadedmetadata     메타 데이터가로드되었습니다.

pause                  재생이 일시 중지되었습니다.

play                     재생이 시작되었습니다.

playing                 데이터 부족으로 일시 중지 또는 지연된 후 재생을 시작할 수 있습니다.

ratechange            재생 속도가 변경되었습니다.

seeked                  A는 찾는 작업이 완료.

seeking                 A는 탐색 작업을 시작했다.

stalled                   사용자 에이전트가 미디어 데이터를 가져 오려고하는데 데이터가 예기치 않게 나오지 않습니다.

suspend                 미디어 데이터로드가 일시 중지되었습니다.

timeupdate             currentTime속성 으로 표시된 시간 이 업데이트되었습니다.

volumechange         볼륨이 변경되었습니다.

waiting                   일시적인 데이터 부족으로 재생이 중지되었습니다.

진행 이벤트

이벤트 명   

abort   진행이 종료되었습니다 (오류가 아님).

error   진행이 실패했습니다.

load    진행이 성공적이었습니다.

loadend 진행은 중지 (이후 "error", "abort"또는 "load"파견되었다).

loadstart   진행이 시작되었습니다.

progress    진행 중입니다.

timeout 사전 설정된 시간이 만료되어 진행이 종료됩니다.

 

 

event 예제

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>자바스크립트 이벤트</title>

    <link rel="stylesheet" href="css/event.css">

</head>

<body>

    <div id="item">

        <img src="images/flower1.jpg" alt="">

        <button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>

        <div id="desc" class="detail">

            <h4>민들레</h4>

            <p>어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.</p>

            <button id="close" onclick="hideDetail()">상세 설명 닫기</button>

        </div>

    </div>

    <script src="js/event.js"></script> 

</body>

</html>  

 

 

 function showDetail() {  // '상세 설명 보기'를 클릭했을 때 상세 설명을 보여주는 함수

            document.querySelector('#desc').style.display = "block";    // 상세 설명 부분을 화면에 표시

            document.querySelector('#open').style.display = "none";   // '상세 설명 보기' 단추를 화면에서 감춤

 }

        

 function hideDetail() {  // '상세 설명 닫기'를 클릭했을 때 상세 설명을 감추는 함수

            document.querySelector('#desc').style.display = "none";    // 상세 설명 부분을 화면에서 감춤

            document.querySelector('#open').style.display = "block";     // '상세 설명 보기' 단추를 화면에 표시

 }

 

 

        

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>함수</title>

    <link rel="stylesheet" href="css/add.css">

</head>

<body>

    <button onclick="addNumber()">덧셈 계산하기</button>

    <script>

        var num1 = parseInt(prompt("첫 번째 숫자는? "));  

        var num2 = parseInt(prompt("두 번째 숫자는? "));

        

        var result = addNumber(num1, num2);

        alert("두 수를 더한 값은 " + result + "입니다.");

        //parseInt()함수는 문자열 인수를 구문 분석하고 지정된 기수 의 정수를 반환합니다 (수학적 숫자 체계의 기본).

 

        function addNumber(a, b){

            var sum = a + b;

            return sum;

        }

        

        

    </script>

</body>

</html>

 

 

 

<!doctype html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>D-Day for love</title>

    <link href="css/d-day.css" rel="stylesheet">

</head>

<body>

    <div class="container">

        <div class="day1">

            <h3>우리 만난지</h3>

            <p id="accent" class="accent"><span style="font-size:0.6em; font-style:italic">며칠?</span></p>

            </div>

            <div class="bar">기념일 계산</div>

            <div class="day2">

                <ul>

                    <li class="item-title">100일</li>         

                    <li class="item-date" id="date100"></li>

                </ul>

                <ul>

                    <li class="item-title">200일</li>

                    <li class="item-date" id="date200"></li>

                </ul>     

                <ul>

                        <li class="item-title">1년</li>

                        <li class="item-date" id="date365"></li>

                    </ul>      

                <ul>

                            <li class="item-title">500일</li>

                            <li class="item-date" id="date500"></li>

                        </ul>                                            

            </div>

        </div>

 

        <script src="js/dday-result.js"></script>

    </body>

    </html>

 

    

    

    

 

var now = new Date(); // 오늘 날짜 정보를 Date 객체의 인스턴스 now 객체로 만듭니다.

var firstDay = new Date("2020-12-12");  // 처음 만난 날의 날짜 정보를 firstDay 객체로 만듭니다. 

var toNow = now.getTime();  // 오늘 날짜를 밀리초로 바꿉니다.

var toFirst = firstDay.getTime();  // 처음 만난 날을 밀리초로 바꿉니다.

var passedTime = toNow - toFirst;  // 처음 만난 날과 오늘 사이의 차이 (밀리초)

var passedDay = Math.round(passedTime/(24*60*60*1000)); // 밀리초를 일로 변환 후 반올림합니다.

document.querySelector('#accent').innerText = passedDay + "일";  // #accent 영역에 표시합니다.

 

 

function calcDate(days) {   //calcDate() 메소드를 기능을 구현 

    var future = toFirst + days*(1000*60*60*24);  // 처음 만난 날에 밀리초로 바꾼 100일을 더합니다.

    var someday = new Date(future);  // future 값을 사용해 Date 객체의 인스턴스를 만듭니다.

    var year = someday.getFullYear( );  // ‘연도’를 가져와 year 변수에 저장합니다.

    var month = someday.getMonth( );  // ‘월’을 가져와 month 변수에 저장합니다.

    var date = someday.getDate( );  // ‘일’을 가져와 date 변수에 저장합니다.

    document.querySelector("#date"+days).innerText = year + "년 " + month + "월 " + date + "일";

}

 

calcDate(100);  // 100일 기념일을 계산해서 표시합니다.  // 메소드를 호출 

calcDate(200);  // 200일 기념일을 계산해서 표시합니다.

calcDate(365);  // 1년 기념일을 계산해서 표시합니다.

calcDate(500);  // 500일 기념일을 계산해서 표시합니다.

 

 

=================================================================

 

getFullYear() : 날짜 정보에서 연도(year) 정보를 가져와 네자리 숫자로 표시

getMonth() : 0부터 1월이 시작 11은 12월 -> 배열의 인덱스 순서와 똑같음

getDate() : 날짜 정보에서 며칠인지 알 수 있는 일 (Date) 정보를 가져옴

getDay() :  날짜 정보에서 요일(Day) -> 0 : 일요일 , 1 : 월요일  2: 화요일 , 3 : 수요일 , 4 : 목요일 , 5 : 금요일 , 6 :토

getTime() : 1970년 1월1일 자정 이후 시간을 밀리초로 표시 

getHours() : 0 ~ 23 시 

getSeconds() : 0 ~ 59 초

getMilliseconds() : 0 ~ 999 의 숫자로 밀리초 표시

 

 

모질라 참고 문헌 

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds