7월 19일_JAVA Script(이벤트, date, 수학함수, 팝업)

CLASS_JAVA Script

by awesong 2024. 7. 19. 17:09

728x90

# 이벤트

이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미

# 이벤트 타입(event type)

이벤트 타입(event type)은 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 함.
가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 폭넓게 제공

이벤트 사용 예시

<script>
    //상세설명보기
    document.querySelector('#open').onclick = function() {
      document.querySelector('#desc').style.display = "block";
      document.querySelector('#open').style.display = "none";
      document.querySelector('#open2').style.display = "none";
    }
    //상세설명닫기
    document.querySelector('#close').onclick = function() {
      document.querySelector('#desc').style.display = "none";
      document.querySelector('#open').style.display = "block";
      document.querySelector('#close2').style.display = "none";
      document.querySelector('#open2').style.display = "block";
    }
    //이미지보기
    document.querySelector('#open2').onclick = function() {
      document.querySelector('#desc2').style.display = "block";
      document.querySelector('#open2').style.display = "none";
      document.querySelector('#open').style.display = "none";
      document.querySelector('#close2').style.display = "block";
    }
    //이미지닫기
    document.querySelector('#close2').onclick = function() {
      document.querySelector('#desc2').style.display = "none";
      document.querySelector('#open2').style.display = "block";
      document.querySelector('#open').style.display = "block";
    }
  
 </script>

# 날짜 함수

Date 객체

new Date()
new Date("날짜를 나타내는 문자열")
new Date(밀리초)
new Date(년, 월, 일, 시, 분, 초, 밀리초)

자바스크립트에서의 날짜 표현

연도(year) : 1900년(00) ~ 1999년(99)
월(month) : 1월(0) ~ 12월(11)
일(day) : 1일(1) ~ 31일(31)
시(hours) : 0시(0) ~ 23시(23)
분(minutes) : 0분(0) ~ 59분(59)
초(seconds) : 0초(0) ~ 59초(59)

** 자바스크립트에서 월(month)을 나타낼 때는 1월이 0으로 표현되고, 12월이 11로 표현된다는 사실에 유의

  <script>
    let now = new Date();

    document.write("현재시간은 : " + now.toString() + "<br>");
    document.write("현재시간은 : " + now.toLocaleString() + "<br>");
    document.write("년도 : " + now.getFullYear() + "<br>");
    document.write("월 : " + now.getMonth() + "<br>");
    document.write("일 : " + now.getDate() + "<br>");
    document.write("시 : " + now.getHours() + "<br>");
    document.write("분 : " + now.getMinutes() + "<br>");
    document.write("초 : " + now.getSeconds() + "<br>");
    
    //월에 +1 을 해야 현재 월이 나옴
   	document.write("월 : " + (now.getMonth()+1) + "<br>");
    //시에 -12을 하면 12시간 표현으로 출력
    document.write("시 : " + (now.getHours()-12) + "<br>");
    
    let d = new Date();
    d.setFullYear(2024,11,3);
    d.setMonth(2024,7,19);
    d.setDate(2024,11,3);

    document.write("현재시간은 : " + d + "<br>");

  </script>

# Math 메소드

Math.min() : 최소값 반환
Math.max() : 최대값 반환
Math.random() : 무작위 숫자 반환 ( 0보다 크거나 같고 1보다 작은 수)
Math.round() : 반올림 (소수점 첫 번째 자리에서)
Math.floor() : 소수점 아래는 버리고 반환 (음수는 소수점 아래를 버리고 더 작은 수로 반환)
Math.ceil() : 인수로 전달받은 값과 같거나 큰 수 중 가증 작은 정수 반환
Math.sin() : 사인(sine) 함수값 반환

# 팝업 창 사용하기

기본으로 항상 팝업창 띄우기

<body onload="openPopup()">

<script>
    window.open("popup.html","pop","width=500, height=500 left=100, top=200");

팝업 차단 여부 확인 하고 창 띄우기

<script>
  
    let block = false;
    function openPopup() {
      var newWin = window.open("popup.html","pop","width=500, height=500 left=100, top=200");
      if (newWin == null) {
        alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.")
      }
      newWin.moneBy(100,100);
    }
  
  </script>

저작자표시 비영리 동일조건

'CLASS_JAVA Script' 카테고리의 다른 글

7월 18일_JAVA Script(함수, 배열, 매개변수, 호이스팅 등) (0)	2024.07.18
7월 17일_JAVA Script(변수, 연산자, 조건문, 반복문 등) (0)	2024.07.17
7월 16일_JAVA Script(시작하기, 자바스크립트 메소드) (0)	2024.07.16