수업 8일차
백준을 javascript로 풀기위해 vscode세팅을 엄청 했지만 실패하고 예제 txt파일로 입력을 받아 풀기로 했다... 아침부터 세팅하고 딥다이브 읽고 한다고 팔린 정신이 수업시간에도 안돌아와서 점심먹을때 까지는 고생했던거 같다.
이론
- BOM : 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추각 객체
window.innerHeigth : 웹페이지의 높이
window.innerWidth : 웹페이지의 너비
window.alert() : 브라우저에 알림창 표시
window.confirm() : 브라우저에 확인창 표시
window.close() : 현재창 닫기
window.open("URL", "이름", "설정") : 새로운 창 열기
window.scrollTo() : 지정한 위치로 스크롤
window.scrollBy() : 지정한 만큼 스크롤
window.resizeTo() : 창 크기를 지정한 크기로 변경
window.resizeBy() : 창 크기를 지정한 크기만큼 변경
window.location.href : 전체 URl (history기록됨)
window.location.pathname : URL 경로
window.location.search : URL 중 ?부터 뒷부분
window.location.hash : URL 중 #부터 뒷부분
window.location.reload() : 현재 페이지 새로고침
window.location.replace() : 현재 페이지 문서 교체(history 기록 안됨)
window.history.length : 현재 창의 방문한 페이지 개수
window.history.back() : 이전 페이지로 이동
window.history.go(1) : 다음 페이지로 이동(음수면 이전 페이지)
select 태그 : 여러 값 중 하나를 선택할 경우 사용
input 태그 : 사용자로 부터 입력을 받기 위한 태그
jQuery : javascript를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반 라이브러리
alert - 콘솔과 같이 테스트용 알림
innerText : 눈에 보이는 요소만 넣음(공백이 많아도 하나로 취급)
innerHTML : 눈에 보이지 않는 요소도 다 넣음(태그 포함)
textContent : 눈에 보이지 않는 요소도 다 넣음(태그 제외)
실습
배경색 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;
})
코린이 입니당 :)