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..

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, ..

081_자바스크립트 날짜 문자열의 타임스탬프 확인하기 [적용] 타임스탬프로 날짜와 시간을 계산하고 싶을 때 [문법] 메소드 의미 반환 Data.parse() 날짜 문자열 타임스탬프 가져오기 숫자 [내용] Data.parse()는 인수를 타임스탬프로 변환한다. 타임스탬프는 1970년 1월 1일 00:00:00부터 현재까지의 경과 시간을 나태는 것으로 단위는 밀리초(1/1000초)다. 프로그래밍 시 타임스탬프를 기준으로 하여 시간을 계산하는 경우 해당 메소드의 사용이 가능하다. Data.parse() 메소드는 Date 인스턴스의 getTime() 메소드와 같은 값을 가진다. const num1 = Date.parse('2022/06/09') console.log(num1); // 결과: 16547004000..

080_자바스크림트에서 현재 시간과 날짜 가져오기 [적용] 간단히 날짜 정보를 출력하고 싶을 때 언어별 날짜 표시 형식으로 출력하고 싶을 때 [문법] 메소드 의미 반환 toLocaleDateString() 현재 날짜를 문자열로 가져오기 문자열 toLocaleTimeString() 현재 시각을 문자열로 가져오기 문자열 [내용] getDate()와 getHours()를 사용하면 정보를 세부적으로 가져올 수 있으나, 코드가 복잡해지기 쉽다. toLocaleString()을 사용하면 간결한 표현이 가능하며, 사용자의 언어 환경에 따라 날짜 형식을 지정하여 가져온다. 한국어 환경에서는 '2022/06/08 21:22:01'의 형식으로 가져오지만, 영어는 '08/06/2022, 9:22:01 PM'의 형식을 따른다..