우당탕탕 좌충우돌 개발일기
자바스크립트 구문(JavaScript Statements) 본문
자바스크립트 프로그램(JavaScript Programs)
컴퓨터 프로그램은 컴퓨터에 의해 "실행"되는 "명령"의 목록이다.
프로그래밍 언어에서, 이런 프로그래밍 명령을 명령문이라고 한다.
자바스크립트 프로그램은 프로그래밍 명령문의 목록이다.
HTML에서 자바스크립트는 웹 브라우저에 의해 실행된다.
자바스크립트 구문(JavaScript Statements)
자바스크립트는 값, 연산자, 표현식, 키워드 그리고 주석으로 구성되어있다.
해당 예제에서 이 구문은 브라우저에게 "demo"라는 id를 가진 HTML 요소안에 "Hello Dolly"를 출력하도록 지시한다.
<예제>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>
</body>
</html>
대부분의 자바스크립트 프로그램은 많은 자바스크립트 구문을 포함하고 있다.
그 구문들은 작성한 순서대로 한 번에 하나씩 실행된다.
💡 자바스크립트 프로그램(자바스크립트 구문)은 종종 자바스크립트 코드라고 불리기도한다.
세미콜론 ; (Semicolons ;)
세미콜론은 자바스크립트 구문을 분리해준다.
실행가능한 각각의 구문 끝에 세미콜론을 덧붙인다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript statements are separated by semicolons.</p>
<p id="demo1"></p>
<script>
let a, b, c;
a = 5;
b = 6;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
세미콜론으로 분리될 때, 여러개의 구문들은 한 라인에 작성될 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>Multiple statements on one line are allowed.</p>
<p id="demo1"></p>
<script>
let a, b, c;
a = 5; b = 6; c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
💡 웹에서 종종 세미콜론이 없는 예제를 볼 수 있다.
구문 끝에 세미콜론을 붙이는게 필수는 아니지만 적극적으로 권장되고있다.
자바스크립트 공백(JavaScript White Space)
자바스크립트는 여러개의 공백은 무시한다. script의 가독성을 높이기 위해서 공백을 사용하기도 한다.
let person = "Hege";
let person="Hege";let x = y + z;
자바스크립트 줄 길이와 줄바꿈(JavaScript Line Length and Line Breaks)
최고의 가독성을 위해 프로그래머는 종종 80자 이상의 긴 코드라인을 피하려고한다.
만약 자바스크립트 구문이 한 줄에 맞지 않는다면, 끊기에 가장 좋은 위치는 연산자 다음이 가장 좋다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>
The best place to break a code line is after an operator or a comma.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>
</body>
</html>
자바스크립트 코드 블럭(JavaScript Code Blocks)
자바스크립트 구문은 코드 블럭{ }안에서 그룹화 될 수 있다.
코드 블럭의 목적은 구문이 함께 실행할 명령문을 정의하는 것이다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript code blocks are written between { and }</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
</script>
</body>
</html>
자바스크립트 키워드(JavaScript Keywords)
자바스크립트문은 수행할 자바스크립트 작업을 식별하는 키워드로 시작되는 경우가 많다.
자바스크립트 키워드의 예약어를 확인해보자.
| Keyword | Description |
| var | 변수를 선언한다. |
| let | 블록변수를 선언한다. |
| const | 블록상수를 선언한다. |
| if | 조건에서 실행할 명령문 블록을 표시한다. |
| switch | 다른 경우에 실행할 명령문 블록을 표시한다 |
| for | 루프에서 실행할 명령문 블록을 표시한다 |
| function | 함수를 선언한다. |
| return | 함수를 종료한다. |
| try | 명령문 블록에 대한 오류처리를 구현한다. |
💡 자바스크립트 키워드는 예약어이며 , 예약어는 변수명으로 사용될 수 없다.
'Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트 주석(JavaScript Comments) (0) | 2022.10.13 |
|---|---|
| 자바스크립트 문법(JavaScript Syntax) (0) | 2022.10.13 |
| 자바스크립트 출력(JavaScript Output) (0) | 2022.10.12 |
| 자바스크립트 위치(JavaScript Where To) (0) | 2022.10.12 |
| 자바스크립트 소개(JavaScript Introduction) (0) | 2022.10.12 |
