이 4줄은 텍스트를 변환하는 같은 기능을 구현하고 있다. 굉장히 비효율적이다. 이 부분을 반복문으로 처리해보자. 먼저 timeKeys와 docKeys에 remainingObj, documentObj의 key를 모은 배열을 넣는다. 이후 for문으로 순서대로 documentObj의 value들을(텍스트들을) remaingObj의 value들로 변경한다.

0일 0시간 0분 0초가 미리 나와있는 게 마음에 안 든다. D-day를 입력하면 등장하도록 하자 0일 0시간 0분 0초는 d-day-container라는 아이디를 가진 에 감싸져 있다. script.js에 container라는 d-day-counter를 가진 변수를 생성한다. 그리고 display 속성을 none으로 지정한다. display = none → 존재하지만 화면에 보이지 않는 상태로 설정하는 속성값 없어졌다. 이번에는 'D-day를 입력해주세요.'라는 문구를 h3 정도의 두꺼운 텍스트로 변환해본다. textContent에서 innerHTML로 변경한다. innerHTML 해당하는 태그의 안쪽에 직접 html 자체를 입력할 수 있게 한다. 잘못된 시간이 입력되었을 때에도 innerHTML을 활..

querySelector() querySelector는 특정 name 이나 id 를 제한하지않고 css선택자를 사용하여 요소를 찾는다 (#tag의 아이디) -> 해당 아이디를 가진tag를 찾습니다 (.tag의 클래스) -> 해당 클래스명을 가진 tag를 찾는다 반환객체는 한개의 요소만 찾을 수 있다. 동일한 클래스명 을 가진 객체가 있다면 html문서내의 첫번째를 나타나는 요소를 반환 textContent 해당 태그의 내부에 직접 텍스트를 추가해줄 수 있는 속성 index.html의 index.html의 script.js의 시작코드 querySelector()를 이용해 호출할 태그를 선택한다. 만일 defer가 없었다면 html이 파싱되다 말고 script로 넘어와서 d-day-message 태그가 생성..

remaining(남은시간)이 0이라면, "타이머가 종료되었습니다." 출력 이번엔 유효하지 않은 값이 들어왔을 때, "유효한 시간대가 아닙니다." 출력 isNaN 변수에 들어있는 값이 NaN인지 판별

조건문 로직의 실행분기점 지정해준 특정 조건을 통과하는지 검증 통과 여부에 따라 별도 기능을 수행하도록 하는 명령 if문 if(true) { 조건이 성립하면 실행되는 코드 } 객체의 이름이 Jason이라면 콘솔이 출력되게 해보자. 객체의 이름이 Jason 또는 Peter인 경우 콘솔이 출력되게 해보자. → 이 경우 같은 조건문을 두 번 사용해야하는 비효율적인 면이 있다 논리 연산자 && AND 연산자 : 양쪽에 위치한 조건을 모두 만족하는 경우 TRUE || OR 연산자 : 양쪽에 위치한 조건 중, 하나라도 만족하는 경우 TRUE

비교연산자 : js의 데이터를 서로 비교하여 조건의 성립 여부를 판단하기 위해 사용 === 서로 같은지 비교 boolean 타입으로 반환 엄격한 비교 → 데이터의 주소값까지 비교 == 느슨한 비교 사용x → 제대로 된 비교x 이번에는 변수에 배열을 넣어보자 arr에 [1,2,3]이라는 배열을 넣고 arr과 [1,2,3]이라는 배열을 비교했는데 다르다는 결과가 나왔다. →그 이유는 원시타입(Primitive type)과 참조타입(Reference type)의 차이 때문이다. 원시타입 참조타입 String 이외의 모든 것 Number Boolean Bigint undefined Symbol Null 이 결과가 false인 이유 : 배열은 생성할 때마다 고유한 주소값을 갖는다. arr은 이미 101이라는 주소..