[Jquery]강의 1일차(삼성 SDS)

1일 내용 요약 정리

 - Javascript 사용

 - 크롬 브라우져 사용 F12 키를 이용한 console.log, console.dir(object)를 사용

 - 이클립스에서 html 파일을 열 때 2번 값으로 설정(크롭 브라우져를 기본 값으로 사용하더이다.)

    순서 1 : Window > Web Browser > 1. Default System Web Browser

    순서 2 : 크롬을 기본 브라우져로 설정

    순서 3 : 이클립스에서 html을 실행하여 크롬 브라우져에서 확인 가능

 - Closure 의 설명

    Stack 구조로 설명

    var, 함수 등등 한층 한층 쌓인다.

 -  Var는 내가 알고 있던 Var가 아니다. 변수 선언이 아니라 파싱되면서 할당 해주는것

 

짜잘한 팁

 - General > appearance > colors and font > Verdana 글꼴로 하면 개발하기 용이함.

/*

--===============================================================

교수님이 정의 해준 부분 정리

--===============================================================

*/

1. 변수

  가. var 키워드

    - 변수 선언하기 위한 것이 아님..

    - 지역변수임을 나타내기 위한 키워드임.

  나. JS 변수는 암시적으로 선언 가능 --> 코드라인이 실행될 때 동적으로 생성

  다. var 변수 --> Global객체가 생성될 때 미리 만들어짐.

  라. 값이 할당될 때 데이터 타입이 결정됨. 

     --> 다른 타입의 값을 부여하면 데이터 타입이 도중에 변경

     --> 값이 할당되기 전의 타입은 undefined

  마. "자바스크립트는 선언했던 변수를 또 선언할 수 있다"

     --> 거짓말.

    

2. 연산자

  가. 기본적으로는 Java, C#, C++ 등과 동일

  나. 암시적 형변환

     var a  = "2" + 3;   //"23"

     var a  = 2 + "3";   //"23"

     var b  = "2" * "3";   // 6

  다. == , ===

     - == : 같다라는 비교 (암시적 형변환 후 값만을 비교)

        if ("" == 0)  // true

    

     - === :   a===b

        if (typeof(a)==typeof(b) && a==b) 

3. 배열

  가. Collection!  ex) ArrayList

      --> 엘리먼트를 맘대로 추가,삭제, 삽입 가능

  나. 배열 생성 방법

     - 배열 리터럴

        var a = [100,"hello", "world"];

     - 생성자함수

        var a = new Array();

        a[0] = 100;

        a[1] = "hello";

        a[2] = "world";

4. Data Type

  가. 기본 타입

     - string 

     - number

     - function 

  나. function은 Data Type임과 동시에 값, 객체입니다!!!!

  다. undefined

    - 객체의 존재하지 않는 속성에 접근하려 할 때 이 타입의 값 리턴

     console.log(typeof(window.kangsa));

5. 반복문

  가. for ~ in ~ 

     - 자바 : for (  :  )

     - c# : foreach ( ~ in ~) 

     - 목적 : 객체내의 모든 속성에 접근하려고 할 때

6. 함수 (좀 자세히!!)

  가. 함수 작성법

    - 함수 리터럴 :  var a = function() {};

    - 선언적 방법 :  function a() {}

  

  나. 코드 블럭 내에서 함수는 가장 먼저 Parsing되고 Loading된다.

    

  다. 매개변수(parameter)

    - 명시적 파라미터는 의미 없음(명시적이지 않아도 전달 가능)

    - 모든 명시적 파라미터는 함수내의 지역변수임.

     function test(a,b) { 

     }

     function test() { 

        var a = arguments[0];

        var b = arguments[1];

     }

    - 매개변수로 함수를 전달할 수 있음

      function test(callback) {

         callback();

      }

      

      test(function() { //A기능 });

  라. 리턴값

    - return 문이 없는 함수를 호출한 후 리턴값을 받으려 하면?

       --> undefined가 리턴됨.

    - 함수를 리턴할 수 있음.

     function test() {

        return function() { ... };

     }

  

     function test() {

        function inner() { ... }

        return inner;

     }  

  마. 함수 호출 과정

    - 호출전에 호출 객체(call object)가 우선 생성됨  

    - 호출객체의 속성에 this, arquments 속성을 추가하고 값 할당

    - 함수내의 모든 지역변수(파라미터 포함)는 호출객체의 속성으로 만들어짐.

    - 호출객체는 개발자임의로 삭제,생성이 불가능

    - 호출 완료되고 나면 호출객체는 자동으로 가비자화됨. 

       --> Garbage Collection

  바. scope(유효범위)

    - 호출객체 단위로 유효범위가 결정됨.

    - 현재 호출되는 호출객체내에 변수(속성)이 존재하지 않으면

      자신의 함수가 정의된 영역(호출객체, Global 객체)으로 가서 변수를

      찾는다 ==> Scope Chain

        ==> 이것은 함수의 중첩구조와 일치!!

        ==> 함수의 중첩구조로 scope이 결정됨.

        ==> 블록 수준의 scope 은 존재하지 않음.

        

        function test() {

          var num = 100;

          for (var num=0; num < 10; num++) {

          }

          console.log(num);

        }

    - 함수내의 지역변수는 함수 전체 영역에서 사용됨.

      ==> 함수내의 가장 앞부분에서 var를 하시오!!

  사. 클로저(Closure)

    - 정의 : 함수 안에 정의된 내부 함수가 Global에서 접근가능해짐으로써, 

      함수 안의 지역변수에 접근가능해지는 상황 - 또는 - 그 내부 함수

    - Global에서 접근 가능한 상황

      * 함수내의 내부함수가 리턴되는 상황

      * 함수내의 내부함수를 Global 변수에 할당하는 상황

    - 자신도 모르는 사이 클로저가 사용된 코드가 작성된다.

      ==> 클로저로 인한 문제 발생시 해결하는 것이 중요

         -> 클로저로 인한 문제는 클로저로 해결

   ** jQuery를 사용한다면 이런 문제를 해결할 수 있는 함수를 제공함.

      for 문 --> each() 함수 제공

      for (var i=0; i < list.length; i++) {

      }

      $(list).each(function(index, item) {

          

      });

  아. 내장 함수

     - Global의 내장함수

      ex) alert 함수는 window.alert()로 호출해도 됨.

     

     - encodeURIComponent() , decodeURIComponent()

     - eval() : 절대 쓰지 말것

       * 기존 용도 : JSON 문자열을 JS 객체로 변환할 때

             --> 하지만 보안상 사용하지 않음.

       * eval is evil !!

      

  자. NaN : Not a Number

      - 문자를 숫자로 변환하다가 실패했을 때 리턴되는 Number타입의 값

      - NaN과 NaN은 서로 비교 불가!

        var a = parseInt("abc");

        if (a == Number.NaN) {      }  //XXX

        if (isNaN(a)) {    }   //OOO

    

7. 객체

  가. 개념

     - Collection( ex: Hashmap, Hashtable  )

  나. 객체 생성 방법

     - 객체 리터럴

       var p1 = { "name" : "홍길동", "age" : 20, "tel" : "010-222-3333" };

     

     - Object 생성자 함수로 객체 생성

       var p1 = new Object();

       p1.name = "홍길동";

       p1.age = 20;

       p1.tel = "010-222-3333";

     - p1.name = "홍길동";

       p1["name"] = "홍길동";

     - 생성자함수를 새롭게 정의하여 객체 생성

       * 목적 : 정형화된 객체 생성, Type Checking

  

  다. JSON(Javascript Object Notation)

     --> 객체 리터럴 + 배열 리터럴 

         ** 단 객체의 키를 문자열로 만들어야 함.

     JSON문자열 --> JS 객체 : JSON.parse()

     JS객체--> JSON 문자열 : JSON.stringify()

     * IE 6,7 은 지원안함. --> IE는 json2.js 다운로드 받아서 참조후 사용

 

  라. 객체의 속성은 마음대로 추가/삭제할 수 있음.

     var p1 = { "name" : "홍길동", "age" : 20, "tel" : "010-222-3333" };

     p1.address = "서울시";

     delete p1.address;

  마. 메서드

    - 원래는 메서드 라는 용어는 없다.

    - 관례적으로 객체의 속성에 함수가 할당되었다면 그것을 메서드라 부름

    var p1 = { 

       name : "홍길동", 

       getName : function() {

          return this.name;

       }

    };

    var p1 = { name : "홍길동" };

    p1.getName = function() {

          return this.name;

    };

    - this : 호출중인 메서드를 보유한 객체를 가리킴

      ==> this 가 가리키는 객체가 도중에 변경될 수 있음.

8. 생성자 함수를 사용한 객체 생성

    가. 목적 

       - 정형화된 객체를 생성하기 위해서

       - 타입 체킹을 위해서

        if (typeof(p1)=="object" && p1.constructor==Person) {

        }

       - prototype에 메서드를 추가하기 위해서

         * prototype : 동일한 생성자 함수로 생성된 객체들간의 공유하는 공유 객체

    나. 내장 생성자함수에도 메서드를 추가할 수 있음.

       Date.prototype.toKoreaString = function() {

var year = this.getFullYear();

var month = this.getMonth() + 1;

if (month < 10) 

month = "0" + month;

var day = this.getDate();

if (day < 10)

day = "0" + day;

return year + "-" + month + "-" + day;

       }

       var d1 = new Date();

       console.log(d1.toKoreaString());

** inline Event 방법의 문제점

 1. this가 모호 --> Global을 가리킴

 2. Scope의 문제가 발생함.

    - 이름 충돌의 가능성이 높아짐.

 3. unobtrusive javascript 원칙 위배

   -  서로 간섭하지 않는 자바스크립트

      HTML + JS CODE + CSS