console.log 생활화하기!!
textcontent (최신버전)
innerText (구버전)
main.innerText += "";
main.innerText = main.innerText + "";
둘은 같다.
모달 코드
function showProfileModal() {
let profileModal = document.createElement("div");
let profileImg = document.createElement("img");
profileImg.alt = "프로필 사진";
profileImg.onclick = function () {
hideProfileModal();
};
profileModal.className = "profileModal";
profileModal.appendChild(profileImg);
// div 아래에 img 태그 삽입
let mainTag = document.querySelector("main");
mainTag.appendChild(profileModal);
// main 아래에 profileModal 변수를 삽입 (div태그)
}
function hideProfileModal() {
let profileModal = document.querySelector(".profileModal");
let mainTag = document.querySelector("main");
mainTag.removeChild(profileModal);
}
BOM 실습
let bgChangeBtn = window.document.querySelector("bg-change-btn");
bgChangeBtn.addEventListener("click", function() {
let isOk = window.confirm('배경색을 바꾸시겠습니까?');
console.log(isOk);
if (isOk) {
document.querySelector("body").style.backgroundColor = "brown";
}
});
let newWindow;
let newWindowBtn = window.document.querySelector("new-window-btn");
newWindowBtn.addEventListener("click", function() {
window.open("new_window.html", "새로운 창", "width=300; height=300;");
});
let WindowCloseBtn = window.document.querySelector("window-close-btn");
newWindowBtn.addEventListener("click", function() {
newWindow.close();
});
let WindowResizeBtn = window.document.querySelector("window-resize-btn");
newWindowBtn.addEventListener("click", function() {
newWindow.resizeTo();
});
let WindowIncreaseBtn = window.document.querySelector("window-increase-btn");
newWindowBtn.addEventListener("click", function() {
newWindow.resizeBy(100, 100);
});
let WindowReduceBtn = window.document.querySelector("window-reduce-btn");
newWindowBtn.addEventListener("click", function() {
newWindow.resizeBy(-100, -100);
});
let WindowScrollUpBtn = window.document.querySelector("window-scroll-up-btn");
newWindowBtn.addEventListener("click", function() {
newWindow.resizeBy(-100, -100);
});
let WindowScrollDownBtn = window.document.querySelector("window-scroll-down-btn");
newWindowBtn.addEventListener("click", function() {
newWindow.scrollBy(-100, -100);
});
내 history 코드
main.js
let pageName = window.document.getElementById("page-name");
let pathArr = window.location.pathname.split("/")
pageName.innerHTML = pathArr[pathArr.length-1];
let bgChangeBtn = window.document.getElementById("bg-change-btn");
bgChangeBtn.addEventListener("click", function() {
let isOk = window.confirm('배경색을 바꾸시겠습니까?');
// boolean : true / false
if (isOk) {
document.querySelector("body").style.backgroundColor = "brown";
}
});
let refreshBtn = window.document.getElementById("refresh-btn");
bgChangeBtn.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 (1 = 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 (1 = 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);
}
내 html 코드
<!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>
<h1 id="page-name"></h1>
<button id="bg-change-btn">배경색 바꾸기</button>
<button id="refresh-btn">새로고침</button>
<h2 id="history-length"></h2>
<br><br>
<button class="move-page-href-btn" page="1">page1로 이동</button>
<button class="move-page-replace-btn" page="1">page1로 이동</button>
<br>
<button class="move-page-href-btn" page="2">page2로 이동</button>
<button class="move-page-replace-btn" page="2">page2로 이동</button>
<br>
<button class="move-page-href-btn" page="3">page3로 이동</button>
<button class="move-page-replace-btn" page="3">page3로 이동</button>
<br>
<button id="back-btn">뒤로 가기(back)</button>
<button id="prev-go-btn">뒤로 가기(go)</button>
<button id="next-go-btn">앞으로 가기</button>
<script src="main.js"></script>
</body>
</html>
실습!
function showText() {
alert("함수가 호출되었습니다."); // 함수가 호출되었는지 확인하는 방법
textArea.innerHTML = "토끼가 나타났어요!!";
}
carrot_btn.addEventListener("click", showText);
// showText() 괄호를 써버리면 이벤트 유무와 관계없이 바로 실행된다.
~ 1번 문제 ~ 마우스 엔터 시 배경색 바뀜.
blockOne.addEventListener("mouseenter", function() {
blockOne.classList.add("red");
});
blockTwo.addEventListener("mouseenter", function() {
blockTwo.classList.add("yellow");
});
// 한 줄로 작성할 때
function threeColor() {
blockThree.classList.add("green");
};
blockThree.addEventListener("mouseenter", threeColor);
// 미리 함수를 선언할 때
~ 2번 문제 ~ 화면의 상단으로 이동하기
function scrollUp(e) {
/*1. 함수를 적용할 target 변수 지정하기*/
let target = document.getElementById(e);
/*2. 버튼 클릭 시 화면의 최상단으로 이동하기*/
target.addEventListener("click",function() {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
});
}
scrollUp("scroll-btn");
~ 3번 문제 ~ 출석부 이름 기입하기
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>출석하기</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<div class='container'>
<div class='inputWindow'>
<input type="text" name="name" placeholder="이름을 입력하세요.">
<button class="attend">출석</button>
</div>
<h3>출석부</h3>
<p style="text-align: center" id="attendee"></p>
</div>
</body>
<script src="index.js"></script>
</html>
JS
/*지시사항을 따라 작성해주세요*/
/*1. index.html 파일을 참고해 주어진 변수들 완성시키기*/
const target = document.querySelector(".attend"); //올바른 값을 작성해주세요.
const inputName = document.querySelector("input"); //올바른 값을 작성해주세요.
const attendee = document.querySelector("#attendee"); //올바른 값을 작성해주세요.
/*2. 입력받은 이름을 출석부에 나타내기*/
function attend() {
/*여기에 작성해주세요.*/
attendee.textContent = inputName.value;
}
target.addEventListener("click", attend);
~ 4번 문제 ~ form사용법 익히기
let form = document.querySelector("#form");
let input = document.querySelector("#input");
let answer = document.querySelector("#answer");
form.addEventListener("submit",function(e) {
e.preventDefault(); // form의 기본 동작인 새로고침을 막아준다.
answer.innerText = input.value;
form.reset();
});
~ 5번 문제 ~ 버튼 클릭 시 문장 삽입
function myFunction() {
let p = document.createElement("p");
p.innerText = "이것이 추가될 문장입니다.";
document.querySelector("#myDiv").appendChild(p);
}
