728x90
- input tag에 onclick 속성을 줘서 함수를 호출하고 있는 코드이다.
/** 원본 코드 **/
<body>
<script>
function printResult() {
var x = prompt("x 의 값을 입력하세요", 0);
var y = prompt("y 의 값을 입력하세요", 0);
x = parseInt(x);
y = parseInt(y);
btnPrint.value = x + y;
}
</script>
<input type="button" value="클릭" onclick="printResult();" id="btnPrint"> </br>
</body>- script는 script 대로 html은 html 대로 깔끔하게 구분하고 싶어서 input tag onclick 속성에 함수를 호출하는 대신 btnPrint.onclick = printResult; 함수를 대입해주었지만 이 코드는 btnPrint를 찾을 수 없다며 오류가 나게 되는 코드이다
- 그 이유는 function() 블럭은 함수가 실행되기 전까지 건드려지지 않는 부분이지만 script 태그 안에 부분은 브라우저 실행 시 거치게 되는 부분이다 그래서 script tag 안 function() 블럭 밖에 있는 btnPrint.onclick = printResult; 코드는 실행 되게 되는데 프로그래밍은 항상 위에서 아래로 가기 때문에 저 코드가 실행되는 시점에는 아직 input tag가 메모리 상에 존재하지 않는다. 그래서 오류가 나게 되는 부분이다
/** 오류가 나는 코드 **/
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function printResult() {
var x = prompt("x 의 값을 입력하세요", 0);
var y = prompt("y 의 값을 입력하세요", 0);
x = parseInt(x);
y = parseInt(y);
btnPrint.value = x + y;
}
btnPrint.onclick = printResult;
</script>
</head>
<body>
<input type="button" value="클릭" id="btnPrint"> </br>
</body>오류 안나게 하는 방법 2가지
- input tag가 즉 btnPrint 가 먼저 메모리 상에 존재하게끔 script tag 보다 위로 올려주어야 한다
- 함수 블럭은 페이지 로드 시 실행되지 않으니까 다른 함수를 만들고 그 안에 btnPrint.onclick = printResult; 코드를 넣어준 후 window 객체의 onload를 사용해 함수를 대입해준다.
★ window.onload 함수는 페이지가 다 로드된 후 실행되는 함수이기 때문에 오류가 나지 않는다
/** 제대로 된 코드 **/
// 1번 방법
<input type="button" value="클릭" id="btnPrint"> </br>
<script>
function printResult() {
var x = prompt("x 의 값을 입력하세요", 0);
var y = prompt("y 의 값을 입력하세요", 0);
x = parseInt(x);
y = parseInt(y);
btnPrint.value = x + y;
}
btnPrint.onclick = printResult;
</script>
// 2번 방법
<input type="button" value="클릭" id="btnPrint"> </br>
<script>
function printResult() {
var x = prompt("x 의 값을 입력하세요", 0);
var y = prompt("y 의 값을 입력하세요", 0);
x = parseInt(x);
y = parseInt(y);
btnPrint.value = x + y;
}
function init() {
btnPrint.onclick = printResult;
}
window.onload = init;
</script>함수를 호출할 때에는 ()를 붙이지만 함수를 대입할 때에는 ()를 붙이지 않는다
var btn = printResult(); // 함수를 호출해서 함수를 실행 하고 리턴한 결과를 btn에 담는다
// 함수를 대입할때에는 해당 함수의 리턴 값을 받으려는게 아니니까 ()는 빼준다.
// onclick 이벤트가 발생 했을때 printResult 함수를 실행 시켜달라는 코드이다
btnPrint.onclick = printResult; // input tag에 onclick="printResult()"한것과 같다
/* 함수 대입 예시 */
// window 객체에게 onload 즉, 페이지가 다 로드 되면 printResult; 를 실행 시켜 달라는 코드 이다
window.onload = printResult;
/* 함수 대입 예시 */
// 함수 자체를 대입 하는 것도 가능 하다
btnPrint.onclick = function(){ //이때 함수 이름은 딱히 필요 없으니까 생략 할수있고, 익명 함수라 부른다
var x = prompt("x 의 값을 입력하세요", 0);
var y = prompt("y 의 값을 입력하세요", 0);
x = parseInt(x);
y = parseInt(y);
btnPrint.value = x + y;
}728x90
'JavaScript > 기초' 카테고리의 다른 글
| 자바스크립트[기초] window 객체 속성 (0) | 2022.04.19 |
|---|---|
| 자바스크립트[기초] window 객체 .prompt() | .confirm() (0) | 2022.04.19 |
| 자바스크립트[기초] input tag | span tag (0) | 2022.04.19 |
| 자바스크립트[기초] parseInt (0) | 2022.04.19 |
| 자바스크립트[기초] 함수의 가변인자 arguments 객체 (0) | 2022.04.19 |