[스나이퍼팩토리] 한컴AI아카데미(26.04.16)

대화상자 메소드

---

• alert(): 경고창(알림창) 함수
  • 특징: alert()는 단순히 메시지만 띄우는 게 아니라, 아주 특별한 성질을 가지고 있습니다.
    • 코드 실행의 일시 정지 (Blocking): alert 창이 뜨면 사용자가 '확인' 버튼을 누를 때까지 그 뒤의 모든 자바스크립트 코드가 일시 정지됩니다.
    • 상호작용의 강제성: 확인 버튼을 누르기 전까지는 웹사이트의 다른 버튼을 클릭하거나 텍스트를 입력하는 등의 활동을 일절 할 수 없습니다. 이를 '모달(Modal)' 창이라고 부릅니다.

• confirm(): 예/아니오의 선택권을 주는 대화 상자 함수
  • 특징: confirm() 함수를 실행하면 브라우저에 **[확인]**과 [취소] 버튼이 있는 창이 뜹니다. 가장 중요한 특징은 사용자가 클릭한 버튼에 따라 **논리값(Boolean)**을 되돌려준다는 점입니다.
    • [확인] 클릭 시: true 반환
    • [취소] 혹은 창 닫기 클릭 시: false 반환

• prompt(): 사용자에게 직접 텍스트를 입력받을 수 있는 입력창을 띄우는 대화상자 함수
  • 특징: 두 가지 인자를 받을 수 있습니다.
    1. 메시지: 사용자에게 보여줄 질문 내용
    2. 기본값 (선택): 입력창에 미리 적혀 있을 글자

const userName = prompt("당신의 이름은 무엇인가요?", "홍길동");

 

대화상자.html

0.00MB

 

 

 

시간메소드

---

• setTimeout(): "일정 시간이 지난 뒤에 특정 코드를 실행하고 싶을 때" 사용하는 아주 대표적인 함수

setTimeout(function() {
  console.log("3초가 지났습니다!");
}, 3000); // 3000ms = 3초

지연시간(단위: 밀리초, 1000ms = 1초, ex. 5분 = 1000*60*5)

• setInterval(): setTimeout()이 일회용이라고 치면 setInterval()은 반복함수

setInterval(function() {
  console.log("2초마다 제가 나타납니다!");
}, 2000); // 2000ms = 2초

setInterval()함수는 스스로 멈추지 않기 때문에 그럴 때사용하는 것이 clearInterval()함수이다. 

• clearTimeout(), clearInterval(): 타이머를 멈추는 함수
  • clearTimeout()
    • setTimeout()으로 설정된 1회성 타이머를 취소
    • 함수가 실행되기 전에 호출되어야 효과가 있다.
    • ex) const timer = setTimeout(fn, 1000); clearTimeout(tiemr); (1초 후 실행 예정이었던 함수가 실행 X)
  • clearInterval()
    • setInterval()로 설정된 주기적 반복 타이머를 취소
    • 언제든지 호출하여 반복 작업을 멈출 수 있다.
    • ex) const interval  = setInterVal(fn, 1000): clearInterval(interval); (1초마다 반복되던 함수가 멈춤)

• Date객체
  • new Date(): Date 자체는 어떻게 날짜를 다룰지 정의된 **설계도(클래스/생성자 함수)**일 뿐인데, 앞에 new를 붙이면, 컴퓨터 메모리에 **실제 날짜 정보를 담은 상자**를 하나 만들게 됩니다.
  • Date.now(): now()는 Date라는 생성자 함수(객체) 자체에 직접 붙어 있는 메서드(현재 시각을 밀리초타임스탬프로 나타내는 숫자)

 * new Date() vs Date.now()

구분	Date.now()	new Date()
결과값	1713243... (숫자)	Thu Apr 16 2026... (객체)
특징	현재 시간만 빠르게 숫자로 리턴	날짜 연산, 포맷 변경 등이 가능한 상자 생성
비유	공장 벽에 걸린 시계 보기	내가 조작할 수 있는 개인 손목시계 사기

 

** Date 메소드

getDate()	현지 시각으로 현재 일자에 해당하는 숫자를 반환함.	1 ~ 31
getDay()	현지 시각으로 현재 요일에 해당하는 숫자를 반환함.	0 ~ 6
getMonth()	현지 시각으로 현재 월에 해당하는 숫자를 반환함.	0 ~ 11
getFullYear()	현지 시각으로 현재 연도를 4비트의 숫자(YYYY)로 반환함.	YYYY
getHours()	현지 시각으로 현재 시각에 해당하는 숫자를 반환함.	0 ~ 23
getMilliseconds()	현지 시각으로 현재 시각의 밀리초에 해당하는 숫자를 반환함.	0 ~ 999
getMinutes()	현지 시각으로 현재 시각의 분에 해당하는 숫자를 반환함.	0 ~ 59
getSeconds()	현지 시각으로 현재 시각의 초에 해당하는 숫자를 반환함.	0 ~ 59
getTime()	1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초 단위로 환산한 값을 숫자로 반환함.	-

시간메소드.html

0.00MB

 

 

 

math메소드

---

 

메서드	설명	예시	결과
Math.min(a, b, ...)	인자값 중 가장 작은 값을 반환	Math.min(10, 20, 5)	5
Math.max(a, b, ...)	인자값 중 가장 큰 값을 반환	Math.max(10, 20, 5)	20
Math.random()	0 이상 1 미만의 난수(실수)를 발생	Math.random()	0.45...
Math.round(x)	소수점 첫째 자리에서 반올림	Math.round(4.5)	5
Math.floor(x)	소수점 이하를 내림(버림)하여 정수 반환	Math.floor(4.9)	4
Math.ceil(x)	소수점 이하를 올림하여 정수 반환	Math.ceil(4.1)	5

 

수학메소드.html

0.00MB

 

 

 

 

예제

---

 

예제.html

0.00MB

 

 

 

 

 

 

느낀점

---

 

오늘은 대화상자, 수학, 시간 메소드들에 대해 알아보았다. 초반에 설명 들을 때는 동작하는 것이 쉬워 이해하기 쉽다고 생각했는데 예제로 들어가니 많이 헷갈렸던것 같다. 하지만 계속 사용하다보니 군대에서 자동 새로고침 스크립트 짠던 것에 대해 생각이나고 미니과제를 하면서 계속 메소드들을 사용하다보니 많이 익숙해진 것 같다. 내일은 jquery에 대해 배운다고 하니 그다음날 하루하루가 계속 걱정되는 것 같다.

 

 

 

 

 

 

——————————————————————————

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.