Javascript 101

• 년에 에 의해 최초로 개발됨
• 이름 변천사  
• 웹페이지에서 최소한의 한 기능을 구현하기 위하여 도입
• 와의 브라우저 전쟁에서 나타났다고 볼 수 있음
• 현재 사용처
• 웹페이지를 동적으로 꾸미기 위해
• 서버에서도 사용
• 언어 포맷 자체는 다양한 사용처 등 에서 널리 사용되고 있음
• 버전
• 가장 최근 버전은 에서 사용 가능
• 일반적으로 안전하다 고 받아들여지는 버전은

• 일반적인 자바스크립트의 사용 안에서 사용된다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<title>자바스크립트 페이지</title>
<script type="text/javascript">
document.write("<p>Hello World!</p>");
</script>
</head>
<body>
<noscript>
<p>브라우저가 자바스크립트 기능을 지원하지 않거나 자바스크립트 기능이 꺼져 있습니다.</p>
</noscript>
</body>
</html>

의 가지 구성요소
•
•
•
•
•
• 정확히 정해진 표준은 없음
•

와
• 와
• 는 에서 이름만 빌려왔다고 보는 것이 옳습니다
• 비슷한 계열 문법을 사용하지만 아예 다른 언어
•
•
• 의 언어적 특징은 사양에 정의됨 후에 로 등록
• 도 사양을 지원함

값
•
주의 모든 숫자는 비트 부동소수점 숫자
•
•
•
•
•
// Numbers
var intNum = 42;
var floatNum = 3.14159;
// Logical
var logicalVar = true;
// Strings
var singleQuoteStr = 'Thanks for all the fish';
var doubleQuoteStr = "Thanks for all the fish";
// Undefined
var emptyVar;
// Null
var nullVar = null;

• 자바스크립트는 동적 타입 언어
• 필요할 때마다 자동으로 데이터 타입이 변환된다
• 예제
// 아래 코드는 오류를 발생시키지 않는다.
var answer = 42;
answer = "Thanks for all the fish...";
// Numeric과 String이 "+" 오퍼레이터로 결합된 경우
// 그 결과는 String이 된다.
x = "The ansower is " + 42; // "The answer is 42"
y = 42 + " is the answer"; // "42 is the answer"
// "+"가 아닌 다른 연산자에서는 Numeric을
// String으로 변환하지 않는다.
"37" - 7 // 30
"37" + 7 // "377"
// Unary plus operator
"1.1" + "1.1" = "1.11.1"
(+"1.1") + (+"1.1") = 2.2

변수
• 변수는 두 가지 방법으로 선언할 수 있다
• 변수 평가
• 아무 초기값을 가지지 않은 변수는 가 된다
• 한번도 선언되지 않은 변수에 대한 접근은 예외를 발생시킨다
// Local or global variable
var x = 42;
// Global variable
x = 42;
var a;
console.log("The value of a is " + a); // "The value of a is undefined."
console.log("The value of b is " + b); // ReferenceError exception!

객체
• 자바스크립트에서 객체는 일종의
• 콘솔에서 라고 출력되는 모든 것이 객체

객체 만들기
• 객체 리터럴
• 같은 형태의 객체를 계속 만들 수
없음
• 프토토타입 객체로
을 가짐
• 생성자
• 프로토타입 객체로
자신 을 가짐
// Literal
var foo = {
name: 'foo',
age: 35,
gender: 'man'
};
console.dir(foo);
// Constructor
function Person(name, age, gender, position) {
this.name = name;
this.age = age;
this.gender = gender;
}
var bar = new Person('bar', 33, 'woman');
console.dir(bar);
var baz = new Person('baz', 25, 'woman');
console.dir(baz);

를 빼먹으면 어떻게 되나요
• 일반 함수와 생성자 함수에는 차이가 거의
없다
• 차이점 바인딩
• 일반 함수 호출 가 현재 보통은
또는 호출한 객체 에 바인딩된다
• 를 통한 생성자 호출 가 새로 생성되는
빈 객체에 바인딩된다
• 차이점 리턴값
• 일반 함수 리턴값이 없으면 를 리턴
• 생성자 함수 자동으로 새로 생성된
객체 를 리턴
// 앞 장의 예제에 이어서...
var qux = Person('qux', 20, 'man');
console.log(qux); // Undefined
console.log(window.name); // qux
console.log(window.age); // 20
console.log(wondow.gender); // man

• 자신의 부모 프로토타입 객체 를 가리키는 숨겨진 프로퍼티
• 생성자 함수는 자신과 링크된 프로토타입 객체를 으로 가리킴
객체
// Person 생성자 함수
function Person(name) {
this.name = name;
}
// foo 객체 생성
var foo = new Person('foo');
console.dir(Person);
console.dir(foo);

• 모든 객체는 자신을 생성한 생성자 함수의
프로퍼티가 가지는 객체를 자신의
프로토타입 객체로 취급한다
• 자신이 가지고 있지 않은 프로퍼티지만
프로토타입 객체가 가지고 있다면 자신의
것처럼 사용할 수 있다
• 예
// 앞선 예제에서 이어서...
console.log(Foo.hasOwnProperty('name'));
// true
객체

기본 오브젝트 데이터 타입 확장
• 어떠한 오브젝트라도 추가적으로 기능을
부여하여 확장할 수 있다
• 에서는 모든 기본 메서드들은
프로토타입 객체 내의 메서드로 정의해야 한다고 되어
있음
• 예
String.prototype.testMethod = function() {
console.log('Thanks for all the fish!');
};
var str = 'String';
str.testMethod(); // Thanks for all the fish!
console.dir(String.prototype);

변경하기
• 은 과연 바꿀 수 있을까
• 디폴트 프로토타입 객체는 함수가 생성될 때 같이 생성 함수의 프로퍼티에 연결
• 이 연결은 중간에 변경이 가능 단 소급적용은 불가
function Person(name) {
this.name = name;
}
var foo = new Person('foo');
console.log(foo.name, foo.country); // foo undefined
Person.prototype = {
country: 'korea',
};
var bar = new Person('bar');
console.log(foo.name, foo.country); // foo undefined
console.log(bar.name, bar.country); // bar korea

• 순수한 함수
• 외부에 아무런 영향을 끼치지 않는 함수
• 동시에 여러 함수를 실행 가능 병렬처리
• 같은 입력값이 들어오면 항상 같은 값을 반환해야 한다
• 고계 함수
• 함수를 값으로 간주하여 인자 또는 반환값으로 사용
y = f(x) * f(x)
z = f(x);
y = z * z;
function makeAddPrefixFunc(prefix)
return function (val) {
return prefix + val;
}
}

클로저
• 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수 를 클로저라 한다
• 일반적인 클로저 패턴
var pet = function(name) { // 외부 함수는 name이라는 변수를 파라미터로 받는다.
var getName = function() {
return name; // 내부의 함수는 바깥의 함수에서 선언된 name변수를 볼 수 있다.
}
return getName; // 방금 선언한 함수 자체를 반환한다.
},
myPet = pet("Vivie");
myPet(); // Returns "Vivie"

클로저
• 좀 더 실용적인 예제
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
document.getElementById('size-12').onclick = size12;
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>

• 의 상속은 프로토타입을 사용하여 구현된다
var person = {
name : "Duglas Adams",
getName : function() {
return this.name;
},
setName : function(arg) {
this.name = arg;
}
}
function create_object(o) {
function F() {}
F.prototype = o;
return new F();
}
var adams = create_object(person);
adams.setName("choo");
console.log(adams.getName());

// Person 클래스 정의
function Person() {}
Person.prototype.walk = function(){
alert ('I am walking!');
};
Person.prototype.sayHello = function(){
alert ('hello');
};
// Student 클래스 정의
function Student() {
// Call the parent constructor
Person.call(this);
}
// Person을 상속한다.
Student.prototype = new Person();
// Student의 constructor가 기본적으로 Person을 보므로 고친다.
Student.prototype.constructor = Student;
// sayHello 메서드를 변경 (오버라이드) 한다.
Student.prototype.sayHello = function(){
alert('hi, I am a student');
}
// add sayGoodBye method
Student.prototype.sayGoodBye = function(){
alert('goodBye');
}
var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();
// check inheritance
alert(student1 instanceof Person); // true
alert(student1 instanceof Student); // true

• 에는 와 같은 키워드가 존재하지 않음
• 모든 프로퍼티를 바깥에서 접근이 가능 클로져를 사용하여 비슷한 것을 만들 수 있음
var Person = function(arg) {
var name = arg ? arg : "42";
return {
getName : function() {
return name;
},
setName : function(arg) {
name = arg;
}
};
}
var me = new Person();
console.log(me.getName()); // 42

Javascript 101

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Javascript 101 (20)

Javascript 101