Window Popup
팝업을 통해 새 창을 열 수 있게 해주는 기능
window.open()함수를 통해 새창을 열 수 있음
광고나 공지사항 등의 새 창을 띄우기 위해 사용하면 좋을듯…?
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="popup">새창 열기</button>
<script>
const $popup = document.getElementById('popup');
$popup.onclick = function () {
window.open('https://www.naver.com', '네이버창', 'width = 300, height = 300 left = 100, top = 100');
// 이벤트가 발생했을 때 새창을 열 수 있음
}
</script>
</body>
</html>
setInterval(실행함수, 인터벌 시간);
clearInterval(변수);
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="stopInterval">STOP</button>
<script>
// setInterval() : 일정 시간마다 함수를 반복 실행
// 매개변수로 (실행 함수, 인터벌 시간(밀리초))이 들어감
function a() {
console.log(1);
}
const stop = setInterval(a, 500);
// 함수와 500밀리초 간격으로 실행
// console에 1을 출력하는 것을 0.5초마다 반복
document.querySelector('.stopInterval').onclick = function () {
clearInterval(stop);
// interval을 멈추고자 하면 clearInterval을 통해서 실행
// 이벤트로 stop이라는 버튼을 누르면 interval이 종료
}
</script>
</body>
</html>
setTimeout(함수, 특정시간);
clearTimeout(변수);
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>
5초 뒤 타임함수가 실행되는데 이 버튼을 누르면 실행되지 않습니다.
</h3>
<button class="stopTime">취소</button>
<script>
function a() {
alert('5초 후 경고창 출력');
}
const stop = setTimeout(a, 5000);
const $stopTime = document.querySelector('.stopTime');
$stopTime.onclick = function() {
clearTimeout(stop);
}
</script>
</body>
</html>
JS에 내장되어 있는 객체이며 위도와 경도를 얻을 수 있음
navigator.geolocation.getCurrentPosition(성공 시 함수, 실패 시 함수);
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 성공 실행할 콜백함수
function success(position) {
// position이라는 변수를 받음
console.log(position);
console.log('위도 : ' + position.coords.latitude);
console.log('경도 : ' + position.coords.longitude);
// position이라는 것을 받아와서 위도 경도 확인
}
// 실패 시 실행할 콜백 함수
function fail(error) {
alert('위치 정보를 얻는데 실패했습니다. 위치 정보를 승인해주세요.')
console.log(error);
}
// 즉시 실행 함수
(function () {
navigator.geolocation.getCurrentPosition(success, fail);
}());
</script>
</body>
</html>