과목표

JS 강의

JS 버전

JS 객체

JS 함수

JS 클래스

JS Async

JS HTML DOM

JS 브라우저 BOM

JS Web API

JS AJAX

JS JSON

JS 대 jQuery

JS 그래픽

JS 예제

JS 참조 매뉴얼

선택 과목

강의 추천：

CodeW3C.com 보물상자

JavaScript 스타일 가이드

이전 페이지 JS 디버깅
다음 페이지 JS 최고의 실천 방법

모든 JavaScript 프로젝트에 일관된 코드 규약을 사용하십시오.

JavaScript 코드 규약

코드 규약(Coding conventions)은 다음을 의미합니다：프로그래밍 스타일 가이드라인。이 원칙은 주로 다음과 같습니다：

변수와 함수의 이름과 선언 규칙
공백, 들여쓰기 및 주석의 규칙
프로그래밍 습관과 지침

코드 규약품질을 보장하십시오：

코드 가독성 개선
코드 유지보수성 향상

코드 규약은 팀이 준수하는 문서화된 규칙이나 개인의编码 습관일 수 있습니다.

이 페이지는 CodeW3C.com에서 사용하는 일반 JavaScript 코드 규약을 소개합니다.

당신은 다음 장 “최고의 실천”을 계속 읽어야 하며,编码의 트랩을 피하는 방법을 배워야 합니다.

변수 이름

CodeW3C.com에서 우리는 식별자 이름(변수와 함수)에 대해 사용했습니다호도식 대소문자.

모든 이름은알파벳시작.

이 페이지의 하단에서 우리는 이름 규칙에 대해 더 자세히 논의할 것입니다.

firstName = "Bill";
lastName = "Gates";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

연산자 주위의 공백

연산자(= + - * /)와 컴마 뒤에 항상 공백을 추가합니다

예제

var x = y + z;
var values = ["Volvo", "Saab",  "Fiat"];

코드 인덱싱

항상 코드 블록 인덱싱에 4 개의 공백을 사용합니다

함수

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

백스페이스를 사용하여 인덱싱을 피하고, 다른 편집기에서 탭의 해석이 다를 수 있습니다.

문장 규칙

단순 문장에 대한 일반 규칙：

단일 문장을 항상 세미콜론으로 끝내세요

예제

var values = ["Volvo", "Saab",  "Fiat"];
var person = {
    firstName: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

복잡한 문장에 대한 일반 규칙：

첫 번째 줄의 끝에 개시 괄호를 씁니다
개시 괄호 앞에 공백을 사용합니다
닫는 괄호를 앞에 공백 없이 새 줄에 씁니다
복잡한 문장을 끝내지 마세요 세미콜론으로

함수：

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

루프：

for (i = 0; i < 5; i++) {
    x += i;
}

조건：

if (time < 20) {
    greeting = "Good day";
} else {
     greeting = "Good evening";
}

객체 규칙

객체 정의에 대한 일반 규칙：

개시 괄호와 객체 이름을 같은 줄에 둡니다
속성과 값 사이에 콜론과 공백을 사용합니다
마지막 속성 값 쌍 뒤에 컴마를 쓰지 마세요
닫는 괄호를 앞에 공백 없이 새 줄에 씁니다
객체 정의를 항상 세미콜론으로 끝내세요

예제

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

단어 객체를 한 줄에서 압축할 수 있습니다. 속성 사이에만 공백을 사용하면 이렇게 됩니다：

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

줄 길이는 80자 미만입니다

읽기 쉽게 하기 위해, 각 줄의 길이가 80자를 넘지 않도록避免하십시오.

JavaScript 문장이 한 줄을 넘어갈 때, 연산자나 쉼표 뒤에 줄 바꿈을 할 것이 좋습니다.

예제

document.getElementById("demo").innerHTML =
    "Hello Kitty.";

본인이 직접 시도해보세요

이름 규칙

모든 코드에 대해 같은 이름 규칙을 사용하십시오. 예를 들어：

변수와 함수 이름은캐amelCase로 작성하십시오
전역 변수는대문자（우리는 이렇게하지 않지만 매우 일반적입니다）
상수(예: PI)는대문자

변수 이름에 사용할지 여부에 대해하이픈、캐amelCase또는밑줄요?

이는 프로그래머들이 자주 논의하는 문제입니다. 답은 이 질문을 답하는 사람에 따라 달라집니다：

HTML과 CSS에서의 하이픈:

HTML5 속성은 data-로 시작할 수 있습니다.(data-quantity, data-price).

CSS는 property-names에서 하이픈을 사용합니다.(font-size).

하이픈은 잘못된 방식으로 감소 연산자로 오해될 수 있습니다. JavaScript 이름은 하이픈을 사용하지 않습니다.

밑줄:

많은 프로그래머는 밑줄(예: date_of_birth)을 사용하는 것을 좋아합니다. 특히 SQL 데이터베이스에서.

밑줄은 PHP 자료에서 자주 사용됩니다.

파스칼 네이밍 방법(PascalCase):

C 언어 프로그래머는 자주 파스칼 네이밍 방법을 사용합니다.

캐amelCase:

JavaScript 자체, jQuery 및 다른 JavaScript 라이브러리는 캐amelCase을 사용합니다.

JavaScript 이름은 $ 기호로 시작하지 마십시오. 이는 JavaScript 이름 충돌을 유발할 수 있습니다.

HTML에서 JavaScript를 로드

외부 스크립트를 로드하는 간단한 문법을 사용하십시오.(type 속성은 필수가 아닙니다)：

<script src="myscript.js"></script>

HTML 요소에 접근

불tidy한 HTML 스타일의 결과는, JavaScript 오류를 유발할 수 있습니다.

이 두 JavaScript 문장은 다른 결과를 생성합니다：

var obj = getElementById("Demo")
var obj = getElementById("demo")

가능하다면, HTML에서 같은 이름 규칙을 사용하십시오.(JavaScript와 같은 것처럼).

HTML 스타일 가이드에 접근하세요.

파일 확장자

HTML 파일은 다음과 같이 사용해야 합니다 .html 확장자(이는 .htm)

CSS 파일은 다음과 같이 사용해야 합니다 .css 확장자.

JavaScript 파일은 다음과 같이 사용해야 합니다 .js 확장자.

소문자 파일 이름을 사용하세요

대부분의 웹 서버(Apache, Unix)는 파일 이름의 대소문자에 대한 관성을 가집니다:

london.jpg는 London.jpg로 접근할 수 없습니다.

기타 웹 서버(マイ크로소프트의 IIS)는 대소문자에 대한 무관성을 가집니다:

london.jpg는 London.jpg 또는 london.jpg로 접근할 수 있습니다.

대소문자를 혼합 사용하면 일관되고 일관된 방식으로 엄격히 유지해야 합니다.

만약 사이트를 대소문자에 대한 무관성이 있는 서버에서 대소문자에 대한 관성이 있는 서버로 이동하면, 이러한 작은 오류도 웹사이트를 망가뜨릴 수 있습니다.

이러한 문제를 피하기 위해 항상 소문자 파일 이름을 사용하십시오(가능한 경우).

성능

컴퓨터는 코드 약속을 사용하지 않습니다. 대부분의 규칙은 프로그램 실행에 미미한 영향을 미칩니다.

인쇄와 추가 공백은 짧은 스크립트에 대해서는 중요하지 않습니다.

개발 중의 스크립트에 대해서는 읽기 쉽기에 우선시해야 합니다. 더 큰 생산 스크립트는 축소해야 합니다.

이전 페이지 JS 디버깅
다음 페이지 JS 최고의 실천 방법

과목표