091_자바스크립트에서 윈도우 사이즈 확인하기 [적용] 화면을 브라우저 크기에 맞춰 표시하고 싶을 때 화면 폭에 맞춰 처리 작업과 레이아웃을 변경하고 싶을 때 [문법] 속성 의미 반환 window.innerWidth 브라우저 뷰포트(Viewport)의 가로 길이 숫자 window.innerHeight 브라우저 뷰포트(Viewport)의 세로 길이 숫자 [내용] 브라우저의 표시 영역 크기를 윈도우 사이즈라고 하며, 윈도우 창이 표시되는 사이즈는 innerWidth와 innerHeight를 사용해 가져올 수 있다. 사이즈 값은 주소창, 북마크, 개발자 도구 등 주변의 인터페이스는 포함되지 않은 순수한 화면의 사이즈다. 화면의 가로와 세로의 길이를 알게 되면 다양한 작업이 가능해진다. 예를 들어 동영상을 전체..

090_자바스크립트 입력 프롬프트 표시하기 prompt() [적용] 유저로부터 문자를 입력받고 싶을 때 동기 형식의 작업을 하고 싶을 때 [내용] prompt()는 확인 버튼, 취소 버튼, 문자 입력창을 가진 알림창을 표시한다. 확인 버튼을 클릭하면 문자 입력창의 문자열이 반환되고, 취소 혹은 x를 누르면 null이 반환된다. 알림창을 단기 전까지 자바스크립트가 실행 중인 상태로 유지되며, 다른 작업이나 브라우저의 조작이 불가능하다. 유저로부터 문자를 입력받고 싶을 때 사용한다. const text = prompt('오늘의 날씨는 어떤가요?', '여기에 입력해 주세요'); console.log(text); // 결과: 유저가 입력한 문자열 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아케..

089_자바스크립트에서 확인창 표시하기 confirm() [적용] 선택 창을 표시하고 싶을 때 동기 형식으로 확인창을 표시하고 싶을 때 [문법] 메소드 의미 반환 confirm(내용) 확인창 표시 진리값 [내용] confirm()은 확인과 취소 버튼을 가진 확인창을 표시한다. 확인 버튼은 true, 취소는 false를 반환한다. 확인창을 닫기 전까지 자바스크립트가 실행 중인 상태로 유지되며, 다른 작업이나 브라우저의 조작이 불가능하다. 주로 유저에게 확인을 요청하고 싶을 때 confirm()을 사용한다. // 버튼을 참조 const btn = document.querySelector('button'); // 버튼 클릭시 작업 btn.addEventListner('click', (event) => { //..

088_자바스크립트에서 경고 표시하기 alert() [적용] 알림창을 표시하고 싶을 때 동기 형식으로 유저에게 메시지를 표시하고 싶을 때 [문법] 메소드 의미 반환 alert(내용) 알림창 표시 없음 [내용] alert()은 메시지 내용과 OK 버튼으로 이루어진 알림(경고)창을 표시한다. 창이 닫히기 전까지 자바스크립트가 실행 중인 상태로 유지되므로 OK 버튼을 눌러 창을 닫기 전까지는 다른 작업이나 브라우저의 조작이 불가능하다. 알림창 메시지 내용의 줄바꿈은 \n과 템플릿 문자열을 사용한다. // 버튼 참조 const btn = document.querySelector('button'); // 버튼 클릭시 작업 btn.addEventListener('click', (event) => { // 알림창 표..

087_자바스크립트로 아날로그 시간(시계) 표시하기 [적용] 아날로그 형식의 시계를 표시하고 싶을 때 [내용] 아날로그 시계를 구현하여 Date 객체를 좀 더 자세히 알아보자. div 요소를 사용해 시계바늘의 컨테이너를 만든다. 원의 중심을 기준으로 각도를 계산하기 때문에 컨테이너를 사용하면 처리가 더욱 간단하다. 기본적인 상태는 바늘이 모두 12시를 가리키고 있다. HTML index.html CSS style.css body {background-color: #000000;} .clock { border-radius: 50%; border: 3px solid white; width: 400px; height: 400px; background: rgba(255, 255, 255, 0.1); positi..

086_자바스크립에서 카운트다운 만들기 [적용] 제한 시간을 지정하여 카운트다운하고 싶을 때 [문법] 메소드 의미 setInterval(함수, 밀리초) 밀리초 후 함수 실행 [내용] 시간의 차이를 계산하여 카운트 다운을 만들어 보자. setInterval()은 지정한 밀리초마다 함수를 실행한다. 목표 시간과 경과 시간의 차를 구하여 카운트다운을 처리해 보자. const totalTime = 10000; // 10초 const oldTime = Date.now(); const timerId = setInterval(() => { const currentTime = Date.new(); // 시간의 차를 구함 const diff = currentTime - oldTime; // 남은 밀리초 계산 const ..

085_자바스크립트에서 경과 시간 확인하기 [적용] 데이터 통신 시간을 확인하고 싶을 때 자바스크립트의 저리 시간을 확인하고 싶을 때 [문법] 메소드 의미 반환 Date.now() 기준시에서 현재 시간을 밀리초로 가져오기 숫자 [내용] Date 객체로 시간의 차이를 계산할 수 있다. 측정 시작 시점에 Date.now()를 사용해 절대 시간을 구할 수 있다. 측정이 끝나는 시점에 다시 Date.now()를 사용하여 두 값을 빼면 밀리초 단위의 경과 시간을 구할 수 있다. 알아보기 쉬운 초(Second) 단위 변환은 1000으로 나누고 소수점을 처리한다. // 초(Second) 단위 변환하기 const sec = Math.floor(diff / 1000); // 스크립트 시작 지점의 기록 const oldT..

084_자바스크립트에서 날짜와 시간 차이 구하기 [적용] 두 날짜의 차이를 구하고 싶을 때 두 시간의 차이를 구하고 싶을 때 [내용] 비교하고 싶은 날짜와 시간을 Date 인스턴스에 넣고 getTime()을 사용하여 밀로초를 구한다. 밀리초는 자바스크립트에서 가장 간단한 시간 단위로 두 날짜의 밀리초를 계산하여 차이를 구한다. 계산 후 알아보기 쉬운 단위로 변환이 필요하다. 일수(Day)는 결과값을 '24*60*60*1000'으로 나누면 확인할 수 있다. const dateA = new Date('2022/06/01'); const dateB = new Date('2022/05/01'); const diffMSec = dateA.getTime() - dateB.getTime(); const diffDat..

083_자바스크립트에서 날짜 계산하기 [적용] 하루 뒤의 날짜를 알고 싶을 때 달을 넘겨 계산하고 싶을 때 [내용] 날짜를 가져오거나 설정하는 메소드에서 지정한 날짜로부터 몇 개월 전이나 몇일 후의 날짜 등을 구할 수 있다. 계산 결과가 날짜의 유효 범위를 넘어서는 경우에는 Date 객체가 환산작업을 한다. 12월에서 2개월을 더하면 결과는 14가 되지만, Date 객체는 적절한 환신을 통해 2월을 반환하다. const date = new Date('2022/06/01'); date.setMonth(date.getMonth() - 1); // 1개월 전 console.log(date.toLocaleDateString()); // 결과: '2022.5.1.' date.setDate(date.getDate(..

082_자바스크립트에서 날짜 설정하기 [적용] 날짜와 시간을 설정하고 싶을 때 [생성자(Constructor)를 사용하는 방법] 날짜와 시간 정보를 생성자의 인수로 전달한다. 전달된 정보는 자동적으로 타입에 맞춰지며, 문자열로 날짜와 시간을 설정할 수 있다. const date1 = new Date('2022/06/09 20:01:10'); const date2 = new Date('Thu Jun 09 2022 20:01:10'); 숫자로도 지정이 가능하다. 숫자는 년, 월, 일, 시, 분, 초 밀리초의 순서로 기입한다. 월은 0~11의 범위에서 사용되므로 주의가 필요하다.(숫자 0부터 1월을 나타낸다.) 생략하면 0이 대입된다. const date3 = new Date(2020, 06, 09, 20, ..