반응형
JavaScript
- 웹문서를 제어하기 위해 개발된 언어
- 컨텐츠 변경, 추가, 제거 등 html 문서를 조작하기 위해 만들어진 언어
DOM
- Document Object Model의 약자로, HTML요소를 JavaScript Object처럼 조작할 수 있는 Model이다.
- DOM의 구조는 트리구조로, 아래에 여러 구성요소가 부모-자식 관계를 가지고 있다.
- DOM에서 제공하는 API를 변경하여 Element의 상태를 변경할 수 있다.
window.onload() 속성
- 해당 요소가 완전히 로드 되었을 때, 자동으로 호출되는 함수를 지정하는 속성
- 웹 페이지에서 여러 번 사용해도 window.onload() 함수는 하나만 적용
window.onload = () => {
console.log("wink");
}
date 객체
- 날짜와 시간(년, 월, 일, 시, 분, 초, 밀리초)을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수
- 시간 메소드: getHours(), getMinutes(), getSeconds() ...
- 날짜 메소드: getFullYear(), getMonth(), getDate() ...
let date = new Date();
console.log(date); //현재 날짜 및 시간이 출력됨
innerText와 innerHTML
- innerText: Element의 속성으로, 해당 Element 내에서 사용자에게 보여지는 텍스트 값을 가져오거나 설정 가능
- innerHTML: Element의 속성으로, 해당 Element의 HTML, XML을 가져오거나 설정 가능
// innerText 사용
// 스타일 적용되지 않은 기본 폰트로 <div style='color:red'>innerText</div> 출력
const innerT = document.getElementById('innerT');
innerT.innerText = "<div style='color:red'>innerText</div>";
console.log(innerT);
// innerHTML 사용
// 스타일 적용된 빨간색 폰트로 innerHTML 출력
const innerH = document.getElementById('innerH');
innerH.innerHTML = "<div style='color:red'>innerHTML</div>";
console.log(innerH);
setTimeout()
- 특정 시간이 지난 다음에 코드를 실행하는 함수
- 1s = 1000ms
- ex? 3s = 3000ms
// 2초가 지난 후, “Hello World” 출력
setTimeout(function(){ console.log("Hello World");
}, 2000);
공유사항
JavaScript의 객체 종류
1. 표준 빌트인 객체
- 표준 빌트인 객체(Built-in objects)는 ECMAScript 사양에 정의된 객체를 말하며 애플리케이션 전역의 공통 기능을 제공한다.
- 자바스크립트 실행 환경(브라우저 or Nodejs)에 상관없이 사용할 수 있다.
- 미리 정의되어 있어 선언 하지 않아도 바로 사용할 수 있는 객체들을 말한다.
2. 원시값과 래퍼 객체
- 원시값은 자바스크립트에서 가장 기본적인 데이터 유형으로, 불변하며 객체가 아닌 값들이다.
- 래퍼 객체는 원시값을 객체처럼 다룰 수 있도록 자바스크립트 엔진이 자동으로 생성하는 객체이다.
- 자바스크립트에서는 원시값에 대해 메서드나 속성을 접근하려고 할 때 일시적으로 래퍼 객체가 생성되어 사용된다.
3. 전역 객체
- 전역 객체는 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떠한 객체보다도 먼저 생성되는 객체이다.
- 브라우저에서 전역 객체는 window, node에서 전역 객체는 global을 통해 접근할 수 있다.
- 전역 객체는 앞서 설명한 표준 빌트인 객체를 프로퍼티로 갖는다.
4. 호스트 객체
- 호스트 객체는 브라우저에서 제공하는 window, HTMLElement 등의 DOM 노드 객체와 같이 호스트 환경에 정의된 객체를 말한다.
- 브라우저에서 동작하는 환경과 브라우저 외부에서 동작하는 환경의 자바스크립트(Node.js)는 다른 호스트 객체를 사용할 수 있다.
- 브라우저에서 동작하는 환경의 호스트 객체는 전역 객체인 window, BOM과 DOM등을 제공한다.
백틱
- ES6부터 도입된 문자열이다.
- 백틱(Backtick)은 자바스크립트에서 문자열을 정의하는 데 사용하는 특별한 구문이다.
- 이를 사용하면 템플릿 문자열을 작성할 수 있다.
- 이는 문자열 내에서 변수를 쉽게 포함하거나 여러 줄 문자열을 손쉽게 작성할 수 있게 해준다.
비동기처리 함수
- 비동기 처리 함수는 오래 걸리는 작업을 비동기적으로 실행하여 메인 스레드의 블로킹을 피하고, 효율적인 작업 처리를 가능하게 한다.
- 자바스크립트의 비동기 처리에는 주로 콜백(Callbacks), 프로미스(Promises), async/await 방식이 있다.
- 콜백 함수는 비동기 작업이 완료된 후 호출되는 함수이다. 이를 통해 작업이 완료된 후의 처리를 정의할 수 있습니다.
- 프로미스는 비동기 작업의 완료, 실패를 나타내는 객체이다. 프로미스는 then과 catch 메서드를 통해 후속 작업을 정의할 수 있다.
- async와 await 키워드는 ES8에서 도입된 비동기 처리를 위한 구문으로, 프로미스를 보다 간결하고 읽기 쉽게 사용할 수 있게 한다.
디지털시계 제작
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Digital Clock</title>
<link rel="stylesheet" href="./style.css">
</head>
<body style="background-image: url('./background-image.svg');">
<div class="container">
<h1>WINK Clock</h1>
<h2>20212992 박건민</h2>
<div id="DateDisplay"></div>
<div id="ClockDisplay"></div>
<h3>히히</h3>
</div>
<script src="./index.js"></script>
</body>
</html>
index.js
window.onload = () => {
showTime();
showDate();
}
const showTime = () => {
const date = new Date();
let hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
const hourStr = hours < 10 ? `0${hours}` : hours;
const minStr = minutes < 10 ? `0${minutes}` : minutes;
const secStr = seconds < 10 ? `0${seconds}` : seconds;
const timeStr = `${hourStr} : ${minStr} : ${secStr} ${ampm}`;
document.getElementById('ClockDisplay').innerText = timeStr;
setTimeout(showTime, 1000);
}
const showDate = () => {
const date = new Date();
const year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month < 10 ? `0${month}` : month;
day = day < 10 ? `0${day}` : day;
const dateStr = `${year}/${month}/${day}`;
document.getElementById('DateDisplay').innerText = dateStr;
setTimeout(showDate, 86400000);
}
style.css
body {
font-family :'나눔고딕', 'Malgun Gothic', sans-serif;
color :rgb(255, 255, 255);
font-size: 25px;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 22vh;
}
h2{margin-top: -20px;}
h3{
margin-top: 30vh;
margin-left: 170vh;
opacity: 0.2;
}
#DateDisplay,
#ClockDisplay{
font-size: 100px;
font-weight: bold;
}
결과물
반응형
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2024 신입부원 기초 스터디] 김태일 #5주차 (0) | 2024.05.21 |
|---|---|
| [2024 신입부원 기초 스터디] 이종윤 #4주차 (JS_dom) (0) | 2024.05.20 |
| [2024 신입부원 기초 스터디] 백채린 #4주차 (JS_DOM) (0) | 2024.05.16 |
| [2024 신입부원 기초 스터디] 이서영 #3주차 (JS_수정) (0) | 2024.05.16 |
| [2024 신입부원 기초 스터디] 김지나 #4주차 (0) | 2024.05.16 |
