Your SlideShare is downloading. ×
Javascript 101
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Javascript 101

158
views

Published on


0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
158
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. • 년에 에 의해 최초로 개발됨 • 이름 변천사   • 웹페이지에서 최소한의 한 기능을 구현하기 위하여 도입 • 와의 브라우저 전쟁에서 나타났다고 볼 수 있음 • 현재 사용처 • 웹페이지를 동적으로 꾸미기 위해 • 서버에서도 사용 • 언어 포맷 자체는 다양한 사용처 등 에서 널리 사용되고 있음 • 버전 • 가장 최근 버전은 에서 사용 가능 • 일반적으로 안전하다 고 받아들여지는 버전은
  • 2. • 일반적인 자바스크립트의 사용 안에서 사용된다 <!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>
  • 3. 의 가지 구성요소 • • • • • • 정확히 정해진 표준은 없음 •
  • 4. 와 • 와 • 는 에서 이름만 빌려왔다고 보는 것이 옳습니다 • 비슷한 계열 문법을 사용하지만 아예 다른 언어 • • • 의 언어적 특징은 사양에 정의됨 후에 로 등록 • 도 사양을 지원함
  • 5. 값 • 주의 모든 숫자는 비트 부동소수점 숫자 • • • • • // 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;
  • 6. • 자바스크립트는 동적 타입 언어 • 필요할 때마다 자동으로 데이터 타입이 변환된다 • 예제 // 아래 코드는 오류를 발생시키지 않는다. 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
  • 7. 변수 • 변수는 두 가지 방법으로 선언할 수 있다 • 변수 평가 • 아무 초기값을 가지지 않은 변수는 가 된다 • 한번도 선언되지 않은 변수에 대한 접근은 예외를 발생시킨다 // 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!
  • 8. 객체 • 자바스크립트에서 객체는 일종의 • 콘솔에서 라고 출력되는 모든 것이 객체
  • 9. 객체 만들기 • 객체 리터럴 • 같은 형태의 객체를 계속 만들 수 없음 • 프토토타입 객체로 을 가짐 • 생성자 • 프로토타입 객체로 자신 을 가짐 // 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);
  • 10. 를 빼먹으면 어떻게 되나요 • 일반 함수와 생성자 함수에는 차이가 거의 없다 • 차이점 바인딩 • 일반 함수 호출 가 현재 보통은 또는 호출한 객체 에 바인딩된다 • 를 통한 생성자 호출 가 새로 생성되는 빈 객체에 바인딩된다 • 차이점 리턴값 • 일반 함수 리턴값이 없으면 를 리턴 • 생성자 함수 자동으로 새로 생성된 객체 를 리턴 // 앞 장의 예제에 이어서... 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
  • 11. • 자신의 부모 프로토타입 객체 를 가리키는 숨겨진 프로퍼티 • 생성자 함수는 자신과 링크된 프로토타입 객체를 으로 가리킴 객체 // Person 생성자 함수 function Person(name) { this.name = name; } // foo 객체 생성 var foo = new Person('foo'); console.dir(Person); console.dir(foo);
  • 12. • 모든 객체는 자신을 생성한 생성자 함수의 프로퍼티가 가지는 객체를 자신의 프로토타입 객체로 취급한다 • 자신이 가지고 있지 않은 프로퍼티지만 프로토타입 객체가 가지고 있다면 자신의 것처럼 사용할 수 있다 • 예 // 앞선 예제에서 이어서... console.log(Foo.hasOwnProperty('name')); // true 객체
  • 13. 기본 오브젝트 데이터 타입 확장 • 어떠한 오브젝트라도 추가적으로 기능을 부여하여 확장할 수 있다 • 에서는 모든 기본 메서드들은 프로토타입 객체 내의 메서드로 정의해야 한다고 되어 있음 • 예 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);
  • 14. 변경하기 • 은 과연 바꿀 수 있을까 • 디폴트 프로토타입 객체는 함수가 생성될 때 같이 생성 함수의 프로퍼티에 연결 • 이 연결은 중간에 변경이 가능 단 소급적용은 불가 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
  • 15. • 순수한 함수 • 외부에 아무런 영향을 끼치지 않는 함수 • 동시에 여러 함수를 실행 가능 병렬처리 • 같은 입력값이 들어오면 항상 같은 값을 반환해야 한다 • 고계 함수 • 함수를 값으로 간주하여 인자 또는 반환값으로 사용 y = f(x) * f(x) z = f(x); y = z * z; function makeAddPrefixFunc(prefix) return function (val) { return prefix + val; } }
  • 16. 클로저 • 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수 를 클로저라 한다 • 일반적인 클로저 패턴 var pet = function(name) { // 외부 함수는 name이라는 변수를 파라미터로 받는다. var getName = function() { return name; // 내부의 함수는 바깥의 함수에서 선언된 name변수를 볼 수 있다. } return getName; // 방금 선언한 함수 자체를 반환한다. }, myPet = pet("Vivie"); myPet(); // Returns "Vivie"
  • 17. 클로저 • 좀 더 실용적인 예제 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>
  • 18. • 의 상속은 프로토타입을 사용하여 구현된다 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());
  • 19. // 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
  • 20. • 에는 와 같은 키워드가 존재하지 않음 • 모든 프로퍼티를 바깥에서 접근이 가능 클로져를 사용하여 비슷한 것을 만들 수 있음 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