JavaScript 01.기초문법or 시작하기 or 문법 or 등등

ps. 작성시 참고한 블로그 및 사이트

깔끔하게 정리된 pt (블로그 구문은 해당 글을 뼈대로 작성)
http://www.slideshare.net/deview/d2campusjavascript

자바 스크립트에서 변수 타입에 대해서 설명한 블로그 글
http://insanehong.kr/post/javascript-datatype/

자바스크립트 재입문 이라는 설명페이지 쉽고 깔끔함
 (나도 이래야 되는데...되는데..)
https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript

자바스크립트 Array 내장함수에 대한 설명 블로그
http://www.cnblogs.com/jweb/p/4611455.html
http://kssong.tistory.com/26

ps2. 서두
   javaScript는 원리만 알면 쓸수 있다 라고 생각하지만
    공부를 하자니 좀 시간 들이기 아깝긴 아까운데
    그렇다고 그냥 바로 일하기엔 부족한 점이 있을거란
    (홈페이지의 덕지덕지 바른 스크립트들 ㄷㄷㄷ)
    생각이 든다. 할까 말까 고민하면 하는게 좋다 라고
    판단되어 시작.

1. 특징
  1) Event Driven
  2) Async Job
  3) 객체지향(클래스 없음, 상속, 다형성보유)
    (1) 클래스가 없음
    (2) 상속 가능
    (3) 다형성 가능

2. 변수 다루기
  1) 타입 과 선언 방법
    Number    : var a=1;
    String       : var a="ABC";
    Boolean    : var a = true;
    Object      : var a = {};
    Array       : var a = [1,2,3];
    Function   : var a = function(){~~~~}
    undefine   : var a;   //정의안됨
    null         : var a = null;  //저의됨 다만 값이 없음
    NaN        : //애는 숫자가 아니다 라는 상태값

    결론 : var Xxx; //이거 하나로 모든 타입을 커버.
            이 변수가 뭔지 잘 살펴보는 일이
            새로 생겼습니다. 다만 내가 구현할때는 편합니다.
            에지간해서 에러가 안나요

  2) number 의 경우 0.1+0.2 = 0.30000001 같은 에러가 나는
      경우가 더러 있음 관련 정보는 하단 링크 참고
http://insanehong.kr/post/javascript-datatype/

  3) 이중 Array 의 경우 중요한 특징이 있음
      우선 위에처럼 배열 선언은 3개로 했더라도
      이후에 얼마든지 추가가능하다.

    a[10]=3;
               // 0,1,2 번재 주소에 알아서 들어가고,
               // 3~10번째는 null, 11번째는 3이 들어감

     또한 여러 내장함수가 지원되고
     자바 스크립트에서 중요한 부분을 차지한다.
      Array에 대해서는 하단 두 블로그 링크를 활용하면
      충분한 학습이 될 것 같다.
http://www.cnblogs.com/jweb/p/4611455.html
http://kssong.tistory.com/26

  4) Object
   key, Value 로 구성된 집합체? 정도의 형태
   언제든 구성요소를 수정, 추가 가능
   끝에 ; 꼭 해야함.
   var team={
       name: "teamidLife",
       title: "ogleogle",
       member1:"kim"};

  5) function #
     특성으로
    (1) 리턴값, 인자값 보유함 근데 type 명시를 하지 않음
    (2) 함수는 변수에 넣기, 리턴, 인자값 으로 사용이 가능함
    (3) 함수 = 객체 = 퍼스트 클래스 오브젝트
    (4) 변수 범위는 함수

     관련 설명은 넥스트리 함수에 관한 블로그 게시물을 확인바람
     함수 선언시 이름을 부여하는가 혹은 바로 실행하는가?
       에 따라서 좀 다른 성질을 지니는 함수가 된다.
http://www.nextree.co.kr/p4150/

    (5) this 키워드 : 현재 가르키는 변수 혹은 값 정도
        함수 사용중에 값이 바뀌는 경우 최종값을 가르킴
          다만 예외적으로 함수.call, apply, bind
          3가지 키워드와 쓰이는 경우엔 해당 함수내에 지정한
          값으로 리셋됨

    (6) new 키워드 : 클래스와 같은 형태로 쓰이는 new 키워드를
          함수를 보유한 하나의 인스턴트를 생성한다.
          인스턴스로 만들면 자원 공유없이 하나의 함수를 여러번
          사용할 수 있다. 그런 목적으로 사용

    (7) inner function 선언도 가능. 그리고 javascript에서는
          희한하게 inner function을 외부 함수를 닫고 나서
          차후 다른 함수에서도 접근 가능하다.   (뭐 이런)
         다만 이때 선언된 변수는 갱신된 최종값이 아닌
          inner function을 감싸고 있는 외부 function에서
          지정한 값으로 설정된다.
         또 이상한점은 inner로 안하고 지정값을 출력할 경우엔
          최종 갱신된 값이 나온다는 점.
        이건 좀 희한해서 pt 예제를 인용하여 아래와 같이
          작성함.

var innerf;
function myPorket() {
var meterial = "candy";
innerf = function(){
console.log(meterial);
}
}

function yourPorket(){
var meterial = "cookie";
console.log(meterial);
innerf();
console.log(meterial);
}

myPorket();
yourPorket();

결과
cookie
candy
cookie


    (8) == 연산자와 === 연산자
        ==의 경우 타입을 [어느정도](거의다) 바꿔서 비교한다.
        (이 편리한 기능때문에 0인지 "0"인지 헷갈릴때가 있다)
        === 은 타입까지 따진다.
        예제는 ===를 설명하기 위해서 작성했으나
        ==의 결과가 흥미롭다.

ex)
0 == '0'                  //true
0 === '0'                //false

false == 0              //true
fasle === 0            // false

null == undefined  //true

'/n' == 0               //true

3. 제어문(if, for, while)
  (1) 기본적인 동작은 C, Java랑 대동소이함
       다만 블록안에 선언한 i 범위가 제어문 밖에서도
       끌고가기 때문에 이점만 주의하면 됨.

4. 참고 문헌
  1) 스크립트 관련 소스
     http://photothru.com/
     http://www.dynamicdrive.com/
     http://www.javascriptkit.com/
     http://www.dhtmlgoodies.com/

  2) 화면 나누는(div) 가이드
     http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html