Javascript
Javascript
자바스크립트는 객체 기반의 스크립트 프로그래밍 언어입니다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있습니다. 또한 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있이며. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었습니다. 자바스크립트가 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문에 바탕을 뒀기 때문이고, 자바와 자바스크립트는 직접적인 관련성이 없습니다. 이름과 구문 외에는 자바보다 셀프나 스킴과 유사성이 많습니다.
2013년 1월 기준으로, 가장 최근 버전은 자바스크립트 1.8.5이고, 파이어폭스 3에서 지원되며. 표준 ECMA-262 3판에 대응하는 자바스크립트 버전은 1.5입니다. ECMA스크립트는 쉽게 말해 자바스크립트의 표준화된 버전이다. 모질라 1.8 베타 1이 나오면서 XML에 대응하는 확장 언어인 E4X(ECMA-357)를 부분 지원하게 되었다. 자바스크립트는 브라우저마다 지원되는 버전이 다릅니다.
자바 스크립트 참조
자바 스크립트 숫자 참조
JavaScript에는 한 가지 유형의 숫자 만 있습니다. 숫자는 소수를 사용하거나 사용하지 않고 쓸 수 있습니다.
숫자 속성
| 속성 | 설명 |
| constructor | JavaScript의 Number 프로토타입을 만든 기능 반환 |
| MAX_VALUE | JavaScript에서 가능한 최대 수 반환 |
| MIN_VALUE | JavaScript에서 가능한 최소 수 반환 |
| NEGATIVE_INFINITY | 음의 무한대를 나타냄(오버플로우 시 반환됨) |
| NaN | "Not a Number" 값을 나타냄 |
| POSITIVE_INFINITY | Represents infinity (returned on overflow) |
| prototype | 개체에 속성 및 메서드를 추가할 수 있음 |
숫자 방법
| Method | 설명 |
| isFinite() | 값이 유한한 수인지 확인 |
| isInteger() | 값이 정수인지 확인 |
| isNaN() | 값이 숫자인지 NAN인지 확인하십시오. |
| isSafeInteger() | 값이 안전한 정수인지 확인 |
| toExponential(x) | 숫자를 지수 표기법으로 변환 |
| toFixed(x) | 소수점 뒤의 숫자 x를 사용하여 숫자 형식 지정 |
| toLocaleString() | 로컬 설정에 따라 숫자를 문자열로 변환 |
| toPrecision(x) | 숫자를 x 길이로 포맷 |
| toString() | 숫자를 문자열로 변환 |
| valueOf() | 숫자의 원시 값을 반환함 |
자바 스크립트 연산자
JavaScript 연산자는 값 할당, 값 비교, 산술 연산 등을 수행하는 데 사용됩니다.
자바 스크립트 산술 연산자
산술 연산자는 변수 및 / 또는 값 사이의 산술을 수행하는 데 사용됩니다.
점을 감안 y는 5 = 테이블 아래 산술 연산자를 설명합니다
| Operator | Description | Example | Result in y | Result in x |
| + | Addition | x = y + 2 | y = 5 | x = 7 |
| - | Subtraction | x = y - 2 | y = 5 | x = 3 |
| * | Multiplication | x = y * 2 | y = 5 | x = 10 |
| / | Division | x = y / 2 | y = 5 | x = 2.5 |
| % | Modulus (division remainder) | x = y % 2 | y = 5 | x = 1 |
| ++ | Increment | x = ++y | y = 6 | x = 6 |
| x = y++ | y = 6 | x = 5 | ||
| -- | Decrement | x = --y | y = 4 | x = 4 |
| x = y-- | y = 4 | x = 5 |
자바 스크립트 할당 연산자
할당 연산자는 JavaScript 변수에 값을 할당하는 데 사용됩니다.
감안할 때 X = 10 및 y는 = 5 , 아래 표는 대입 연산자를 설명합니다
| Operator | Example | Same As | Result in x |
| = | x = y | x = y | x = 5 |
| += | x += y | x = x + y | x = 15 |
| -= | x -= y | x = x - y | x = 5 |
| *= | x *= y | x = x * y | x = 50 |
| /= | x /= y | x = x / y | x = 2 |
| %= | x %= y | x = x % y | x = 0 |
자바 스크립트 문자열 연산자
+ 연산자와 + = 연산자를 사용하여 문자열을 연결 (추가) 할 수도 있습니다.
점을 감안 텍스트 1 = "좋은" , 텍스트 2 = "모닝" , 및 텍스트 3 = "" 아래의 표는 연산자를 설명합니다
| Operator | Example | text1 | text2 | text3 |
| + | text3 = text1 + text2 | "Good " | "Morning" | "Good Morning" |
| += | text1 += text2 | "Good Morning" | "Morning" | "" |
비교 연산자
비교 연산자는 논리 문에서 변수 또는 값 사이의 동등성 또는 차이를 판별하는 데 사용됩니다.
점을 감안 x는 = 5 , 아래 표는 비교 연산자를 설명합니다.
| Operator | Description | Comparing | Returns |
| == | equal to | x == 8 | false |
| x == 5 | true | ||
| === | equal value and equal type | x === "5" | false |
| x === 5 | true | ||
| != | not equal | x != 8 | true |
| !== | not equal value or not equal type | x !== "5" | true |
| x !== 5 | false | ||
| > | greater than | x > 8 | false |
| < | less than | x < 8 | true |
| >= | greater than or equal to | x >= 8 | false |
| <= | less than or equal to | x <= 8 | true |
조건부 (Ternary) 연산자
조건부 연산자는 조건에 따라 변수에 값을 할당합니다.
| Syntax | Example |
| variablename = (condition) ? value1:value2 | voteable = (age < 18) ? "Too young":"Old enough"; |
예 : 변수 "나이"가 18 미만의 값인 경우 변수 "투표 가능"의 값은 "너무 젊음"이되고 그렇지 않으면 투표 가능 값이 "오래됨"이됩니다.
논리 연산자
논리 연산자는 변수 또는 값 사이의 논리를 결정하는 데 사용됩니다.
x = 6이고 y = 3 이라고 가정하면 아래 표는 논리 연산자를 설명합니다.
| Operator | Description | Example |
| && | and | (x < 10 && y > 1) is true |
| || | or | (x === 5 || y === 5) is false |
| ! | not | !(x === y) is true |
자바 스크립트 비트 연산자
비트 연산자는 32 비트 숫자에서 작동합니다. 연산의 모든 숫자 피연산자는 32 비트 숫자로 변환됩니다. 결과는 JavaScript 번호로 다시 변환됩니다.
| Operator | Description | Example | Same as | Result | Decimal |
| & | AND | x = 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | | OR | x = 5 | 1 | 0101 | 0001 | 0101 | 5 |
| ~ | NOT | x = ~ 5 | ~0101 | 1010 | 10 |
| ^ | XOR | x = 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
| << | Left shift | x = 5 << 1 | 0101 << 1 | 1010 | 10 |
| >> | Right shift | x = 5 >> 1 | 0101 >> 1 | 0010 | 2 |
위의 예제는 4 비트 부호없는 예제를 사용합니다. 그러나 JavaScript는 32 비트 부호있는 숫자를 사용합니다.
이 때문에 JavaScript에서 ~ 5는 10을 반환하지 않으며 -6을 반환합니다.
~ 00000000000000000000000000000101은 11111111111111111111111111111010을 반환합니다.
연산자 유형
과 typeof 연산자는 변수, 목적 함수 또는 표현식의 타입을 리턴
예시
typeof "John" // Returns string
typeof 3.14 // Returns number
typeof NaN // Returns number
typeof false // Returns boolean
typeof [1, 2, 3, 4] // Returns object
typeof {name:'John', age:34} // Returns object
typeof new Date() // Returns object
typeof function () {} // Returns function
typeof myCar // Returns undefined (if myCar is not declared)
typeof null // Returns object- NaN의 데이터 유형은 숫자입니다
- 배열의 데이터 유형은 객체입니다
- 날짜의 데이터 유형은 객체입니다
- 널의 자료 유형은 오브젝트입니다
- 정의되지 않은 변수의 데이터 유형이 정의되지 않았습니다
JavaScript 객체가 배열 (또는 날짜)인지 여부를 정의 하기 위해 typeof 를 사용할 수 없습니다 .
삭제 연산자
삭제 연산자는 객체의 속성을 삭제합니다 :
예시
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
delete person.age; // or delete person["age"];delete 연산자는 속성 값과 속성 자체를 모두 삭제합니다.
삭제 후에는 속성을 다시 추가하기 전에 사용할 수 없습니다.
삭제 연산자는 객체 속성에 사용하도록 설계되었습니다. 변수 나 함수에는 영향을 미치지 않습니다.
참고 : 삭제 연산자는 사전 정의 된 JavaScript 오브젝트 특성에 사용해서는 안됩니다. 응용 프로그램이 중단 될 수 있습니다.
instanceof 연산자
instanceof 진정한 운영자 반환 지정된 객체가 지정된 객체의 인스턴스 인 경우
예시
var cars = ["Saab", "Volvo", "BMW"];
cars instanceof Array; // Returns true
cars instanceof Object; // Returns true
cars instanceof String; // Returns false
cars instanceof Number; // Returns false보이드 연산자
이 연산자는 종종 "void (0)"을 사용하여 정의되지 않은 프리미티브 값을 얻는 데 사용됩니다 (반환 값을 사용하지 않고 표현식을 평가할 때 유용함).
예시
<a href="javascript:void(0);">
Useless link
</a>
<a href="javascript:void(document.body.style.backgroundColor='red');">
Click me to change the background color of body to red
</a>자바 스크립트 문자열 참조
자바 스크립트 문자열
JavaScript 문자열은 "John Doe"와 같은 일련의 문자를 저장합니다.
문자열은 큰 따옴표 나 작은 따옴표 안에있는 텍스트 일 수 있습니다.
var carName1 = "Volvo XC60";
var carName2 = 'Volvo XC60';
문자열 인덱스는 0부터 시작합니다. 첫 번째 문자는 위치 0에 있고 두 번째 문자는 1에 있습니다.
문자열 속성과 메소드
"John Doe"와 같은 기본 값은 속성이나 메서드를 가질 수 없습니다 (객체가 아니기 때문에).
그러나 JavaScript를 사용하면 메소드 및 특성을 실행할 때 기본 값을 오브젝트로 처리하기 때문에 메소드 및 특성도 기본 값에 사용할 수 있습니다.
문자열 속성
| 속성 | 설명 |
| constructor | 문자열의 생성자 함수를 반환합니다 |
| length | 문자열 길이 반환합니다 |
| prototype | 개체에 속성 및 메서드를 추가할 수 있습니다 |
문자열 메소드
| 메서드 | 설명 |
| charAt() | 지정된 인덱스(위치)에서 문자를 반환합니다 |
| charCodeAt() | 지정된 인덱스에 있는 문자의 유니코드를 반환합니다 |
| concat() | 둘 이상의 문자열을 결합하고 새 문자열을 반환합니다 |
| endsWith() | 문자열이 지정된 문자열/문자로 끝나는지 확인합니다 |
| fromCharCode() | 유니코드 값을 문자로 변환합니다 |
| includes() | 문자열에 지정된 문자열/문자가 포함되어 있는지 확인합니다 |
| indexOf() | 문자열에서 지정한 값의 처음 발견된 위치를 반환합니다 |
| lastIndexOf() | 문자열에서 지정된 값을 마지막으로 찾은 위치를 반환합니다 |
| localeCompare() | 현재 로케일의 두 문자열 비교합니다 |
| match() | 문자열을 검색하여 정규식에 대해 일치 항목 반환합니다 |
| repeat() | 기존 문자열의 복사본 개수가 지정된 새 문자열 반환합니다 |
| replace() | 문자열에 지정된 값 또는 정규식이 있는지 검색하고 지정된 값이 대체되는 새 문자열을 반환합니다 |
| search() | 문자열에 지정된 값 또는 정규식을 검색하고 일치 항목의 위치 반환합니다 |
| slice() | 문자열의 일부를 추출하고 새 문자열을 반환합니다 |
| split() | 문자열을 하위 문자열 배열로 분할합니다 |
| startsWith() | 문자열이 지정된 문자로 시작하는지 확인합니다 |
| substr() | 지정된 시작 위치에서 시작하여 지정된 수의 문자를 통해 문자열에서 문자 추출합니다 |
| substring() | 문자열에서 지정된 두 인덱스 사이의 문자 추출합니다 |
| toLocaleLowerCase() | 호스트의 로케일에 따라 문자열을 소문자로 변환합니다 |
| toLocaleUpperCase() | 호스트의 로케일에 따라 문자열을 대문자로 변환합니다 |
| toLowerCase() | 문자열을 소문자로 변환합니다 |
| toString() | 문자열 개체의 값 반환합니다 |
| toUpperCase() | 문자열을 대문자로 변환합니다 |
| trim() | 문자열의 양쪽 끝에서 공백 제거합니다 |
| valueOf() | 문자열 개체의 원시 값 반환합니다 |
모든 문자열 메서드는 새로운 값을 반환합니다. 원래 변수는 변경하지 않습니다.
문자열 HTML 래퍼 메소드
HTML 랩퍼 메소드는 해당 HTML 태그 안에 랩핑 된 문자열을 리턴합니다.
이러한 방법은 표준 방법이 아니며 모든 브라우저에서 예상대로 작동하지 않을 수 있습니다.
| 메소드 | 설명 |
| anchor() | anchor를 작성합니다 |
| big() | 큰 글꼴을 사용하여 문자열 표시합니다 |
| blink() | blink() 문자열 표시합니다 |
| bold() | 문자열을 굵게 표시합니다 |
| fixed() | 고정 피치 글꼴을 사용하여 문자열 표시합니다 |
| fontcolor() | 지정된 색상을 사용하여 문자열 표시합니다 |
| fontsize() | 지정된 크기를 사용하여 문자열 표시합니다 |
| italics() | 문자열을 기울임꼴로 표시합니다 |
| link() | 문자열을 하이퍼링크로 표시합니다 |
| small() | 작은 글꼴을 사용하여 문자열 표시합니다 |
| strike() | 취소선이 있는 문자열 표시합니다 |
| sub() | 문자열을 첨자 텍스트로 표시합니다 |
| sup() | 문자열을 위첨자 텍스트로 표시합니다 |
JSON
JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다 JSON이 Javascript 객체 문법과 매우 유사하지만 딱히 Javascript가 아니더라도 JSON을 읽고 쓸 수 있는 기능이 다수의 프로그래밍 환경에서 제공됩니다.
JSON은 문자열 형태로 존재합니다 — 네트워크를 통해 전송할 때 아주 유용하죠. 데이터에 억세스하기 위해서는 네이티브 JSON 객체로 변환될 필요가 있습니다. 별로 큰 문제는 아닌 것이 Javascript는 JSON 전역 객체를 통해 문자열과 JSON 객체의 상호변환을 지원합니다.
JSON 구조
위에서 설명했듯이 JSON은 Javascript 객체 리터럴 문법을 따르는 문자열입니다. JSON 안에는 마찬가지로 Javascript의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언 그리고 다른 객체를 포함할 수 있습니다.
JSON에서의 배열
앞서 JSON 텍스트는 기본적으로 자바스크립트의 오브젝트와 비슷하게 생겼다고 언급하였습니다. 그리고 그것은 대부분 맞습니다. "대부분 맞다"라고 말한 이유는 자바스크립트의 배열 또한 JSON에서 유효하기 때문입니다.
참고
- JSON은 순수히 데이터 포맷입니다. 오직 프로퍼티만 담을 수 있습니다. 메서드는 담을 수 없습니다.
- JSON은 문자열과 프로퍼티의 이름 작성시 큰 따옴표만을 사용해야 합니다. 작은 따옴표는 사용불가합니다.
- 콤마나 콜론을 잘못 배치하는 사소한 실수로 인해 JSON파일이 잘못되어 작동하지 않을 수 있습니다. JSONLint같은 어플리케이션을 사용해 JSON 유효성 검사를 할 수 있습니다.
- JSON은 JSON내부에 포함할 수 있는 모든 형태의 데이터 타입을 취할 수 있습니다. 즉, 배열이나 오브젝트 외에도 단일 문자열이나 숫자또한 유효한 JSON 오브젝트가 됩니다.
- 자바스크립트에서 오브젝트 프로퍼티가 따옴표로 묶이지 않을 수도 있는 것과는 달리, JSON에서는 따옴표로 묶인 문자열만이 프로퍼티로 사용될 수 있습니다.
JSON 가져오기
JSON을 가져오기 위해서는, XMLHttpRequest (때론 XHR)로 불리는 API를 사용하면 된다. 이것은 매우 유용한 JavaScript 오브젝트로 JavaScript (e.g. images, text, JSON, even HTML snippets)를 통해 우리가 서버로 부터 다양한 리소스를 가져오는 요청을 만들어 줍니다다. 즉, 전체 페이지를 불러오지 않고도 필요한 부분만을 업데이트 할 수 있습니다.