-
Date객체,String객체 -22.04.08HTML 2022. 4. 8. 17:41728x90
<Date >
·날짜와 시간 작업을 하는데 사용되는 가장 기본적인 객체·New Date() // 현재 날짜와 시간·new Date(milliseconds) // 1970/01/01 이후의 밀리 초·new Date(dateString)·new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])·Month는 0부터 시작·Year는 두자리로도 표시 가능·UTC·기술적인 표기에서는 UTC가 사용된다.<Date 객체의 메소드>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/outStyle.css"> <script> var now1 = new Date(); var now2 = new Date(2000); var now3 = new Date("2022.04.08"); var now4 = new Date(2022,07-1,14,14,59,55); window.onload=function(){ document.getElementsByTagName('div')[0].innerHTML = now1 +"<br>" + now2 +"<br>" + now3 +"<br>" + now4 + "<br><br>"; document.getElementsByTagName('div')[1].innerHTML =now1.toLocaleString() + "<br>" +now1.toLocaleDateString() + "<br>" +now1.toLocaleTimeString(); } </script> <style> div{ border: 2px dotted gold; margin: 20px; } </style> </head> <body> <div></div> <div></div> </body> </html>
date_getDate
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/outStyle.css"> <style> div{ border: 2px dotted gold; margin: 20px; } </style> </head> <body> <h4>getDay() -요일 구하기</h4> <input type="button" value="요일구하기" onclick="proc1()"> <input type="button" value="요일구하기(배열)" onclick="proc2()"> <div></div> <script> var today = new Date(); //전역 function proc1(){ var result = `오늘 날짜: ${today.toLocaleDateString()}`; //요일 구하기 var day = today.getDay(); alert(day); switch (day) { case 0: result += `일요일`; break; case 1: result += `월요일`; break; case 2: result += `화요일`; break; case 3: result += `수요일`; break; case 4: result += `목요일`; break; case 5: result += `금요일`; break; case 6: result += `토요일`; break; } document.getElementsByTagName('div')[0].textContent =result; } function proc2(){ var days =["일","월","화","수","목","금","토"]; //요일 구하기 var day = today.getDay(); document.getElementsByTagName('div')[0].textContent = `${days[day]}요일입니다.`; } </script> </body> </html>
date_getTime
ms 너무 크니까 계산해줄 필요가 있음
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/outStyle.css"> </head> <body> <h4>getTime()- 경과시간 구하기(milliseconds로 반환)</h4> <input type="button" value="확인" onclick="proc()"> <div></div> <script> var now = new Date(); var proc = function(){ var complet = new Date("2022.09.23"); //getTime()으로 현재 날짜와 대상 날짜의 miliiseconds 구하기 var today = now.getTime(); var comp = complet.getTime(); var ms= comp - today; var day =ms/1000/60/60/24; //출력문장 완성 var result=`수료일: ${complet.toLocaleDateString()} <br>`; result += `오늘 : ${now.toLocaleDateString()} <br>`; result += `D-${day}일 남았다!!~~ <br>`; result += `D-${day.toFixed(2)}일 남았다!!~~ <br>`; //반올림 result += `D-${Math.round(day)}일 남았다!!~~ <br>`; //올림 result += `D-${Math.floor(day)}일 남았다!!~~ <br>`; //내림 document.getElementsByTagName('div')[0].innerHTML =result; } </script> </body> </html>
내가 태어난지 얼마나 됐는지
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/outStyle.css"> </head> <body> <h4>getTime()- 내가 살아온 날짜 구하기(milliseconds로 반환)</h4> <input type="button" value="탄생" onclick="birth()"> <div></div> <script> var now = new Date(); var birth = function() { //today - 살아온날짜 var birthday = new Date("1999.08.04"); var today = now.getTime(); var bir = birthday.getTime(); var ms = today - bir; var sec = ms/1000; var min = sec/60; var hh = min/60; var dd = hh/24; var yy = dd/365; var day = ms/1000/60/60/24/365; var result = `생일 : ${birthday.toLocaleDateString()} <br>`; result += `오늘 : ${now.toLocaleDateString()} <br>`; result += `${yy.toFixed(2)}년 <br>`; result += `${dd.toFixed(2)}일 <br>`; result += `${hh.toFixed(2)}시 <br>`; result += `${min.toFixed(2)}분 <br>`; result += `${sec.toFixed(2)}초 <br>`; result += `${Math.round(day)}년 <br>`; document.getElementsByTagName('div')[1].innerHTML = result; //위에 데이터 지워서 1이 맞음 } </script> </body> </html>
7일 후 환불불가 안내
<meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/outStyle.css"> </head> <body> <h4>7일 후 환불 불가 안내</h4> <input type="date" id="refund"> <input type="button" value="환불하기" onclick="refund()"> <div></div> <script> var now = new Date(); var refund = function() { var rf = document.getElementById('refund').value; if(rf !=""){ var rfDay = new Date(rf); //ms구하기 var today = now.getTime(); var rfd = rfDay.getTime(); var ms = today -rfd; var day = ms/1000/60/60/24; if(day >= 7){ alert("환불이 불가합니다...."); document.getElementById('refund').value=""; //날짜 리셋(초기화) }else{ alert("환불이 가능합니다!!") document.getElementById('refund').value=""; } }else{ alert("날짜 선택하세용") } } </script> </body> </html>
String 객체
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/outStyle.css"> </head> <body> <h4>우리나라 좋은나라 대한민국 만세~~ 독도는 우리땅~~ ABCabc0123</h4> <input type="button" value="CharAt" onclick="fn1()"> <input type="button" value="(last)indexOf" onclick="fn2()"> <br> <input id="txt"> <input type="button" value="trim" onclick="fn3()"> <br> <input type="button" value="substring외" onclick="fn4()"> <br> <input type="button" value="split" onclick="fn5()"> <br> <textarea rows="5" cols="20"></textarea> <input type="button" value="replace" onclick="fn6()"> <div></div><script > var str ="우리나라 좋은나라 대한민국 만세~~ 독도는 우리땅~~ABCabc0123"; 따로 밑에 구현 function fn1() function fn2() function fn3() function fn4() </script> </body> </html>function fn1(){ //charAt(idx) :index 번째의 문자 반환 //charCodeAt(idx) : index번째 문자의 유니코드를 반환 var result =`str.charAt(3) : ${str.charAt(3)} <br>`; result +=`str.charCodeAt(3) : ${str.charCodeAt(3)} <br>`; document.getElementsByTagName('div')[0].innerHTML =result; }
function fn2(){ //ondexOf(value , 검색이 시작될 지점), lastIndexOf(value, 검색을 끝낼 지점) var result = `str.indexOf("우리",4) : ${str.indexOf('우리',4)} <br>`; result += `str.lastIndexOf("우리",20) : ${str.lastIndexOf('우리',20)} <br>`; result += `str.indexOf("붹") : ${str.indexOf("붹")} <br>`; document.getElementsByTagName('div')[0].innerHTML =result; }
function fn3(){ //trim() : 앞 뒤 공백 제거, 문자열 안쪽 공백은 제거하지 않음 var tVal = document.getElementById('txt').value; var result = `공백제거 전 길이 : ${tVal.length} <br>`; tVal = tVal.trim(); result += `공백제거 후 길이 : ${tVal.length} `; document.getElementsByTagName('div')[0].innerHTML =result; }
function fn4(){ //substring(start,end), slice(start,end), substr(start, length) //start ~ end사이(또는 length만큼) 문자열 잘라내기 (end는 포함되지 않음) var start =str.indexOf("독"); //20 var end = start + "독도는 우리땅".length; //20 + 7 = 27 var result = `str.substring(strat, end) : ${str.substring(start,end)} <br>`; result += `str.slice(strat, end) : ${str.slice(start, end)} <br>`; result += `str.substr(str, length) : ${str.substr(start, "독도는 우리땅".length)} <br>`; document.getElementsByTagName('div')[0].innerHTML =result; }
function fn5(){ //split(구분자, 구분갯수) : 구분자를 기준으로 문자열을 분리하여 배열로 반환 // 구분갯수 지정 값은 포함되지 않음(추청) var result = "문자열 일 때 : str[3] "+str[3]+"<br>"; var arr = str.split(" "); result +=` 배열로 반환 후: arr[3] : ${arr[3]}`; document.getElementsByTagName('div')[0].innerHTML =result; }
<더 추가한 예제>
.split()은 문자열을 분할하는 메서드입니다.
=>분할갯수를 정하면 갯수만큼만 분할을함
정규표현식
'슬래쉬 사이에 모든(g) 문자를, 대소문자 구분없이(i) 치환 하겠다' 가 됩니다.
function fn6(){ //repalce(찾을 문자열, 변경할 문자열) :문자열을 찾아 변경 문자열로 바꿈 // //g(global): 대상이 되는 문자열 내 모든 패턴 체크(=검색) var ta = document.getElementsByTagName('textarea')[0].value; //공간이 가지고 있는 데이터 ta에 저장 document.getElementsByTagName('div')[0].innerHTML =ta; }
수정하면 엔터값을 읽게 된다.
function fn6(){ //repalce(찾을 문자열, 변경할 문자열) :문자열을 찾아 변경 문자열로 바꿈 // //g(global): 대상이 되는 문자열 내 모든 패턴 체크(=검색) var ta = document.getElementsByTagName('textarea')[0].value; //공간이 가지고 있는 데이터 ta에 저장 ta = ta.replace(/\r/g,"").replace(/\n/g,"<br>"); document.getElementsByTagName('div')[0].innerHTML =ta; }
//w3schools 예제 확인
//search() => indexOf()와 기능같음
//Match() => 문자열 또는 정규식 패턴으로 항목 검색 후 배열 반환728x90'HTML' 카테고리의 다른 글
BOM과 DOM-22.04.12 (0) 2022.04.12 String2 ,Math-22.04.11 (0) 2022.04.11 배열2-22.04.08 (0) 2022.04.08 JDBC연결-22.04.08 (0) 2022.04.08 자바스크립트 객체, 배열-22.04.07 (0) 2022.04.07