5. JavaScript
JavaScript, JScript, Java
자바스크립트는 자바와 다른 언어입니다. Syntax만 Java와 유
사한 부분이 존재하는데, 이는 Java와 유사하기 때문이 아니고,
C와 유사하기 때문입니다.
JScript는 IE 브라우저에서 사용하는 스크립트입니다.
JavaScript를 사용한다 하면 J스크립트를 사용하게 됩니다.
표준 스크립트는 ECMA-262 Script입니다. Flash Action
Script라고 부르는 Script 역시 ECMA 262 Script를 사용합니다.
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로 변환된다.
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];
21. JavaScript
null
null은 아무런 값도 나타내지 않는 특수한 값이다. 어떤 변수가
null값을 가지면 그 변수가 유요한 객체나 배열, 숫자, 문자열, 또
는 불리언 값을 담고 있지 않다는 것을 알 수 있다.
undefined와 null은 서로 구별되는 값이지만 동등연산자
(equality operator, ‘==’)는 둘을 같은것으로 간주한다.
22. JavaScript
typeof
피연산자의 타입을 반환한다. 숫자, 문자열, 불리언 값은
“number”, “string”, “boolean”을 반환하며, 객체, 배열, null 값
에 대해서는 “object”를 반환한다. 함수는 “function”을 반환하
고 정의되지 않은 피연산자에 대해 “undefined”를 반환한다. 피
연산자로 Number, String, Boolean 객체가 주어지면 typeof 연
산은 “object”를 반환한다
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는 정의되어 있지만, 초기화되지 않았을 가능성이
있다.
33. JavaScript
JavaScript Object
자바스크립트 Object는 프로퍼티 집합
자바스크립트는 Java나 C++/C#의 클래스를 지원하지 않는다.
자바스크립트에는 클래스가 없고, 클래스를 흉내낸 클래스만 있
을 뿐이다. 이를 편의상 클래스라고 부르더라도 일반적인 클래스
와 다르다.
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-교환 언
어로 만들고 있다.
51. JavaScript
eval()
개요
문자열에 들어있는 자바스크립트 코드를 평가
문법
eval(string)
전달인자(Parameters)
string
평가될 자바스크립트 표현식, 실행될 문장이 포함된 문자열
반환값
평가된 값
설명
자바스크립트 코드를 담은 문자열을 평가하기 위한 전역 메서드
예외
SyntaxError
EvalError
기타
전달된 인자 내 구문 오류
eval 함수의 올바르지 않은 사용
기타예외
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.
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
Editor's Notes
명시적으로 숫자를 문자열로 변환하기 원하거나 조금 융통적인 방법의 변환을 원한다면 스트링 객체의 toString()매서드를 사용하여 숫자를 문자열로 변환하거나 parseInt(),parseFloat()을 사용하여 문자를 숫자로 변환 시킬 수 있다.