[JS/Basic/문법/입출력] 자바스크립트 입출력

자바스크립트 재활훈련 2편

---

입출력

• JavaScript는 브라우저 환경에서 실행된다. 브라우저에 내장되어있는 입출력 기능들을 먼저 알아봅시다.
• 브라우저 내장함수는 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단(I/O Interrupt)됩니다. 즉, 사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능합니다
• Modal은 편한대신, Customize가 불가능합니다.
  • 모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치합니다
  • 모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 없습니다.

Alert

• 브라우저가 제공하는 출력기능입니다.
• Alert 함수가 실행되면, 사용자가 "OK(확인)"버튼을 누를 때 까지 ,메세지를 보여주는 창이 계속 떠있게 됩니다.
• 경고창으로 자주 볼 수 있고 , Modal Window라고도 부릅니다.
• "Modal"은 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어있어, OK를 누르기 전까지 다른 화면이 클릭이 되지않습니다.

alert("hello! World!");

console.log

• 브라우저의 Console창에 결과값을 출력합니다. 
• 주로 많이 쓰는 출력 함수입니다. 

console.log("hello!World!");

prompt

• 브라우저가 제공하는 입력기능입니다.
• 함수가 실행되면, 텍스트 메세지와 입력필드, 확인 및 취소 버튼이 있는 Modal을 띄워줍니다.

let name = prompt("이름을 입력해주세요!","mapin");

alert(`당신의 이름은 ${name}입니다.`);

confirm

• 확인(OK,확인)/취소(Esc,취소) 버튼에 따라서, True,false 를 반환하는 Modal을 띄웁니다.

let IsMapin = confirm("당신은 Mapin인가요?");

alert(IsMapin);

이 외에도, 실시간으로 입력받은걸 반영하는 함수로 짠다던지, 여러가지 변형이 있을 수 있습니다. 기본적으로 위의 3~4개는 알고있으면 좋습니다 :)  

연습

CodePen으로 3가지 Modal 함수 작성해보기 

See the Pen alert,prompt,confirm by Doge (@DogeIsFree) on CodePen.

<CodePen1>