프로젝트를 만들기 전에 자바스크립트 프로그래밍 언어를 배워보자.
학습 날짜 : 23.08.05
자바스크립트가 브라우저를 어떻게 움직이게 하는지 알아보자.
자바스크립트를 사용하는 이유는 HTML과 상호작용을 하기 위해서이다.
→ HTML의 Element들을 JavaScript를 통해 변경하고, 읽을 수 있다.
document
를 입력하면 작성한 HTML을 가져올 수 있다.document
는 HTML을 가리키는 객체이다.)document.title
: HTML에 있는 title 속성 값document.title="Momentum App"
: HTML에 있는 title 속성 값을 Momentum App으로 변경한다.(TCP School) https://www.tcpschool.com/javascript/js_dom_document
학습 날짜 : 23.08.05
document
는 자바스크립트에서 HTML에 접근할 수 있는 방법이다.
document.getElementById()
: id를 통해 요소를 찾는다.<h1>
요소를 가져온다.title.innerText = "수정할 내용"
: title의 요소를 변경한다.const title = document.getElementById("title");
title.innerText = "Got you!"
학습 날짜 : 23.08.05
자바스크립트를 통해 HTML을 가져올 수 있는 방법
document.getElementById()
: id를 통해 요소를 찾는다.document.getElementByClassName()
document.getElementByTagName()
document.querySelector()
document.querySelector(".hello h1")
document.querySelector("div h1:first-child")
document.querySelectorAll()
학습 날짜 : 23.08.05
자바스크립트는 모든 event를 listen할 수 있다.
addEventListener("이벤트", 이벤트가 일어났을 때 실행할 함수명);
title.addEventListener("click", handleTitleClick);
학습 날짜 : 23.08.05
event는 매우 다양하다.
<listen하고 싶은 event를 찾는 가장 좋은 방법>
//예시
function handleTitleClick(){
title.style.color = "blue";
}
function handleMouseEnter(){
title.innerText = "Mouse is here!";
}
function handleMouseLeave(){
title.innerText = "Mouse is gone!";
}
title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);
style은 CSS를 통해 변경되어야 한다.
학습 날짜 : 23.08.06
title.onclick = handleMouseEnter;
title.addEventListener(“mouseenter” , handleMouseEnter);
위의 두 코드는 동일하게 작동하지만, addEventListener를 더 선호한다.
why? removeEventListener
를 통해서 event listener를 제거할 수 있기 때문
document를 통해 body, head, title을 가져올 수 있지만, div나 h1 등의 요소들은 querySelector() 또는 getElementById()등을 통해 가져와야 한다.
ex) document.body.style.backgroundColor = "tomato";
document.querySelector(“h1”);
window event 예시
function handleWindowResize(){
document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy(){
alert("copier!!");
}
function handelWindowOffline(){
alert("SOS no WIFI");
}
function handelWindowOnline(){
alert("ALL GOOOOD");
}
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handelWindowOffline);
window.addEventListener("online", handelWindowOnline);
학습 날짜 : 23.08.07
function handleTitleClick(){
const currentColor = h1.style.color;
let newColor; //newColor 값은 변하기 때문에 let으로 선언
if(currentColor === "blue"){
newColor = "tomato";
}else{
newColor = "blue";
}
h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick);
h1.style.color = newColor;
학습 날짜 : 23.08.07
style에 적합한 도구는 CSS이고, animation에 적합한 도구는 JavaScript이다.
h1{
color: cornflowerblue;
transition: color .4s ease-in-out;
}
.clicked{
color: tomato;
}
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
if(h1.className === "clicked"){
h1.className = "";
}else{
h1.className = "clicked";
}
}
h1.addEventListener("click", handleTitleClick);
const 로 지정하자. → class를 상수로 선언하자!!
function handleTitleClick(){
const clickedClass = "clicked";
if(h1.className === clickedClass){
h1.className = "";
}else{
h1.className = clickedClass;
}
}
변수로 선언을 하여 사용하면 변수명을 잘못 작성하였을 때 오류가 발생하기 때문에 쉽게 오류를 확인할 수 있다.
(class명을 변수로 선언하지 않고 오타가 나면, 오류가 발생하지 않고 실행이 되지 않아 찾기 힘들다.)
그런데, h1에 원래 class name이 있었을 경우, 저 코드로 실행을 하면 최초의 class name이 사라진다.
우리는 JavaScript로 모든 class name을 변경하지 않아야 한다.
다음 강의에서 최초의 class name을 삭제하지 않고 변경할 수 있는 방법을 알아보자.
학습 날짜 : 23.08.07
h1.classList.contains(clickedClass)
function handleTitleClick(){
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)){
h1.classList.remove(clickedClass);
}else{
h1.classList.add(clickedClass);
}
}
function handleTitleClick(){
h1.classList.toggle("clicked");
}