1) match.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 str = 'abccc';
console.log(str.match(/c*/));
let str2 = '123abc'
console.log(str2.match(/(\d+)(\w)/));
str = str.replace(/ab/,"hi");
console.log(str);
</script>
</body>
</html>2) 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 solution(new_id){
let answer = '';
//1단계 아이디는 소문자로만 되어야 함
new_id = new_id.toLowerCase();
console.log(`소문자로 변경: ${new_id}`);
//2단계 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거
new_id = new_id.replace(/[^a-z0-9\-\_\.]/g,"");
console.log(`특수문자제거 변경: ${new_id}`);
//3단계 마침표(.)가 2번 이상 연속된 부분을 하나의 마침표로 변경
new_id = new_id.replace(/\.{2,}/g,".");
console.log(`연속마침표를 하나로 변경: ${new_id}`);
//4단계 마침표(.)가 처음이나 끝에 위치하면 제거
new_id = new_id.replace(/^\.|\.$/g,"");
console.log(`앞,뒤 마침표를 제거: ${new_id}`);
//5단계 new_id가 빈문자열이라면 "a"를 대입해라
new_id = new_id.length === 0? "a" : new_id;
//6단계 new_id의 길이가 16자 이상이면 new_id 첫 15개 문자를 제외한 나머지 문자를 제거
//제거했을 때 마침표(.) new_id의 끝에 위치한다면 마지막(.)문자를 제거
new_id = new_id.length >=16? new_id.slice(0,15) : new_id;
new_id = new_id.replace(/\.$/,"")
console.log(`15개만 남기기: ${new_id}`);
return new_id;
}
solution("...!@BaT#..y.abcdefghijklm.");
</script>
</body>
</html>3) ex02.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>
//패턴을 만들어서 특정 문자열이 해당 패턴이 맞는지 체크
const regex = /\d{3}-\d{4}-\d{4}/;
console.log(regex.test('010-1234-1234'));
console.log(regex.test('02-1234-4567'));
//문자들 중에서 전화번호만 반환
const text = "안녕하세요 제 전화번호는 010-1234-1234 입니다. 연락주세요!";
console.log(text.match(/\d{3}-\d{4}-\d{4}/)[0]);
</script>
</body>
</html>4) 10.Symbolproperty.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]);
let clone = Object.assign({},obj);
console.log(clone);
//객체 메소드
// ※Object.keys(객체) 객체의 키들을 배열로 반환(키 중 심볼은 제외)
// ※Object.values(객체) 객체의 값들을 배열로 반환
// ※Object.assign({목표객체}, 복사할 객체) 복사할 객체를 목표객체에 복사하고 복사된 객체 반환
// Object.getOwnPropertySymbols(객체) 객체의 키 중 심볼을 배열로 반환
// Reflect.ownKeys(객체) 객체의 키들을 배열로 반환(심볼타입, 문자열타입)
</script>
</body>
</html>5) 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(`vlaue는 ${value}이다.`);
console.log(`index는 ${index}이다.`);
})
let numSet = new Set(["a","b","a","a","e"]);
let newArr = [...numSet];
console.log(numSet);
console.log(newArr);
numSet.forEach((value,index)=>{
console.log(`vlaue는 ${value}이다.`);
console.log(`index는 ${index}이다.`);
})
</script>
</body>
</html>6) 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>
let values = ["Hare","Krishna","Hare","Krishna","Krishna","Krishna","Hare","Hare",":-O"];
function unique(arr){
let set = new Set(arr);
arr = [...set];
return arr;
}
alert(unique(values));
</script>
</body>
</html>7) 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>
<span id="h"></span> <span>:</span> <span id="m"></span> <span>:</span> <span id="s"></span>
<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.getDay();
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>8) clock.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>
span {
font-size: 100px;
}
</style>
</head>
<body>
<span id="h"></span> <span>:</span> <span id="m"></span> <span>:</span> <span id="s"></span>
<script>
setInterval(function(){
let now = new Date();
let nowHour = now.getHours();
let nowM = now.getMinutes();
let nowS = now.getSeconds();
let h = document.querySelector('#h');
let m = document.querySelector('#m');
let s = document.querySelector('#s');
h.innerHTML = nowHour;
m.innerHTML = nowM;
s.innerHTML = nowS;
}, 1000);
</script>
</body>
</html>9) 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()+10);
console.log(now.toLocaleDateString());
// Date객체를 숫자로 변경해 시간차 측정하기
let start = new Date(); //측정시간
for( let i=0; i<1000000; i++){
let doSomething = i*i*i;
}
let end = new Date() //측정종료
let time = end - start;
console.log(`반복문을 모두 도는데 ${time}밀리초가 걸렸습니다.`);
let firstDay = new Date("2000-02-06");
let nowDay = new Date();
let todayTime = nowDay.getTime();
let startTime = firstDay.getTime();
let dayday = Math.floor((todayTime - startTime)/(1000*60*60*24));
console.log(`2000년 2월 6일부터 ${dayday} 일이 되었습니다.`);
// 밀리초 -> 하루
// 하루 24시간
// 1시간 60분
// 1분 60초
// 1초 1000밀리초
console.log(firstDay.toLocaleDateString());
</script>
</body>
</html>10) eventday.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>
#wrap {
border: 2px solid pink;
border-radius: 30px;
width: 800px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
#header {
background: pink;
height: 100px;
line-height: 100px;
}
h1 {
text-align: left;
padding-left: 40px;
color: #fff;
}
input {
border: none;
border-bottom: 2px solid pink;
outline: none;
padding: 10px 0;
margin: 0 10px;
margin-top: 20px;
}
button {
border: none;
background: pink;
margin: 0 5px;
padding: 10px 30px;
border-radius: 5px;
margin-top: 40px;
}
#text {
font-size: 38px;
color: pink;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1>기념일</h1></div>
<div>
<p><input type="text" id="y"><input type="text" id="m"><input type="text" id="d"></p>
<button id="btn1">50일은?</button><button id="btn2">100일은?</button><button id="btn3">오늘은 몇일째?</button>
<p id="text"></p>
</div>
</div>
<script>
let now = new Date();
let y = document.querySelector('#y');
let m = document.querySelector('#m');
let d = document.querySelector('#d');
document.querySelector('#btn1').addEventListener('click',function(){
let a = Number(y.value);
let b = Number(m.value);
let c = Number(d.value);
let md = new Date(`${a}-${b}-${c}`);
md.setDate(md.getDate()+50);
let text = document.querySelector('#text');
text.innerHTML = `50일째 되는 날은 ${md.getFullYear()}년${md.getMonth()+1}월${md.getDate()}일입니다.`
})
document.querySelector('#btn2').addEventListener('click',function(){
let a = Number(y.value);
let b = Number(m.value);
let c = Number(d.value);
let md = new Date(`${a}-${b}-${c}`);
md.setDate(md.getDate()+100);
let text = document.querySelector('#text');
text.innerHTML = `100일째 되는 날은 ${md.getFullYear()}년${md.getMonth()+1}월${md.getDate()}일입니다.`
})
document.querySelector('#btn3').addEventListener('click',function(){
let a = Number(y.value);
let b = Number(m.value);
let c = Number(d.value);
let md = new Date(`${a}-${b}-${c}`);
let ddd = Math.floor((now.getTime()-md.getTime())/(1000*60*60*24));
text.innerHTML = `오늘은 ${ddd+1}일째입니다.`;
})
</script>
</body>
</html>11) eventday_teach.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>
* { margin: 0; padding: 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: 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 id="input">
<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>
// 인풋에 사용자로부터 입력을 받는다.
// 년, 월, 일
// 버튼을 누르면 결과를 text에 보여준다.
// - 버튼을 클릭했을때 년, 월, 일이 빈칸이면
// 날짜를 입력해주세요 경고창
// - 년, 월, 일이 빈칸이 아니면 숫자가 맞는지 확인
// 숫자가 아닌 문자가 있을 경우
// 숫자만 입력해주세요 경고창
// - 입력된 값으로 데이트 객체를 생성
// firstDate
// {
// year: "2022",
// month: "05",
// date: "01",
// }
// new Date(firstDate.year,firstDate.month-1,firstDate.date);
// - 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();
//클릭한 노드의 dataset객체의 value키에 접근
let value = e.target.dataset.value;
//입력한 날짜의 데이트 객체를 생성
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();
//입력한 데이트 객체를 밀리초로 받아서 startTime할당
let startTime = firstDate.getTime();
//현재 데이트 객체를 밀리초로 받아서 todayTime할당
let todayTime = toDay.getTime();
let re = Math.floor((todayTime-startTime)/(1000*60*60*24));
text.innerHTML = `우리가 만난지 ${re}일입니다.`;
}else{
firstDate.setDate(firstDate.getDate()+Number(value));
text.innerHTML = `${Number(value)}일은 ${firstDate.getFullYear()}년 ${firstDate.getMonth()+1}월 ${firstDate.getDate()}일입니다.`;
}
})
function getInputValue(){
//input의 값이 빈칸이면 return
if(!yearInput.value || !monthInput.value || !dateInput.value) {
alert('날짜를 입력해주세요.');
return;
}
if(isNaN(Number(yearInput.value)) || isNaN(Number(monthInput.value)) || isNaN(Number(dateInput.value))) {
alert('숫자만 입력해주세요.');
return;
}
const firstDay = {
year: Number(yearInput.value),
month: Number(monthInput.value)-1,
date: Number(dateInput.value),
}
return firstDay;
}
</script>
</body>
</html>'노력이 좋아서' 카테고리의 다른 글
| <step45>'js_slide최종마무리' (0) | 2022.05.23 |
|---|---|
| <step44>'js_클래스' (0) | 2022.05.20 |
| <step42>'js_keydown, keyup, form' (0) | 2022.05.18 |
| <step41>'js_dom, scroll' (0) | 2022.05.17 |
| <step40>'js_event,scroll' (0) | 2022.05.16 |