JavaScript/2011년스터디/서지혜: Difference between revisions

Latest revision as of 00:16, 27 March 2026

= 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();

@@ 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일 =
   &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
   &lt;html&gt;
-  &lt;head&gt;
-   &lt;title&gt;짜가계산기&lt;/title&gt;
+     &lt;head&gt;
-   &lt;meta name="Generator" content="EditPlus"&gt;
+         &lt;title&gt;
-   &lt;meta name="Author" content=""&gt;
+             짜가계산기
-   &lt;meta name="Keywords" content=""&gt;
+         &lt;/title&gt;
-   &lt;meta name="Description" content=""&gt;
+         &lt;meta name="Generator" content="EditPlus"&gt;
-   &lt;meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987"&gt;
+         &lt;meta name="Author" content=""&gt;
-  &lt;/head&gt;
+         &lt;meta name="Keywords" content=""&gt;
+         &lt;meta name="Description" content=""&gt;
+         &lt;meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987"&gt;
+     &lt;/head&gt;
+     &lt;body&gt;
+         &lt;style&gt;
+             .btn{width:40} .btn2{width:88}
+         &lt;/style&gt;
+         &lt;script&gt;
+             old = new Array();
-  &lt;body&gt;
+             function init() {
-  &lt;style&gt;
+                 document.f.t.value = "";
-  .btn{width:40}
+                 isOp = false;
-  .btn2{width:88}
+                 str = 0;
-  &lt;/style&gt;
+                 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;
+                 }
+             }
- &lt;script&gt;
+             function operator(value) {
-  old = new Array();
+                 str = document.f.t.value;
+                 isOp = true;
+                 oprt = value;
+             }
-  function init(){
+             function calc() {
- 	document.f.t.value = "";
+ 			str2 = document.f.t.value;
- 	isOp=false;
+                 if (str != "" &amp;&amp; str2 != "") {
- 	str=0;
+                     str = eval(str + oprt + str2);
- 	operator="";
+                     document.f.t.value = str;
-  }
+                 }
+             }
-  function putn(value) {
+             function reset() {
- 	if(!isOp){
+                 str = "";
- 		document.f.t.value += value;
+                 document.f.t.value = "";
- 	} else if(isOp){
+                 oprt = "";
- 		document.f.t.value = value;
+                 isOp = false;
- 		isOp = false;
+             }
- 	} else{
+         &lt;/script&gt;
- 		document.f.t.value += value;
+         &lt;body onload=init();&gt;
+             &lt;table border=6 width="247"&gt;
+                 &lt;tr&gt;
+                     &lt;form name=f&gt;
+                         &lt;td colspan=5&gt;
+                             &lt;input type=text name=t value="" size=30&gt;
+                         &lt;/td&gt;
+                 &lt;/tr&gt;
+                 &lt;tr&gt;
+                     &lt;td width="40"&gt;
+                         &lt;input type=button onclick=putn(7) value=7 class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="40"&gt;
+                         &lt;input type=button onclick=putn(8) value=8 class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="41"&gt;
+                         &lt;input type=button onclick=putn(9) value=9 class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="40"&gt;
+                         &lt;input type=button onclick=operator("/") value="/" class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="40"&gt;
+                         &lt;input type=button value="pow" class=btn&gt;
+                     &lt;/td&gt;
+                 &lt;/tr&gt;
+                 &lt;tr&gt;
+                     &lt;Td width="40" height="25"&gt;
+                         &lt;input type=button onclick=putn(4) value=4 class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="40" height="25"&gt;
+                         &lt;input type=button onclick=putn(5) value=5 class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="41" height="25"&gt;
+                         &lt;input type=button onclick=putn(6) value=6 class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="40" height="25"&gt;
+                         &lt;input type=button onclick=operator("*") value="*" class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="40" height="25"&gt;
+                         &lt;input type=button value="sqrt" class=btn&gt;
+                     &lt;/td&gt;
+                 &lt;/tr&gt;
+                 &lt;tr&gt;
+                     &lt;td width="40"&gt;
+                         &lt;input type=button onclick=putn(1) value=1 class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="40"&gt;
+                         &lt;input type=button onclick=putn(2) value=2 class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="41"&gt;
+                         &lt;input type=button onclick=putn(3) value=3 class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="40"&gt;
+                         &lt;input type=button onclick=operator("-") value="-" class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="40"&gt;
+                         &lt;input type=button value="log" class=btn&gt;
+                     &lt;/td&gt;
+                 &lt;/tr&gt;
+                 &lt;tr&gt;
+                     &lt;td width="40"&gt;
+                         &lt;input type=button onclick=putn(0) value=0 class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="40"&gt;
+                         &lt;input type=button onclick=putn('.') value="." class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="41"&gt;
+                         &lt;input type=button onclick=operator("+") value="+" class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;td width="40"&gt;
+                         &lt;input type=button value="%" class=btn&gt;
+                     &lt;/td&gt;
+                     &lt;/td&gt;
+                 &lt;/tr&gt;
+                 &lt;tr&gt;
+                     &lt;td colspan=2&gt;
+                         &lt;input type=button onclick=reset() value="지우기" class=btn2&gt;
+                     &lt;/td&gt;
+                     &lt;td colspan=3&gt;
+                         &lt;input type=button onclick="calc()" value="계산하기" class=btn2&gt;
+                     &lt;/td&gt;
+                     &lt;/form&gt;
+             &lt;/table&gt;
+         &lt;/body&gt;
+ &lt;/html&gt;
+ = 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&#91;0&#93;);
+ 	document.write(two);
+ 	document.write(arguments&#91;1&#93;);
-  function operator(value) {
+ 	document.write(arguments.length);
-  	value = document.f.t.value;
-  	isOp = true;
+ 	document.write(arguments&#91;3&#93;);	// 존재하지 않는 배열을 참조한다면? -&gt; undefined
-  	operator = value;
-  }
+  	arguments&#91;3&#93; = 5;				// 내부에서 파라메터 삽입 가능!!
+ 	document.write(arguments&#91;3&#93;);
+ }
+ 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");
-  function calc() {
+ MyClass.prototype.name1 = "name1";
- 	if(str != "" &amp;&amp; document.f.t.value != ""){
+ class_test.name2 = "name2";
- 		str = eval(str + operator + document.f.t.value);
+ document.write(class_test.name1);	// 여기서 상속이 일어나야함....
- 		document.f.t.value = str;
+ }
- 	}
-  }
+* 슈퍼클래스화, 서브클래스화
+ // 슈퍼클래스
+ function Parent(m, f) {
+ 	this.mother = m;
+ 	this.father = f;
+ }
+* 서브클래스화 1
+ // 자식클래스 1
+ function Child(m, f, b, s) {
+ 	Parent.call(m, f);	// 생성자 체이닝
-  function reset() {
+  	this.brother = b;
-  	str = "";
+  	this.sister = s;
-  	document.f.t.value = "";
+ }
- 	operator = "";
- 	isOp = false;
-  }
-  &lt;/script&gt;
+  Child.prototype = new Parent();
-  &lt;body onload=init();&gt;
+  Child.prototype.constructor = Child;
-  &lt;table border=6 width="247"&gt;&lt;tr&gt;
+* 서브클래스화 2
- &lt;form name=f&gt;
+  // 자식클래스 2
- &lt;td colspan=5&gt;
+  function Child(m, f, b, s) {
-  &lt;input type=text name=t value="" size=30&gt;
+ 	this.superclass(m, f);	// 생성자 체이닝
- &lt;/td&gt;&lt;/tr&gt;
- &lt;tr&gt;&lt;td width="40"&gt;
-  &lt;input type=button onclick=putn(7) value=7 class=btn&gt;&lt;/td&gt;&lt;td width="40"&gt;
-  &lt;input type=button onclick=putn(8) value=8 class=btn&gt;&lt;/td&gt;&lt;td width="41"&gt;
-  &lt;input type=button onclick=putn(9) value=9 class=btn&gt;&lt;/td&gt;&lt;td width="40"&gt;
-  &lt;input type=button onclick=operator("/") value="/" class=btn&gt;&lt;/td&gt;&lt;td width="40"&gt;
-  &lt;input type=button  value="pow" class=btn&gt;&lt;/td&gt;&lt;/tr&gt;
- &lt;tr&gt;&lt;Td width="40" height="25"&gt;
-  &lt;input type=button onclick=putn(4) value=4 class=btn&gt;&lt;/td&gt;
-  &lt;td width="40" height="25"&gt;
-  &lt;input type=button onclick=putn(5) value=5 class=btn&gt;&lt;/td&gt;
-  &lt;td width="41" height="25"&gt;
-  &lt;input type=button onclick=putn(6) value=6 class=btn&gt;&lt;/td&gt;
-  &lt;td width="40" height="25"&gt;
-  &lt;input type=button onclick=operator("*") value="*" class=btn&gt;&lt;/td&gt;
-  &lt;td width="40" height="25"&gt;
-  &lt;input type=button  value="sqrt" class=btn&gt;&lt;/td&gt;&lt;/tr&gt;
- &lt;tr&gt;&lt;td width="40"&gt;
-  &lt;input type=button onclick=putn(1) value=1 class=btn&gt;&lt;/td&gt;&lt;td width="40"&gt;
-  &lt;input type=button onclick=putn(2) value=2 class=btn&gt;&lt;/td&gt;&lt;td width="41"&gt;
-  &lt;input type=button onclick=putn(3) value=3 class=btn&gt;&lt;/td&gt;&lt;td width="40"&gt;
-  &lt;input type=button onclick=operator("-") value="-" class=btn&gt;&lt;/td&gt;&lt;td width="40"&gt;
-  &lt;input type=button  value="log" class=btn&gt;&lt;/td&gt;&lt;/tr&gt;
-  &lt;tr&gt;&lt;td width="40"&gt;
-  &lt;input type=button onclick=putn(0) value=0 class=btn&gt;&lt;/td&gt;&lt;td width="40"&gt;
-  &lt;input type=button onclick=putn('.') value=. class=btn&gt;&lt;/td&gt;&lt;td width="41"&gt;
-  &lt;input type=button onclick=operator("+") value="+" class=btn&gt;&lt;/td&gt;&lt;td width="40"&gt;
-  &lt;input type=button value="%" class=btn&gt;&lt;/td&gt;
-  　&lt;/td&gt;&lt;/tr&gt;
- &lt;tr&gt;
+ 	this.brother = b;
- &lt;td colspan=2&gt;
+ 	this.sister = s;
-  &lt;input type=button onclick=reset() value="지우기" class=btn2&gt;&lt;/td&gt;&lt;td colspan=3&gt;
+ }
-  &lt;input type=button onclick=calc() value="계산하기" class=btn2&gt;&lt;/td&gt;
-  &lt;/form&gt;
+  Child.prototype.superclass = Parent;
- &lt;/table&gt;
-  &lt;/body&gt;
- &lt;/html&gt;
+* 정규표현식
+ /* 정규표현식 */
+ 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);		// &#91;"perl", "python"&#93;
+ sample_string.match(/p(erl|ython)/);	// &#91;"perl", "erl"&#93; 왜 이렇게 나올까
+ sample_string.match(/p(erl|ython)/g);	// &#91;"perl", "python"&#93; 이러면 되요
+ sample_string.match(/p&#91;erl|ython&#93;/);	// &#91;"pr"&#93; 왜 이게나와아아아아ㅏ아
+* 네임스페이스
+ 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();