기본형
number
String
null
undefined
boolean
Symbol
Symbol타입 - 객체의 프로퍼티 키를 고유하게 설정함으로써 프로퍼티 키의 충돌을 방지하기 위해 사용
1) 생성법 - Symbol 함수를 호출함으로써 생성함
ex> let syn1 = Symbol('설명문')
let obj = {
name: "green",
age: 30,
}
2) 객체의 키로 사용
let obj = { name: "green", age: 20, }
let id = Symbol('id');
obj[id] = 123;
3) 객체의 숨김 프로퍼티
Object.keys(obj) 객체의 프로퍼티의 키를 배열로 반환
Object.values(obj) 객체의 프로퍼티의 값을 배열로 반환
Object.entries(obj) 객체의 프로퍼티를 배열로 반환
🎃 set - 중복을 허용하지 않는 값을 모아놓은 컬렉션
- 셋을 생성: new Set(이터러블)
셋을 생성합니다. 이터러블 객체(배열)를 전달받으면 그 안에 값을 복사해 셋에 넣어줍니다.
set.add(value) - 값을 추가
set.delete(value) - 값을 제거
set.has(value) - set 내에 value가 존재하면 true 아니면 false를 반환합니다.
set.size - set에 몇개의 값이 있는지 반환해줌
set.clear() - set을 비웁니다.
객체 - 키가 있는 컬렉션을 저장
배열 - 순서(인덱스)가 있는 컬렉션을 저장
참조형
object / array / function
set / map
Date 객체
날짜를 저장할 수 있고, 날짜와 관련된 메서드를 제공해주는 내장객체
1) 객체 생성하기
new Date()를 호출하면 새로운 Date 객체가 만들어집니다.
ex> let today = new Date();
new Date() 현재날짜와 시간을 가진 객체
new Date(년도, 월, 일 ,시, 분, 초 밀리초)
-> 년도와 월은 필수 입력값, 월은 0~11 입력(0이 1월입니다.)
new Date(밀리초)
기준 1970년 1월 1일 0시 0분 0초
데이터 객체를 생성할 때 파라미터를 1개만 지정하면 이 값은 밀리초로 해석됩니다.
1000
1970년 1월 1일 0시 0분 1초인 것을 볼 수 있습니다.
2) 날짜 구성요소 받기
getFullYear() 년도 (네 자릿수)를 반환합니다.
getMonth() 월을 반환합니다. (0~11)
getDate() 날짜를 반환합니다.
getDay() 요일을 반환합니다. (0~6)
getHours() 시간을 반환합니다.
getMinutes() 분을 반환합니다.
getSeconds() 초를 반환합니다.
get Milliseconds() 밀리초를 반환합니다.
3) 날짜 구성요소 설정
setDate(현재Date+10)
10Symbolproperty.html
<!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">
<title>Document</title>
</head>
<body>
<script>
let obj = {
name: "green",
age: 30,
}
let id = Symbol('id');
obj[id] = "123";
console.log(obj);
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(obj['name']);
console.log(Object.getOwnPropertySymbols(obj));
console.log(Reflect.ownKeys(obj));
console.log(obj[id]); // 123
let clone = Object.assign({},obj);
console.log(clone);
// 객체 메서드
// 👀Object.keys(객체) 객체의 키들을 배열로 반환(키중 심볼은 제외)
// 👀Object.values(객체) 객체의 값들을 배열로 반환(키중 심볼은 제외)
// 👀Object.assign({목표객체}, 복사할객체) 복사할객체를 목표객체에 복사하고 복사된 객체 반환
// Object.getOwnPropertySymbols(객체) 객체의 키중 심볼을 배열로 반환
// Reflect.ownKeys(객체) 객체의 키들을 배열로 반환(심볼타입, 문자열타입)
</script>
</body>
</html>
set.html
<!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">
<title>Document</title>
</head>
<body>
<script>
let set = new Set();
let green = { name: 'green'};
let blue = { name: 'blue' };
let pink = { name: 'pink' };
set.add(green);
set.add(blue);
set.add(pink);
set.add(green);
console.log(set);
set.forEach((value, index)=> {
console.log(`value는 ${value}이다.`);
console.log(`index는 ${index}이다.`);
})
let numSet = new Set(["a", 2, "c", "a", 5]); // 중복값은 한번만 들어감
let numArr = [...numSet];
console.log(numSet);
console.log(numArr);
numSet.forEach((value, index)=> {
console.log(`value는 ${value}이다.`);
console.log(`index는 ${index}이다.`); // value랑 index 값이 같다.
})
</script>
</body>
</html>
set_ex.html
<!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">
<title>Document</title>
</head>
<body>
<script>
function unique(arr) {
let set = new Set(arr);
let numArr = [...set];
return numArr;
}
let values = ["Hare", "Krishna", "Hare", "Krishna", "Krishna", "Krishna", "Hare", "Hare", ":-O"];
alert(unique(values));
</script>
</body>
</html>
date.html
<!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">
<title>Document</title>
</head>
<body>
<script>
// new Date (년도, 월, 일 ,시, 분 ,초, 밀리초)
// new Date (0) 1970 1월 1일 0시 0분 0초
// 월을 입력할 때는 0~11로 입력해야합니다.
// 월은 0을 입력하면 1월로 해석됩니다.
let now = new Date();
let nowyear = now.getFullYear();
let nowmonth = now.getMonth()+1;
let nowday = now.getDate();
let nowDateString = now.toLocaleDateString();
let nowTimeString = now.toLocaleTimeString();
console.log(`현재 년도는 ${nowyear}이고 달은 ${nowmonth}이고 일은 ${nowday}이다.`);
console.log(nowDateString);
console.log(nowTimeString);
let nowHour = now.getHours();
let nowM = now.getMinutes();
let nowS = now.getSeconds();
console.log(nowHour, nowM, nowS);
</script>
</body>
</html>
전자시계.html
<!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">
<title>Document</title>
<style>
body {
font-size: 120px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<p>
<span id = "hour"></span> :
<span id = "minute"></span> :
<span id = "second"></span>
</p>
<script>
setInterval(function(){
let now = new Date();
document.querySelector('#hour').innerHTML = now.getHours();
document.querySelector('#minute').innerHTML = now.getMinutes();
document.querySelector('#second').innerHTML = now.getSeconds();
},1000)
let de = new Date(0);
console.log(de.toLocaleTimeString());
console.log(de.toLocaleDateString());
let now2 = new Date();
// Day 0~6 일~토
let dayString = "";
switch(now2.getDay()){
case 0 :
dayString = "일요일";
break;
case 1 :
dayString = "월요일";
break;
case 2 :
dayString = "화요일";
break;
case 3 :
dayString = "수요일";
break;
case 4 :
dayString = "목요일";
break;
case 5 :
dayString = "금요일";
break;
case 6 :
dayString = "토요일";
break;
}
console.log(now2.getDay());
console.log(dayString);
</script>
</body>
</html>
setDate.html
<!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">
<title>Document</title>
</head>
<body>
<script>
let now = new Date();
// now.setDate(now.getDate()+5);
now.setDate(30);
console.log(now.toLocaleDateString());
// Date 객체를 숫자로 변경해 시간차 측정하기
let strat = new Date(); // 측정시간
for(let i = 0; i<100000000; i++) {
let doSomething = i * i * i;
}
let end = new Date(); // 측정종료
let time = end-strat;
console.log(`반복문을 모두 도는데 ${time}밀리초가 걸렸습니다.`);
let firstDay = new Date("2022-05-10");
let nowDay = new Date();
let todayTime = nowDay.getTime();
let startTime= firstDay.getTime();
let dayday = Math.floor((todayTime - startTime)/(1000*60*60*24));
console.log(`2022년 5월 10일부터 ${dayday} 일이 되었습니다.`);
// 밀리초 -> 하루
// 하루 24시간
// 1시간 60분
// 1분 60초
// 1초 1000밀리초
// 1000밀리초 -> 1초
// 10000밀리초 -> 10초
console.log(firstDay.toLocaleDateString());
</script>
</body>
</html>
d-day.html
<!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">
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
#wrap {
border: 5px solid pink;
width: 1000px;
height: 450px;
border-radius: 50px;
}
#top {
height: 120px;
background-color: pink;
color: #fff;
padding: 30px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
}
#bottom {
height: 300px;
}
input {
border: none;
border-bottom: 5px solid pink;
margin: 50px 20px;
outline: none;
font-size: 18px;
}
#inputs {
display: flex;
justify-content: center;
}
button {
padding: 10px 50px;
border: none;
background-color: pink;
border-radius: 5px;
font-size: 16px;
margin: 20px 10px;
}
#btns {
display: flex;
justify-content: center;
}
#dayday {
font-size: 32px;
color: pink;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
<h1>기념일</h1>
<div>사귄날짜를 입력하세요~</div>
</div>
<div id="bottom">
<div id ="inputs">
<input type="text">
<input type="text">
<input type="text">
</div>
<div id="btns">
<button id="days50">50일은?</button>
<button id="days100">100일은?</button>
<button id="l_today">오늘은 며칠째?</button>
</div>
<div id="dayday"></div>
</div>
</div>
<script>
let days = document.querySelectorAll('input');
let l_Day = new Date();
let str = [];
function todayday() {
while(str.length > 0) {
str.pop();
}
days.forEach(input=>str.push(Number(input.value)))
}
days50.addEventListener('click', function(){
todayday();
l_Day = new Date(`"${str[0]}-${str[1]}-${str[2]}"`);
l_Day.setDate(l_Day.getDate()+50);
console.log(str);
document.querySelector('#dayday').innerHTML
= `50일이 되는 날은 ${l_Day.getFullYear()}월 ${l_Day.getMonth()+1}월 ${l_Day.getDate()}일입니다.`;
console.log(str[2]);
console.log(l_Day);
console.log(l_Day.getDate());
})
days100.addEventListener('click', function(){
todayday();
let l_Day = new Date(`"${str[0]}-${str[1]}-${str[2]}"`);
l_Day.setDate(l_Day.getDate()+100);
document.querySelector('#dayday').innerHTML
= `100일이 되는 날은 ${l_Day.getFullYear()}월 ${l_Day.getMonth()+1}월 ${l_Day.getDate()}일입니다.`;
})
l_today.addEventListener('click', function(){
todayday();
let nowDay = new Date();
let todayTime = nowDay.getTime();
let l_Day = new Date(`"${str[0]}-${str[1]}-${str[2]}"`);
let DayDay = Math.floor((todayTime-l_Day)/(1000*60*60*24));
document.querySelector('#dayday').innerHTML = `우리가 만난지 ${DayDay}일이 되었습니다.`;
})
// function reset() {
// l_Day = new Date(`"${str[0]}-${str[1]}-${str[2]}"`);
// }
</script>
</body>
</html>
eventDat.html (d-day_t)
<!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">
<title>Document</title>
<style>
* { padding: 0; margin: 0; box-sizing: border-box; }
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
body > div {
width: 80%;
max-width: 1000px;
border-radius: 20px;
border: 3px solid pink;
overflow: hidden;
}
#title {
padding: 30px;
color: #fff;
background-color: pink;
}
#inputs {
text-align: center;
padding: 20px;
}
input {
outline: none;
border: none;
border-bottom: 1px dotted pink;
margin: 0 10px;
line-height: 40px;
}
#buttons {
text-align: center;
padding: 20px;
}
button {
border-radius: 5px;
background: pink;
padding: 10px 40px;
margin: 0 6px;
outline: none;
border: none;
}
#text {
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<div>
<div id="title">
<h2>기념일</h2>
<p>사귄 날짜를 입력하세요 ~</p>
</div>
<div>
<div id="inputs">
<input type="text" id="year" name="year">
<input type="text" id="month" name="month">
<input type="text" id="date" name="date">
</div>
<div id="buttons">
<button data-key="date" data-value="50">50일은?</button>
<button data-key="date" data-value="100">100일은?</button>
<button data-key="date" data-value="today">오늘은 며칠째?</button>
</div>
</div>
<div id="text"></div>
</div>
<script>
// Input에 사용자로부터 입력을 받는다
// 년, 월, 일
// 버튼을 누르면 결과를 text에 보여준다
// - 버튼을 클릭했을 때 년, 월, 일이 빈칸이면
// 날짜를 입력해주세요 경고창
// -년, 월, 일이 빈칸이 아니면 숫자가 맞는지 확인
// 숫자가 아닌 문자가 있을 경우
// 숫자만 입력해주세요 경고창
// - 입력된 값으로 데이트 객체를 생성
// firstDate
// {
// year: "2022",
// month: "05",
// date: "01",
// }
// new Date(firstDate.year, firstDate.month-1, f);
// - 50일 버튼을 클릭 했을 경우
// - 입력된 값으로 만든 데이트 객체에서 50일 더해진
// - 데이트 객체를 생성
// - 오늘은 며칠째를 클릭하면 현재 날짜의 객체를 생성
// 현재 날짜 객체의 밀리초를 반환하여
// 입력한 데이트 객체의 밀리초를 빼줌
// -> 그 값을 일자로 변환
// 사귄지 며칠 되었습니다를 화면에 출력
let yearInput = document.querySelector('#year');
let monthInput = document.querySelector('#month');
let dateInput = document.querySelector('#date');
let btns = document.querySelector('#buttons');
let text = document.querySelector('#text');
btns.addEventListener('click',function(e){
let getDate = getInputValue();
// console.log(e.target);
// 클릭한 노드의 dataset 객체의 value키에 접근
let value = e.target.dataset.value;
console.log(getDate);
// 입력한 날짜의 데이트 객체를 생성
let firstDate = new Date(getDate.year, getDate.month, getDate.date);
console.log(firstDate.getFullYear(), firstDate.getMonth()+1, firstDate.getDate());
// 오늘 버튼을 클릭했다면
if(value === 'today') {
let toDay = new Date();
// 입력한 데이트 객체를 밀리초로 받아서 strarTime 할당
let startTime = firstDate.getTime();
// 현재 데이트 객체를 밀리초로 받아서 strartTime 할당
let todayTime = toDay.getTime();
let re = Math.floor((todayTime - startTime)/(1000*60*60*24));
text.innerHTML = `우리가 만난지 ${re}일입니다.`;
} else {
// console.log(value);
firstDate.setDate(firstDate.getDate()+Number(value));
text.innerHTML = `${value}일은 ${firstDate.getFullYear()}년 ${firstDate.getMonth()+1}월 ${firstDate.getDate()}일입니다.`;
}
// } else if(value ==='100') {
// firstDate.setDate(firstDate.getDate()+100);
// text.innerHTML = `100일은 ${firstDate.getFullYear()}년 ${firstDate.getMonth()+1}월 ${firstDate.getDate()}일입니다.`;
// }
})
function getInputValue() {
// input의 값이 빈칸이면 return
if(!yearInput.value || !monthInput.value || !dateInput.value) {
console.log(yearInput.value, monthInput.value, dateInput.value);
alert('날짜를 입력해주세요');
return
}
if(isNaN(Number(yearInput.value))
|| isNaN(Number(monthInput.value))
|| isNaN(Number(dateInput.value))) {
alter('숫자만 입력해주세요');
return;
}
const firstDay = {
year: Number(yearInput.value),
month: Number(monthInput.value)-1,
date: Number(dateInput.value)
}
return firstDay;
}
</script>
</body>
</html>'Stack > JavaScript' 카테고리의 다른 글
| [JS] 클래스 (ES6) (0) | 2022.05.20 |
|---|---|
| [JS] HTML 커스텀 속성 (0) | 2022.05.20 |
| [JS] 정규표현식 (0) | 2022.05.19 |
| [JS] Daum 우편번호 서비스 API 활용 (0) | 2022.05.18 |
| [JS] Form태그 (0) | 2022.05.18 |