CLASS_JAVA Script
7월 19일_JAVA Script(이벤트, date, 수학함수, 팝업)
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>