배경색 brown으로 변경하는 버튼과 새로고침, 그리고
history의 길이를 표시하고 page1,2,3으로 가는 버튼
뒤로가기 앞으로 가기 버튼을 가지고 있는 페이지를 작성
3페이지로 이동 된 모습 href를 눌러 옮겨가는 방식이라 history의 길이가 늘어난 모습 replace를 이용하면 새창을 여는 형식이라 길이가 늘어나지 않는다.
뒤로가기를 사용하고 배경색을 변경한 모습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=
, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="page-name"></h1>
<button id="bg-chang-btn">배경색 바꾸기</button>
<button id="window-reload-btn">새로고침</button>
<br /><br />
<h2 id="history-length"></h2>
<br /><br />
<button class="move-page-href-btn" page="1">page1으로 이동 (href)</button>
<button class="move-page-replace-btn" page="1">
page1으로 이동 (replace)
</button>
<br />
<button class="move-page-href-btn" page="2">page2으로 이동 (href)</button>
<button class="move-page-replace-btn" page="2">
page2으로 이동 (replace)
</button>
<br />
<button class="move-page-href-btn" page="3">page3으로 이동 (href)</button>
<button class="move-page-replace-btn" page="3">
page3으로 이동 (replace)
</button>
<br />
<br /><br />
<button id="back-btn">뒤로가기 (back)</button>
<button id="prev-go-btn">뒤로가기 (go)</button>
<button id="next-go-btn">앞으로 가기 (go)</button>
<select name="시도" id=""></select>
<script src=" 4-20.js "></script>
</body>
</html>
page1,2,3 동일한 HTML 사용
Js
let pageName = window.document.getElementById("page-name");
let pathArr = window.location.pathname.split("/");
pageName.innerHTML = pathArr[pathArr.length - 1];
// console.log(pathArr[pathArr.length - 1]);
let bgChangBtn = window.document.getElementById("bg-chang-btn");
bgChangBtn.addEventListener("click", function() {
let isOk = window.confirm(' 배경색을 바꾸시겠습니까? ');
// boolean : true / false
if (isOk) {
document.querySelector("body").style.backgroundColor = "brown";
}
});
let reLoadBtn = window.document.getElementById("window-reload-btn");
reLoadBtn.addEventListener("click", function() {
window.location.reload();
});
// 히스토리 길이를 표시
let historyLen = window.document.getElementById("history-length");
historyLen.innerHTML = `${window.history.length}개 기록됨`;
let pageHrefBtns = window.document.getElementsByClassName("move-page-href-btn");
for (let i = 0; i < pageHrefBtns.length; i++) {
pageHrefBtns[i].onclick = function() {
let pageNum = pageHrefBtns[i].getAttribute("page");
window.location.href = `page${pageNum}.html`;
}
}
let pageReplaceBtns = window.document.getElementsByClassName("move-page-replace-btn");
for (let i = 0; i < pageReplaceBtns.length; i++) {
pageReplaceBtns[i].onclick = function() {
let pageNum = pageReplaceBtns[i].getAttribute("page");
window.location.replace(`page${pageNum}.html`);
}
}
let backBtn = window.document.getElementById("back-btn");
backBtn.onclick = function() {
window.history.back();
}
let prevGoBtn = window.document.getElementById("prev-go-btn");
prevGoBtn.onclick = function() {
window.history.go(-1);
}
let nextGoBtn = window.document.getElementById("next-go-btn");
nextGoBtn.onclick = function() {
window.history.go(1);
}
Select 기본 예제
서울 select와 option값
부산 select와 option값
<!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>
<select id="city">
<option value="">시/도 선택</option>
<option value="1">서울특별시</option>
<option value="2">부산광역시</option>
</select>
<select id="county">
<option value="">시/군/구 선택</option>
<!-- <option value="1">서울특별시</option>
<option value="2">부산광역시</option> -->
</select>
<script src="4-20_2.js"></script>
</body>
</html>
JS
seoulCountyList = [
"강동구",
"강서구",
"강남구",
"강북구",
"..."
];
//배열값에 넣어서 하나 씩 불러와서 값을 이용하는게 깔끔함
let citySelet = window.document.getElementById("city");
citySelet.addEventListener("change", function() {
let countySelect = window.document.getElementById("county")
let optionHtmlStr = '<option value="">시/군/구 선택</option>';
if (this.value == 1) {
for (let i = 0; i < seoulCountyList.length; i++) {
optionHtmlStr += `<option value=\"${i+1}\">${seoulCountyList[i]}</option>`;
}
// optionHtmlStr += "<option value=\"2\">강서구</option>";
// optionHtmlStr += "<option value=\"3\">강남구</option>";
// optionHtmlStr += "<option value=\"4\">강북구</option>";
// optionHtmlStr += "<option value=\"5\">...</option>";
} else if (this.value == 2) {
optionHtmlStr += "<option value=\"1\">진구</option>";
optionHtmlStr += "<option value=\"2\">남구</option>";
optionHtmlStr += "<option value=\"3\">동구</option>";
optionHtmlStr += "<option value=\"4\">해운대구</option>";
optionHtmlStr += "<option value=\"5\">...</option>";
}
countySelect.innerHTML = optionHtmlStr;
})