More actions
No edit summary |
(Repair batch-0002 pages from live compare) |
||
| (19 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
<!-- MONIWIKI PageList(^JavaScript/2011년스터디) --> | |||
* [[JavaScript/2011년스터디]] | |||
* [[JavaScript/2011년스터디/3월이전]] | |||
* [[JavaScript/2011년스터디/7월이전]] | |||
* [[JavaScript/2011년스터디/CanvasPaint]] | |||
* [[JavaScript/2011년스터디/JSON-js분석]] | |||
* [[JavaScript/2011년스터디/URLHunter]] | |||
* [[JavaScript/2011년스터디/김수경]] | |||
* [[JavaScript/2011년스터디/박정근]] | |||
* [[JavaScript/2011년스터디/서지혜]] | |||
* [[JavaScript/2011년스터디/윤종하]] | |||
__TOC__ | |||
= 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> | |||
= 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(); | |||
Latest revision as of 00:16, 27 March 2026
- JavaScript/2011년스터디
- JavaScript/2011년스터디/3월이전
- JavaScript/2011년스터디/7월이전
- JavaScript/2011년스터디/CanvasPaint
- JavaScript/2011년스터디/JSON-js분석
- JavaScript/2011년스터디/URLHunter
- JavaScript/2011년스터디/김수경
- JavaScript/2011년스터디/박정근
- JavaScript/2011년스터디/서지혜
- JavaScript/2011년스터디/윤종하
= 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>
= 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();