자바스크립트 프로그램(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 |
