<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date object</title>
</head>
<body>
<script>
//js에서 유용한 생성자함수들(자바로 class들) [Date, Number, String, Math, Array]
//1. Date
var a=new Date();
document.write(a+"<br>"); //자동 .toString
document.write(a.toString()+"<br>");
document.write(typeof(a)+"<br>");
document.write("<hr>");
//주요기능들(메소드들)
document.write(a.toDateString()+"<br>");
document.write(a.toLocaleString()+"<br>");
document.write(a.getYear()+"<br>");
document.write(a.getFullYear()+"<br>");
document.write(a.getMonth()+"<br>"); //0~11[1~12월]
document.write(a.getDate()+"<br>");
document.write(a.getHours()+"<br>");
document.write(a.getMinutes()+"<br>");
document.write(a.getSeconds()+"<br>");
document.write(a.getTime()+"<br>");
//1970년 1월1일 9:00:00부턴 1밀리세컨드마다 카운팅한 수 //활용해서 많이 씀.
document.write("<hr>");
//SET도 가능함
var b= new Date();
document.write(b.toLocaleString()+"<br>");
b.setFullYear(2018);
document.write(b.toLocaleString()+"<br>");
document.write("<hr>");
//생성자를 통한 set가능
var c =new Date(2025,11,2); //2025 ,12,2
document.write(c.toLocaleString()+"<br>");
var c =new Date("2025.12.2"); //2025 ,12,2
document.write(c.toLocaleString()+"<br>");
var c =new Date("Wed Sep 13 2017 13:40:30 GMT+0900");
document.write(c.toLocaleString()+"<br>");
var c =new Date(1000*60*60*24); // (0)기준시간1970.1.1 9:00:00 // (초,분,시,하루)
document.write(c.toLocaleString()+"<br>");
document.write("<hr>");
//두 날짜 사이의 비교
var a=new Date("2023. 6. 28");
var b=new Date();
var diff=b.getTime()-a.getTime(); //밀리세컨드 차이
document.write("두 날짜 차이 : "+diff+"<br>");
document.write("<hr>");
//밀리세컨드 ==> 일
var sec=diff / 1000; //ms-> s
var min=sec/ 60; //s->m
var hour=min/ 60; //m->h
var day= hour /24; //h->day
document.write("두 날 차이 일수 : "+ day +"일<br>");
//소수점 제거
day= Math.floor(day);
document.write("두 날 차이 일수 : "+ day +"일<br>");
</script>
<hr>
<input type="date" id="ss">
<button onclick="clickBtn()">기준일 입력</button>
<script>
function clickBtn(){
var e=document.getElementById("ss");
var d= e.value;
var a=new Date(d); //기준일 날짜
var b=new Date(); //현재날짜
var diff=b-a; //Date()객체의 산술연산은 자동으로 .getTime() 밀리세컨드의 연산을 수행
var day= diff / (1000 * 60 * 60 * 24);//밀리세컨드를 일로 (1000 * 60 * 60 * 24 * 7 *365)
day=Math.floor(day); //소수점 제거
if(day>0) document.write("오늘로부터" + day + "일전 입니다.<br>")
else if(day<0)document.write("오늘로부터" + (-day) + "일 후 입니다.<br>")
else document.write("오늘<br>");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>number object</title>
<script>
//2. Number [number타입의 Wrapper 자료형]
var a= 10;
var b= new Number(10); // 객체타입
document.write(typeof(a)+"<br>");
document.write(typeof(b)+"<br>");
document.write((a==b)+"<br>"); //값만비교
document.write((a===b)+"<br>"); //자료형도 비교
//Number 객체의 유용한 메소드는 보통 실수형들에 해당함.
var num=new Number(123.456);
//1) 지수 표현법 e+2승
document.write(num.toExponential()+"<br>");
document.write(num.toExponential(2)+"<br>"); //소수점 2자리까지만..
document.write("<hr>");
//2) 소수점 자르기
document.write(num.toFixed()+"<br>")
document.write(num.toFixed(2)+"<br>") //소수점 2자리까지만 //반올림
document.write("<hr>");
//3)진법 변환 표기
var num=new Number(10);
document.write(num.toString()+"<br>") //10진법
document.write(num.toString(16)+"<br>") //16진법
document.write(num.toString(8)+"<br>") //8진법
document.write(num.toString(2)+"<br>") //2진법
//*수치형(number)은 Number객체로 자동 wrapping 됨
var a= 255; //number
document.write(a.toString(16)+"<br>");
//변수가 아니라 직접 수치형 상수값에도 wrapping됨 . 단, 소수점이 있는 실수일 경우
document.write(10.54321.toFixed(2)+"<br>");
// document.write(10.toFixed(2)+"<br>"); //에러
document.write(10.0.toFixed()+"<br>");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>String object</title>
<script>
//3.String --문자형의 wrapper
var a= "abcd";
var b=new String("abcd");
document.write(a+"<br>");
document.write(b+"<br>");
document.write((a==b)+"<br>");
document.write((a===b)+"<br>");
//String 유용한 메소드들
var s= "hello world";
document.write("글자수 : "+s.length+"<br>");
document.write(s.toUpperCase()+"<br>");
document.write(s.toLocaleLowerCase()+"<br>");
document.write(s.concat("nice")+"<br>"); //결합 잘안씀 이뮤터블..
document.write(s.indexOf("wor")+"<br>");
document.write(s.indexOf("word")+"<br>"); //-1못찾음
document.write("<hr>");
//문자열 중에서 원하는 문자를 탐색하여 추출하는 기능 ::: match
var s="Hello world! Nice to meet you. 안녕하세요. 반갑습니다. Nice work! nice studty";
var search=s.match("Hello");
document.write("탐색결과 : " + search +"<br>");
var search=s.match(/hello/i); //만약 대소문자 구분없이 탐색하고 싶다면 (i)옵션값추가
document.write("탐색결과 : " + search +"<br>");
var search=s.match("Nice");
document.write("탐색결과 : " + search +"<br>");
var search=s.match(/Nice/g);//만약 여러개의 문자를 탐색하고 싶다면 (g)옵션값
// / /정규표현식 추후 수업.
document.write("탐색결과 : " + search +"<br>");
var search=s.match(/Nice/ig); //대소문자 구별 x /여러개 탐색
document.write("탐색결과 : " + search +"<br>");
document.write(search.length+"<br>");
document.write(search[0]+"<br>");
document.write(search[1]+"<br>");
document.write(search[2]+"<br>");
var search=s.match(/안녕/ig); //대소문자 구별 x /여러개 탐색
document.write("탐색결과 : " + search +"<br>");
document.write("<hr>");
//문자 대체하기.. replace
var s ="Hello world";
document.write(s.replace("world","web")+"<br>");
document.write(s.replace("worlD","web")+"<br>");
document.write(s.replace(/worlD/i,"web")+"<br>");
var s="hello world, nice world, good world";
document.write(s.replace("world","web")+"<br>")//자바는 모두 바뀜 ,,js안바뀜
document.write(s.replace(/world/g,"web")+"<br>") //g전부바뀜
//문자열에서 특정 글자를 기준으로 분리하여 배열로 만들어 주는 기능
//csv형식 [sam, seoul,aaa]
var s="one,two,three,four,five";
var arr=s.split(",");
document.write(arr.length+"<br>")
document.write(arr[0]+"<br>")
document.write(arr[1]+"<br>")
document.write(arr[2]+"<br>")
document.write(arr[3]+"<br>")
document.write(arr[4]+"<br>")
document.write(arr[5]+"<br>") //undefined
document.write(arr+"<br>"); //자동. toString() --요소값을 , 구분자로 하여 문자열로 리턴
//문자열을 html요소로 자동으로 감싸주는 기능
var s ="This is Test";
document.write("<b>"+s+"</b><br>");
document.write(s.bold()+"<br>");
document.write(s.italics()+"<br>");
document.write(s.fontcolor('green')+"<br>");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
<script>
//4. Math -수학적 연산기능 보유한 생성자 함수[객체로 만들지 않고 사용] 즉, static method
var n=3.94;
document.write(Math.floor(n)+"<br>"); //반올림안함
document.write(Math.round(n)+"<br>"); //반올림
document.write(Math.ceil(n)+"<br>"); //반올림
//랜덤값 얻어오기..<이벤트같은거 >
var r= Math.random(); //0.0 ~ 0.999999999999999~~~
document.write(r+"<br>")
//0~9사이를 얻어오고 싶다면???
var r=Math.floor(Math.random() *10); //0.0 ~ 9.99999999 소수점 제거
document.write(r+"<br>");
var r=Math.floor(Math.random() *15); //0~14
document.write(r+"<br>");
//5~15
var r=Math.floor(Math.random() *11) + 5; //5~15
document.write(r+"<br>");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array</title>
<script>
//5.Array
var aaa=[10,20,30];
var aaa=new Array(10,20,30);
//배열의 주요기능 메소드들..
document.write("요소개수 : "+aaa.length+"<br>");
//1)배열붙이기 - concat
var aaa1=[3,4,5];
var aaa2=aaa.concat(aaa1); //원본 aaa는 변경되지 않음.. 붙여서 결과를 리턴함
document.write(aaa2.toString()+"<br>");
document.write(aaa1.toString()+"<br>");
document.write(aaa.toString()+"<br>");
//2) indexOf
document.write(aaa.indexOf()+"<br>");
document.write(aaa.indexOf(30)+"<br>");
document.write(aaa.indexOf(10,1)+"<br>"); //1번방이후로 10을가진 방번호를 검색
//배열 요소의 개수가 변경되는 기능
document.write("<hr>");
//3) push, pop [자료구조에 관련된 기능: Stack구조]//////////////////////////////
var stack= [1,2,3,4,5,6,7];
document.write(stack+"<br>");
stack.push(10);//새로운 값이 삽입.. 마지막에 추가됨.
document.write(stack+"<br>");
var n=stack.pop(); //값을 뺴오기 .가장 마지막 요소가 튀어나옴
document.write("빼온 값: " + n+"<br>")
document.write("남은 배열요소들 : "+stack+"<br>");
var n=stack.pop();
document.write("빼온 값: " + n+"<br>")
document.write("남은 배열요소들 : "+stack+"<br>");
document.write("<hr>");
//4) push, shift [자료구조에 관련된 기능 : Queue구조]/////////////////////////
var queue=[1,2,3,4,5,6,7];
queue.push(10); //마지막에 새로운값 추가
document.write(queue+"<br>");
var n =queue.shift(); //첫번쨰 요소가 밀려나옴.
document.write("빼온 값: " + n+"<br>")
document.write("남은 배열요소들 : "+queue+"<br>");
var n =queue.shift();
document.write("빼온 값: " + n+"<br>")
document.write("남은 배열요소들 : "+queue+"<br>");
document.write("<hr>");
//5) sort 기능
var ccc=[3,5,4,8,9,1,6,7];
ccc.sort(); //원본의 요소 순서가 정렬됨. - 기본은 오름차순
document.write(ccc+"<br>");
// sort(function(a,b){
// a-b
// b-a
// });
// 결과 :
// 음수: 그대로 / 양수: swapping
//두자리 수 이상의 숫자가 있다면 -- 데이터를 알파벳순서로 읽어서 .. 순서다름
var ccc=[3,1,15,48,754,1234,54,90];
ccc.sort();
document.write(ccc+"<br>");
//해결하려면 .. sort()메소드의 파라미터로 '정렬기준 함수'를 넣어 줌.////////
ccc.sort(function(a,b){return a-b}); //오름차순
document.write(ccc+"<br>")
ccc.sort(function(a,b){return b-a}); //내림차순
document.write(ccc+"<br>")
//문자형은 기본이 오름차순
var ddd=['abc','aab',"bsc",'adsf','asfg']
ddd.sort();
document.write(ddd+"<br>");
//문자형의 내림차순 -- 정렬기준 함수[지정함수]
var desc= function(a,b){
if(a>b) return -1;
if(a<b) return 1;
return 0;
}
ddd.sort(desc);
document.write(ddd+"<br>");
//한글도 당연히 정렬됨
var eee=["윤석열","문재인",'박근혜','이명박','노무현']
eee.sort();
document.write(eee+"<br>")
//6) slice -배열의 일부분을 잘라서 새로운 배열로 리턴해줌.
var ggg=[10,20,30,40,50,60,70,80,90];
var hhh=ggg.slice(3); //3번방부터 잘라냄.. 원본은 안바뀜..
document.write(ggg+"<br>")
document.write(hhh+"<br>")
var hhh=ggg.slice(3,6); //3번방부터 6번방전까지 (3~5)
document.write(ggg+"<br>")
document.write(hhh+"<br>")
//7) join- 배열의 요소를 특정문자를 구분자로 하여 하나의 문자열로 리턴해줌
var sss=["aa",'bb','cc'];
var str=sss.join("&");
document.write(str+"<br>"); //전화번호 입력시
//8) filter -특정한 기준에 해당하는 요소들만 뽑아서 새로운 배열로 만들어 리턴해줌[지정함수사용]
var tt=[1,2,4,8,9,6,-4,352,4,5,-4,3.14];
//요소들 중에서 3이상의 숫자만 걸러냄.
var xx=tt.filter(function(e){return e>3});
document.write(xx+"<br>");
//필터의 지정함수를 파라미터로 최대 3개까지 받을 수 있음.(요소, 인덱스, 배열객체)
var xx=tt.filter(function(e,index,array){
//방번호가 5보다 크며 요소값이 3 이상인 것만..
return index>5 && e>3;
});
document.write(xx+"<br>");
//9) reverse -배열의 저장순서를 뒤집기 [원본이 변경됨]
var zzz= ["aa","vv","dd"];
zzz.reverse();
document.write(zzz+"<br>");
//2차원 배열..
var a=[10,20,30];
var b=["aa","bb","cc","dd"];
var c=[a,b]; //1차원배열을 여러개 가지는 배열 -- 2차원 배열
document.write(c+"<br>")
document.write(c.length+"<br>")
document.write(c[0]+"<br>")
document.write(c[1]+"<br>")
document.write(c[0].length+"<br>")
document.write(c[1].length+"<br>")
document.write(c[0][0]+"<br>")
document.write(c[0][1]+"<br>")
document.write(c[0][2]+"<br>")
document.write(c[1][0]+"<br>")
document.write(c[1][1]+"<br>")
document.write(c[1][2]+"<br>")
document.write(c[1][3]+"<br>")
for(var i=0; i<c.length; i++){
for(var k=0; k<c[i].length; k++){
document.write(c[i][k]+" , ");
}
document.write("<br>");
}
document.write("<br>");
//javascript [ECMA script 자바스크립트의 표준 문법언어 :줄여서 ES라고 부름]
// ES의 버전이 JS의 버전으로 활용됨
//그중에 ES6버전에서 새로이 등장한 문법 .forEach(), .map()
//배열에 관련된 기능
var aaa=[10,20,30,40,50];
//배열의 각 요소에 접근할 때 반복문을 많이 사용함. .하지만 반복문 코드의 실수 여지가 많음
//그래서 배열객체에게 요소들에 차례대로 접근할 수 있는 기능 제공
aaa.forEach(function(e,index,array){
document.write(e+" : "+ index+" - "+ array.length+"<br>")
});
//foreach의 원본의 값은 안바뀜
//.forEach()와 같은 기능임.. 단, 결과를 리턴하여 새로운 배열을 만들어줌
var bbb =aaa.map(function(value,index,array){
return value +1;
});
document.write(aaa+"<br>");
document.write(bbb+"<br>");
//지정함수의 파라미터는 필요한 것만 사용해도 됨.
var bbb =aaa.map(function(value){
return value +1;
});
document.write(aaa+"<br>");
document.write(bbb+"<br>");
////////////////////////////////////////////////////
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>예외처리</title>
</head>
<body>
<script>
//예외처리는 -- 예외가 발생할 때 프로그램이 멈추지 않도록 하는 문법
document.write("예외처리 시작<br>")
// aler(); //예외발생
try{
aler();
}catch(e){
document.write("error...<br>")
document.write("에러메세지: " +e +"<br>")
}
try{
aler();
}catch(e){
document.write("error<br>")
}finally{
document.write("에러여부와 상관없이 무조건 실행<br>");
}
//throw -- 에러가 아니지만 일부러 에러를 발생하여 예외상황 처리..
try{
var a=10;
var b=15;
var c= a-b;
if(c<0) throw "음수결과는 나오면 안됨.";
document.write("결과 : " +c+"<br>")
}catch(e){
document.write("에러 : " +e+"<br>")
}
document.write("<br>예외처리 연습 마지막 줄 ....</br>");
</script>
</body>
</html>
