form 태그

폼태그안에 있는 정보를 저장해서 원하는 페이지로 전달하는 방법을 설정할 수 있다.
원하는 페이지는 action=”” 여기에 적어준다
action페이지로 정보를 전달할때는 주소줄의 ?뒤에 전달할 정보를 담아서 이동한다.

ITWILL학원 : 7강 JAVA BY 윤미영강사

1. 비트연산자

2진수 형태로 연산을 진행한다.
따라서 2진수로 표현할 수 있는 정숨나이 피연산자가 될 수 있다.
흔히 쓰는 건 아니고 임베디드개발환경이나 안드로이드개발환경에서 종종 사용하는 연산방법이다.

a /= b의 의미는 a|b 연산값을 a에 할당한다는 의미이다.

참고링크 : 비트연산자 개념 및 예시

2. 이진수와 십진수 변환

비트연산자를 잘 활용하려면 십진수와 이진수의 변환이 머리속에서 빨리 일어나야한다 ㅋㅋㅋㅋㅋㅋㅋㅋ
이진수는 중학교때 배웠을 거같지만… 기억나지않으므로 다시 한번 더 보자.

히스토리 객체

사용자가 방문한 기록을 가지고 페이지를 이동.
ex) 페이지 앞으로 가기, 페이지 뒤로 가기.

ITWILL학원 : 9강 JS기초 BY 정규태강사

1. location객체

브라우저의 url(주소창)에 대한 정보를 가지고 있는 객체

• location.href : 페이지이동. 현재브라우저의 주소창의 정보url를 리턴

  1	location.href="Test2.html"

• location.protocol : 프로토콜은 통신규약이다 어떤 방식으로 어떤 속도로 해당 통신을 할껀지 약속.

  • 웹통신을 위한 프로토콜
  • http:
  • http:// 보안이 더 강화됨

• location.hostname

• location.host

• location.reload(); 페이지새로고침(F5번과 동일한 기능)

• location.replace(url); 입력한 url로 페이지 이동

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<input type="button" value="location속성" onclick="fun1()">

function fun1(){
	alert("href : " +window.location.href 
			+ "     protocol : " +window.location.protocol 
			+ "     hostname : "+location.hostname
			+ "     host : "+location.host
			+ "     port : "+location.port
			+ "     search : " + location.search);
}

//출력값은
href : http://localhost:8088/JavaScript/JS3/Test3.html
protocol : http:     
hostname : localhost     
host : localhost:8088     
port : 8088     
search :

ITWILL학원 : 9강 JS기초 BY 정규태강사

1. Document 객체

해당 html문서를 객체로 표시한 것(객체화)이 여기서 말하는 document이다.

2. Document 객체 : bgColor와 fgColor사용

• document.bgColor=”” ; 배경색상을 변경함
• document.fgColor=”” ; 글자색상을 변경함

위를 활용하여 체크박스를 틱하고 틱을 해제함으로써 배경색과 글자색이 바뀌는 함수를 만들어보자.

1
2
3
4
5
6
7
8
9
10
11

<input type="checkbox" onclick="checkf1(this);"> 체크박스 온오프로 핑크테마<br>

function checkf1(obj){
	if(obj.checked){
		document.bgColor= '#ffbdbd';
		document.fgColor= 'white';
	}else{
		document.bgColor= 'white';
		document.fgColor= 'black';
	}
}

3. Document 객체 : img태그에 접근하여 속성 사용

img태그에 접속하여 속성을 이용해보자

• document.images[0].name : 이미지태그 네임을 모를 경우 인덱스활용해서 name불러옥;

• document.img1.name : 이미지태그 네임을 알경우 name불러오기

• document.img1.src : 이미지태그 네임을 알경우

먼저 이미지태그를 만들어보자

1
2

<img src="1.jpg" name="img1">
<input type="button" value="이미지속성정보" onclick="fun1()"><br>

그리고 이 이미지태그의 속성을 알아보자
위에서 만든 버튼태그를 눌릴때마다 속성을 알아보는 방법이다.

1
2
3
4
5
6
7
8
9
10
11

function fun1(){
	alert("너의 이름은? "+document.images[0].name); 
	alert("너의 이름은? "+document.img1.name) 
	alert("너의 주소는? "+document.img1.src) 

}

//출력값은
img1
img1
file:///D:/workspace_jsp7/JavaScript/WebContent/JS3/2.jpg

4. Document 객체 : 랜덤 img 출력하기

1부터 6까지 총 6개의 이미지를 랜덤하게 가져와서 이미지태그에 보더, 가로,세로 크기를 변경하는 함수를 만들어 보자

첫번째는 랜덤함수를 이용하는 방법이다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<img src="1.jpg" name="img1" onmouseover="changeImg()" onmouseout="resetImg()"><br>

function changeImg(){ 

	let randomNum = Math.floor(Math.random()*6 + 1); //1~6까지
	document.img1.src = randomNum+".jpg" //1~6까지 

	console.log(randomNum)

	document.images[0].border = 2;
	document.images[0].width = 200;
	document.images[0].height = 150;

}

function resetImg(){
	document.img1.src = "1.jpg"
	document.images[0].border = 0;
	document.images[0].width = 80;
	document.images[0].height = 60;
}

두번째 방법은 배열이용하는 방법이다
전자보다 더 많이 사용한다

위와의 차이점은 두가지이다.

1. imgArr이라는 배열안에 이미지를 담았다
2. randomNum만들때 배열은 0부터 시작이고 이미지도 0부터 시작이므로 +1을 할 필요가 없다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<img src="1.jpg" name="img1" onmouseover="changeImg()" onmouseout="resetImg()"><br>

let imgArr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"] //0~5번까지밖에없다

function changeImg(){ 

	let randomNum = Math.floor(Math.random()*6)//0~5까지
	document.img1.src = imgArr[randomNum] //0~5까지
	
	console.log(randomNum)

	document.images[0].border = 2;
	document.images[0].width = 200;
	document.images[0].height = 150;

}

function resetImg(){
	document.img1.src = "1.jpg"
	document.images[0].border = 0;
	document.images[0].width = 80;
	document.images[0].height = 60;
}

virtualBox로 가상컴퓨터 만들기

1. 새로만들기클릭
2. 이름명:원하는대로(혹시 오류가 발생한다면 예약어가 있을수있으니 다양한 이름으로 시도해볼 것.),
   종류 : Linux

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. 문자열객체(String)

문자열객체는 배열처럼 데이터를 저장한다.

1
2
3

let name = new String("Hong") //문자열객체

let name2 = "Kim" //문자열데이터(문자열상수)

둘 다 문자열객체로 사용할수있다.

문자열객체는 두가지타입의 function을 가지고있다.
스타일을 지정하는 타입의 함수와 데이터를 처리하는 타입의 함수이다.

1. 스타일을 지정하는 함수

폰트를 굵게 표시한다.
하지만 스타일을 지정하는 함수는 실제론 거의 사용하지않는다.
실무에선 스타일은 css로 지정한다
그렇지만 굳이 css를 쓰지않더라도 이렇게 스타일을 지정할 수있다는 사실을 알고있어야한다.

참고로 toUpperCase()와 toLowerCase()는 사용할 수 도 있다

1
2
3

document.write("name : " + name.bold()); //굵게 출력
document.write(name.toUpperCase()+"<br>"); //모두 대문자로 출력
document.write(name.toLowerCase()+"<br>"); //모두 소문자로 출력

체이닝기법
함수를 연결하여 한번에 사용하는 형태이다.

1

document.write(msg.fontcolor("red").fontsize("15").bold())

위의 코드를 통해 msg의 글씨색깔은 빨간색이며 폰트사이즈는 15이고 굵게 출력된다.

2. 데이터를 처리하는 함수

아래 함수들(2번부터 ) 모두가 데이터를 처리하는 함수이다.

2. .length

길이를 구하는 함수이다

3. 짤라오는 함수 4종류 .substring(), slice(), substr(), charAt()

substring(시작인덱스,끝인덱스)는 시작부터 끝 인덱스 앞자리까지 짤라온다.
substring(인덱스) 이처럼 인덱스를 하나만 적는 경우에는 시작인덱스로 취급하여 시작인덱스부터 끝까지 다 짤라온다.

1
2
3
4
5
6

let name3 = "이번년도는 복세편살!"
document.write(name3.substring(2,6))
document.write(name3.substring(2))
//출력값 
년도는
년도는 복세편살!

이것과 비슷한 함수로는 아래 세 가지가 있다.

1. slice(시작,끝) : 시작인덱스부터 끝인덱스의 앞자리까지 짤라오는 함수

2. substr(시작인덱스,갯수) : 시작인덱스부터 갯수만큼 짤라오는 함수

3. .charAt(인덱스) : 해당 인덱스에 있는 문자데이터를 가져온다.

   1 2 3 4 5 6

   let name3 = "이번년도는 복세편살!" document.write(name3.charAt(0)) //첫번째글자 가져오기 document.write(name3.charAt(name3.length-1)) //제일 끝 글자가져오기 // 출력값 이 !

예시 1. 주민번호로 성별 구분 코드

짤라오는 함수를 이용하여 주민번호로 성별을 구분하는 코드를 작성해보자
총 4가지 방법의 함수로 짤라올수가 있다!

1
2
3
4
5
6
7
8
9
10
11
12
13

let num = prompt("주민번호를 -와 함께 입력하세요")
	
let checkNum = num.substring(7,8); //첫번째방법 substring사용
let checkNum = num.slice(7,8); //두번째방법 slice사용
let checkNum = num.substr(7,1); //세번째방법 substr사용
let checkNum = num.charAt(7); //네번째방법 charAt사용


if(checkNum === "2" || checkNum === "4"){
	document.write("여성입니다")
}else if(checkNum === "1" || checkNum === "3"){
	document.write("남성입니다")
}

예시 2. 전화번호 중간자리 가리기

위에서 배운 함수로 출력이 가능하나 마지막방법인 charAt는 1자리만 가져오는 것이기때문에 불가능하다.
따라서 3가지 방법으로 코드를 작성할 수 있다.

1
2
3
4

let phonenum = prompt("전화번호를 -와 함께 입력하세요")
let mobile = "010-****-" + phonenum.substring(9) //첫번째방법 substring사용
let mobile = "010-****-" + phonenum.slioce(9) //두번째방법 slice사용
let mobile = "010-****-" + phonenum.substr(9) //세번째방법 substr사용

5. .indexOf()

String안에 내가 원하는 값이 있는지 찾아보는 방법으로 indexOf()를 사용한다.
indexOf()의 괄호안에는 찾고싶은 요소를 입력한다
해당 요소가 있는 경우에는 왼쪽에서 시작해서 제일 먼저 만나는 index의 위치를 알려주고
해당 요소가 없는 경우에는 -1이 출력된다.

1
2
3
4
5
6
7

let name3 = "이번년도는 복세편살이야"

document.write(name3.indexOf("이")+"<br>")
document.write(name3.indexOf("하")+"<br>")
//출력값은
0
-1

현재 name3안에는 “이”가 2개가 있지만 첫번째 “이”의 index위치를 알려주고 있다.
중복되는 데이터의 첫번째 index 위치만 알려주기때문에 중복데이터가 있으면 그 위치가 어디인지 찾기가 어렵다.
그럴때 사용하는 함수가 아래에 있는 .lastIndexOf()이다.

6. .lastIndexOf()

String안에 내가 원하는 값이 있는지 찾아보는 방법으로 lastIndexOf()를 사용한다.
lastIndexOf()의 괄호안에는 찾고싶은 요소를 입력한다
해당 요소가 있는 경우에는 오른쪽에서 시작해서 제일 먼저 만나는 index의 위치를 알려주고
해당 요소가 없는 경우에는 -1이 출력된다.

1
2
3
4
5
6
7

let name3 = "이번년도는 복세편살이야"

document.write(name3.indexOf("이")+"<br>")
document.write(name3.indexOf("하")+"<br>")
//출력값은
11
-1

7. .concat()

괄호에 추가하고싶은 데이터를 작성하여, 데이터를 추가하는 방법에는 아래처럼 두가지가 있다.

1. 더하기 연산자사용
2. .concat()사용

1
2
3
4
5
6
7

let name3 = "이번년도도는 복세편살이야"
document.write(name3 + "!!!!"+"<br>")
document.write(name3.concat("!!!!")+"<br>")

//출력값
이번년도도는 복세편살이야!!!!
이번년도도는 복세편살이야!!!!

8. .split()

괄호안의 값을 기준으로 문자를 파싱(나누기)후 배열에 저장한다.

1
2
3
4
5
6
7

let name3 = "이번년도도는 복세편살이야"
document.write(name3.split(" ")+"<br>")
document.write(name3.split(" ")[0]+"<br>")

//출력값 : 괄호가 스페이스이므로 스페이스 기준으로 2개가 나누어진다.
이번년도도는,복세편살이야
이번년도도는

9. ID자릿수를 제한하는 이메일 유효성검사

userEmail.indexOf(“@”) >= 0)에서
0대신에 다른 숫자를 넣으면 해당 숫자에 따라 최소 ID의 자리수가 달라지는 로직을 만들수있다.
userEmail.indexOf(“@”) >= 8)인경우 8자리이상 ID만 true가 된다.

이런 로직을 잘 짜야지 좋은 개발자가 될 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function check(userEmail){

	let check1 = false; //@유무 체크
	let check2 = false; //유효한 이메일주소 체크
	let emailArr = [".co.kr", ".com", ".net", ".or.kr", ".go.kr"]

	if(userEmail.indexOf("@") >= 0){ //숫자에 따라 최소 ID의 자리수가 달라짐 8인경우 8자리이상id필요
		check1 = true;
	}

	for(let i=0; i<emailArr.length; i++){
		//document.write(emailArr[i] + "<br>")//출력
		if(userEmail.indexOf(emailArr[i]) >= 0){
			check2 = true;
			break;
		}
	}

	if(check1 && check2){
		document.write("사용자 이메일 확인완료 : "+ userEmail +"<br>")
	}else{
		document.write("이메일주소 오류!<br>")
	}
}

check("s.co.kr")
check("s.cd")
check("s@.co.kr")
check("2@.com")
check("2@.or.kd")
check("2@.cd")

//출력값
이메일주소 오류!
이메일주소 오류!
사용자 이메일 확인완료 : s@.co.kr
사용자 이메일 확인완료 : 2@.com
이메일주소 오류!
이메일주소 오류!

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. 이벤트

브라우저에서 사용자가 취하는 모든 행동을 이벤트라고 한다

이벤트 :
- 브라우저에서 사용자가 취하는 모든 행동
- ex)button

이벤트리스너 :
- 이벤트 발생정보를 체크해서 해당 핸들러로 전달
- ex) onclick

이벤트핸들러 :
- 이벤트 발생시 특정 동작을 처리해주는 동작
- 자바스크립트 함수를 실행시켜서 작동한다 즉, js함수실행가능
- 태그의 스타일정보 변경가능
- ex) alert(‘버튼클릭’), open() 등등

보통을 keydown해서 keyup을 해야 즉, 키보드를 눌렀다가 떼면 데이터가 입력된다.
따라서 키이벤트를 처리할때는 keyup일때 이벤트를 걸어줘야 keydown일때보다 정확한 처리가 가능하다

1
2
3
4

<input type="button" value="버튼" onclick="alert('버튼클릭');"><br>
<input type="button" value="버튼2" ondblclick="alert('버튼더블클릭');"><br>
<input type="button" value="버튼3" onmouseover="alert('마우스오버');"><br>
<input type="text" name="txt" onkeyup="alert('키업!');"><br>

참고링크 : onmouseleave와 onmouseout의 차이점

2. 브라우저객체모델(BOM : Browser Object Model)

우리가 사용하는 인터넷브라우저안에 내장되어있는/포함되어있는 객체를 말한다.
특징

• 계층적구조 : 단계별로 표시할 수 있다.
  • 최상위레벨 : window객체
  • 그 아래레벨 : document객체, screen객체, location객체, history객체, navigator객체

정확한 구조를 표현한 문장인 window.document.write() 사용해야하지만 최상위 객체는 생략해서 document.write()로 사용한다.

3. window객체

브라우저 객체이 최상위 객체.
객체이기때문에 당연히 속성과 함수들을 가지고 있다.

• window.open(“url주소 “, “창이름(title태그와 동일한 기능)”, “옵션”); 새창열기

• window.location.href=’url주소’; 현재페이지에서 열기

• window.close(); 현재 창 닫기

• window.alert(); 알림 팝업창 열기

• window.confirm() : 팝업창을 열어서 확인/취소 버튼으로 Boolean 데이터를 받는 함수

• window.prompt(); 팝업으로 input창 열기

• window.setInterval(“자바스크립트실행문”,밀리초시간); 일정시간동안에 자바스크립트실행문을 실행하는 함수

window는 최상위객체이기때문에 window를 생략하고 사용할 수 있다.

1. 예시1 : window.open(), window.close(), window.location

1
2

<input type="button" value="새창열기" onclick="window.open('http://www.naver.com')">
<input type="button" value="현재페이지열기" onclick="location.href='http://www.naver.com'">

이렇게 input태그에 많은 내용이 들어가면 보안상의 위험이 있으므로 js에 넣어서 사용한다.
참고로 아래 코드에서 점점(..)은 상위폴더로 이동을 의미한다.

1
2
3
4
5
6
7
8

function winOpen(){
	open("http://www.naver.com") //window생략가능
}
<input type="button" value="새창열기" onclick="winOpen();">

function pageOpen2(){
	open("../JS2/Test5.html") //점점(..)은 상위폴더로 이동을 의미한다.
}

2. 예시2 : setInterval(()=>{js실행문}, 밀리초)

3초에 한번씩 숫자를 찍는 함수를 아래코드와 같이 만들수있다.
java에서 스래드와 비슷한 개념이다.

1
2
3
4
5
6

let i=0;
let inter = setInterval(() => { 
	console.log(i++)
}, 3000);  //3초에 한번씩 숫자찍기

clearInterval(inter); //변수에 담은 interval데이터를 clearInterval()함수로 멈출수있다.

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. 배열객체(Array)

내장객체 중에서 가장 활용도가 높은 것은 배열객체이다.
연속된 공간에 여러개의 데이터를 저장하는 객체이다.
배열에 들어있는 데이터를 요소(Element)라고 부른다.
배열의 index는 0부터 시작한다. 그리고 마지막 index는 (배열의 크기 - 1)이다.
배열의 요소는 변수처럼 사용가능 -> 주로 반복문에 활용해서 사용한다.
JS의 경우 모든 데이터타입을 한 배열안에 넣기 가능하다.

1

let arr = [1,2,"Hello", true, 3];

2. for ~ in 구문

변수의 값을 0부터 배열 객체의 개수만큼 반복하는 구문.
자동적으로 배열 객체의 길이를 계산한다.

1
2
3
4

for(let i in arr){
	document.write( arr[i]+ " ")
}
//출력값은 1 2 Hello true 2 JS

3. array.join();

요소들을 출력할 때 사이에 입력하여 출력하는 방법은 join()을 쓰면 쉽게 해결된다

1
2

document.write(arr.join(" "))
//출력값은 1 2 Hello true 2 JS

위의 출력값과 아래의 출력값의 차이는 딱 하나이다.
마지막 요소에 스페이스의 입력유무이다.
join()의 경우 마지막요소에 입력되지 않으니 더욱 유용하다

1
2

document.write(arr.join(","))
//출력값은 1,2,Hello,true,2,JS

4. array.reverse();

배열안의 요소를 역순으로 출력하고 싶다면 반복문을 먼저 생각해볼수있다.
반복문을 이용하면 임시값에 뒷요소부터 넣어서 반복할 수 있다.
하지만 array에 좋은 내장함수가 있다.
바로 reverse()이다
reverse()는 배열의 순서를 반대로 처리한다.

1
2
3
4

arr1 = [1,2,"hi", "a", "A", "가", "나"];
document.write(arr1.reverse())

//출력값 나,가,A,a,hi,2,1

기본적으로 콤마(,)가 함께 출력된다.
이 콤마를 없애고 싶다면 reverse후에 join을 하면 된다

1
2

document.write(arr1.reverse().join(" "))
//출력값 나 가 A a hi 2 1

5. array.sort();

낮은 순자부터 높은 숫자로 오름차순으로 출력한다.

1
2
3
4

arr2 = [1,2,"hi", "a", "A", "가", "나"];
document.write(arr2.sort())

//출력값 1,2,A,a,hi,가,나

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. Date객체

Date 객체의 특징

• 년,월,일 지정해서 객체를 사용
• 0부터 11까지를 1월부터 12월로 나타낸다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//참고로 today는 2020년 6월 12일이다.
let today = new Date();
document.write(today+"<br>")

let day = new Date(2020,0,1); //month숫자를 0에서부터 세기때문에 1월1일은 0,1이 되어야함 
document.write(day+"<br>")

let day1 = new Date(2020,1,1); //2월1일
document.write(day1+"<br>")

let day2 = new Date(2020,0,1,11,30,5); //년,월,일,시,분,초 지정해서 객체사용가능
document.write(day2+"<br>")

let day3 = new Date(2020,0,1,11,61,5); //분에 61분을 적으면 자동으로 1시간이 올라감
document.write(day3+"<br>")

let day4 = new Date("2020/1/1") //년,월,일만 가능. 시분초불가. 월을 나타낼때 0부터가 아니라 1부터 시작
document.write(day4+"<br>") 

// 출력값 순서대로
Fri Jun 12 2020 11:14:44 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 00:00:00 GMT+0900 (대한민국 표준시)
Sat Feb 01 2020 00:00:00 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 11:30:05 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 12:01:05 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 00:00:00 GMT+0900 (대한민국 표준시)

변수에 저장한 date객체를 가져와서 사용해보자
요일출력하는 getDay()의 경우 0(일)부터 6(토)까지를 나타낸다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//참고로 today는 2020년 6월 12일이다.
let today = new Date();

document.write(today.getFullYear() +"<br>") //년출력 year말고 fullyear써야함
document.write(today.getMonth() +"<br>")  //월출력 (0부터 11까지)
document.write((today.getMonth()+1) +"<br>") //알아보기쉽게 1을 추가해서 사용
document.write(today.getDate() +"<br>") //일출력
document.write(today.getDay() +"<br>") //요일출력

// 출력값 순서대로
2020
5
6
12
5

숫자로 들어온 요일을 글자로는 어떻게 바꿀수있을까?
여러가지 방법이 있다

1. Array의 index 활용
   요일이 숫자로만 출력되어 아쉬운 경우에는 변수에 넣어 index를 이용하여 아래처럼 금요일 이렇게 출력되게 할수있다

1
2
3

let today = new Date();
let week = new Array('일', '월', '화', '수', '목', '금', '토')
document.write(week[today.getDay()] + "요일 <br>")

2. 제어문사용 (if나 switch)
   if나 switch를 통해 일일히 조건을 걸어 나열할수있다
   if는 많이 써보았으니 switch를 써보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function getToDay(day) {
	switch (day){
	case 0 : 
		document.write('일요일')
		break;
	case 1 : 
		document.write('월요일')
		break;
	case 2 : 
		document.write('화요일')
		break;
	case 3 : 
		document.write('수요일')
		break;
	case 4 : 
		document.write('목요일')
		break;
	case 5 : 
		document.write('금요일')
		break;
	case 6 : 
		document.write('토요일')
		break;
	}
}

getToDay(today.getDay())

2. 디데이 계산하는 함수 구하기

Date()객체를 활용하여 디데이를 계산한느 함수를 구해보자
Date()객체에서는 사칙연산이 적용되는데 단위가 밀리초로 출력된다

• 밀리초 = 1/1000초
• 1초 = 1000msc
• 1분 = 60 * 1000
• 1시간 = 60 * 60 * 1000
• 하루 = 24 * 60 * 60 * 1000

1
2
3
4
5
6
7
8
9
10

function calculator(year, month, day){
	let today = new Date();
	let lastday1 = new Date(year,(month-1),day) //컴터는 0월부터계산하니까 사용자입력값에서 1을 빼줌
	console.log(lastday1)
	let result =  (lastday1 - today) / (24 * 60 * 60 * 1000);
	document.write(Math.ceil(result) + "일 남았습니다 <br>")
}

calculator(2020,12,31); //202일 남았습니다
calculator(2020,06,14); //2일 남았습니다