- JavaScript/2011년스터디/3월이전
- JavaScript/2011년스터디/7월이전
- JavaScript/2011년스터디/JSON-js분석
- JavaScript/2011년스터디/URLHunter
- JavaScript/2011년스터디/박정근
- JavaScript/2011년스터디/서지혜
- JavaScript/2011년스터디/윤종하
1. 1월 11일 ¶
<!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>
2. 1월 18일 ¶
- 중첩함수
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 duple_test() { (function () { /* body comes here */ })(); // 바로 실행해 버리니 괜찮음 }
- 여러번 중첩되어도 된다
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
// 자식클래스 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
// 자식클래스 2 function Child(m, f, b, s) { this.superclass(m, f); // 생성자 체이닝 this.brother = b; this.sister = s; } Child.prototype.superclass = Parent;
- 정규표현식
/* 정규표현식 */ var sample_string = "string for regular expression pattern matching. perl, python, ruby, javascript"; sample_string.match(/s/); // 지역검색 sample_string.match(/s/g); // 전역검색 sample_string.match(/perl|python/g); // ["perl", "python"] sample_string.match(/p(erl|ython)/); // ["perl", "erl"] 왜 이렇게 나올까 sample_string.match(/p(erl|ython)/g); // ["perl", "python"] 이러면 되요 sample_string.match(/p[erl|ython]/); // ["pr"] 왜 이게나와아아아아ㅏ아
- 네임스페이스
var org = {}; org.zeropage = 0; org.zeropage.namespace = 0; // 이건되고 //org.zeropage.namespace.function1 = "" // 이건 왜 안됨? org.zeropage.namespace = function() { document.write("네임스페이스 안의 함수 테스트"); } org.zeropage.namespace(); var simple.zeropage = org.zeropage.namespace; simple.zeropage(); /* TypeError: Object 0 has no method 'namespace' */ var org = {}; org.zeropage = 0; org.zeropage.namespace = 0; // 이건되고 //org.zeropage.namespace.function1 = 0 // 이건 왜 안됨? org.zeropage.namespace = function() { document.write("네임스페이스 안의 함수 테스트"); } org.zeropage.namespace(); var simple.zeropage = org.zeropage.namespace; simple.zeropage();