JavaScript_10분_가이드

자바스크립트의 필수적인 기본 문법에 대한 설명.

자바스크립트의 기본 자료형#

• 숫자 - 1803, 3.141592
• 논리값 - true, false
• 문자열 - 'Hello' "Hello"
• null - 존재하는 변수지만 값이 없는 경우
• undefined - 존재하지 않는 변수

  • if (a == null || a == undefined) doSomething();
    if (a) doSomthing();

• 숫자 + 문자열 => 문자열 - 21 + '세기' => '21세기'

• 배열

  • var units = ['SCV', 'Marine', 'Firebat', 'Vulture']

• 객체

변수#

• 변수 선언

  • var name = 'Bill' // 지역 변수
    movieName = 'Kill Bill'  // 전역 변수
    const PI = 3.141592 // 상수

정규식#

• 정규식 만들기

  • regex = /[a-z][a-z0-9]*/
    regex = new RegExp('[a-z][a-z0-9]*')

• 연속 검색

  • var regex = /[a-z]+/ig
    result = regex.exec('abc ABC')
    alert([result[0], regex.lastIndex]) // abc, 3
    
    result = regex.exec('abc ABC')
    alert([result[0], regex.lastIndex]) // abc, 7

• 괄호로 부분 매칭

  • result = /([A-Z][a-z]+)File/.exec('abcFile, AbcFile')
    alert([result[0], result[1]])

• 정규식 매칭 검사만

  • isEmail = /\w+@\w+\.\w+/.test('hongmanchoi@k1.com')

• 바꾸기

  • re = /(\w+)\s(\w+)/;
    str = "John Smith";
    newstr = str.replace(re, "$2, $1");
    document.write(newstr) // Smith, Jonh

• 함수로 바꾸기

  • re = /(\w+)\s(\w+)/;
    str = "John Smith";
    newstr = str.replace(re, function(str, p1, p2) {
            return str + ' -> ' + p2 + ', ' + p1
    });
    document.write(newstr) // John Smith -> Smith, John

함수#

• 선언

  • function plus(a, b) {
            return a + b
    }
    alert(plus(1, 2))

• 대입 가능

  • plus = function(a, b) {
            return a + b
    }
    alert(plus(1, 2)) // 1 + 2 => 3

• arguments 객체

  • function plusAll() {
            var sum = 0
            for (var i = 0; i < arguments.length; i++) {
                    sum += arguments[i]
            }
            return sum
    }
    alert(plusAll(1, 2, 3)) // 1 + 2 + 3 => 6

• eval() 함수

  • alert(eval('1 + 2')) // 3

객체#

• 객체의 속성

  • myCar.make = "Ford"
    myCar.model = "Mustang"
    
    myCar["make"] = "Ford"
    myCar["model"] = "Mustang"
    
    function show_props(obj, obj_name) {
       var result = "";
       for (var i in obj)
          result += obj_name + "." + i + " = " + obj[i] + "\n";
       return result;
    }

• for ~ in으로 속성 읽기

  • var myHonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2}};
    for (prop in myHonda) {
       alert([prop, myHonda[prop]])
    }

• Constructor

  • function Person(name, age, sex) {
       this.name = name;
       this.age = age;
       this.sex = sex;
    }
    rand = new Person("Rand McKinnon", 33, "M");
    ken = new Person("Ken Jones", 39, "M");
    
    alert(rand.age) // 33

• Object Initializer

  • myHonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2}};

• 이미 존재하는 타입에 속성 추가

  • function Person(name, age, sex) {
       this.name = name;
       this.age = age;
       this.sex = sex;
    }
    Person.prototype.marrried = null
    
    jones = new Person('Indiana Jones', 27, 'M')
    jones.married = false

• 메소드 정의, Constructor에서

  • function Person(name) {
       this.name = name;
       this.eat = function() {
           this.eaten = true
       }
    }
    p = new Person('Bill')
    p.eat()

• 메쏘드 정의, 타입의 prototype 이용

  • function Person(name) {
       this.name = name;
    }
    Person.prototype.eat = function() {
       this.name = name;
    }
    p = new Person('Bill')
    p.eat()

• 메쏘드 정의, 객체의 속성으로

  • function Person(name) {
       this.name = name;
    }
    p = new Person('Bill')
    p.eat = function() {
       this.name = name;
    }
    p.eat()

• getter, setter

  • js> o = new Object;
    [object Object]
    js> o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}};
    [object Object]
    js> o.a
    7
    js> o.b
    8
    js> o.c = 50
    js> o.a
    25
    js>

• 속성 삭제

  • delete o.a

• 상속

  • Child.prototype = new Parent