HTML은 JS와 CSS를 표현해주는 뼈대이다. JS와 CSS는 상호 소통하지 않고 HTML을 통해서 간접적으로 연결된다. HTML은 DOM 구조의 태그로 이뤄져 있다.
〈 〉 HTML에 CSS JS 인클루드
다음은 기본적인 html을 작성한 뒤 css와 js를 가져오는 방법이다.
css는 link 태그를 통해, js는 script태그를 통해 파일을 html로 include하게 된다. 이 때 script태그는 body의 맨 하단에 위치하게 된다.
<!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">
<link rel="stylesheet" href="style.css"> <!-- css -->
<title>ChromeApp</title>
</head>
<body>
...
<script src="main.js"></script> <!-- js -->
</body>
</html>〈 〉 HTML + JS
JS에서 document 객체는 인클루드한 html을 뜻한다.
document의 태그를 컨트롤 하는 방법은 다음과 같다.
<h1> Title </h1>
<div class="class"> test tag </div>
<div id="id"> test tag2 </div>
<div class="select">
<h2> subTitle </h2>
<h2> subTitle2 </h2>
</div>const tag = document.getElementById("id");
const tag2 = document.getElementsByClassName("class");
const tag3 = document.getElementsByTagName("div");
tag변수를 조작하면 된다.
이 외에도 querySelector가 있는데, css와 같은 방식으로 태그를 지정해 준다.
const tag4 = document.querySelector(".select h2"); //h2(첫번째)를 지정하고 싶을 때
const tag4 = document.querySelectorAll(".select h2"); //h2를 모두 지정하고 싶을 때querySelector는 getElementById와 getElementsByClassName과도 대응된다.
document.getElementById("id");
document.querySelector("#id");
document.getElementsByClassName("class");
document.querySelector(".class");태그를 선택했다면, js가 해주는 일은 event listening이다. 이벤트란, 마우스 클릭 또는 키보드 입력 등 상태 변화를 말한다.
원하는 이벤트와 함께 콜백 함수를 호출해주면 된다.
tag.addEventListener(event, callback);const title = document.querySelector(".title");
//console.dir(title);
//console.log(title);
function myFunction()
{
title.innerText = "clicked!";
}
title.addEventListener("click", myFunction);console.dir()
console.dir()
-> dir : HTML 태그의 속성(attributes)을 출력해주는 메서드. 그대로 출력해주는 log와는 차이가 있음.
이벤트 목록
submit 폼 태그의 정보를 서버로 전송하는 submit태그를 클릭할 때 click 마우스 좌클릭 mousedown 마우스를 클릭(좌우) 했을 때 mouseup 마우스 클릭(좌우)에서 뗄 때 focus 입력 대기 등 포커스된 상태 keydown 키보드 키 눌렀을 때 keyup 키보드 키를 뗄 때 mouseout 마우스가 특정 객체 밖으로 나갔을 때 mouseover 마우스가 특정 객체 위로 올라갔을 때 mousemove 마우스가 움직일 때 load 로드가 완료 됐을 때 select 옵션 태그에서 선택을 햇을 때 change 포커스가 변하거나 옵션을 변경하는 등 변동이 있을 때여기서 더 많은 이벤트를 찾아 볼 수 있다.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
https://developer.mozilla.org/en-US/docs/Web/API/Element참고로 console.dir(tag);를 출력해보면 on- 접두어로 시작하는 단어들이 사용 가능한 event들이다.
윈도에 대한 이벤트는 아래서 확인 가능
https://developer.mozilla.org/en-US/docs/Web/API/Window
addEventListener는 removeEventListener로 제거할 수 있다.
〈 〉 HTML + CSS + JS
js에서 이벤트 발생 시 콜백 함수를 통해 css 스타일을 가져올 수 있다. 아래 예시는 해당 객체의 className을 변경한다.
<!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">
<link rel="stylesheet" href="style.css">
<title>ChromeApp</title>
</head>
<body>
<h1 class="title"> Title </h1>
<script src="main.js"></script>
</body>
</html>
body {
background-color: royalblue;
}
.click {
color : slateblue;
}
const title = document.querySelector(".title");
function myFunction()
{
title.innerText = "clicked!";
title.className = "click"
}
title.addEventListener("click", myFunction);
하지만 이렇게 css를 조작하면 기존 className인 title이 click으로 대체돼 버린다.
이를 방지하기 위해 js코드 부분에 classList 메서드를 사용하도록 한다.
const title = document.querySelector(".title");
function myFunction()
{
title.innerText = "clicked!";
title.classList.add("click");
}
title.addEventListener("click", myFunction);
참고로 classList.contains()메서드는 해당 클래스네임이 있으면 true를 반환해준다.
classList.toggle()메서드를 활용하면 이벤트마다 add/remove를 한 것 과 같은 효과를 낸다.
const title = document.querySelector(".title");
function myFunction()
{
title.innerText = "clicked!";
title.classList.toggle("click");
}
title.addEventListener("click", myFunction);