항해2주차 - Node.js (4) alert, prompt, confirm

1. 인터페이스란?

인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다.   ---->no이해

 

2. 프로퍼티?

자바스크립트의 기본 타입(data type)은 객체(object) 입니다. 객체란 이름(name)과 값(value) 으로 구성된 프로퍼티(property)의 정렬되지 않은 집합니다. ※ 프로퍼티란, 객체 안에 선언된 이름과 값으로 이루어진 한 쌍을 의미합니다

프로퍼티 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드method라고 한다.

나바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체임.

//문법
객체이름.프로퍼티이름
or
객체이름["프로퍼티이름"]

//예제
const person = { 
 first name: "lee",
 last name: "soonsin",
 age: 30
 };
//person(객체)firstname(프로퍼티) 
//lee(프로퍼티 값)

const person = {
tall: 170, //키의
age: 30,   // 나이의 프로퍼티 값을 30으로 정의함
sum: function() { //sum을 함수 선언과 함께 함수로 정의
     return this.height + this.age:
     }
};
person.sum() //200

3.브라우저를 데모 환경으로 사용 중이므로 브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능인 alert, prompt, confirm에 대해 알아보겠습니다.  ------>데모환경?

 

4. alert / 메시지를 보여준다.

alert가 실행되면 확인 버튼을 누를때까지 메시지를 보여준다.

메시지가 있는 창을 모달창(modal window)이라고 함. 모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다. 따라서 사용자는 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없다. 확인 버튼을 눌러야 다른 창을 클릭할 수 있다.

 

5. prompt---->덜 이해 / 사용자에게 텍스트를 입력하라는 메시지를 띄어줌과 입력필드를 함께 제공함.

브라우저에서 제공하는 prompt 함수는 두개의 인수를 받는다.

함수가 실행되면 텍스트 메시지와 입력필드, 확인, 취소 버튼이 있는 모달창이 띄워준다.

result = prompt(title, [default])

title: 사용자에게 보여줄 문자열

default: 입력 필드의 초깃값(선택값)

**여기서 [   ] 대괄호는 이 매개변수가 필수 아닌 선택값이라는 뜻!

prompt는 사용자가 입력필드에 기재한 문자열을 반환한다.그러니깐 확인을 누르면 prompt는 사용자가 입력한 문자열을 반환하고, 사용자가 입력을 취소 or ESC 누를 경우에는 null이 반환된다.

**null이란? 값이 존재하지 않는다. 0과는 다른 개념.

let age = prompt('나이를 입력해주세요.', 100);

alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.

5-1 nternet Explorer(IE)에서는 항상 '기본값’을 넣어주자 ---->이해X

프롬프트 함수의 두번째 매개 변수는 선택사항이지만, 이 매개 변수가 없는 경우 IE는

"undefined"를 입력 필드에 명시한다.

let test = prompt("Test");

IE사용자를 비롯한 모든 사용자에게 깔끔한 프롬프트를 보여주려면 아래와 같이

두번째 매개변수를 항상 전달해 줄 것을 권장한다.

let test = prompt("Test", ''); // <-- IE 사용자를 위한 매개변수 처리

 

6. confirm / 사용자가 확인 or 취소 버튼을 누를 때까지 메시지가 창에 보여진다.

컨펌 함수는 매개변수로 받은 질문과 확인 및 취소 버튼이 있는 모달창을 보여준다,

사용자가 확인 버튼을 누르면 true, 그 외의 경우는 false를 반환한다.

let isBoss = confirm("당신이 주인인가요?");

alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다.

 

7. 위 세가지 alert, prompt, confirm 모달창을 띄어주고, 모달창이 떠 있는 동안 스크립트의 실행이 일시 중단된다.

그러니까 확인이나 취소를 누르기 전까지 다른창을 클릭할수 없음. 

사용자가 창을 닫기 전까지 나머지 페이지와 상호작용X

 

8. 사용자에게 이름을 물어보고, 입력받은 이름을 그대로 출력해주는 페이지를 만들어 보라

내가 쓴 답변

let name = prompt("ss")

alert(name)

해답

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

alert(name);

---------> 두번째 매개변수 적는것, 문장뒤에 세미콜론 붙이기<------------

다시 작성

let name = prompt("ss","");

alert(name);