HTML, CSS, JavaScript의 관계
기본적으로 브라우저는 HTML을 본다.
HTML에서 내부적으로 CSS, JavaScript를 호출하는 것이다.
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>이런 식으로..
JavaScript로 style 바꾸기
const title = document.getElementById("title");
title.style.color = "red";이런 식으로 color를 변경할 수 있다.
하지만 이런 방식은 좋은 방식이 아니다.
코드의 재사용성, 가시성을 보았을 때의 측면에서 더 좋은 방법이 존재한다.
CSS를 활용하자.
style.css 파일을 다음과 같이 설정해 본다.
.active {
color: tomato;
}
.inactive {
color: cornflowerblue;
}그 후, js를 다음과 같이 구성한다.
const title = document.getElementById("title");
function handleClickEvent()
{
if (title.className === "active")
title.className = "inactive";
else
title.className = "active";
}
title.onclick = handleClickEvent;요런 식으로 구성하면, 클릭 시 title의 className이 변경되고, 그에 맞는 CSS가 적용되어 색깔이 변하게 된다.
더 좋은 방법
위의 방법은 그저 className을 그대로 치환하는 기능만 존재한다.
즉,
// app.js
title.className = "good-font";/* style.css */
.good-font {
font-family: 'Song Myung', serif;
}뭐 대충 이런 식으로 있을 때,
위의 방법을 통해 className을 바꿔버리면 기존에 적용되던 font는 사라지고 기본 폰트로 바뀌게 된다.
즉, 폰트는 유지가 되지 않고 색깔만 바뀌게 되어버린다는 것.
classList의 메소드
title.classList.contains("good-font")라고 쓰면, title의 여러 클래스 중 "good-font"가 있으면 true를 리턴한다.
이 외에도, remove(), add(), toggle() 등이 있다.
입력 받기
js를 이용하기
<div>
<input type="text" placeholder="name">
<button>log in</button>
</div>const input = document.querySelector("div input");
const logIn = document.querySelector("div button");
function handlerLogIn()
{
const name = input.value;
console.log("name: ", name);
}뭐 이런 식으로 사용할 수 있다.
html의 기능을 이용하기
이 기능을 사용하려면 input 태그를 form 태그의 자식으로 집어넣어야 한다.
<form>
<input required maxlength="15" type="text" placeholder="name">
<input type="submit" value="log in">
</form>요로코롬 사용하면 js를 사용하지 않고도 html이 자동으로 여러 기능들을 집어넣게 된다.
심지어 버튼 클릭이 아니라 Enter를 통해서도 값을 입력받을 수 있다.
단점 : 매 입력마다 submit이 되면서 브라우저 자체가 새로고침이 되는 현상이 발생하는데, 이는 다음에서 해결해 볼 것이다. (로그인 부분 말고도 다른 부분 또한 새로고침이 되어버리는 문제 -> 성능 저하)
해결 방법
새로고침이 되는 현상은 form의 submit 이벤트가 발생할 때에 벌어지는 현상이다.
form에 데이터를 입력한 후에 Enter / 버튼클릭 을 하게 되면 발생하는 이벤트는 "submit"에 해당한다.
사전 정보
앞서, event의 경우 해당 event가 발생했을 때에 등록된 함수를 실행한다고 했었다.
하지만, 이 때 브라우저는 함수를 실행시킬 때 묵시적으로 인자를 하나 넣게된다.
이 인자에는 이벤트 발생 및 그 시점과 관련된 여러 정보들이 저장되어 있다.
특히, defaultPrevented 멤버가 존재해서 이 값을 통해 default 동작을 하는지 안 하는지에 대한 정보가 저장된다.
사전 정보를 이용하면, 다음과 같은 방식으로 default 동작이 이루어지는 것을 막고, user-defined 동작만 실행되도록 변경할 수 있다.
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySeleector("#login-form input");
function onLoginSubmit(event)
{
event.preventDefault();
console.log(loginInput.value);
}
loginForm.addEventListener("submit", onLoginSubmit);이런 식으로 사용할 수 있다.
부가정보 : anchor
anchor의 경우,
<a href="www.naver.com">go to naver</a>이런 식으로 사용하게 되면, 링크 클릭 시 네이버로 이동하게 된다.
anchor의 경우, click event가 발생 시 default 동작으로 해당 링크로 이동하는 동작을 하게 된다.
css를 사용해서 태그 감추기
.hidden {
display: none;
}요로코롬 정의해 놓으면, hidden 클래스의 경우 존재는 하지만 보이지는 않게 되는 효과가 나타난다.
응용하기
const h1 = document.querySelector("h1"); function eventHandler() { h1.classList.add("hidden"); } // ---- 이벤트 등록하는 부분 ----이런 식으로 응용할 수 있다.
새로고침 시에도 데이터 저장하기
기본적으로 제공하는 localStorage 객체를 이용한다.
key - value 쌍으로 데이터가 저장된다.
기본적인 method
localStorage.setItem(key, value)
localStorage.getItem(key)
localStorage.removeItem(key)기본적인 기능은 이름 그대로 예상한대로 동작한다.
getItem()
만약 해당 key-value 쌍이 존재하지 않을 경우, null 값이 리턴된다. 그러므로, null을 이용해서 있을 경우 / 없을 경우를 구분해서 사용할 수 있다.
