location
[window.]location : 현재 보이는 페이지의 정보
locaion.href : 페이지의 url(a 태그의 href와 같음) 태그가 아닌 다른 곳에 주소 입력 시 사용
location.hostname : 서버의 주소(Domain mane)
location.pathname : 페이지의 경로와 파일명
location.protocol : 사용 중인 웹 프로토콜(http)
history
window.history : 방문한 페이지 이동 관련 정보 방문한 페이지가 있어야 활성화
history.back() : 이전 페이지로 이동
history.forward() : 다음 페이지로 이동
history.go(n) : back과 forward를 합친 메서드
back -> history.go(-1); 숫자만큼 점프해서 뒤로 간다.
forward -> history.go(1); 숫자만큼 점프해서 앞으로 간다.
history.length : 방문한 페이지 개수
<출력화면>
현재 페이지 : file:///M:/Raspberry-work/Front-end/JavaScript/JS10/4.location_history.html - html 파일을 열었을 때
현재 페이지 : http://localhost:5500/4.location_history.html - 내 컴퓨터에서 봤을 때
<!DOCTYPE html>
<html lang="ko">
<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>페이지 위치 및 방문 정보</title>
</head>
<body>
<p>현재 페이지 : <span id="curr"></span></p>
<p>현재 페이지 host : <span id="curr1"></span></p>
<p>현재 페이지 경로 : <span id="curr2"></span></p>
<p>현재 페이지 프로토콜 : <span id="curr3"></span></p>
<p>주소 : <input type="text" id="ustr"><button id="go">이동</button></p>
<hr>
<button id="back">뒤로가기</button>
<button id="forward">앞으로가기</button>
</body>
<script>
const cur = document.getElementById("curr");
cur.innerHTML = location.href;
const cur1 = document.getElementById("curr1");
cur1.innerHTML = location.hostname;
const cur2 = document.getElementById("curr2");
cur2.innerHTML = location.pathname;
const cur3 = document.getElementById("curr3");
cur3.innerHTML = location.protocol; //s가 붙은건 보안이 강화된 버전
//페이지 이동
const url_str = document.getElementById("ustr");
const btn_go = document.getElementById("go");
btn_go.onclick = () => {
let url = url_str.value;
if (url == ""){
alert("주소를 입력하세요.");
return;
}else{
location.href = `http://${url}`;//프로토콜 안에 입력받은 url을 넣어준다.
}
}
console.log(history.length);
//뒤로 가기 앞으로 가기 버튼
const back = document.getElementById("back");
const forw = document.getElementById("forward");
back.onclick = () => {
history.back();
}
forw.onclick = () => {
history.forward();
}
</script>
</html>
timing(시계, 알람기능, 자동 슬라이더 등)
timeout 기능 - 1회용 알람 생성
설정(생성) : setTimeout(function, millisecond)
해제(삭제) : clearTimeout(timeout)
interval 기능 - 무한 반복하는 주기 생성
설정(생성) : setInterval(function, millisecond)
해제(삭제) : clearInterval(interval)
<!DOCTYPE html>
<html lang="ko">
<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>timer</title>
</head>
<body>
<h2>타이머</h2>
<input type="number" id="setNo" placeholder="초단위 입력"><br>
<button>설정</button>
<button>해제</button>
<hr>
<h2>카운트증가</h2>
<p><b id="cnt">0</b></p>
<p>
<button>시작</button>
<button>중지</button>
</p>
<hr>
<h2>시계</h2>
<p>현재 시간 : <b id="now"></b></p>
</body>
<script>
// let i = 0;
// setTimeout(function () {
// i++;
// console.log(i);
// }, 2000);
const btns = document.querySelectorAll("button");
const setNum = document.querySelector("#setNo");
let al; // 알람 저장변수
btns[0].onclick = () => {
btns[0].disabled = true; //반복적인 실행이 되지 않도록 막아주는 작업이 필요하다.
let sn = Number(setNum.value) * 1000;
al = setTimeout(function () {
alert(`${sn / 1000}초 경과`);
btns[0].disabled = false;
}, sn);
}
btns[1].onclick = () => {
clearTimeout(al); //알람 삭제
btns[0].disabled = false;
}
///////////////////////////////
let inter;
let n = 0; //시작하는 값
const num = document.querySelector("#cnt");
btns[2].onclick = () => {
n = 0;
num.innerHTML = n;
btns[2].disabled = true;
inter = setInterval( () => {
n++;
num.innerHTML = n;
}, 1000);
}
btns[3].onclick = () => {
btns[2].disabled = false;
clearInterval(inter);
}
///////////////////////////////
// 시계
const clock = document.querySelector("#now");
function getTime() {
let time = new Date();
let h = String(time.getHours()).padStart(2, "0"); //String으로 묶어 문자열로 변환, 빈자리에 0을 쓴다.
let m = String(time.getMinutes()).padStart(2, "0");
let s = String(time.getSeconds()).padStart(2, "0");
clock.innerHTML = `${h}:${m}:${s}`;
}
getTime(); //최초 한번 실행해서 현재 시간 출력
setInterval(getTime, 1000); //1초 반복
</script>
</html>
슬라이더 제어할 때 자바스크립트
/* 슬라이더 제어 스크립트 */
let i = 0; //슬라이드 번호
const pos = document.querySelectorAll("[type='radio']");
function slide() {
i++;
if (i >= 4) { //슬라이드 번호 상환
i = 0;
}
//라디오 버튼 체크 상태 변경, 하나만 선택 가능
pos[i].checked = true;
}
//3초마다 한 번씩 슬라이드
let inter = setInterval(slide, 2000);
//특정 슬라이드를 선택했을 때 그 슬라이드로부터 자동 재생이 처리되도록
function change(po) {
i = po;
clearInterval(inter);
inter = setInterval(slide, 3000);
}
'공부기록 > JavaScript' 카테고리의 다른 글
| 3월 20일 (2) JavaScript - jQuery event, effect (0) | 2023.03.20 |
|---|---|
| 3월 20일 (1) JavaScript - 예제, jQuery (0) | 2023.03.20 |
| 3월 17일 (1) JavaScript - Screen (0) | 2023.03.17 |
| 3월 16일 (2) JavaScript - 브라우저 객체 모델 (0) | 2023.03.16 |
| 3월 16일 (1) JavaScript - node 활용 제어 (0) | 2023.03.16 |