javascript 101
TRANSCRIPT
• 년에 에의해최초로개발됨• 이름변천사
• 웹페이지에서최소한의 한기능을구현하기위하여도입
• 와의브라우저전쟁에서나타났다고볼수있음
• 현재사용처• 웹페이지를동적으로꾸미기위해
• 서버에서도사용
• 언어포맷자체는다양한사용처 등 에서널리사용되고있음
• 버전• 가장최근버전은 에서사용가능
• 일반적으로 안전하다 고받아들여지는버전은
• 일반적인자바스크립트의사용 안에서사용된다
<!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>
의 가지구성요소
•
•
•
•
•
• 정확히정해진표준은없음
•
와
• 와• 는 에서이름만빌려왔다고보는것이옳습니다
• 비슷한 계열문법을사용하지만 아예다른언어
•
•
• 의언어적특징은 사양에정의됨 후에 로등록
• 도 사양을지원함
값
•
주의 모든숫자는 비트부동소수점숫자
•
•
•
•
•
// Numbersvar intNum = 42;var floatNum = 3.14159;
// Logicalvar logicalVar = true;
// Stringsvar singleQuoteStr = 'Thanks for all the fish';var doubleQuoteStr = "Thanks for all the fish";
// Undefinedvar emptyVar;
// Nullvar 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 variablevar x = 42;
// Global variablex = 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!
객체
• 자바스크립트에서객체는일종의
• 콘솔에서 라고출력되는모든것이객체
객체만들기
• 객체리터럴• 같은형태의객체를계속만들수없음
• 프토토타입객체로을가짐
• 생성자• 프로토타입객체로자신 을가짐
// Literalvar foo = {
name: 'foo',age: 35,gender: 'man'
};console.dir(foo);
// Constructorfunction 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); // quxconsole.log(window.age); // 20console.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 undefinedconsole.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);var size14 = makeSizer(14);var size16 = makeSizer(16);
document.getElementById('size-12').onclick = size12;document.getElementById('size-14').onclick = size14;document.getElementById('size-16').onclick = size16;
<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 constructorPerson.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 methodStudent.prototype.sayGoodBye = function(){
alert('goodBye');}
var student1 = new Student();student1.sayHello();student1.walk();student1.sayGoodBye();
// check inheritancealert(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
