의미
Javascript without library
라이브러리를 의존하지 않는 자바스크립트를 의미한다.
여기에 라이브러리와 프레임워크가 추가되면 화장을 하여 더 인터렉티브한 JS가 된다.
React, Jquery, Library, Framework에 대한 전문가들은 찾기 쉽지만 only Javascript에 대한 전문가들은 찾기 쉽지 않다. 소질이 있는 사람을 찾는 것도 쉽지 않아 보인다.
Vanilla JS를 사용하는 방법은 http://vanilla-js.com/ 에서 확인할 수 있으며 다른 방법과 서로 비교하는 것도 보여준다.
In to Vanilla JS
JS는 항상 Body 아래 있어야한다.
제일 마지막에 추가해야한다는 말이다.
<!-- index.js -->
<!DOCTYPE html>
<html>
<head>
<title>first Test</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>first test page!</h1>
<script src="index.js"></script>
</body>
</html>
// index.js
console.log("JS is working!!");
DOM Functions
<!DOCTYPE html>
<html>
<head>
<title>first Test</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 id="title">first test page!</h1>
<script src="index.js"></script>
</body>
</html>
const title = document.getElementById("title")
title.innerHTML = "I changed it!";
DOM형식으로 되어있기에 document.getElementById 를 통해 title을 가진 태그에 접근하여 하고 싶은 작업을 할 수 있게 된다.
document.querySelector("#title") 는 노드의 첫번째 자식을 반환한다. 이것도 엄청 많이 쓰일 예정
이벤트
const title = document.querySelector("#title");
function handleResize() {
console.log("resizing...");
}
window.addEventListener("resize", handleResize);resize(창의 크기를 바꾸면 실행되는 이벤트)라는 이벤트 등록 후 handleResize라는 함수를 실행시키려면 이렇게 해야한다.
여기서 주의할 점은 handleResize() 가 아닌 handleResize 를 써야 함수가 들어가는데 () 를 붙이게 되면 그 함수를 바로 실행한다는 의미가 되어버린다.
const title = document.querySelector("#title");
function handleResize(event) {
console.log(event);
}
window.addEventListener("resize", handleResize);event 는 eventListener 실행시 주고 받는 기본 인자이다.
const title = document.querySelector("#title");
function handleClick(event) {
title.style.color = "red";
}
title.addEventListener("click", handleClick);click 은 클릭하면 이벤트가 발생한다. 클릭시 빨간색으로 변하게 하는 코드 일부이다.
https://developer.mozilla.org/ko/docs/Web/Events
이곳에서 이벤트 리스너 종류를 볼 수 있다.
함수 연습
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
const currentClass = title.className;
if (currentClass !== CLICKED_CLASS) {
title.className = CLICKED_CLASS;
} else {
title.className = "";
}
}
function init() {
title.addEventListener("click", handleClick);
}
init();
클릭시 글자의 색이 바뀌게끔 하는 코드이다. 이 코드의 문제는 클릭 후 className이 clicked로 바뀌에 되는데 다시 클릭시 이미 clicked를 가지고 있기 깨문에 else로 빠져서 className이 아무것도 없는 상태가 된다.
이때 css에서 지정해준 색으로 변하게 된다. 그리고 또 다시 clicked가 아니기 때문에 if문이 성립하여 clicked로 className이 되바뀌며 clicked 값에 지정해준 색으로 변하게 된다. 따라서 className이 아얘 없어지는 것을 대비하여 함수를 사용하여 해결해보자.
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
const hasClass = title.classList.contains(CLICKED_CLASS);
if (!hasClass) {
title.classList.add(CLICKED_CLASS);
} else {
title.classList.remove(CLICKED_CLASS);
}
}
function init() {
title.addEventListener("click", handleClick);
}
init();
classList를 사용하면 클래스를 조작하는 다양한 메소드들을 쓸 수 있다.
classList.add : 클래스를 필요에 따라 삽입
classList.remove : 클래스를 필요에 따라 제거
classList.contains : 값이 존재하는지 체크
위의 함수를 사용함으로써 클래스가 여러개일 때 여러 클래스를 공존시키게 유지시키면서 추가, 삭제가 가능해지게끔 된다.
togggle() 은 위의 모든 기능들을 함축한다.
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
title.classList.toggle(CLICKED_CLASS);
}
function init() {
title.addEventListener("click", handleClick);
}
init();
Uploaded by Notion2Tistory v1.1.0