#1. HTML 제어하기
1. HTML 제어하기
1) HTML 속성 제어
- 자바스크립트 객체로 HTML의 요소를 가져오면 속성을 제어할 수 있게 된다.
- 속성을 가져오거나 변경 또는 제거할 수 있다.
※ HTML 요소를 객체로 생성
let example = document.getElementById("id이름");- hasAttribute : 속성의 존재를 확인한다.
example.hasAttribute(name);- getAttribute : 속성값을 가져온다.
example.getAttribute(name);- setAttribute : 속성값을 변경한다.
example.setAttribute(name, value);- removeAttribute : 속성값을 제거한다.
example.removeAttribute(name);
2. CSS 제어하기
1) 객체에 CSS 속성 접근
- 자바스크립트 객체로 HTML 요소를 가져오면 style 이라는 프로퍼티 객체가 내장된다.
- 이 style 객체는 모든 CSS 속성을 프로퍼티로 가지고 있다.
- 단, CSS에서 "-"를 사용해 표현하던 부분은 카멜표기법으로 변환하여 적용해야한다.
- ex) font-family -> fontFamily, background-color -> backgroundColor
- 객체에 CSS 속성 적용하기
example.style.css속성이름 = 값;
2) 객체의 CSS 클래스 접근
- 자바스크립트 객체로 HTML 요소를 가져오면 className 이라는 프로퍼티가 내장된다.
- 이 값에 적용하고자 하는 CSS 클래스 이름을 대입한다.
- 두개 이상의 클래스를 복수 적용할 경우 공백으로 구분한 문자열 형식으로 할당한다.
※ HTML 요소를 객체로 생성
let example = document.getElementById("id이름");- classList.add : 클래스를 추가한다.
example.classList.add(name);- classList.remove : 클래스를 제거한다.
example.classList.remove(name);- classList.toggle : 클래스를 on / off 한다.
example.classList.toggle(name);- classList.contains : 해당 클래스가 존재하는지 여부를 boolean 값으로 반환
example.classList.contains(name);
3. dataset
1) HTML 요소에 정의
- HTML5 부터 모든 HTML 태그 안에 data-이름 형식의 속성을 개발자가 필요한 경우 임의로 정의할 수 있다.
- 이 속성을 사용하여 HTML 태그 안에 자바스크립트에서 활용할 수 있는 정보를 포함시킬 수 있다.
- 이 속성들은 자바스크립트로 가져온 HTML 요소 객체의 dataset 프로퍼티 하위에 포함된다.
<div id="ex" data-name="javascript" data-num="1" data-color="#0066ff"></div>
2) 자바스크립트에서 접근하기
- dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data-이름 의 이름 부분을 사용한다.
const example = document.getElementById("ex");
example.dataset.name; // "javascript"
example.dataset.num; // "1"※ 각 속성은 문자열이며 읽거나 쓸 수 있다.
example.dataset.name = "자바스크립트";
2) CSS에서 접근하기
- 데이터 속성은 HTML의 속성이기 때문에 CSS에서도 접근할 수 있다.
const example2 = document.querySelector("[data-color]");
example2.style.color = example2.dataset.color; // #0066ff 색 대입
#2. 연습문제
[문제 1] 아래 화면과 같이 현재 시각을 yyyy-mm-dd hh:mi:ss 형식으로 출력하는 웹페이지를 구현하시오.
- 년도는 4자리 숫자로 구성되며. 월,일,시,분,초는 2자리로 표현해야한다.
- 출력되는 시간은 매초마다 자동으로 화면상에 갱신되어야 한다.
더보기
[풀이]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 1</title>
</head>
<body>
<div id="timer"></div>
<script>
function getTime() {
const date = new Date();
const yyyy = date.getFullYear();
let mm = date.getMonth()+1;
mm = mm < 10 ? `0${mm}` : mm;
let dd = date.getDate();
dd = dd < 10 ? `0${dd}` : dd;
let hh = date.getHours();
hh = hh < 10 ? `0${hh}` : hh;
let mi = date.getMinutes();
mi = mi < 10 ? `0${mi}` : mi;
let ss = date.getSeconds();
ss = ss < 10 ? `0${ss}` : ss;
document.querySelector("#timer").innerHTML = `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`;
}
setInterval(getTime, 1000)
</script>
</body>
</html>↑ 풀이방법 보기
[문제 2] 아래 화면과 같이 on/off 를 할 때마다 CSS의 상태가 변하는 코드를 작성하시오.
더보기
[풀이]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
<style>
.btn1 {
width: 150px;
height: 50px;
border: 1px solid #000;
text-align: center;
font-size: 20px;
color: blue;
background: gainsboro;
}
.btn2 {
width: 150px;
height: 50px;
border: 1px solid #000;
text-align: center;
font-size: 20px;
color: red;
background: yellow;
}
</style>
</head>
<body>
<input type="button" id="btn" class="btn1" value="푸시알림 수신">
<script>
document.querySelector("#btn").addEventListener("click", e => {
const btn2 = document.getElementById("btn");
btn2.classList.toggle("btn2");
btn2.classList.toggle("btn1");
});
</script>
</body>
</html>↑ 풀이방법 보기
[문제 3] 아래 화면과 같이 3장의 이미지가 3초마다 한번씩 자동으로 변경되는 코드를 작성하시오.
- 세번째 이미지가 표시된 후 3초 후에는 다시 첫번째 이미지가 표시되어야 한다.
더보기
[풀이]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 3</title>
</head>
<body>
<img src="./img/HTML.png" width="200px" id="img" class="img">
<script>
const img = ["./img/HTML.png", "./img/css3.png", "./img/js.png"];
let i = 0
setInterval(() => {
document.querySelector("#img").setAttribute("src", img[i]);
i++;
if(i >= img.length) {
i = 0;
}
/*
위의 if문 대신 i = (i + 1) % img.length; 코드를 사용하면
한 길이 내에서 계속 반복한다.
*/
}, 3000)
</script>
</body>
</html>↑ 풀이방법 보기
[문제 4] 아래 화면과 같이 누르는 버튼에 따라 n일 전 부터 현재까지 범위를 표시하는 코드를 작성하시오.
- 1일 버튼 : 1일 전 ~ 60일 버튼 : 60일 전
더보기
[풀이]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 4</title>
</head>
<body>
<div><span id="date1"></span> ~ <span id="date2"></span></div>
<input type="button" id="btn1" value="1일">
<input type="button" id="btn2" value="7일">
<input type="button" id="btn3" value="15일">
<input type="button" id="btn4" value="30일">
<input type="button" id="btn5" value="60일">
<script>
function getTime(day) {
const date1 = new Date();
date1.setDate(date1.getDate() - (day));
const date2 = new Date();
document.querySelector("#date1").innerHTML =
`${date1.getFullYear()}-${date1.getMonth()+1}-${date1.getDate()}`;
document.querySelector("#date2").innerHTML =
`${date2.getFullYear()}-${date2.getMonth()+1}-${date2.getDate()}`;
}
getTime(0);
document.querySelector("#btn1").addEventListener("click", e => getTime(1))
document.querySelector("#btn2").addEventListener("click", e => getTime(7))
document.querySelector("#btn3").addEventListener("click", e => getTime(15))
document.querySelector("#btn4").addEventListener("click", e => getTime(30))
document.querySelector("#btn5").addEventListener("click", e => getTime(60))
</script>
</body>
</html>↑ 풀이방법 보기
'국비수업 > JavaScript' 카테고리의 다른 글
| [Javascript] Form 요소 (0) | 2022.03.28 |
|---|---|
| [Javascript] HTML 생성하기 (0) | 2022.03.25 |
| [Javascript] DOM의 기본구조 (0) | 2022.03.23 |
| [Javascript] 비동기처리 (0) | 2022.02.17 |
| [Javascript] 예외처리 (0) | 2022.02.16 |