01. javascript

javascript 강의 / Node 웹 프로그래밍 올인원 패키지 Online

01. Javascript 란

  • 브라우저를 제어하기 위한 넷스케이프에서 개발한 언어

  • 사용자의 클릭, 계산기 등의 이벤트 조작에 대응하기 위한 언어

  • 자바스크립트의 확대

    • Ajax 활용 (구글맵)
    • 디버깅툴의 발전
      • 파이어폭스의 콘솔로그
    • 크롬의 V8 엔진 개발
    • V8 엔진 기반의 서버 사이드 javascript 개발
      • Node.js
    • 여러 플랫폼에서 js 기반의 환경 조성
      • Desktop, IOT 등에서
  • 변수형

    • js는 동적언어이므로 자료형을 선언할 필요가 없음

    • 기본 자료형과 객체(Object) 두가지로 나뉨

      기본자료형 설명
      Boolean 논리적 요소 (true / false)
      Null 객체 값이 존재하지 않는다는 의미
      Undefined 값을 할당하지 않음
      Number 숫자형
      String 문자형
      Symblo ECMAScript 6에서 추가, 유일하고 변경 불가

02. 배열

  • 배열도 기본 자료형 중에 하나
  • 예제: ['안녕', 'Node.js', 55, 'Hello']
  • 위와 같이, 문자형과 숫자형이 섞여있든 요소에 대한 자료형이 통일되지 않아도 되는 구조
  • 배열에는 인덱싱이라는게 있음
    • 예제의 '안녕'을 기준으로 인덱싱이 0 이 되며 차례대로 1,2,3 ….
  • 배열의 인덱싱을 통해 overwrite 가능
    • example[0] = 'Hi'

03. 반복문

  • 대표적으로 for, while, do-while 문이 있음

  • for 문

    1
    2
    3
    for (var i = 0; i<10; i++) {
    // .....
    }
  • while 문

    1
    2
    3
    4
    5
    var i = 0 // 초기화 조건
    while (i < 10) {
    // .....
    i = i+1;
    }
  • do .. while 문

    1
    2
    3
    4
    5
    var i = 0;
    do {
    // .....
    i = i + 1;
    } while (i < 5)
  • while 문과 do ... while 문의 차이는

    • while 의 조건문을 언제 시작하느냐
    • do ... while 의 경우 일단 do { ... } 문을 실행한 뒤 while 문을 실행

04. 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Car 라는 틀(prototype) 생성
function Car (a, b, c) {
// function의 member 선언
// this는 public 변수
this.name = a;
this.color = b;
// var 등 함수내에서 선언된 변수들은 private 변수라 함.
var move = c
}
// 객체 생성 , 변수 a는 Car의 인스턴스
var a = new Car('현대', '노랑', '전진');
console.log(a.name)
// 현대
console.log(a.color)
// 노랑
console.log(a.move)
// undefined => 왜냐하면 private 변수로 선언되었기 때문

05. 프로토타입

  • js는 프로토타입 기반 언어이다.

  • 예제

    1
    2
    3
    4
    5
    6
    function Car (a, b, c) {
    // function의 member 선언
    // this는 public 변수
    this.name = a;
    this.color = b;
    }
    1
    2
    // 객체 생성 , 변수 a는 Car의 인스턴스
    var a = new Car('현대', '노랑');
  • 자바스크립트는 Car프로토타입 이라는 것이 있음

    • 프로토타입을 기준으로 객체. 즉, 인스턴스를 생성

    • 예제

      1
      2
      3
      4
      5
      6
      7
      Car.prototype.move = function () {
      // Car의 prototype에 접근해 함수를 추가
      console.log(this.name + '차이고'+ this.name + '색이다')
      }

      a.move()
      // 현대차이고 노랑색입니다.
      1
      2
      3
      4
      5
      6
      7
      Car.prototype.move = function () {
      // Car의 prototype에 접근해 함수를 추가
      console.log(this.name + '차이고'+ this.name + '색이다')
      }

      a.move()
      // 현대차이고 노랑색입니다.
  • 예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var a = [1, 3, 5, 7, 9]
    // 배열의 prototype에 접근해 커스텀 함수 추가
    Array.prototype.print = function () {
    for (var i=0;i < this.length; i++) {
    console.log(this[i])
    }
    }
    a.print()
    // 1
    // 3
    // 5
    // 7
    // 9

보충해서 볼것

  • 변수형
  • 프로토타입
  • 함수 선언식과 표현식