<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 짜가계산기 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987"> </head> <body> <style> .btn{width:40} .btn2{width:88} </style> <script> old = new Array(); function init() { document.f.t.value = ""; isOp = false; str = 0; oprt = ""; } function putn(value) { if (!isOp) { document.f.t.value += value; } else if (isOp) { document.f.t.value = value; isOp = false; } else { document.f.t.value += value; } } function operator(value) { str = document.f.t.value; isOp = true; oprt = value; } function calc() { str2 = document.f.t.value; if (str != "" && str2 != "") { str = eval(str + oprt + str2); document.f.t.value = str; } } function reset() { str = ""; document.f.t.value = ""; oprt = ""; isOp = false; } </script> <body onload=init();> <table border=6 width="247"> <tr> <form name=f> <td colspan=5> <input type=text name=t value="" size=30> </td> </tr> <tr> <td width="40"> <input type=button onclick=putn(7) value=7 class=btn> </td> <td width="40"> <input type=button onclick=putn(8) value=8 class=btn> </td> <td width="41"> <input type=button onclick=putn(9) value=9 class=btn> </td> <td width="40"> <input type=button onclick=operator("/") value="/" class=btn> </td> <td width="40"> <input type=button value="pow" class=btn> </td> </tr> <tr> <Td width="40" height="25"> <input type=button onclick=putn(4) value=4 class=btn> </td> <td width="40" height="25"> <input type=button onclick=putn(5) value=5 class=btn> </td> <td width="41" height="25"> <input type=button onclick=putn(6) value=6 class=btn> </td> <td width="40" height="25"> <input type=button onclick=operator("*") value="*" class=btn> </td> <td width="40" height="25"> <input type=button value="sqrt" class=btn> </td> </tr> <tr> <td width="40"> <input type=button onclick=putn(1) value=1 class=btn> </td> <td width="40"> <input type=button onclick=putn(2) value=2 class=btn> </td> <td width="41"> <input type=button onclick=putn(3) value=3 class=btn> </td> <td width="40"> <input type=button onclick=operator("-") value="-" class=btn> </td> <td width="40"> <input type=button value="log" class=btn> </td> </tr> <tr> <td width="40"> <input type=button onclick=putn(0) value=0 class=btn> </td> <td width="40"> <input type=button onclick=putn('.') value="." class=btn> </td> <td width="41"> <input type=button onclick=operator("+") value="+" class=btn> </td> <td width="40"> <input type=button value="%" class=btn> </td> </td> </tr> <tr> <td colspan=2> <input type=button onclick=reset() value="지우기" class=btn2> </td> <td colspan=3> <input type=button onclick="calc()" value="계산하기" class=btn2> </td> </form> </table> </body> </html>
함수 ¶
- 중첩함수
function duple_test() { function inner() { /* body comes here */ } } // good
- 내부 익명함수는 접근할 수 없기 때문에 안됨
function duple_test() { function () { /* body comes here */ } // anonymous inner class can't be reached } // bad
- 이 방법은 된다
function duple_test() { var one = function () { } // anonymous but reachable }
- 여러번 중첩되어도 된다
function one(){ function two() { function three() { /* body comes here */ } } } // good
- 함수 파라메터
/* Arguments 객체 테스트 */ function arg_test(one, two) { document.write(one); document.write(arguments[0]); document.write(two); document.write(arguments[1]); document.write(arguments.length); document.write(arguments[3]); // 존재하지 않는 배열을 참조한다면? -> undefined arguments[3] = 5; // 내부에서 파라메터 삽입 가능!! document.write(arguments[3]); } arg_test(3, 4);
- 클래스 생성
/* 클래스 만들기 */ function Class_test(one, two) { this.one = one; this.two = two; } /* 객체 생성 */ var instance = new Class_test(1, 2);
- 상속
- 자바스크립트의 상속은 객체지향언어의 상속과 다르다.
- 자바스크립트의 상속은 객체지향언어의 상속과 다르다.
function MyClass(id, name){ this.id = id; this.name = name; } var class_test = new MyClass("1", "test"); MyClass.prototype.name1 = "name1"; class_test.name2 = "name2"; document.write(class_test.name1); // 여기서 상속이 일어나야함.... }
- 슈퍼클래스화, 서브클래스화
// 슈퍼클래스 function Parent(m, f) { this.mother = m; this.father = f; }
- 서브클래스화 1
function Child(m, f, b, s) { Parent.call(m, f); // 생성자 체이닝 this.brother = b; this.sister = s; } Child.prototype = new Parent(); Child.prototype.constructor = Child;
- 서브클래스화 2
function Child(m, f, b, s) { this.superclass(m, f); // 생성자 체이닝 this.brother = b; this.sister = s; } Child.prototype.superclass = Parent;