hellohola
article thumbnail

세 가지 내장 함수는 브라우저를 통하여 모달 창을 띄우고 사용자에게 prompt로 입력을 받고, alert로 출력해줄 수 있다.

 

alert

alert('Hello');

1) 함수가 실행되면 사용자가 확인 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있게 된다.

2) 메시지가 있는 작은 창을 모달 창이라고 부른다.

3) 사용자는 모달 창 바깥에 있는 버튼누르는 등의 행동을 할 수 없다. 1)에서의 동작을 하기 전까지는.

 

 

prompt

result = prompt(title, [default]);

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

2)
title -> 사용자에게 보여줄 문자열 

default -> 입력 필드의 초깃값(선택값) *[ ]안에 있는 것은 필수가 아닌 선택이다.

let age = prompt('나이를 입력하세요.' , 100);
alert('당신의 나이는 ${age}살 입니다.');

> title은 '나이를 입력하세요.'

> default는 100 

>> 결과  : 모달창 문구 : 나이를 입력해주세요 / 입력 받는 창 : 100 (선택값이 떠있음.)

 

 

confirm

let rice = confirm('밥 먹었나요?');
alert(rice);

1) confirm 함수는 매개변수로 받은 question과 확인 및 취소 버튼이 있는 모달 창을 보여준다.

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

 

 

세 가지 함수의 공통점

1) 위 함수들은 모두 모달 창을 띄운다. 

2) 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단된다.

3) 사용자가 모달 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능하다.

4) 세 가지 함수에는 모두 두 가지 제약사항이 있다.

    a. 모달 창의 위치는 브라우저가 결정한다. 대개 브라우저의 중앙에 위치한다.
    b. 모달 창의 모양은 브라우저마다 다르다. 개발자는 모달 창의 모양을 수정할 수 없다.

 

profile

hellohola

@올라데브

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그