D-day Counter 5

[javascript] D-Day-Counter (4)

기능은 모두 구현하였지만, 문제점이 2가지가 존재한다. 버튼을 누르면 countMaker가 1초마다 반복된다. 하지만 입력값을 변경하면 그 숫자대로 변경된다. 이 문제를 해결하기 위하여 입력값은 버튼이 누를 때에만 갱신되도록 만들어야 한다. 유효하지 않는 시간과 지난 시간은 clearInterval을 진행하는 바람에, 원하는 메세지가 뜨지 않고 "D-Day를 입력해주세요" 가 뜬다. 이 문제를 해결하기 위하여 기능에 따라 함수를 구분해야 한다. 함수 1번 문제를 해결하기 위하여 전달 인자와 매개 변수의 개념을 이해해야 한다. 두 가지 모두 함수 외부에서 데이터를 전달 받아, 내부에서 사용하기 위한 수단이다. 매개 변수 : 함수 선언 시에 소괄호 안에 정의되는 변수이다. 전달 인자 : 함수 호출 시, 함수..

[javascript] D-Day-Counter (3)

script defer 스크립트의 위치는 body 태그 안에 맨 끝에 넣어야 한다. 그래야 html에서 태그들을 js가 읽어올 수 있기 때문이다. 하지만, 가독성을 고려한다면 head 태그 안에 있는 것이 보기 좋다. 그러나 head 태그 안에 넣으면 js에서 html 태그를 읽어올 수 없기 때문에 오류가 발생한다. (코드는 위에서 아래로 순서대로 읽어나가기 때문이다.) 그래서 defer를 이용하여 이러한 문제점을 없애줄 수 있다. 반복문 반복되는 코드, 코드의 양을 획기적으로 압축한다. 반복문에는 for문과 while문이 있다. for 반복문 for(최초식; 조건식; 증감문){ 반복 실행하고자 하는 코드 } 최초식 : 최초에만 실행, 반복의 기준이 된다. 조건식 반복 실행하고자 하는 코드 증감문 실행 ..

[javascript] D-Day-Counter (2)

조건문 1. 조건문 데이터가 들어왔을 때, 조건을 확인한다. true인 경우 run code. false인 경우 skip code. if(조건){ 조건 성립 시 실행하는 코드 }else{ 조건 성립하지 않을 시 실행하는 코드 } 경우에 따라 run another code 가능. if(조건 1){ 조건 1 성립 시 실행되는 코드 }else if(조건 2){ 조건 2 성립 시 실행되는 코드 }else{ 위의 조건 모두 성립하지 않을 시에 실행되는 코드 } 2. 논리 연산자 && : AND 연산자, 모두 true인 경우에 true || : OR 연산자, 하나라도 true인 경우에 true 3. 비교 연산자 두 개의 데이터 서로 비교하는 연산자 === : 엄격한 비교, Boolean 값 반환한다. == : 느슨..

[javascript] D-Day-Counter (1)

1. 함수 선언 후 실행하기 함수는 선언 후 반드시 실행해야 사용할 수 있다. 실행은 소괄호를 이용한다. 함수 : 기능 수행 또는 계산을 수행하는 코드 집합을 의미한다. 함수 사용 : 호출 방법, 함수 선언 종류 // 0. 함수 정의하고 실행하는 방법 // 함수 정의하기. // const output = function () { // console.log("함수를 실행했습니다."); // }; // 함수 실행하기. // 함수명() // output(); 2. input 값 가져오는 dateFormMaker 함수 만들기 원하는 날짜를 가져오는 동적인 값을 만들기 위하여 함수를 만들어준다. 여기서 document.querySelector를 이용하는데 document는 객체의 일부이다. // 1. dateFo..