서버 응답

서버로부터 응답을 받기 위해서는 XMLHttpRequest객체의 responseText 또는 responseXML 속성을 사용합니다.

responseText 속성

responseXML 속성

서버로 요청하기

- 서버로 요청을 할 때에는 XMLHttpRequest객체에서 제공하는 open(), send() 메소드를 사용합니다.

예를들어, 아래처럼 사용합니다.

var xhttp = new XMLHttpRequest();

xhttp.open("GET", "URL", true);

xhttp.send();

이런 식으로 말이죠.

이때 open()과 send()의 메소드 설명은 아래와 같습니다.

GET 방식과 POST방식

GET 은 POST보다 단순하고 빠르며 대부분의 경우에 사용할 수 있습니다.

하지만 아래 경우에는 꼭 POST방식으로 써야합니다:

• A cached file is not an option (서버에 있는 파일이나 데이터베이스를 업데이트하는 경우).
• 서버로 많은 양의 데이터 전송이 필요한 경우 (GET방식은 전송할 데이터 사이즈 제한이 있으나 POST 방식은 사이즈 제한이 없습니다).
• (unknown characters를 포함할 수 있는) 사용자 input을 서버로 전송할 때 , POST 방식이 보안상 GET방식보다 좋습니다.

AJAX가 뭘까요? 

AJAX는 Asynchronous Javascript And Xml의 약자입니다.

이름에서 알 수 있듯이 비동기식 자바스크립트와 XML을 말합니다. 

이름에 XML이 나오기는 하지만 XML을 알 필요는 없습니다.  

AJAX를 사용하기 위해서는 기본적으로 HTML과 Javascript를 알고있어야 합니다.

그럼 가장먼저 AJAX가 어떻게 동작하는지에 대해서 알아보도록 할까요?

AJAX는 아래와 같은 순서를 거칩니다.

1. 클라이언트(IE 7+, 크롬, 사파리, 파이어폭스, etc. )에서 XMLHttpRequest객체를 생성하고 메시지를 담아 서버로 보낸다.

2. 서버에서 메시지를 받으면 메시지에 해당하는 정보를 읽어서 다시 브라우저한테 응답해준다.

3. 클라이언트 브라우저가 서버로부터 응답을 받으면 해당 정보를 특정 영역에 refresh해준다.

AJAX를 사용함에 있어서 가장 기본은 XMLHttpRequest 객체입니다. 이 객체는 서버로부터 데이터를 전송받을 때 사용이 됩니다. ( IE 5, 6 버전에서는 ActiveXObject 라는 객체가 사용됩니다. )

그럼 이 객체를 어떻게 만드는지 예제를 통해서 알아보겠습니다.

자, 이제 객체를 생성했으니까 이 객체를 이용해서 메시지를 서버로 전송해야겠죠?

다음 포스팅에서 서버로 메시지를 전송해보도록 하겠습니다.

jQuery 는 자바스크립트를 이용해서 만든 프레임워크라고 보시면됩니다. 따라서 자바스크립트 기능을 모두 사용하실 수 있다고 보시면 됩니다.

이번 포스팅에서는 jQuery에서 많이 사용되는 가장 기본적인 개념에 대해서 공부해보도록 하겠습니다.

String:

자바의 스트링처럼 자바스크립트의 스트링또한 동일한 속성을 가집니다. immutable 이란 말이죠. 

JavaScript 에서 스트링은 아래와 같은 형식을 가집니다. 쌍따옴표 또는 홑따옴표안에 있어야 합니다. 

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

Numbers:

JavaScript에서 숫자는 double-precision 64-bit format IEEE 754 값입니다. 스트링과 마찬가지로 immutable입니다.

JavaScript Numbers 예제는 아래와 같습니다.

5350
120.27
0.26

Boolean:

true , false 를 나타내는 객체죠. 숫자가 0이면, false이고 스트링이 비어있어도 false입니다.

예제:

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

Objects:

자바스크립트의 객체 생성 예제:

var emp = {
   name: "Zara",
   age: 10
};

객체의 속성정보를 읽거나 쓰는 예제:

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

Arrays(배열):

배열은 아래처럼 선언할 수 있습니다.

var x = [];
var y = [1, 2, 3, 4, 5];

배열은 길이를 가지고 있습니다. 루프를 돌릴때 유용하게 사용되죠.

var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
 }

Functions(함수):

자바스크립트의 함수는 named와 anonymous로 나뉘는데요 함수 이름을 직접 준것이 named고 함수 이름이 없는 것이 anonymous입니다. 네임드 함수는 function 키워드를 이용해서 아래처럼 선언할 수 있습니다.

function named(){
  // do some stuff here
}

anonymous 함수는 아래처럼 이름없이 아래처럼 변수에 할당될 수도 있고 다른 함수의 파라미터로 들어갈 수 있습니다.

var handler = function (){
  // do some stuff here
}

JQuery 에서 익명 함수는 아래처럼 자주 사용되어집니다.

$(document).ready(function(){
  // do some stuff here
});

Arguments(아규먼트):

JavaScript variable arguments is a kind of array which has length property. Following example explains it very well:

function func(x){
  console.log(typeof x, arguments.length);
}
func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

The arguments object also has a callee property, which refers to the function you're inside of. For example:

function func() {
   return arguments.callee; 
}
func();                // ==> func

Context(컨텍스트):

JavaScript famous keyword this always refers to the current context. Within a function this context can change, depending on how the function is called:

$(document).ready(function() {
  // this refers to window.document
});

$("div").click(function() {
  // this refers to a div DOM element
});

You can specify the context for a function call using the function-built-in methods call() and apply() methods.

The difference between them is how they pass arguments. Call passes all arguments through as arguments to the function, while apply accepts an array as the arguments.

function scope() {
  console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

Scope(범위):

The scope of a variable is the region of your program in which it is defined. JavaScript variable will have only two scopes.

• Global Variables: A global variable has global scope which means it is defined everywhere in your JavaScript code.

• Local Variables: A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

Within the body of a function, a local variable takes precedence over a global variable with the same name:

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

Callback(콜백):

A callback is a plain JavaScript function passed to some method as an argument or option. Some callbacks are just events, called to give the user a chance to react when a certain state is triggered.

jQuery's event system uses such callbacks everywhere for example:

$("body").click(function(event) {
   console.log("clicked: " + event.target);
 });

Most callbacks provide arguments and a context. In the event-handler example, the callback is called with one argument, an Event.

Some callbacks are required to return something, others make that return value optional. To prevent a form submission, a submit event handler can return false as follows:

$("#myform").submit(function() {
   return false;
 });

Closures(클로져):

Closures are created whenever a variable that is defined outside the current scope is accessed from within some inner scope.

Following example shows how the variable counter is visible within the create, increment, and print functions, but not outside of them:

function create() {
  var counter = 0;
  return {
    increment: function() {
      counter++;
    },
    print: function() {
      console.log(counter);
    }
  }
}
var c = create();
c.increment();
c.print();     // ==> 1

This pattern allows you to create objects with methods that operate on data that isn't visible to the outside world. It should be noted that data hiding is the very basis of object-oriented programming.

Proxy Pattern(프록시패턴):

A proxy is an object that can be used to control access to another object. It implements the same interface as this other object and passes on any method invocations to it. This other object is often called the real subject.

A proxy can be instantiated in place of this real subject and allow it to be accessed remotely. We can saves jQuery's setArray method in a closure and overwrites it as follows:

(function() {
  // log all calls to setArray
  var proxied = jQuery.fn.setArray;

  jQuery.fn.setArray = function() {
    console.log(this, arguments);
    return proxied.apply(this, arguments);
  };
})();

The above wraps its code in a function to hide the proxied variable. The proxy then logs all calls to the method and delegates the call to the original method. Using apply(this, arguments) guarantees that the caller won't be able to notice the difference between the original and the proxied method.

Built-in Functions:

JavaScript comes along with a useful set of built-in functions. These methods can be used to manipulate Strings, Numbers and Dates.

Following are important JavaScript functions:

A complete list of built-in function is available here : Built-in Functions.

문서 객체 모델 ( DOM ):

문서객체모델이라는 것은 아래와 같이 다양한 html 요소들의 트리구조를 말합니다.

<html>
<head>
   <title>the title</title>
</head>
<body>
   <div>
      <p>This is a paragraph.</p>
      <p>This is second paragraph.</p>
      <p>This is third paragraph.</p>
   </div>
</body>
</html>

Following are the important points about the above tree structure:

• The <html> is the ancestor of all the other elements; in other words, all the other elements are descendants of <html>.

• The <head> and <body> elements are not only descendants, but children of <html>, as well.

• Likewise, in addition to being the ancestor of <head> and <body>, <html> is also their parent.

• The <p> elements are children (and descendants) of <div>, descendants of <body> and <html>, and siblings of each other <p> elements.

 그냥 html 기본에 대해서 설명하고 있는거죠. 이정도는 다 아시리라보고 번역안합니다 ㅎ

Reference : http://www.tutorialspoint.com/jquery/jquery-basics.htm

jQuery란 무엇인가?

jQuery 는 빠르고 정확한 JavaScript Library 입니다. John Resig이라는 사람이 2006년에 만들었다고 하네요. Write less, do more. 이게 jQuery가 탄생한 이유입니다. 적은코드로 많은 일을 하는 것. 

jQuery 는 HTML 문서 traversing, event handling, animating, and Ajax interactions 을 단순화 시켜줍니다.

jQuery의 특징에는 다음과 같은 것들이 있습니다.

• DOM 조작: Sizzle이라는 selector엔진을 이용해서 DOM 요소를 선택하거나, 검색하거나, 요소의 내용을 수정하는 작업을 용이하게 해줍니다. 

• Event handling: HTML코드를 사용하지 않고 이벤트 처리를 할 수 있게 해줍니다. 

• AJAX 지원 

• 애니메이션 : 상당히 많은 애니메이션 효과를 제공합니다.

• 가볍다 : 19KB 정도 밖에 안되는 매우 가벼운 라이브러리 입니다. ( Minified and gzipped ).

• 다양한 브라우저 지원 : IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+

• 최신 기술 지원 : CSS3 selectors 와 basic XPath 문법을 지원합니다.

jQuery 설치하기

jQuery 설치하는 것은 어렵지 않습니다. 

1. 최신버전 다운로드하기 : download jQuery  

2. 다운로드한 최신버전의 jquery-x.y.z.min.js 파일을 프로젝트 경로 내에 넣어주세요, e.g. /jquery.

파일명에 min.js로 끝나는 버전은 최소화된 버전으로 불필요한 빈 줄이나 단어를 제외한 버전이라고 합니다.

jQuery 라이브러리 사용하기

 jquery 라이브러리 include하는 방법은 다음과 같습니다. 

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript">
      // you can add our javascript code here 
   </script>   
</head>
<body>
........
</body>
</html>

jQuery 라이브러리 함수 호출하기

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

To do this, we register a ready event for the document as follows:

$(document).ready(function() {
   // do stuff when DOM is ready
 });

To call upon any jQuery library function, use HTML script tags as shown below:

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   
   <script type="text/javascript" language="javascript">
   // <![CDATA[
   $(document).ready(function() {
      $("div").click(function() {
        alert("Hello world!");
      });
   });
   // ]]>
   </script>

</head>
<body>
<div id="newdiv">
Click on this to see a dialogue box.
</div>
</body>
</html>

사용자 정의 스크립트 사용하기

custom.js 파일에 내가 정의한 기능을 따로 정의합니다.

/* Filename: custom.js */
$(document).ready(function() {
  $("div").click(function() {
 alert("Hello world!");
  });
});

다른 페이지에서 custom.js 파일내에 정의된 기능을 실행하고자 할때에는 이 파일을 추가하면 됩니다

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" 
   src="/jquery/custom.js"></script>
</head>
<body>
<div id="newdiv">
Click on this to see a dialogue box.
</div>
</body>
</html>

다른 라이브러리 동시 사용하기:

jQuery 를 다른 라이브러리와 함께 사용하게 되면 충돌가능성이 있을 수 있습니다. $ 기호를 다른 라이브러리에서도 사용할 수 있기 때문입니다.   

 $.noConflict() 메소드를 실행하면 $ 변수를 먼저 import한 라이브러리에 우선권을 넘기게 됩니다. jQuery에서 $는 단지 jQuery의 alias일 뿐이므로 $를 쓰지 않아도 전혀 문제될 것이 없습니다. 사용법을 한번 보시죠. 

// Import other library
// Import jQuery
$.noConflict();
// Code that uses other library's $ can follow here.

이 방법은 특히 .ready() 메소드의 기능과 쓰일때 강력하다고 하네요. jQuery의 $를 사용할 수 있게 해주기 때문이죠.  

사용법을 한번 보실까요? 

// Import other library
// Import jQuery
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
DOM Element

Reference : http://www.tutorialspoint.com/jquery/jquery-overview.htm