[javascript]onclick, alert, prompt, confirm

onclick

onclick 요소를 클릭할 때 이벤트 발생

 

확인하기

 

 

alert prompt confirm

 

<div onclick="alert('안녕하세요')">클릭</div>
<div onclick="myFunction();" class="click">클릭</div>
<!-- myFunction() 메소드를 불러옴 -->

var click = document.querySelector('.click');
click.onclick = function(){
  // 원하는 내용
  // ex) 글꼴 색상 변경시
  click.style.color = 'red';
}

document.onclick = clickEvent;
function clickEvent(){
  // 원하는 내용
}

 

 

alert

메세지를 지정할 수 있는 모달창을 띄움

window.alert('alert를 클릭했습니다.');
alert('alert를 클릭했습니다.');
// 둘 다 같은 내용으로 window 창을 켰을 때 확인할 수 있음

 

 

prompt

텍스트 입력 가능한 모달창을 띄움

사용자가 입력한 문자열을 반환, 취소 또는 Esc 클릭시 null을 반환함

window.prompt('prompt를 클릭했나요?', '네');

var name = prompt('당신의 이름은?','');
window.alert('당신의 이름은 ' + name + ' 입니다.');
// 당신의 이름은 ㅇㅇㅇ 입니다.

 

confirm

확인, 취소 버튼이 있는 모달창을 띄움

사용자가 확인 버튼을 누르면 true, 취소 또는 Esc 클릭시 false를 반환함

window.confirm('취소, 확인을 확인해보세요.');
// ex)
if(window.confirm('카테고리로 이동하시겠습니까?')){
    window.open('https://min-ji07.tistory.com');
}

 

 

모달창이 떠있는 경우 스크립트의 실행이 일시 중단되며 창을 닫기 전까진 상호작용이 불가능함

모달창의 위치는 브라우저가 결정하며 모양은 브라우저마다 다름