모던 자바스크립트 입문 - Chapter 6: 웹 브라우저에서의 입출력 💻

안녕하세요! 오늘은 자바스크립트의 웹 브라우저에서의 입출력에 대해 알아보겠습니다.

📌 목차

• 대화상자
• 콘솔 출력 - console 객체
• 타이머 - setTimeour, setInterval

---

📝 대화상자

입력을 하거나 메세지를 확인하기 위해 별도로 여는 창을 말한다

window 객체의 메서드 앞에 붙은 window. 부분을 생략하고 호출 할 수 있습니다 (alert, prompt, confirm)

메서드	설명
window.alert	경고 대화상자를 표시
window.prompt	사용자의 문자열 입력을 받는 대화상자를 표시
window.confirm	[확인] 버튼과 [취소] 버튼이 있는 대화상자를 표시

1️⃣ alert (경고 대화상자)

alert("안녕하세요!!");

결과물 :

2️⃣ prompt (입력 대화상자)

let name = prompt("이름을 입력하세요");
let name = prompt("이름을 입력하세요", "가나다"); // 초기 입력 값을 지정할 수 있음

// 숫자 값을 구하려면 parseInt 나 parseFloat 메서드를 활용
let age = parseInt(prompt("나이를 입력하세요")); 
let height = parseFloat(prompt("키를 입력하세요"));

 

결과물 :

3️⃣  confirm ( 확인 대화상자 )

let ret = confirm("링크를 표시하시겠습니까?");

 

결과물 :

확인 버튼을 누르면 true가 반환되고, 취소 버튼을 누르면 flase가 반환됩니다

---

📝 콘솔 출력 - console 객체

개발 중 디버깅이나 값을 확인할 때 가장 많이 사용하는 도구는 콘솔(console) 입니다.

** 개인적으로 사용성이 많은 거라고 생각되는 것들만 작성했습니다**

 

1️⃣ console.log()

일반적인 로그 출력

console.log('안녕하세요'); // 👉 콘솔에 '안녕하세요' 출력

 

2️⃣ console.error()

에러 메시지 출력

console.error('에러가 발생했어요!');

 

---

⏲️ 4. 타이머 - setTimeout, setInterval

⌛ setTimeout()

일정 시간이 지난 후 한 번만 실행

setTimeout(() => { console.log('3초 후 실행됩니다!'); }, 3000); // 3000ms = 3초

🔁 setInterval()

일정 간격으로 반복 실행

setInterval(() => { console.log('1초마다 반복!'); }, 1000);

멈추려면 clearTimeout() 또는 clearInterval()과 ID가 필요해요!

 

const timerId = setInterval(() => {
  console.log('멈출 준비...');
}, 1000);

setTimeout(() => {
  clearInterval(timerId);
  console.log('멈췄습니다!');
}, 5000);

---

📚 마무리 정리

오늘 배운 내용을 정리하면:

• console 객체는 자바스크립트에서 가장 기본적인 디버깅 도구입니다. log, error, table 등을 활용해 값을 출력하고 확인할 수 있어요alert, prompt, confirm 함수는 브라우저에서 사용자와 간단한 상호작용을 할 수 있게 도와줍니다
  • alert는 메시지를 보여주는 알림창
  • prompt는 사용자 입력 받기
  • confirm은 확인/취소 여부를 확인할 수 있어요
• setTimeout과 setInterval은 시간을 기반으로 동작을 예약할 수 있는 함수입니다
  • 일정 시간 후 한 번 실행할 땐 setTimeout
  • 일정 시간마다 반복할 땐 setInterval
  • 타이머를 멈추고 싶을 땐 clearTimeout 또는 clearInterval을 사용

이 모든 기능은 웹 브라우저 환경에서만 동작하는 기본 API로, 사용자와 직접 소통하거나 화면 동작을 조절할 때 자주 활용됩니다.

---

💡 오늘 새롭게 알게 된 것

•  

🤔 어려웠던 점

• 시간을 기반으로 동작 예약하는게 생각보다 어려운것 같네요

🎯 다음 학습 계획

다음 포스팅에서는 제어 구문에 대해 알아보겠습니다.