jQuery API 정리
Javascript 기본 제공 방법
1. ""hello".charAt( 0 ) // "h" => 문자 선택
2 "hello".toUpperCase() // "HELLO"
3 "Hello".toLowerCase() // "hello"
4 "hello".replace( /e|o/g, "x" ) // "hxllx" => 문자열 대체
5 "1,2,3".split( "," ) // [ "1", "2", "3" ] => 기호 기준으로 자르기
길이 속성
1. "Hello".length // 5
2 " ".length // 0
False 기본값
빈 문자열의 기본값은 False 이다.
!! => 이중 부정
1. !!"" // false
숫자
1. typeof 12 // "number"
2. typeof 3.543 // "number"
False 숫자 기본값
0이면 기본값은 false이다.
1. !0 // true
2. !!0 // false
3. !-1 // false
수학 연산식
1. Math.PI // 3.141592653589793
2. Math.cos( Math.PI ) // -1
Parsing Numbers
parseInt와 parseFloat는 문자열을 숫자로 구문 분석하는데 도움이 된다.
1. parseInt( "123" ) = 123 // (implicit decimal)
2. parseInt( "010" ) = 8 // (implicit octal)
3. parseInt( "0xCAFE" ) = 51966 // (implicit hexadecimal)
4. parseInt( "11", 2 ) = 3 // (explicit binary)
5. parseFloat( "10.10" ) = 10.1
숫자를 문자열로
1. "" + 1 + 2; // "12"
2. "" + ( 1 + 2 ); // "3"
3. "" + 0.0000001; // "1e-7"
4. parseInt( 0.0000001 ); // 1 (!)
String
1. String( 1 ) + String( 2 ); // "12"
2. String( 1 + 2 ); // "3"
NaN과 infinity는 모두 "숫자 유형"이다.
1. typeof NaN // "number"
2. typeof Infinity // "number"
Javascript Boolean
1. if ( true ) console.log( "always!" );
2. if ( false ) console.log( "never!" );
배열 표기법
반복 작업
for-in-loop를 사용하면 객체를 반복하는 작업이 더 편하다.
Boolean 기본값
속성이 있든 없든 개체는 기본적으로 false로 설정되지 않는다.
1. !{} // false
2. !!{} // true
반복 작업
3. 배열 표기법을 제거하여 각 반복에 대해 채워지는 변수를 정의.
배열에 0 또는 빈 문자열이 포함되어 있으면 작동하지 않음
내장 메서드
var x = [ 0, 3, 1, 2 ];
x.reverse() // [ 2, 1, 3, 0 ]
x.join(" – ") // "2 - 1 - 3 - 0"
x.pop() // [ 2, 1, 3 ]
x.unshift( -1 ) // [ -1, 2, 1, 3 ]
x.shift() // [ 2, 1, 3 ]
x.sort() // [ 1, 2, 3 ]
x.splice( 1, 2 ) // [ 2, 3 ]
날짜
1. new Date();
2. new Date( 2014, 0, 1, 8, 15 );
function
function named() {}
var handler = function() {}
익명함수
$( document ).ready(function() {});
$( "a" ).click(function() {});
$.ajax({
url: "someurl.php",
success: function() {}
});
인수
함수 내에서 특수 변수 "인수"를 사용할 수 있다. 길이 속성이 있다는 점에서 배열과 유사하지만
배열의 기본 제공 메서드가 없다. 의사 배열의 요소는 함수 호출의 인수다.
function log( x ) {
console.log( typeof x, arguments.length );
}
log(); // "undefined", 0
log( 1 ); // "number", 1
log( "1", "2", "3" ); // "string", 3
컨택스트 호출 및 적용
Javascript에서 변수 "this"는 항상 현재 컨텍스트를 참조한다.
$( document ).ready(function() {
// this refers to window.document
});
$( "a" ).click(function() {
// this refers to an anchor DOM element
});
call : 모든 인수를 함수에 대한 인수로 전달
apply : 배열을 인수로 받아들인다.
function scope() {
console.log( this, arguments.length );
}
scope() // window, 0
scope.call( "foobar", [ 1, 2 ] ); // "foobar", 1
scope.apply( "foobar", [ 1, 2 ] ); // "foobar", 2
범위
// global
var x = 0;
(function() {
// private
var x = 1;
console.log( x ); // 1
})();
console.log( x ); // 0
전역 범위에서 변수 x를 정의한 다음 익명 함수를 정의하고 실행한다.
함수 내에서 다른 변수 x가 다른 값으로 정의된다. 해당 함수 내에서만 볼 수 있으며 전역 변수를 덮어쓰지 않는다.
콜백
인수 또는 옵션으로 일부 메서드에 전달되는 일반 Javascript 함수다.
일부 콜백은 특정 상태가 트리거 될 때 사용자에게 반응할 기회를 주기 위해 호출되는 이벤트다.
$( "body" ).click(function( event ) {
console.log( "clicked: " + event.target );
});
간단한 onblur 유효성 검사
$( "input[type='text']" ).on( "blur", function() {
if( !this.value ) {
alert( "Please enter some text!" );
}
});
!this value = > 아무런 값이 입력되지 않은 경우
XMLHttpRequest
jQuery의 Ajax 함수 중 일부는 XMLHttpRequest(XHR) 객체를 반환하거나 이를 성공/오류/완료 핸들러에 인수로 전달하여 요청에 대한 추가 처리 또는 모니터링을 수행할 수 있다.
Ajax 함수는 XHR 객체가 요청에서 실제로 사용될 때만 XHR 객체를 반환하거나 전달한다.
예를 들어 JSONP 요청 및 도메인 간 GET 요청은 XHR 개체가 아닌 스크립트 요소를 사용한다.