자바 스크립트로 데이터 출력하기
| 기능 | 설명 |
| document.write(내용) | -화면에 값을 출력한다. 콤마(,)를 이용해서 여러개의 값을 추가할 수있다 -document.writeln()는 줄바꿈기능 |
| window.alert(내용) | - 경고창을 표시한다. window는 생략이 가능 |
| innerHTML = 내용 | - DOM을 조작할 때 엘리먼트 요소의 내용을 가져오거나 새로운 내용으로 대체할 때 사용되는 속성이다. - 비슷한 속성으로 텍스트만 읽어오는 innerText가 있다. |
| console.log(내용) | - 내용을 Developer Tools의 콘솔에 표시한다. |
|
8
9
10
11
12
13
|
<script type="text/javascript">
document.write("Hello1");
alert("Hello2");
document.body.innerHTML +="Hello3";
console.log("Hello4");
</script>
|
데이터 입력받기
1. Confirm() 함수
어떤 질문에 대해 답을 "예" 혹은 "아니오"의 결과로 얻어야 할 경우 사용한다(확인, 취소)
| window.confirm(질문내용) | 팝업창의 "확인"을 누르면 true 팝업창의 "취소"를 누르면 false |
|
5
6
7
8
|
<script type="text/javascript">
var age = confirm("당신은 성인입니까?");
document.write("결과:"+Gender+"<br />");
|
취소 클릭시 출력화면
(1) confirm()의 결과값을 제어문으로 제어하기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script type="text/javascript">
var age = confirm("당신은 성인입니까?");
document.write("결과:"+age+"<br />");
if(age===true){
age="성인";
}
else{
age="미성년자";
}
document.body.innerHTML += age + "요금이 부과됩니다.";
</script>
|
- age가 true 이면 age변수에 "성인"이 입력된다. false일때에는 "미성년자"가 입력된다.
(2) confirm()의 결과값을 제어문조건으로 바로 사용하기
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<script type="text/javascript">
document.write("결과 :");
if(confirm("당신은 성인입니까?")===true){
age="성인";
}
else{
age="미성년자";
}
document.body.innerHTML += age + "요금이 부과됩니다.";
</script>
|
| 오잉?? |
이 코드에서 body 앞에서 스크립트를 작성하게 되면, innerHTML(이 코드에서는 document.body의 속성에 HTML을 밀어넣는 역할)을 사용할때 에러가 나게 되는데, 그 이유는 body가 생성되지 않았기 때문이다. |
| document.write()를 사용하여 강제로 body를 생성해 주면 오류없이 실행이 가능하다. |
위에서부터 아래로 읽혀지는 인터프리터 언어의 성격상 자바스크립트 소스보다 아래에 위치한
<body>태그를 이보다 윗부분에 선언된 자바스크립트에서는 제어할 수 없다.
==> 자바스크립트 소스를 <body>태그보다 아래에 위치하도록 하거나, onload이벤트 핸들러를 이용해야 한다.
| onload | 모든 페이지에서 load시 공통으로 실행될 스크립트 |
| 사용법 | window.onload = function(){ 시작시 실행될 내용 } |
| window.onload와 <body onload="">는 동시에 사용할 수 없다. => function window::onload(){시작시 실행될 내용}를 사용하면 된다. (<bodt onload="">실행 후 window::onload()가 실행된다.) |
|
onload이벤트 핸들러를 이용한<body>태그 제어하기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script type="text/javascript">
window.onload = function() {
if(confirm("당신은 성인입니까?")===true){
age="성인";
}
else{
age="미성년자";
}
document.body.innerHTML += age + "요금이 부과됩니다.";
}
</script>
|
(응용) 삼항연산자
|
1
2
3
4
5
6
7
|
<script type="text/javascript">
window.onload=function(){
document.body.innerHTML
+= (confirm("당신은 성인입니까?")?"성인" : "미성년자") + "요금이 부과됩니다.";
}
</script>
|