Javascript Syntax ECMA-262 2nd edition

1. JavaScript
ECMA-262 3rd Edition (1999.12)

2. 1. JavaScript Basic
2. Prototype
3. JSON
4. Ajax
OVERVIEW

3. JAVASCRIPT BASIC
Chapter 1

4. JavaScript
 추천도서

5. JavaScript
 JavaScript, JScript, Java
자바스크립트는 자바와 다른 언어입니다. Syntax만 Java와 유
사한 부분이 존재하는데, 이는 Java와 유사하기 때문이 아니고,
C와 유사하기 때문입니다.
JScript는 IE 브라우저에서 사용하는 스크립트입니다.
JavaScript를 사용한다 하면 J스크립트를 사용하게 됩니다.
표준 스크립트는 ECMA-262 Script입니다. Flash Action
Script라고 부르는 Script 역시 ECMA 262 Script를 사용합니다.

6. JavaScript
 Automatic Semicolon
JavaScript에서는 Semicolon(;)이 생략된 경우 자동으로
Semicolon을 붙여 줍니다. 하지만 이는 좋은 습관이 아니므로
Semicolon을 붙여 주도록 합니다.
return
true;
예제1
return;
true;
예제2

7. JavaScript
 String Concatenation Operator ‘+’
+ 연산자를 숫자에 사용하면, 더하기 연산을 수행하지만, 문자열
에 사용하는 경우 두 문자열을 합칩니다.
그러나 문자열이 숫자 문맥에 사용되면 문자열은 숫자로 변환됩
니다.
“100” + 10
100 + “bottles of beer”
“” + 10
결과 : “10010”
결과 : “100 bottles of beer”
결과 : “10”
“11” * “2”
“100”- 0
결과 : 22
결과 : 100
예제1
예제2

8. JavaScript
 Boolean type casting
불리언 타입은 쉽게 다른 타입으로 변환되거나 다른 타입에서 불
리언 값으로 변환될 수 있고 그 변환은 대개 자동으로 수행된다.
숫자 문맥에서의 불리언 값은 true는 숫자 1, false는 숫자 0으로
변환된다. 문자열에서는 문자열 “true”/“false”로 자동 변환된다.
만약 숫자가 불리언 값을 기대하는 곳에서 사용되면 0이나 NaN
인 경우 false 그외의 경우에는 true로 변환되며, 문자열이 불리
언 값을 기대하는 곳에서는 빈 문자열은 false, 그 외는 true로 변
환된다. null과 undefined의 값은 false로 변환되고 널이 아닌 객
체나 배열, 함수는 true로 변환된다.

9. JavaScript
 Function
function square(x)
{
return x*x ;
}
// 함수 이름은 square이고 전달인자 x를 받는다.
// 함수 시작
// 전달인자 x를 제곱하여 그 값을 반환한다
// 함수 끝

10. JavaScript
 Function literal
일반적인 함수 정의와 다르게 함수리터럴은 자바스크립트 표현
식 내에서 사용할 수 있다.
var square = function(x){ return x*x; };

11. JavaScript
 Closure
uniqueID = (function() {
var id =0;
return function() { return id++; };
})();
// 바깥 함수는
// 함수를 반환하고, uniqueID에는
// 중첩함수가 저장된다.

12. JavaScript
 Object
native object
spec에 정의된 object
built-in object
브라우저가 제공하는 object
host object
브라우저의 환경과 관련한 object, 예: DOM

13. JavaScript
 Object
자바스크립트 객체의 생성은 new 연산자와 생성자 함수를 호출
하여 생성하게 된다.
var obj = new Object();
var now = new Date();

14. JavaScript
 new
new 연산자는 새로운 객체를 생성하고 이를 초기화 하기 위한 생
성자 함수를 호출한다. new 연산자는 단항 연산자로 생성자 호출
앞에 위치한다. 문법은 다음과 같다.
constructor는 반드시 생성자 함수로 평가되는 표현식이어야 하
며, 전달인자(arguments)는 괄호로 감싸야 한다. 전달인자는 없
을수도 있고 2개 이상일때는 쉼표로 구분한다.
new 연산자가 처음 생성하는 객체에는 아무런 프로퍼티도 정의
되어 있지 않다.
new constructor(arguments)

15. JavaScript
 Object literal
자바스크립트는 객체를 생성하고 프로퍼티를 지정하는 객체 리터
럴 문법을 제공한다. 객체리터럴은 콜론으로 구별되는 프로퍼티
이름 / 값 쌍들이 다시 쉼표로 분리된 목록이다.
var point={x:2.3, y:-1.2};
var rectangle = { upperLeft: { x: 2, y :2 },
lowerRight: { x:4 , y:4 }
};

16. JavaScript
 Object and Associative array
자바스크립트의 객체는 일반적인 객체 접근 방법과 연관배열
(associative array) 형태의 표현 방법 두 가지를 이용하여 접근
이 가능하다.
image라는 객체에 width, height 두가지 프로퍼티가 존재한다
면, 예제 1과 2 두가지 형태로 image의 프로퍼티에 접근이 가능
하다.
image.width
image.height
image[“width”]
image[“height”]

17. JavaScript
 Array
배열(array)은 번호(인덱스)와 번호에 대응하는 데이터들로 이루
어진 자료구조를 나타낸다. 여기에서 이야기하는 배열은 위에서
언급한 적이 있는 연관배열과는 다른 개념인데 일반적인 배열은
음수가 아닌 정수로 인덱싱 되는 반면 연관배열은 문자열로 인덱
싱된다. 또 자바스크립트가 배열의 배열 형태 말고는 다차원 배열
을 지원하지 않는 점을 유의할 필요가 있다. 그리고 자바스크립트
는 타입제약이 없는 언어이므로 배열 내 원소들이 모두 동일한 타
입을 가질 필요는 없다.

18. JavaScript
 Array
배열은 Array() 생성자 함수로 생성한다. 배열 생성후 어떤 인덱
스에라도 얼마든지 엘리먼트를 할당하여 사용할 수 있다.
var arr= new Array();
arr[0] = 10;
arr[1] = “javascript”;
arr[2] = { x : 10, y : 20};
var arr= new Array(10,”javascript”,true,{x:10,y:20});
var arr= new Array(10);

19. JavaScript
 Array literal
자바스크립트는 배열을 생성하고 초기화하는 리터럴 문법을 제공
한다. 배열 리터럴은 대괄호로 둘러싸인 쉼표로 구분된 값들의 목
록이다. 대괄호 내 값들은 0 부터 시작하는 배열 인덱스에 차례대
로 할당된다.
var arr= [10,”javascript”, {x:10,y:20}];
var matrix = [[1.2.3],[4,5,6],[7,8,9]];
var base=1000;
var table= [base,base+1.base+2,base+3];
var sparseArray = [1,,,,5];

20. JavaScript
 undefined
undefined는 선언은 되었지만 값이 할당된 적이 없는 변수에 접
근하거나, 존재하지 않는 객체 프로퍼티에 접근할 경우 반환하는
값이다. undefined는 null과 동일한 값이 아니라는 것을 유념해
두어야 한다.

21. JavaScript
 null
null은 아무런 값도 나타내지 않는 특수한 값이다. 어떤 변수가
null값을 가지면 그 변수가 유요한 객체나 배열, 숫자, 문자열, 또
는 불리언 값을 담고 있지 않다는 것을 알 수 있다.
undefined와 null은 서로 구별되는 값이지만 동등연산자
(equality operator, ‘==’)는 둘을 같은것으로 간주한다.

22. JavaScript
 typeof
피연산자의 타입을 반환한다. 숫자, 문자열, 불리언 값은
“number”, “string”, “boolean”을 반환하며, 객체, 배열, null 값
에 대해서는 “object”를 반환한다. 함수는 “function”을 반환하
고 정의되지 않은 피연산자에 대해 “undefined”를 반환한다. 피
연산자로 Number, String, Boolean 객체가 주어지면 typeof 연
산은 “object”를 반환한다

23. JavaScript
 instanceof
instanceof 연산자는 좌변에 객체, 우변에 클래스의 이름을 받는
다. 좌변 객체가 우변 클래스의 인스턴스일 경우에 true를 반환한
다.

24. JavaScript
 in operatior
in 연산자는 좌변에 문자열(혹은 타입변환 가능한것) 우변에 객체
나 배열을 받는다. 좌변 값이 우변 객체의 프로퍼티 이름에 해당
할 경우 true를 반환한다.
var point = { x:1, y:1 };
var has_x_coord = “x” in point;
var has_y_coord = “y” in point;
var has_z_coord = “z” in point;
var ts = “toString” in point;
// 객체 정의
// true
// true
// false
// true 상속된 프로퍼티

25. JavaScript
 for / in
객체 내에 포함된 원소를 모두 가져올 때 사용하는 for / in 루프
에 대해 소개하고자 한다.
“변수”는 변수이름 또는 변수/배열 객체/객체 프로퍼티를 선언
하는 var 문이어야 한다. “객체”는 객체 이름또는 객체로 평가될
수 있는 표현식이어햐 한다. 다음 예제는 주어진 객체의 모든 프
로퍼티의 이름과 값을 출력한다.
for (변수 in 객체)
문장

26. JavaScript
 Declaring Variables
자바스크립트 프로그램에서는 var 키워드를 사용하여 변수를 선
언하며, 명시적으로 변수를 선언하지 않으면 암묵적으로 그 변수
를 선언한다.
var i;
var sum;
var i=0, j=0, k=0;
var msg = “welcome”;
for ( var i=0; i< 10; i++) { };

27. JavaScript
 Decaling Variables
① var 구문으로 같은 이름의 변수를 여러 번 선언해도 무방하다.
② 선언되지 않은 변수의 값을 읽으려 할 경우 에러가 발생한다.
③ 선언되지 않은 변수에 값을 할당하려 하면, 암묵적으로 변수를
선언한다.
(단, 암묵적으로 선언되는 변수는 항상 전역변수로 선언된다.)

28. JavaScript
 Scope of variables
변수의 유효범위는 그 변수가 정의되어 있는 영역을 말한다. 전
역 변수의 유효범위는 프로그램 전체이다. 반면 어떤 함수 내에서
선언된 변수는 오직 그 함수 몸체 안에서만 정의된다. 이러한 변
수는 지역변수라 불리며, 유효범위도 지역적이다. 함수의 매개변
수 역시 지역변수로 오직 해당 함수에서만 정의된다.
함수 내부에서는 지역 변수가 같은 이름의 전역변수보다 우선적
으로 사용된다.

29. JavaScript
 Scope of variables
var scope = “global”;
function checkscope() {
var scope = “local”;
document.write(scope);
}
checkscope();
// 전역 변수선언
// 같은 이름의 지역변수 선언
// 전역변수가 아닌 지역변수가 사용된다.
// “local”을 출력

30. JavaScript
 Scope of variables
scope =”global”;
function checkscope(){
scope = “local”;
document.write(scope);
myscope = “local”;
document.write(myscope);
}
checkscope();
document.write(scope);
document.write(myscope);
// var가 없어도 전역변수로 선언된다.
// 의도하지 않게 전역변수 scope의 값을
바꾸게 된다.
// 전역변수가 쓰인다.
// 새로운 전역변수 mycope를 선언한다.
(암묵적)
// 새로 선언된 전역 변수가 쓰인다.
// “locallocal” 출력
// “local” 출력
// “local” 출력

31. JavaScript
 Scope of variables
자바스크립트에서는 C나 자바와는 달리 블록 단위의 유효범위
라는 것이 존재하지 않는다. 함수 안에서 정의된 변수는 그것이
정의된 위치에 관계없이 항상 함수에 걸쳐 유효하다.
function test(o){
var i = 0;
if (typeof o == “object”) {
var j = 0;
for (var k=0; k< 10; k++) {
document.write(k);
}
document.write(k);
}
document.write(j);
}
// i는 함수 전체에 걸쳐 정의된다.
// j는 이 블록 뿐 아니라 함수 전체에서 정의된다.
// k는 루프뿐 아니라 함수 전체에서 정의된다.
// k는 여전히 정의되어 있다. 10이 출력된다.
// j는 정의되어 있지만, 초기화되지 않았을 가능성이
있다.

32. PROTOTYPE
Chapter 2

33. JavaScript
 JavaScript Object
자바스크립트 Object는 프로퍼티 집합
자바스크립트는 Java나 C++/C#의 클래스를 지원하지 않는다.
자바스크립트에는 클래스가 없고, 클래스를 흉내낸 클래스만 있
을 뿐이다. 이를 편의상 클래스라고 부르더라도 일반적인 클래스
와 다르다.

34. JavaScript
 Creator
생성자 예
function Rectangle (w, h){
this.width=w;
this.height=h;
//return 문이 있으면 안됨
}

35. JavaScript
 Method
var r= new Rectangle(2,3);
r.area= function() { return this.width * this.height; }
var a=r.area();
function Rectangle(w,h){
this.width=w;
this.height=h;
this.area=funtion() { return this.width * this.height; }
}

36. JavaScript
 prototype
자바스크립트의 모든 함수에는 prototype이라는 프로퍼티가 있
는데, 이것은 함수가 정의될 때부터 자동적으로 생성되고 초기화
된다. prototype 프로퍼티의 초기값은 프로퍼티가 하나 있는 객
체로 지정된다. (constructor)
function Rectangle (w, h){
this.width=w;
this.height=h;
}
Rectangle.prototype.area=function() {return this.width * this.height;}

37. JavaScript
 prototype chaining
rec1
width 10
height 10
__proto__
Rectangle
area function()
constructor function
Rectangle(w,h)
__proto__rec2
width 20
height 10
__proto__
Object
area function()
constructor function Object()
__proto__ null

38. JavaScript
 prototype getter/setter
상속받은 객체의 속성을 get 할때는 프로토타입을 사용해 가져오
나 set할때는 사용하지 않는다.

39. JavaScript
 this
자바스크립트의 매서드내에서 this를 생략하는 경우 원치 않는
결과를 가져 올 수 있다. 이는 자바 스크립트의 변수 특징과
variable scope를 생각해 보면 이유를 알 수 있다.

40. JavaScript
 Class property, Class method
Rectangle.DEFAULT=new Rectangle();
Rectangle.switch=function (w,h) { return new Rectangle(h,w); }

41. JSON
Chapter 3

42. JavaScript
 JSON (JavaScript Object Notation)
JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식
이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고
생성함에도 용이하다. JavaScript Programming Language,
Standard ECMA-262 3rd Edition - December 1999의 일부에
토대를 두고 있다. JSON은 완벽하게 언어로 부터 독립적이지만
C-family 언어 - C, C++, C#, Java, JavaScript, Perl, Python
그외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스
트 형식이다. 이러한 속성들이 JSON을 이상적인 DATA-교환 언
어로 만들고 있다.

43. JavaScript
 Object

44. JavaScript
 Array

45. JavaScript
 Value

46. JavaScript
 String

47. JavaScript
 Number

48. JavaScript
 Quiz
1. JSON Object를 저장하거나 인터넷 상에서 주고 받으려면 어
떻게 해야 할까?
2. 열거나 인터넷에서 받은 이 데이터를 JavaScript에서 사용
하려면 어떻게 해야 할까?

49. JavaScript
 JSON String
JSON String은 스트링이다. 스트링을 파싱해서 Object로 만들
어 주지 않는다면, 스트링인것 이외에 의미는 없다.
var str=“{”example”: “hello”}”;

50. JavaScript
 JSON2.js
JavaScript Object를 String 표현식으로 (JSON)변경해 주는 유
틸리티를 만들 수 있다.
https://github.com/douglascrockford/JSON-js

51. JavaScript
 eval()
개요
문자열에 들어있는 자바스크립트 코드를 평가
문법
eval(string)
전달인자(Parameters)
string
평가될 자바스크립트 표현식, 실행될 문장이 포함된 문자열
반환값
평가된 값
설명
자바스크립트 코드를 담은 문자열을 평가하기 위한 전역 메서드
예외
SyntaxError
EvalError
기타
전달된 인자 내 구문 오류
eval 함수의 올바르지 않은 사용
기타예외

52. AJAX
Chapter 4

53. JavaScript
 Ajax (Asynchronous JavaScript and XML)
Ajax는 에이작스, 아작스 등으로 발음합니다.
Ajax는 XML이 필수 조건은 아닙니다. JSON이나, YAML,
HTML, TEXT, CSV등의 데이터도 상관이 없습니다.
XML보다는 Asynchronous에 초점을 두시기 바랍니다.

54. JavaScript
 Asynchronous
자바스크립트는 Single Thread를 사용하기 때문에 동기화된 작
업을 하는 경우 네트워크 사용중에 다른 작업을 할 수 없습니다.
비동기 작업을 통해 Background로 데이터를 주고 받을 수 있다
는 점이 장점입니다.

55. JavaScript
 XHR (XMLHttpRequest)
The XMLHttpRequest object implements an interface exposed
by a scripting engine that allows scripts to perform HTTP
client functionality, such as submitting form data or loading
data from a server. It is the ECMAScript HTTP API.
The name of the object is XMLHttpRequest for compatibility
with the Web, though each component of this name is
potentially misleading. First, the object supports any text
based format, including XML. Second, it can be used to make
requests over both HTTP and HTTPS (some implementations
support protocols in addition to HTTP and HTTPS, but that
functionality is not covered by this specification). Finally, it
supports "requests" in a broad sense of the term as it pertains
to HTTP; namely all activity involved with HTTP requests or
responses for the defined HTTP methods.

56. JavaScript
 XMLHttpRequest Interface
[NoInterfaceObject]
interface XMLHttpRequestEventTarget : EventTarget {
// for future use
};
[Constructor]
interface XMLHttpRequest : XMLHttpRequestEventTarget {
// event handler attributes
attribute Function onreadystatechange;
// states
const unsigned short UNSENT = 0;
const unsigned short OPENED = 1;
const unsigned short HEADERS_RECEIVED = 2;
const unsigned short LOADING = 3;
const unsigned short DONE = 4;
readonly attribute unsigned short readyState;
// request
void open(DOMString method, DOMString url);
void open(DOMString method, DOMString url, boolean async);
void open(DOMString method, DOMString url, boolean async, DOMString? user);
void open(DOMString method, DOMString url, boolean async, DOMString? user, DOMString? password);
void setRequestHeader (DOMString header, DOMString value);
void send();
void send(Document data);
void send([AllowAny] DOMString? data);
void abort();
// response
readonly attribute unsigned short status;
readonly attribute DOMString statusText;
DOMString getResponseHeader (DOMString header);
DOMString getAllResponseHeaders();
readonly attribute DOMString responseText;
readonly attribute Document responseXML;
};

57. JavaScript
 HTTP Factory
HTTP = new Object();
HTTP._factories = [
function() { return new XMLHttpRequest();},
function() { return new ActiveXObject("Msxml12.XMLHTTP");},
function() { return new ActiveXObject("Microsoft.XMLHTTP");}
];
HTTP._factory = null;

58. JavaScript
 HTTP Factory
//HTTP newRequest
HTTP.newRequest = function(){
if (HTTP._factory !=null) return HTTP._factory();
for(var i=0; i < HTTP._factories.length; i++) {
try {
var factory = HTTP._factories[i];
var request = factory();
if (request !=null) {
HTTP._factory = factory;
return request;
}
}
catch(e) {
continue;
}
}
HTTP._factory=function() {
throw new Error("XMLHttpRequest not supported");
}
HTTP._factory();
}

59. JavaScript
 Usage
var request=HTTP.newRequest();
request.onreadystatechange=function()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
res=request.responseText.trim();
if(document.getElementById('popup_layer'))
document.getElementById('popup_layer').innerHTML = res;
}
}
}
request.open("POST","process.php");
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send(HTTP.encodeFormData(data));

60. JavaScript
 Quiz
flickr의 API를 이용하여 JSON을 받아와서, 제목, 내용, 사진을
출력하는 웹 응용프로그램을 작성하시오.
API 설명
http://www.flickr.com/services/feeds/docs/photos_public/
API 사용 예
http://api.flickr.com/services/feeds/photos_public.gne?tags=
%EA%B9%80%ED%83%9C%ED%9D%AC&format=json