[jQuery] 2. jQuery Basics ( 기본 )

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:

Method	Description
charAt()	Returns the character at the specified index.
concat()	Combines the text of two strings and returns a new string.
forEach()	Calls a function for each element in the array.
indexOf()	Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.
length()	Returns the length of the string.
pop()	Removes the last element from an array and returns that element.
push()	Adds one or more elements to the end of an array and returns the new length of the array.
reverse()	Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.
sort()	Sorts the elements of an array.
substr()	Returns the characters in a string beginning at the specified location through the specified number of characters.
toLowerCase()	Returns the calling string value converted to lower case.
toString()	Returns the string representation of the number's value.
toUpperCase()	Returns the calling string value converted to uppercase.

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