자바스크립트 JSON

JSON은 데이터를 저장하고 전송하기 위한 형식입니다. JSON은 데이터가 서버에서 웹 페이지로 전송 될 때 자주 사용됩니다. JSON은 무엇인가? JSON은 JavaScript Object Notation의 약자입니다. JSON은 간단한 데이터 교환 형식(lightweight data interchange format)입니다. JSON은 언어와 무관(language independent)합니다. * JSON은 “스스로 설명(self-describing)”하고 이해하기 쉽습니다. * JSON 구문은 자바스크립트 객체 표기법(JavaScript object notation) 구문에서 파생되지만, JSON 형식은 텍스트(text only)입니다. JSON 데이터를 읽고 생성하는(reading and generating) 코드는 모든 프로그래밍 언어로 작성할 수 있습니다. JSON Example 이 JSON 구문은 employees 객체를 정의합니다: 3개의 employee 레코드(객체(objects))의 배열입니다: JSON Example { “employees”:[ {“firstName”:”John”, “lastName”:”Doe”}, {“firstName”:”Anna”, “lastName”:”Smith”}, {“firstName”:”Peter”, “lastName”:”Jones”} ] } JSON 형식(Format) 자바스크립트 객체(Objects)를 평가합니다(Evaluates) JSON 형식은 구문적으로 자바스크립트 객체를 만드는 코드와 동일합니다. 이러한 유사성 때문에, 자바스크립트 프로그램은 […]

자바스크립트 버전

자바스크립트는 1995년 Brendan Eich가 발명했으며, 1997년에 ECMA 표준이 되었습니다.ECMA-262는 이 표준의 공식 이름입니다. ECMAScript는 이 언어의 공식적인 이름입니다. ECMAScript Editions Year Name Description 1997 ECMAScript 1First Edition. 1998 ECMAScript 2Editorial changes only. 1999 ECMAScript 3Added Regular Expressions.Added try/catch. ECMAScript 4Was never released. 2009 ECMAScript 5Added “strict mode”.Added JSON support. 2011 ECMAScript 5.1Editorial changes. 2015 ECMAScript 6Added classes and modules. 2016 ECMAScript 7Added exponential operator (**). Added Array.prototype.includes. ECMAScript 6은 ECMAScript 2015라고도 합니다. ECMAScript 7은 ECMAScript 2016이라고도합니다. Browser Support ECMAScript 3은 모든 브라우저에서 완벽하게 지원됩니다. ECMAScript 5는 모든 최신(modern) 브라우저*에서 완벽하게 지원됩니다.. ECMAScript 6은 모든 최신 브라우저에서 부분적(partially)으로 지원됩니다. ECMAScript 7은 모든 브라우저에서 제대로(poorly) 지원되지 않습니다. * Internet Explorer 9은 ECMAScript […]

자바스크립트 예약어 (JavaScript Reserved Words)

자바스크립에서 이런 예약어를 변수, 레이블 또는 함수 이름(variables, labels, or function names)으로 사용할 수 없습니다: abstract arguments await* boolean break byte case catch char class* const continue debugger default delete do double else enum* eval export* extends* false final finally float for function goto if implements import* in instanceof int interface let* long native new null package private protected public return short static super* switch synchronized this throw throws transient true try typeof var void volatile while with yield *로 표시된 단어는 ECMAScript 5 및 6에서 새로 추가되었습니다. JS Versions 장에서 다른 자바스크립트 버전을 참고하십시오. 삭제된 예약어 다음 예약어는 ECMAScript 5/6 standard에서 삭제되었습니다: abstract boolean byte char double final float […]

자바스크립트 성능 (Performance)

자바스크립트 코드 속도를 높이는 방법. 루프(Loops)내의 활동(Activity)을 줄인다 루프는 프로그램에 자주 사용됩니다. for 문을 포함하고 있는 루프의 각 명령문(statement)은 루프를 반복할 때마다 실행됩니다. 명령문이나 할당(Statements or assignments)을 루프 외부에 배치하면, 루프를 더 빠르게 실행합니다. Bad: var i; for (i = 0; i < arr.length; i++) { Better Code: var i; var l = arr.length; for (i = 0; i < l; i++) { 나쁜 코드는 루프를 반복할 때마다 배열의 length 속성에 액세스합니다. 더 나은 코드는, 루프 외부의 length 속성에 액세스함으로, 루프를 더 빠르게 실행합니다. DOM 액세스(access) 줄이기 HTML DOM에 액세스하는 것은, 다른 자바스크립트 문과 비교할 때, 매우 느립니다. DOM 요소에 여러 번 액세스하려는 경우, 한 번 액세스하고, 로컬 변수로 사용하십시오: […]

자바스크립트 일반적인 실수 (Common Mistakes)

이 장에서는 일반적인 자바스크립트 오류를 알아봅니다. 실수로 할당 연산자(Assignment Operator) 사용 프로그래머가 if 문안에 비교 연산자 (==) 대신, 실수로 할당 연산자 (=)을 사용하면, 자바스크립트 프로그램에서 예기치 않은 결과가 발생할 수 있습니다. 이 if 문은 x가 10과 같지 않으므로 (예상대로) false를 반환합니다: false var x = 0; document.getElementById(“demo”).innerHTML = Boolean(x == 10); 이 if 문은 10이 참(true)이므로 true(예상과 다를 수 있음)를 반환 합니다.: true var x = 0; document.getElementById(“demo”).innerHTML = Boolean(x = 10); 이 if 문은 0이 거짓(false)(예상과 다를 수 있음)이므로 false를 반환합니다: not equal to 10: false var x = 0; document.getElementById(“demo”).innerHTML = Boolean(x = 0); 할당(assignment)은 항상 할당 값(value of the assignment)을 반환합니다. 예상되는 느슨한 비교Expecting Loose Comparison 일반적인 […]

자바스크립트 우수 사례 (Best Practices)

전역변수(global variables), new, ==, eval()는 피한다. 전역변수(Global Variables) 피하기 전역변수 사용을 최소화합니다. 여기에는 모든 데이터 유형, 객체 및 함수(data types, objects, and functions)가 포함됩니다. 전역변수 및 함수는 다른 스크립트가 덮어쓸 수 있습니다. 대신 로컬변수를 사용하고 closures 사용 방법을 배웁니다. 항상 지역변수 선언 함수에서 사용되는 모든 변수는 지역변수로 선언해야 합니다. 지역변수는 var 키워드로 선언해야합니다. 그렇지 않으면 전역변수가 됩니다. Strict mode는 선언되지 않은 변수(undeclared variables)를 허용하지 않습니다. 상단에 선언 모든 선언을 각 스크립트 또는 함수의 맨 위에 두는 것이 좋은 코딩 방법입니다. 이것은: 더 깨끗한 코드 제공 지역변수를 찾을 수 있는 단일 장소 제공 원하지 않는(내재된) 전역변수를 쉽게 피할 수 있음 원하지 않는 재선언(re-declarations) 가능성 감소 // Declare at the beginning var […]

자바스크립트 스타일 가이드 및 코딩 규칙 (Style Guide and Coding Conventions)

모든 자바스크립트 프로젝트에 항상 동일한 코딩 규칙을 사용하십시오. 자바스크립트 코딩 규칙 코딩 규칙은 프로그래밍의 스타일 가이드 라인(style guidelines for programming)입니다 . 일반적으로 다음을 포함합니다: 변수(variables) 및 함수(functions)의 이름 지정 및 선언 규칙(Naming and declaration rules) 공백(white space), 들여 쓰기(indentation) 및 설명(comments) 사용 규칙. 프로그래밍 실습 및 원리(practices and principles) 코딩 규칙은 품질을 보증한다(secure quality): 코드 가독성 향상 코드 유지보수가 쉬워집니다. 코딩 규칙은 팀이 따라야 하는 규칙을 문서화한 규칙이거나, 개인적인 코딩 습관(practice)일 수 있습니다.다. 이 페이지는 W3Schools에서 사용하는 일반적인 자바스크립트 코딩 규칙을 설명합니다. 다음 장의 “Best Practices”를 읽고, 코딩 실수(pitfalls)를 피하는 방법도 배워야 합니다. 변수 이름 (Variable Names) W3schools에서는 식별자(identifier)(변수 및 함수) 이름에 camelCase를 사용합니다. 모든 이름은 문자(letter)로 시작합니다. 이 페이지의 […]

자바스크립트 Use Strict

“use strict”;는 자바스크립트 코드가 “strict mode”에서 실행되게 정의합니다. “use strict” 지침(Directive) “use strict” 지침은 자바스크립트 1.8.5(ECMAScript 버전 5)의 새로운 기능입니다. 이것은 문(a statement)이 아니고, 리터럴 표현식(a literal expression)이며 이전 버전의 자바스크립트에서는 무시됩니다 “use strict”는 코드를 “strict mode”로 실행하도록 지시합니다. “strict mode”에서는 선언되지 않은 변수(undeclared variables)는 사용할 수 없습니다. Strict mode가 지원되는 버전:IE from version 10. Firefox from version 4. Chrome from version 13. Safari from version 5.1.Opera from version 12. Strict Mode 선언 Strict mode는 스크립트 또는 함수의 시작 부분에 use strict;를 추가하면 선언됩니다. 스크립트 시작 부분에 선언되면 전역 범위(global scope)에 적용됩니다 (스크립트의 모든 코드가 strict mode로 실행됩니다): Example “use strict” 사용: 선언되지 않은 변수 사용은 허용되지 않습니다. 오류 보고서를 […]

자바스크립트 호이스팅 (JavaScript Hoisting)

Hoisting은 선언(declarations )을 맨 위로 이동시키는 자바스크립트의 기본 동작(default behavior)입니다. 자바스크립트 선언(Declarations)은 맨 위로 끌어올려진다(Hoisted) 자바스크립트에서 변수(a variable)는 먼저 사용하고 나중에 선언될 수 있다. 즉, 변수는 선언되기 전에 사용할 수 있다. Example 1과 Example 2는 같은 결과를 반환합니다: Example 1 x = 5; // Assign 5 to x elem = document.getElementById(“demo”); // Find an element elem.innerHTML = x; // Display x in the element var x; // Declare x x = 5; // Assign 5 to x elem = document.getElementById(“demo”); // Find an element elem.innerHTML = x; // Display x in the element var x; // Declare x Example 2 var x; // Declare x x = 5; // Assign […]

자바스크립트 디버깅 (Debugging)

새로운 컴퓨터 코드(some new computer code)를 작성할 때마다, 오류가 발생할 수 있습니다. 코드 디버깅 (Code Debugging) 프로그래밍 코드에는 구문 오류 또는 논리 오류(syntax errors, or logical errors)가 포함될 수 있습니다. 이러한 오류의 대부분은 진단하기가 어렵습니다. 프로그래밍 코드에 오류가 있지만 아무 일도 일어나지 않는 경우가 많습니다. 오류 메시지가 없으므로 오류를 검색 할 위치를 알 수 없습니다. 프로그래밍 코드에서 오류를 찾는(그리고 수정하는) 것을 코드 디버깅이라고 합니다. 자바스크립트 디버거(Debuggers) 디버깅은 쉽지 않습니다. 다행히도 모든 최신 브라우저에는 내장되어 있는 자바스크립트 디버거가 있습니다. 내장된 디버거는, 사용자에게 오류를 보고하도록, 켜고 끌 수 있습니다. 디버거를 사용하여, 중단점(breakpoints)(코드 실행을 중지할 수있는 위치)을 설정하고, 코드가 실행되는 동안 변수를 검사할 수도 있습니다. 그렇지 않으면 이 페이지 하단의 순서에 따르고, 브라우저에서 […]