😊✔<Object.values()>
let jason={
name:'Jason',
age: 25,
gender:'Male'
}
Object.values(jason)
->['Jason',25,'Male']
Object.keys(jason)
->['name','age','gender']
const result=Object.keys(jason)
console.log(result)
->(3)['name','age','gender']
console.log(Object.values(jaon))
->['Jason',25,'Male']😊✔<배열>
- 순서가 존재하는 데이터의 창고
- 대괄호로 생성
- 각각의 요소는 쉼표로 구분
- 0부터 시작하는 위치 데이터 Index ->이를 활용해서 요소에 접근
- 배열 속성: length-> 배열에 존재하는 요소의 개수를 기반으로 해당 배열의 길이를 담은 속성
- 배열 메서드
- push()->데이터 추가
- pop()->데이터 삭제
- indexOf()->Index조회
- includes()->포함 여부 확인
😊✔<객체>
- 중괄호를 사용해서 정의
- 내부의 요소는 프로퍼티(키+값)
- Dot notation, Bracket notation
- 위 두가지로 새로운 프로퍼티도 생성
- 객체 메서드
- Object.keys()->key 모음을 배열로(문자열로)
- Object.values()->value 모음을 배열로(데이터 그대로)
😊✔<D-day만들기>
-
div: 한 줄 전체 차지.
-
span: 컨텐츠만큼 차지.
-
input: 검색창 생성
-
button: 버튼 생성
-
id이름은 중복 생성 불가능, class이름은 중복 생성 가능(여러 개의 태그를 하나로 연결 시킬때)
-
style: head태그 안에서 꾸밀때 (css요소)
-
함수:
const sum+=function(){
console.log(10+10);
}
- onclick: 버튼 누르면 실행되는 거 만들때
- id는 #, class는 .으로 불러온다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>^0^</title>
<script>
const dataForMaker = function () {
const inputYear = document.querySelector('#target-year-input').value;
const inputMonth = document.querySelector('#target-month-input').value;
const inputDate = document.querySelector('#target-date-input').value;
const dateFormat = inputYear + '-' + inputMonth + '-' + inputDate // 지역변수 dataForMaker여기에 갇힘
console.log(inputYear, inputMonth, inputDate);
}
const counterMaker = function () {
const nowDate = new Date();
const targetDate = new Date(dateFormat); //그래서 여기 참조가 안됨
const remaining = (targetDate - nowDate) / 1000;
const remainingDate = Math.floor(ramaining / 3600 / 24); //남은 일수나옴 Math.floor는 소수점 아래 날리려고
const ramainingHours = Math.floor(remaining / 3600) % 24;
const remainingMin = Math.floor(remaining / 60) % 60;
const remainingSec = Math.floor(remaining) % 60;
console.log(remainingDate, ramainingHours, remainingMin, remainingSec);
}
</script>
</head>
<body>
<input id="target-year-input" class="target-input" />
<input id="target-month-input" class="target-input" />
<input id="target-date-input" class="target-input" />
<button onclick="counterMaker()">버튼</button>
</body>
</html> 
안녕하세요