아래와 같이 <script> 태그안에 코드를 적어봅시다.
|
<!DOCTYPE html> <html> <body>
<h2>자바스크립트 선언문</h2>
<p id="ex"></p>
<script> var x, y, z; x = 7; y = 3; z = x + y;
document.getElementById("ex").innerHTML = "The value of z is " + z + "."; </script>
</body> </html> |
여기서 var x, y, z;은 변수의 이름을 정해주기 위해 적어줍니다.다음 각각의 변수에 값을 적어줍니다. x = 7; y = 3; z = x + y; 그리고 이것을 html의 p id="ex"로 이름을 정해준곳에 값을 출력해주는 document.getElementById("ex").innerHTML ="The value of z is " + z + "."; 를 적어주고 저장후 실행 해봅시다. 간단하게 변수를 만들고 계산 후 출력해주는 화면이 보입니다.
이것을 활용해 계산기 화면을 만들 수 있습니다.
세미콜론(The Semi-Colon)
다른 언어들과 달리 ";" "statement"라고하는 JavaScript 코드 행 끝에있는 문자는 일반적으로 선택 사항입니다. JavaScript 문장의 끝에 세미콜론을 추가하거나 세미콜론을 사용하지 않는 것은 끝없는 논쟁입니다.
자바스크립트를 이해하기 쉽게 하기 위한 주석 적기
- Single Line 과 Multi-line Comments
한 줄 주석은 //로 시작합니다. //와 줄 끝 사이의 텍스트는 JavaScript에서 무시됩니다 (실행되지 않음).
주석이 길때는 /* 주석 문장은 여기, 화면에 나타나지 않습니다.*/ 좌측과 같이 코드를 적어 넣으면 됩니다.
| <!DOCTYPE html> <html> <body> <h1 id="aaa"></h1> <p id="bbb"></p> <script> // Change heading: document.getElementById("aaa").innerHTML = "자바스크립트 주석적기"; // Change paragraph: document.getElementById("bbb").innerHTML = "첫 문장은 여기!"; </script> </body> </html> |
| <!DOCTYPE html> <html> <body> <h1 id="myH"></h1> <p id="myP"></p> <script> /* The code below will change the heading with id = "aaa" and the paragraph with id = "bbb" */ document.getElementById("aaa").innerHTML = "자바스크립트 주석적기"; document.getElementById("bbb").innerHTML = "첫 문장!"; </script> </body> </html> |
Visual Studio 코드 주석 바로 가기
• Visual Studio 코드 (및 대부분의 다른 코드 텍스트 편집기)는 "Ctrl + /"(Windows) 또는 "Cmd + /"(Mac)
• 이것은 HTML과 CSS에서도 작동합니다
• 코드 블록을 빠르게 주석 처리하는 또 다른 방법은 주석 처리 할 코드 블록을 선택한 다음 "Ctrl + /"(Windows) 또는 "Cmd + /"(Mac)를 누르는 것입니다.
'디지털노마드 > Javascript 강좌' 카테고리의 다른 글
| 웹 문서에 글과 숫자 출력하기 - String, Variable, boolean (2) | 2020.08.07 |
|---|---|
| 알림창 띄우기- alert window, prompt, confirm (0) | 2020.08.07 |
| JavaScript 변수(Variables)를 알아보자! (1) | 2020.07.22 |
| 경고창(alert window) 와 시간 출력(Date)을 하는 방법 (0) | 2020.07.22 |
| Javascript Syntax-자바스크립트 문법을 알아보자! (0) | 2020.07.21 |
