간단한 단어로 표현된 JavaScript 구문입니다. JavaScript - JavaScript의 구문 주석
JavaScript 프로그램은 일련의 명령(문)입니다. 때로는 지침을 JavaScript 명령이라고도 합니다.
프로그램을 실행하려면 프로그램을 시작해야 합니다. 프로그램이 클라이언트 스크립트인 경우 브라우저에 의해 자동으로 실행되지만 페이지 코드에 있는 경우에만 가능합니다. 브라우저는 일반적으로 웹 페이지를 로드하는 동안 프로그램을 실행합니다.
명령어를 작성할 때는 세미콜론으로 구분해야 합니다. JavaScript에서는 다음과 같은 경우 명령문 끝에 세미콜론을 생략할 수 있습니다. 다음 명령로 시작됩니다 새 줄.
다음 명령문이 새 줄에 작성되는 경우 JavaScript에서 세미콜론으로 명령문을 종료할 필요는 없지만 적극 권장됩니다. 또한 각 명령어를 별도의 줄에 배치하는 것이 좋습니다.
JavaScript 지침은 값, 연산자, 표현식, 키워드 및 주석으로 구성됩니다.
예를 들어, 이 명령은 브라우저에 "Hello, world!"라고 쓰라고 지시합니다. 내부에 HTML 요소 id="main"인 경우:
Document.getElementById("main").textContent = "안녕하세요!";
자바스크립트 의미JavaScript 구문은 고정 값(리터럴), 상수 값 및 변수 값과 같은 값 유형을 정의합니다.
JavaScript에서 다양한 값을 나타내는 리터럴의 예:
17 // 정수 리터럴 23.8 // 분수 리터럴 "HTML" // 문자열 리터럴 "HTML" // 문자열 리터럴 true // 부울 리터럴 // 배열 리터럴 // 배열 리터럴() // 객체 리터럴( 이름: "Dennis " , 언어: "ru" ) // 객체 리터럴 (ab|bc) // 정규식 리터럴
프로그래밍 언어에서는 상수와 변수를 사용하여 데이터 값을 저장합니다.
상수를 선언하는 데 사용됩니다. 예어 const, 변수 – var 및 let.
상수 MAX_LENGTH = 17; // 상수 var section = "HTML"; // 변수 let arr = ["HTML","CSS"]; // 변수
let은 ES-2015(ES6) 버전부터 등장한 변수를 선언하는 새로운 방법입니다. Let을 사용하여 선언된 변수는 범위(블록 범위)가 다르다는 점과 변수가 생성된 후에만 액세스할 수 있다는 점에서 Let은 var와 다릅니다.
자바스크립트 연산자JavaScript에는 다양한 연산자가 있습니다. 수행해야 할 작업을 나타냅니다.
연산자가 연산하는 피연산자의 개수에 따라 이항형과 단항형으로 구분됩니다. 그러나 JavaScript에는 3개의 피연산자로 구성된 조건부 연산자도 있습니다. 이 연산자를 삼항이라고 합니다.
예를 들어 할당 연산자(= 기호)는 다음과 같습니다.
// 피연산자1 = 피연산자2; coorX = 100; // 예를 들어 coordX 변수에 숫자 100을 할당합니다.
이 연산자는 Operand1 을 Operand2 와 동일한 값에 할당(설정)하는 데 사용됩니다.
할당 연산자는 이진 연산자입니다. 두 개의 피연산자에서 작동합니다.
예를 들어, 증가 연산자(++ 기호)는 증가하는 데 사용됩니다. 수치 1의 피연산자:
변수 번호 = 5; ++번호; // 6
증분 연산자는 단항 연산자이므로 이는 하나의 피연산자에서 작동합니다.
자바스크립트 표현식표현식은 변수에 값을 할당하거나 할당하지 않고 값을 반환하는 값, 변수 및 연산자의 조합입니다.
예를 들어, num = 955.47 표현식은 = 연산자를 사용하여 값 7을 변수 num에 할당합니다.
예를 들어, "Hello, " + "Timofey" 표현식은 + 연산자를 사용하여 문자열 "Hello, " 및 "Timofey"를 할당 없이 추가합니다.
자바스크립트 키워드JavaScript 지침은 키워드로 시작되는 경우가 많습니다. (키워드)는 어떤 JavaScript 작업을 수행해야 하는지 결정하기 위한 것입니다.
예를 들어, var 키워드는 브라우저에 변수를 생성하라고 지시합니다.
Var coordX = 5, coordY = 130;
일부 키워드 목록: break, continue, do ... while, for, function, if ... else, return, switch, try ... catch, var.
JavaScript의 주석모든 JavaScript 문이 실행 가능한 것은 아닙니다.
이중 슬래시 // 뒤의 코드 또는 /*와 */ 사이의 코드는 주석으로 처리됩니다.
주석은 무시되고 실행되지 않습니다.
Var 방향 = "상단"; // 한 줄 주석 // var speed = 10; 이 명령어는 실행되지 않습니다. /* id="myBtn"인 요소에 show 클래스를 추가하는 함수 */ function showBtn() ( document.getElementById("myBtn").classList.add("show"); )
// - 한 줄짜리 주석입니다. //와 줄 끝 사이의 모든 텍스트는 JavaScript에서 무시됩니다(실행되지 않음).
/* */는 여러 줄로 된 주석입니다. /*와 */ 사이의 모든 텍스트는 JavaScript에서 무시됩니다.
자바스크립트 명령어 블록JavaScript 명령은 블록(중괄호(...))을 사용하여 그룹화할 수 있습니다.
일반적으로 함수, 제어 구조(for, while) 등에 사용됩니다.
함수 myFunction() ( document.getElementById("id__1").textContent = "텍스트 1..."; document.getElementById("id__2").textContent = "텍스트 2..."; )
대소문자 구분JavaScript는 대소문자를 구분하는 언어입니다. 즉, 키워드, 변수, 함수 이름 및 기타 언어 식별자에는 동일한 대문자 및 소문자 집합이 포함되어야 합니다. 예를 들어, 경고 메소드는 Alert , ALERT 등이 아닌 경고로만 입력해야 합니다.
JavaScript의 공백JavaScript는 여러 공백을 무시합니다. 스크립트에 공백을 추가하여 더 읽기 쉽게 만들 수 있습니다.
다음 줄은 동일합니다.
Var str = "텍스트"; var str="텍스트";
코드 줄 길이JavaScript 명령이 길면 중단하는 것이 좋습니다. 대부분의 경우 일부 연산자 다음에 명령어를 중단하는 것이 좋습니다.
예를 들어:
Document.getElementById("aside__nav_header").innerHTML = "추가 탐색(섹션별)";
- 한 단어로 구성된 이름은 소문자로 작성해야 합니다(예: 기사).
- 여러 단어로 구성된 이름은 함께 소문자로 작성해야 합니다. 단, 단어의 교차 부분에 있는 문자를 제외하고는 대문자로 작성해야 합니다(예: ArticleTitle).
- 이름의 단어 수는 3자를 초과할 수 없습니다(예: articleDatePublishedon).
- 변수(함수 저장용 아님) 및 개체 속성은 명사여야 합니다(예: textComment).
- 값의 배열과 모음은 명사로 지정되어야 합니다. 복수형(예: lastComments);
- 객체의 함수와 메소드는 동사로 이름을 지정해야 합니다(예: getLastArticles).
- 클래스 이름은 대문자로 시작해야 합니다(예: Comments).
JavaScript는 다음을 사용하여 구현할 수 있습니다. 자바스크립트 연산자, 에 배치됩니다. HTML 태그 script ... /웹페이지의 /script.
JavaScript가 포함된 스크립트 태그를 웹페이지 어디에든 배치할 수 있지만 일반적으로 헤드 태그에 저장하는 것이 좋습니다.
스크립트 태그는 이러한 태그 사이의 모든 텍스트를 스크립트로 해석하기 시작하도록 브라우저 프로그램에 경고합니다. JavaScript의 간단한 구문은 다음과 같습니다.
자바스크립트 코드
스크립트 태그에는 두 가지 중요한 속성이 포함되어 있습니다.
- 언어 - 이 속성은 사용 중인 스크립트 언어를 나타냅니다. 일반적으로 해당 값은 javascript입니다. 최신 버전의 HTML(및 XHTML, 후속 버전)은 이 속성 사용을 중단했습니다.
- 유형. 이제 이 속성은 사용된 스크립트 언어를 나타내는 데 권장되며 해당 값은 "text/javascript"로 설정되어야 합니다.
따라서 JavaScript 세그먼트는 다음과 같습니다.
자바스크립트 코드
첫 번째 JavaScript 스크립트"Hello World" 출력의 예를 들어보겠습니다. 우리는 추가했습니다 추가 의견 JavaScript 코드를 둘러싸는 HTML입니다. 이는 JavaScript를 지원하지 않는 브라우저에서 코드를 저장하기 위한 것입니다. 주석은 "// ->"로 끝납니다. 여기서 "//"는 JavaScript의 주석을 의미하므로 브라우저가 JavaScript 코드의 일부로 HTML 주석의 끝을 읽는 것을 방지하기 위해 이를 추가합니다. 그런 다음 HTML 문서에 문자열을 쓰는 document.write 함수를 호출합니다.
이 함수는 텍스트, HTML 또는 둘 다를 작성하는 데 사용할 수 있습니다. 다음 코드를 살펴보세요.
이 코드는 다음과 같은 결과를 제공합니다.
안녕하세요 월드!
공백 및 줄 바꿈JavaScript는 JavaScript 프로그램에 나타나는 공백, 탭 및 줄 바꿈을 무시합니다. 프로그램에서 공백, 탭 및 줄 바꿈을 자유롭게 사용할 수 있으며 깔끔하고 일관된 방식으로 프로그램의 형식을 지정하고 들여쓰기를 수행하여 코드를 읽고 이해하기 쉽게 만들 수 있습니다.
JavaScript의 세미콜론안에 간단한 지침 JavaScript에서는 일반적으로 C, C++ 및 Java에서와 같이 세미콜론이 뒤에옵니다. 그러나 JavaScript에서는 각 명령문을 별도의 줄에 배치하는 경우 이 세미콜론을 건너뛸 수 있습니다. 예를 들어 다음 코드는 세미콜론 없이 작성할 수 있습니다.
하지만 이렇게 한 줄로 서식을 지정할 때는 세미콜론을 사용해야 합니다.
메모. 좋은 연습프로그래밍은 세미콜론을 사용하는 것입니다.
대소문자 구분JavaScript는 대소문자를 구분하는 언어입니다. 이는 키워드, 변수, 함수 이름 및 기타 식별자를 항상 일관된 대문자로 입력해야 함을 의미합니다.
따라서 시간 및 TIME 식별자는 JavaScript에 다른 의미를 전달합니다.
메모. JavaScript에서 변수 및 함수 이름을 작성할 때는 주의해야 합니다.
글쓰기를 배울 때 철자법, 문법, 철자법의 기초를 배워야 합니다. 예를 들어, 문장이 다음으로 시작한다는 것은 누구나 알고 있습니다. 대문자마침표로 끝나면 텍스트가 단락 등으로 구분됩니다.
프로그래밍 언어도 비슷한 방식으로 작동합니다. 프로그램이 작동하려면 특정 규칙을 따라야 합니다. 프로그래밍 언어의 구조를 정의하는 규칙 집합을 구문이라고 합니다. 많은 프로그래밍 언어는 동일한 개념을 기반으로 구축되었지만 다른 구문을 사용합니다.
이 튜토리얼에서는 JavaScript의 구문 및 코드 구조화의 기본 사항을 소개합니다.
기능성과 가독성기능성과 가독성은 별도로 집중해야 하는 JavaScript 구문의 매우 중요한 측면입니다.
일부 구문 규칙은 JavaScript 코드에 필수입니다. 충족되지 않으면 콘솔에서 오류가 발생하고 스크립트 실행이 중지됩니다.
“Hello, World!” 프로그램에서 이 오류를 생각해 보세요.
// 손상된 JavaScript 프로그램의 예
console.log("안녕하세요, 월드!"
끝에 닫는 괄호가 없어 "Hello, World!" 줄 대신에 프로그램은 오류를 반환합니다:
잡히지 않은 구문 오류: 누락) 인수 목록 뒤에
스크립트가 계속 실행되도록 하려면 닫는 괄호를 추가해야 합니다. 이것이 JavaScript 구문의 오류가 프로그램 작동에 영향을 미칠 수 있는 방식입니다.
JavaScript 구문 및 형식 지정의 일부 측면은 서로 다른 관점에서 비롯됩니다. 간단히 말해서, 선택 사항이며 코드를 실행할 때 오류를 일으키지 않는 스타일 규칙과 변형이 있습니다. 그러나 프로젝트 및 코드 개발자가 스타일 및 구문 업데이트를 알 수 있도록 추적하는 것이 현명한 일반 규칙도 많이 있습니다. 일반적인 규칙을 따르면 코드의 가독성이 향상됩니다.
변수에 값을 할당하려면 다음 세 가지 옵션을 고려하세요.
const Greeting="안녕하세요"; // 변수와 문자열 사이에 공백이 없습니다.
const Greeting = "안녕하세요"; //할당 후 과도한 공백
const Greeting = "안녕하세요"; // 변수와 문자열 사이에 단일 공백
위의 세 줄은 모두 동일하게 작동합니다. 그러나 세 번째 옵션(인사말 = "안녕하세요")은 특히 대규모 프로그램의 맥락에서 볼 때 코드를 작성하는 데 가장 일반적으로 사용되고 읽기 쉬운 방법입니다.
모든 프로그램 코드의 무결성과 일관성을 모니터링하는 것은 매우 중요합니다.
아래에서는 JavaScript 코드의 구문과 구조를 익히기 위한 몇 가지 예를 살펴보겠습니다.
공백 문자JavaScript 공백 문자는 공백, 탭 및 줄 바꿈입니다(이 작업은 Enter 키로 수행됩니다). 앞에서 설명한 것처럼 줄 외부의 과도한 공백, 연산자 사이의 공백 및 기타 문자는 JavaScript 인터프리터에서 무시됩니다. 이는 다음 세 가지 변수 할당 예제의 결과가 동일하다는 것을 의미합니다.
const userLocation = "뉴욕시, " + "NY";
const userLocation="뉴욕시, "+"뉴욕";
const userLocation = "뉴욕시, " + "NY";
userLocation 변수는 해당 값의 할당 스타일에 관계없이 "New York City, NY" 값을 갖습니다. JavaScript의 경우 어느 것이든 상관없습니다. 공백 문자사용됩니다.
프로그램 작성에는 검증된 규칙이 하나 있습니다. 공백을 사용할 때는 수학이나 문법에서 사용하는 것과 동일한 규칙을 따르십시오. 예를 들어 다음 줄은 다음과 같습니다.
다음보다 읽기 쉽습니다:
이 규칙의 중요한 예외는 여러 변수를 할당하는 것입니다. 다음 예에서 = 위치를 확인하세요.
const companyName = "내 회사";
const companyHeadquarters = "뉴욕시";
const companyHandle = "내 회사";
모든 할당 연산자(=)는 공백을 사용하여 한 줄에 정렬됩니다. 이러한 유형의 구조는 모든 코드 베이스에서 사용되지는 않지만 가독성을 향상시킬 수 있습니다.
JavaScript에서는 추가 줄 바꿈도 무시됩니다. 원칙적으로 추가 빈 줄주석 위와 코드 블록 뒤에 삽입됩니다.
둥근 괄호if, switch 및 for와 같은 키워드에는 일반적으로 괄호 앞뒤에 공백이 있습니다. 다음 예를 고려하십시오.
// if 문 구문의 예
만약에 () ( )
// 수학 방정식을 확인하고 콘솔에 문자열을 인쇄합니다.
만약 (4< 5) {
console.log("4는 5보다 작습니다.");
}
// for 루프 구문의 예
을 위한 () ( )
// 10번 반복하여 각 반복 횟수를 콘솔에 출력합니다.
for (let i = 0; i 0) (
정사각형(숫자);
}
중괄호로 묶인 모든 코드에 세미콜론이 필요하지 않으므로 주의하세요. 객체는 중괄호로 묶여 있으며 세미콜론으로 끝나야 합니다.
// 예시 객체
const objectName = ();
// 삼각형 객체 초기화
const 삼각형 = (
유형: "오른쪽",
각도: 90,
측면: 3,
};
중괄호로 끝나는 것을 제외하고 모든 JavaScript 문과 표현식 뒤에 세미콜론을 두는 것이 일반적인 관행입니다.
코드 구조화기술적으로 JavaScript 프로그램의 모든 코드는 한 줄에 들어갈 수 있습니다. 그러나 그러한 코드는 읽고 유지하기가 매우 어렵습니다. 따라서 프로그램은 여러 줄로 나누어집니다.
예를 들어 if/else 문은 한 줄로 작성하거나 다음과 같이 나눌 수 있습니다.
// 한 줄에 조건문 작성
if (x === 1) ( /* true인 경우 코드 실행 */ ) else ( /* false인 경우 코드 실행 */ )
// 들여쓰기가 있는 조건문
if (x === 1) (
// true인 경우 코드를 실행합니다.
) 또 다른 (
// 거짓일 경우 코드 실행
}
참고: 블록에 포함된 모든 코드는 들여쓰기되어 있습니다. 공백 2개, 공백 4개 또는 탭을 사용하여 들여쓰기할 수 있습니다. 들여쓰기 방법의 선택은 전적으로 개인 취향이나 조직의 권장 사항에 따라 달라집니다.
첫 번째 줄 끝에 여는 괄호는 JavaScript 문과 개체를 구성하는 일반적인 방법입니다. 때로는 대괄호가 별도의 줄에 배치됩니다.
// 개행에 중괄호가 있는 조건문
만약 (x === 1)
{
// true인 경우 코드를 실행합니다.
}
또 다른
{
// 거짓일 경우 코드 실행
}
이 구조는 다른 언어와 마찬가지로 JavaScript에서는 거의 사용되지 않습니다.
중첩된 문은 구분되어야 합니다.
// 함수 초기화
함수 isEqualToOne(x) (
// x가 1인지 확인
if (x === 1) (
// 성공하면 true를 반환합니다.
사실을 반환;
) 또 다른 (
거짓을 반환;
}
}
적절한 들여쓰기를 사용하면 코드를 읽을 수 있습니다. 이 규칙에서 명심해야 할 유일한 예외는 압축 라이브러리가 파일 크기를 줄이기 위해 불필요한 기호를 모두 제거한다는 것입니다.
식별자JavaScript에서는 변수, 함수, 속성의 이름을 식별자라고 합니다. 식별자는 문자와 숫자로 구성되지만 $ 및 _ 이외의 문자를 포함할 수 없으며 숫자로 시작할 수 없습니다.
대소문자 구분이름은 대소문자를 구분합니다. 즉, myVariable과 myvariable은 두 개의 서로 다른 변수로 처리됩니다.
var myVariable = 1;
var myvariable = 2;
일반적으로 이름은 카멜 표기법으로 작성됩니다. 첫 번째 단어는 소문자로 작성되지만 이후의 각 단어는 대문자로 시작됩니다. 전역 변수 또는 상수는 대문자로 작성되고 밑줄로 구분됩니다.
const INSURANCE_RATE = 0.4;
이 규칙의 예외는 클래스 이름이며, 여기서 각 단어는 일반적으로 대문자(PascalCase)로 시작됩니다.
// 클래스 초기화
클래스 예시클래스(
건설자()
}
코드 가독성을 보장하려면 모든 프로그램 파일에서 일관되게 식별자를 사용해야 합니다.
예약된 키워드식별자에는 예약된 키워드도 포함되어서는 안 됩니다. 키워드는 기본 제공 기능이 있는 JavaScript 단어입니다. 여기에는 var, if, for 및 this가 포함됩니다.
예를 들어, var라는 변수에 값을 할당할 수 없습니다.
var var = "일부 값";
JavaScript는 var 키워드를 알고 있으므로 오류가 발생합니다.
SyntaxError: 예상치 못한 토큰(1:4)
