[인터랙티브 개발JS] 웹브라우저 입출력하기-1

 

=== Prologue ===

 

웹사이트를 만들다 보면 빠질 수 없는 요소는 사용자들한테 데이터를 입력받고, 입력된 데이터에 따라 처리를 하게 된다. (입출력은 프로그래밍에서 빼놓을 수 없는 요소다.) 

 

인터랙티브 개발을 정의해 놓고, 인터랙티브란 용어를 찾아보니 

인터랙티브 = 사람들로부터 입력을 받는 것을 말하며, 인터랙티브 컴퓨터 시스템은 사용자가 데이터나 명령을 입력할 수 있도록 한 프로그램이다. 이 용어는 사용자와 컴퓨터가 마치 대화를 하듯이, 컴퓨터가 출력한 내용에 따라 사용자가 적절한 입력을 하는 식으로, 입력과 출력이 공존하는 프로그램을 가리킨다. 

결국, 가장 기본이 되는 것은 입출력할 수 있는 방법이다. 

 

==== Mission ====

 

 그래서 JS 자바스크립트의 내장된 대화상자를 활용하여 입출력하는 방법을 알고자 한다. 

 

=== description ===

 

대화상자란 입력을 하거나 메시지를 확인하기 위해 별도로 여는 창을 말한다. 

웹브라우저의 전역객체인 Window 객체에는 대화 상자를 표시하기 위한 메서드가 세 개 있다. 

 

1. window.alert  //경고 대화상자를 표시
2. window.prompt  //사용자의 문자열 입력을 받는 대화상자를 표시
3. window.confirm //[확인]버튼과 [취소]버튼이 있는 대화상자를 표시

 

대화 상자는 모달(modal)창이다. 대화 상자가 떠 있는 중에는 부모 차의 작업이 일시적으로 정지상태가 되어 부모 창을 조작할 수 없게 된다는 뜻이다. 

 

window 객체의 메서드는 앞에 붙은 window. 부분을 생략하고 호출할 수 있다.

alert, prompt, confirm 으로 표기 가능! 

 

 

반응형

 

 

 

==== detail progress ====

 

alert("안녕하세요");

 

alert 메서드는 경고 대화창을 표시해준다. 

예를 들어 비밀번호를 초기화시킬 때, 정말 초기화하시겠습니까? 같은 경고창이다. 

 

var name = prompt("이름을 입력하십시오"); 
var name = prompt("이름을 입력하십시오","우아한열정씨") // 두번째는 초기값지정 가능 *옵션* 

var age = parseInt(prompt("나이를 입력하십시오")); //숫자를 받으려면 한번 더 감싸줘야한다.
var height = paseFloat(prompt("키를 입력하십시오:)); //문자열을 부동소수점까지 바꿀 수 있다.

 

사용자로부터 입력받은 문자열은 prompt메서드의 반환 값이 된다. 

반환 값이 name 변수에 저장되고, 반환하는 값은 문자열이다. 

숫자 값을 구하려면 parsseInt 나 parseFloat 메서드를 활용해서 숫자로 바꾸어 줘야 한다.

 

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

 

confirm 메서드는 논리 값을 반환한다. true / false

 

 

 

==== Result ====

 

생각보다 웹사이트를 만들 때 회원가입이며 정보 입력이며 사용자랑 상호작용하는 페이지가 많다. 

input을 그 어느 때(포트폴리오 만들 때) 보다 많이 사용하고 있다. 

 

 

 

 

==== Reference====

 

모던 자바스크립트 입문 책 참고