첫번째 프로젝트는 버튼을 누르면 배경화면의 색이 바뀌게 되는 color flipper를 만드는 내용이다.
DOM이란?
DOM(Document Object Model)은 HTML 및 XML문서를 브라우저가 읽는 방법을 나타내는 인터페티스이다.
자바스크립트가 웹 사이트를 조작, 구조화 및 스타일링할 수 있도록 도와주는 도구이다. 브라우저가 HTML 문서를 읽은 후 DOM이라고 하는 표현트리라고 하는 것을 만들어서 해당 트리에 엑세스 할 수 있는 방법을 정의한다.
DOM을 조작함으로써 새로 고침없이 페이지의 데이터를 업데이트하는 어플리케이션을 만들 수 있다. 또한 사용자가 사용자 정의할 수 있는 어플리케이션을 만든 후 새로 고침없이 레이아웃을 변경할 수 있다.
HTML파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color Flipper || Simple</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav>
<div class="nav-center">
<h4>color flipper</h4>
<ul class="nav-links">
<li><a href="index.html">simple</a></li>
<li><a href="hex.html">hex</a></li>
</ul>
</div>
</nav>
<main>
<div class="container">
<h2>background color : <span class="color">#f1f5f8</span></h2>
<button class="btn btn-hero" id="btn">click me</button>
</div>
</main>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>
이 HTML파일을 기반으로 javascript를 적용한다.
1. 배열 선언
const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];colors라는 배열을 선언하고, 네가지 색상값을 포함하고 있다.
2.요소 선택
const btn = document.getElementById("btn");
const color = document.querySelector(".color");- document.getElementById( )메소드는 특정 id속성을 가진 요소를 검색하고 그 요소를 리턴한다.
- documnet.querySelector( )메소드는 id뿐만아니라 class, 복합 태그 등 모두 가져올 수 있기 때문에 더 강력하게 작용할 수 있다.
위의 경우에는 클래스 속성인 ".color"를 가져왔다.
3. 이벤트리스너 추가
btn.addEventListener("click", function () {
const randomNumber = getRandomNumber();
document.body.style.backgroundColor = colors[randomNumber];
color.textContent = colors[randomNumber];
});
- addEventListener( )는 document 요소에 event를 부여할 때 사용하는 메소드이다.
addEventListenr("이벤트", 실행할 함수)로 정의할 수 있다.
- 그렇다면 이벤트는 무엇일까? 이벤트는 웹 브라우저에서 사용자가 수행하는 동작이나 시스템에서 발생하는 사건을 의미한다. 예를 들어 사용자가 버튼을 클릭하거나 키보드를 누르거나 마우스를 움직이거나 페이지가 로드 되는 등의 동작이 모두 이벤트에 해당한다.
- click: 사용자가 요소를 클릭할 때 발생합니다.
- mouseover: 사용자가 요소 위에 마우스를 올려놓을 때 발생합니다.
- keydown: 사용자가 키보드를 눌렀을 때 발생합니다.
- load: 웹 페이지나 이미지 등이 로드될 때 발생합니다.
- submit: 사용자가 폼을 제출할 때 발생합니다.
- 위 코드에서는 btn.addEventListenr에서 "click"이라 이벤트를 추가하였고 이는 버튼을 클릭할 때마다 함수가 실행된다는 것을 의미한다.
- const randomNumber = getRandomNumber( );는 randomNumber라고 하는 상수에 무작위 숫자를 생성하는 함수를 저장하였다. getRandomNumber는 0부터 'colors' 배열의 길이보다 하나 작은 숫자까지의 정수를 반환한다.
- document.body.style.backgroundColor = colors[randomNumber]; 에서는 HTML의 body를 참조하고 style.backgraoundColor속성을 사용해서 body의 배경색을 변경한다. colors[randomNumber]는 color배열에서 randomNumeber인덱스에 해당하는 색상을 가져온다. 이는 body의 배경색을 colors배열에서 무작위로 선택된 색상으로 설정된다는 뜻이다.
- color.textContent=colors[randomNumber];는 color클래스를 가지고 있는 HTML을 참조하여 textContent속성을 사용하여 이 요소의 텍스트 내용을 변경한다.
4.무작위 숫자 생성함수
function getRandomNumber() {
return Math.floor(Math.random() * colors.length);
}
- 위에서 사용했던 getRandomNumber()함수에 대해서 알아보자
- Math.random()함수를 사용하면 0이상 1미만의 부동 소수점 난수를 반환한다. 예를들어 0.4837이나 0.9342같은 값들이다. 이 값에 colors.length를 곱하면 colors.length의 값인 4를 곱해서 0이상 4미만의 부동 소수점 숫자가 된다.
- Math.floor()함수는 주어진 숫자보다 크지 않은 가장 큰 정수를 반환하는 함수이므로 getRandomNumber()는 colors 배열의 길이 인덱스인 0,1,2,3중 하나를 반환하여 배열에서 무작위로 색상을 선택하는 데에 사용된다.
짜잔! 그래서 적용하면 다음과 같은 화면이 완성 된다!!
저 click me 버튼을 누르면 랜덤으로 color배열에 설정해 놓은 색으로 바뀌게 된다.
'개발 > javascript' 카테고리의 다른 글
| [JS] Counter 만들기 (1) | 2024.06.08 |
|---|---|
| [JS]Color Flipper 만들기2 (2) | 2024.06.07 |
| [JS] 시작 (1) | 2024.06.07 |
| 자료구조와 자료형 (0) | 2024.04.14 |
| 객체 : 기본 (0) | 2024.04.04 |