See the Pen ㅇ by ParkJooHong (@ParkJooHong) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> function plusfunc() { alert(frm.a.value); alert(document.frm.a.value); var a = parseInt(frm.a.value); var b = parseInt(frm.b.value); if (isNaN(a) || isNaN(b)) { // Not a Number alert("a값 또는 b값은 숫자가 아니다"); frm.a.value = ""; frm.b.value = ""; frm.a.focus(); } frm.rs.value = a + b; } function divifunc() { var a = parseInt(frm.a.value); var b = parseInt(frm.b.value); if (isNaN(a) || isNaN(b)) { alert("값을 입력하시오"); frm.a.focus(); return; } var rs = a / b; if (isFinite(rs) == false) { // Infinity이면 true 아니면 false를 반환 alert("0으로 나눌수 없다"); frm.a.value = ""; frm.b.value = ""; frm.rs.value = ""; frm.a.focus(); return; } frm.rs.value = rs; } </script> </head> <body> <form name="frm"> A값 : <input type="text" size="7" name="a"> B값 : <input type="text" size="7" name="b"> 결과 : <input type="text" size="7" name="rs"> <input type="button" name="+" value="더하기" onclick="plusfunc()"> <input type="button" name="/" value="나누기" onclick="divifunc()"> </form> </body> </html> | cs |
여태까지 나는 document.querySelector('#adfsads')와 같은 것을 써왔는데,
document후 바로 frm과 같이 값을 지정할 수 있었다.
document 닷컴 이후의 데이터는 html에 있는 name 값을 의미한다.
plusfunc( ) 함수에 alert으로 frm.a.value와 document.frm.a.value를 찍어본 결과 똑같은 값이 나왔다.
alert(frm.a.value);와 alert(document.frm.a.value);는 원래 동일한 동작을 수행하지만,
document 객체를 사용하는 방식은 조금 더 명시적이고 안전한 방법이다.
alert(frm.a.value);
이 코드는 frm이라는 이름을 가진 폼 요소에서 a라는 이름을 가진 입력 필드의 값을 가져와서 alert 창에 출력하는 것이다. 여기서 frm은 form 요소의 이름을 가리키는 것으로 추정된다.
alert(document.frm.a.value);
이 코드는 document 객체를 사용하여 문서 내에서 frm이라는 이름을 가진 폼 요소를 찾은 다음, 그 폼 요소 내부에서 a라는 이름을 가진 입력 필드의 값을 가져와서 alert 창에 출력하는 것이다.
이 방식은 document 객체를 명시적으로 사용하여 문서 전체에서 해당 요소를 찾아가기 때문에 보다 안전하고 일반적으로 사용하는 방식이다.
두 코드는 대부분의 경우 동일한 결과를 생성할 수 있다. 하지만 document 객체를 사용하는 방식은 요소 선택의 범위를 문서 전체로 한정하고, 만약 여러 폼이나 요소들이 존재할 때도 충돌을 피할 수 있다.
따라서 코드를 작성할 때 document 객체를 사용하는 것이 권장되는 방법이다.
isNan 이란?
JavaScript에서 제공하는 함수로, "Is Not a Number"의 약어로 숫자가 아닌지를 확인하기 위해 사용된다.
이 함수는 전달된 값이 숫자가 아니면 true, 숫자라면 false를 반환한다.
1 2 3 4 | isNaN(123); // false (숫자이므로 false 반환) isNaN("Hello"); // true (숫자가 아니므로 true 반환) isNaN(NaN); // true (NaN은 숫자가 아니므로 true 반환) isNaN("123"); // false (문자열 "123"은 숫자로 변환 가능하므로 false 반환) | cs |
'✨ Front-end > 자바스크립트(JS)' 카테고리의 다른 글
| [JavaScript] 생성자 함수 (0) | 2023.09.01 |
|---|---|
| [JavaScript] 자바스크립트 객체 VS 자바 객체 비교, Object (0) | 2023.09.01 |
| [JavaScript] encodeURI( ) 와 decodeURI( ), eval( ) (0) | 2023.08.31 |
| [JavaScript] prompt 함수 사용하기 (0) | 2023.08.31 |
| [JavaScript] 클로저(closure) (0) | 2023.08.21 |
댓글