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>
출력할 때 테이블 안에 넣어서 출력하는 방법도 있다. 선언 하는 방법은 같지만 출력문 안에 들어간다. 아직은 이 방법 밖에 배우질 않아서 깔끔치 않은 코딩이지만 곧 나아지겠지..!
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
| [js] While문 + Do While문 (0) | 2021.09.07 |
|---|---|
| [js] 중첩 for문 - 별찍기 (0) | 2021.09.07 |
| [js] 1부터 100까지의 합을 구하기(반복문-for) (0) | 2021.09.07 |
| [js] 학점구하기 (조건문-Switch) & 숫자형과 문자형 (0) | 2021.09.07 |
| [js] 코드를 간단하게 쓰는 방법과 조건문(if, else if) (0) | 2021.09.07 |
