본문 바로가기

개발일지/JavaScript + jquery

[js] 팝업창 띄우기(alert, confirm, prompt)

1. alert 얼러트 알리다 : 주의 등의 팝업창을 띄운다.

  <script>
		alert("그림을 보고싶으세요? 그렇다면 확인을 누르세요");
  </script>

alert는 말 그대로 주의사항을 팝업창을 띄워서 안내하는 역할을 합니다. 그래서 확인 버튼 말고는 기능이 없어요. 바로 나가지 않는 다면 꼼짝 없이 그림(귀여운 강아지 사진)을 봐야 합니다. 

 

<body>
	<img src="./img/dog.jpg"
	onmouseover = "this.src = './img/국화.jpg';" 
	onmouseleave = "this.src = './img/dog.jpg';"> 
	<!--마우스를 올렸다 내렸을 때-->
 </body>

추가로 이런 기능도 함께 배웠습니다. 이미지 태그 안에 넣는 옵션으로 마우스를 올렸을 때, 마우스를 뗐을 때 서로 다른 그림을 설정할 수 있어요. 처음 홈페이지에 들어 갔을 때 사진까지 총 3장을 올릴 수 있겠죠? 하지만 주로 마우스를 올렸을 때만 다른 사진을 넣곤 합니다. onmouseover 마우스를 올렸을 때 "this.src 이 주소의 사진을 띄워라 큰 따옴표(") 안에는 무조건 작은따옴표(')가 들어가야 하기 때문에 주소는 './img/국화.jpg'; 이 안에 넣습니다. 

 

 

 

2. confirm 컨펌 확인 : 확인/취소 창을 띄워 사용자에게 선택하도록 한다.

<script>
	var aa = confirm("Do you want to see the puppy? ");
	if( aa == true ){
		document.write("<img src='./img/dog.jpg'>");
	 }
    else{
		document.write("thank you. Bye.");
	 }
</script>

강아지 사진을 볼 건지 묻고 확인을 누르면 수줍게(?) 보여준다.

취소를 누르면 매몰차게 인사하고 끝낸다.

thank you. Bye.

var aa == cofirm으로 선언과 동시에 창에 뜨는 질문을 입력합니다. if( aa == true) 만약 aa가 트루라면 이 말은 사용자가 확인을 눌렀다면이라는 뜻입니다. 그렇다면 귀여운 댕댕이 사진을 보여줍니다. else 아니라면 절교.. 아니 thank. Bye를 출력합니다.

 

 

3. prompt 프롬프트 : 질의/응답 창을 띄운다.

   <script>
	var name = prompt("이름을 입력하세요");
	var kor = prompt("국어 성적은?");
	var mat = prompt("수학 성적은?");
	var tot = Number(kor) + Number(mat);
	var avg = tot / 2;
	document.write("이름 : " + name + "<br>");
	document.write("국어성적 : " + kor + "<br>");
	document.write("수학성적 : " + mat + "<br>");
	document.write("합계 : " + tot + "<br>");
	document.write("평균 : " + avg + "<br>");
  </script>

 

이름과 국어, 수학 성적을 묻고 합계와 평균을 구한다.

그리고 순서대로 이름, 국어, 수학, 합계, 평균을 출력한다.

 

 

var name = prompt("이름은?"); 
팝업창에 질문을 던지고 답변을 받으면 출력을 한다.

document.write("이름 : " + name + "<br>");  출력

 

var tot = Number(kor) + Number(mat); 

프롬프트의 특징은 Number()를 넣지 않으면 문자형으로 읽고 출력이 되기 때문에 숫자 라는 걸 알려주는 과정이다. 문자형의 경우 90+90 = 9090 이렇게 출력을 하고, 숫자형의 경우 90+90 = 180 이렇게 출력을 한다는 뜻!

 

다른 방법도 있다.

var kor = Number(prompt("국어 성적을 입력하세요."));
var mat = Number(prompt("수학 성적을 입력하세요."));
var tot = kor + mat;

처음부터 프롬프트 화면에서 숫자 형식을 받아주는 방식. 이것을 더 많이 사용한다고 함!

 

var avg = parseInt(tot / 2);

평균을 구했을 때 반올림 하는 방법! 여기서는 필요 없는 방식이지만 parseInt();를 넣어주면 소수점을 반올림한다.

 


  <script>
	function SungJuck(){
		var name = prompt("이름을 입력하세요.");
		var kor = Number(prompt("국어 성적을 입력하세요."));
		var mat = Number(prompt("수학 성적을 입력하세요."));
		var tot = kor + mat;
		var avg = tot / 2;
		document.write("<table border = 1>");
		document.write("<tr><td>이름 </td><td>" + name + "</td></tr>");
		document.write("<tr><td>국어 </td><td>" + kor + "</td></tr>");
		document.write("<tr><td>수학 </td><td>" + mat + "</td></tr>");
		document.write("<tr><td>총점 </td><td>" + tot + "</td></tr>");
		document.write("<tr><td>평균 </td><td>" + avg + "</td></tr>" );
		document.write("</table>");
	}
  </script>

 

출력할 때 테이블 안에 넣어서 출력하는 방법도 있다. 선언 하는 방법은 같지만 출력문 안에 들어간다. 아직은 이 방법 밖에 배우질 않아서 깔끔치 않은 코딩이지만 곧 나아지겠지..!