스터디 소개

2011년 겨울방학동안 JavaScript를 공부하는 모임.
스터디 시간 : 매 주 화요일, 금요일 3시.

참가자

김수경, 박정근, 서지혜, 윤종하, 정의정,

목표

진행 방식

금요일은 공부해온 것을 발표하고 그 다음 화요일은 자신이 작성한 코드를 발표한다.
자바스크립트 완벽 가이드의 목차를 참고하여 진행한다.
- 목차를 보고 매주 적당한 분량으로 챕터를 묶어 그 주 공부할 부분을 정한다.
그 주 공부할 부분은 모두 같이 공부한다.
- 서로 다른 챕터를 공부하여 발표하면 남이 공부한 부분은 겉핥기 식으로만 알게 되는 경우가 많아서.
발표는 각자 한 챕터씩 맡아 발표한다.
- 발표할 부분은 금요일에 모여 제비뽑기로 결정한다.
- 발표할 부분이 정해지면 소개할 샘플코드를 찾는다.

규칙

다른 참가자들이 오지 않을때는 3시 10분까지 기다린다.
- 그 이후에도 오지 않는 사람은 기다리지 않고 바로 진행한다.
모든 참가자는 잘 모르겠는 것, 궁금한 것, 더 공부하고 싶은 것 등 질문을 3가지 이상 준비한다.
공부한 내용은 3분 이상 발표한다.
발표자를 제외한 사람들은 들은 내용과 샘플 코드에서 가장 인상깊은 점 3가지를 고른다.
매 회 스터디 끝나고 10분간 그날의 스터디를 돌아보는 시간을 갖는다.

진행

1월

출석체크

	4일	7일	11일	14일	18일	21일	25일	28일
김수경	O	O
박정근	O	O
서지혜	O	O
윤종하	X(몸살)	X(신검)
정의정	O	X(공사)

7일

과제 : 1장 ~ 7장 공부해오기
3시 ~ 6시 @ 6피
김수경
- 의문점
- var로 생성한 변수는 delete할 수 없다는데 실제 해보니 되었다.
- for each문을 사용하는 법.
- 알게된 것
- 블록 단위의 유효범위가 없다.
- var a = 1,,3; a.length -> 3, var a = ,,; a.length -> 2; 인 이유
- 리터럴의 정의
- 인상깊었던 것
- var a; -> 지역변수, a; -> 전역변수
- void 연산자를 사용하면 피연산자의 값에 상관없이 undefined를 반환한다.
- 다음 코드 실행 시 첫 출력은 undefined이고 다음 출력은 local이다.

var scope = "global";
function f(){
 alert(scope);
 var scope = "local";
 alert(scope);
}

박정근

 *의문점(해결)

- 레이블의 의미 -> C의 goto와 비슷.
- try/throw/catch/finally 의 사용 -> finally는 모든 try, catch를 나와서 사용
- 가비지 컬렉션 -> 모든 인스턴스가 사라진 쓸모없는 '가비지'는 알아서 처리함

 *인상깊었던점

- 문자나 숫자, ""사이에 들어가 것들을 '리터럴'이라고 부르며 따로 구분한다.
- new bolleon(false)는 flase와 같지 않고 객체로써 인식!! if(new booleon(false)) 따위로 쓰면 안됨
- 변수 선언시에 'var a=3'같은 식은 지역변수, 'a=3' 같은식은 전역변수 이다.
서지혜
- 의문점
- var로 선언한 변수는 delete가 안된다더니 되는데?!
- with함수 사용시 발생할 수 있는 오류에 대해 알고싶다...(책에서는 생략함)
- 알게된 것
- var a = ,,;에서 a의 길이가 2인 이유(해결! 맨 마지막 콤마의 뒤는 무시됨)
- 인상깊었던 것
- 레퍼런스로 함수를 직접 보면서 하니까 한눈에 들어와 좋았다
- 모르는게 생겼을 때 코드를 직접 타이핑해 결과를 보며 스터디하니 이해가 잘 갔다(굿)
- 와 세명이서 하는데 3시간 걸렸어!!

돌아보기
- 오늘 스터디의 좋았던 점
- 서지혜 - 공부할때는 다 아는 것 같았던 것도 직접 설명해보니 잘 모르고 넘어간 것이 있다는 것을 알게되었다.
- 김수경 - 대충 보고 넘어갔거나 잘 이해를 못했던 것도 같이 스터디하고 고민해보니 더 명확히 알게되었다.
- 박정근 - 직접 화면을 띄워 코딩을 하며 진행하니 더 이해하기 좋았다.
- 다음 스터디에 적용하고 싶은 점
- 서지혜 - 말로만 설명하는 것보단 코드를 보며 설명하도록 하겠다.
- 김수경 - 집에서 레퍼런스만 대충 찾아보지 않고 책도 좀 참고하여 공부하겠다.
- 박정근 - 좀 더 정확한 최신자료를 참고하겠다.

11일

과제 : 7일날 자신이 발표한 부분을 직접 실습할 수 있는 코드 최소 1개 짜오기. 7일 스터디 불참자는 스스로 챕터 선정하여 코드를 짜오면 된다.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987">
<title>새 페이지 1</title>
</head>

<body>
<style>
 .btn{width:40}
 .btn2{width:88}
</style>
<script>


 flag=0;//연산식이 입력되는 횟수플래그
 str=0;//입력수치
 opr="";//연산자

 old=new Array();

 //초기화
 function init(){
  document.f.t.value=""; //입력필드 소거
  str=0;flag=0;opr=""; //입력수치, 횟수플래그, 연산자
 }

 //숫자를 입력받아 추가한다
 function putn(v){ 
  if(flag==0){ //연산식이 입력되기 전에는
   document.f.t.value+=v; //텍스트 필드를 추가한다.
  }else {
   if(flag==1){ //연산식이 처음 입력되면,
    document.f.t.value=v; //입력필드를 갱신
   } else {
    document.f.t.value+=v; //텍스트 필드를 추가한다.
   }
   flag++; //플래그 증가
  }
 }

 //연산식이 입력되면, 기존 스트링과, 연산자를 변수에 담고, 플래그를 증가한다.
 function cal(h){
  old[old.length]=str;
  str=document.f.t.value;
  odr=opr;
  opr=h;
  flag=1;
  if(h=='%'){
   document.f.t.value=eval(old[old.length-1]*str/100);   
  } else {
   if(odr=='%'){
    document.f.t.value=eval(old[old.length-2]+opr+str);
   }
  }
 }

 function cal2(h){ //제곱,제곱근,로그등의 특수연산을 담당하는 함수
  str=document.f.t.value;
  switch(h){
   case "pow":
    document.f.t.value=eval("Math."+h+"(str,2)");
    break;
   case "sqrt":
    document.f.t.value=eval("Math."+h+"(str,2)");
    break;
   case "log":
    document.f.t.value=eval("Math."+h+"(str)");
    break;
   }
 }

 //= 이 입력되면,
 function sol(){
  //텍스트 필드에, 기존입력수치와 신규입력값의 연산결과를 출력한다.
  document.f.t.value=eval(str+opr+document.f.t.value);
 }

 //Clear등의 처리
 function adj(a){
  switch(a){ //매개변수에 따라 처리
   case 0: //clear이면,
    init(); //초기화
    break;
  }
 }
</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=cal("/") value="/" class=btn></td><td width="40">
 <input type=button onclick=cal2("pow") 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=cal("*") value="*" class=btn></td>
 <td width="40" height="25">
 <input type=button onclick=cal2("sqrt") 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=cal("-") value="-" class=btn></td><td width="40">
 <input type=button onclick=cal2("log") 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=cal("+") value="+" class=btn></td><td width="40">
 <input type=button onclick=cal("%") value="%" class=btn></td>
 　</td></tr>

<tr>
<td colspan=2>
 <input type=button onclick=adj(0) value="지우기" class=btn2></td><td colspan=3>
 <input type=button onclick=sol() value="계산하기" class=btn2></td>

</form>
</table>

</body>

</html>

2011년활동지도, 스터디분류