[JavaScript] TIL 11(211206)ㅣ구문

Choi Song Yi·2021년 12월 6일

JavaScript TIL

Javascript

목록 보기

6/8

참고 사이트: w3schools.com

구문: JavaScript 프로그램이 구성되는 규칙의 집합

값

고정 값: Literals
변수 값: Variables

Literals

문자열은 큰따옴표나 작은따옴표로 묶어준다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Strings can be written with double or single quotes.</p>

<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>

</body>
</html>

Variables

변수 : 데이터 값을 저장하는 데 사용된다.
ex. var, let, const

var 키워드를 사용해 (여러)변수를 선언하고, 선언되지 않은 변수를 사용하려고 하면 오류 발생.
변수의 이름은 '영문자, 숫자, _, $' 로만 구성된다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>

<p id="demo"></p>

<script>
let x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

연산자

산술 연산자(+-*/)를 사용해 계산하고, 할당 연산자(=)를 사용해 변수에 값을 할당한다.
참고로 등호(=)는 "같음"이 아니다. "같음" 연산자는 == 이다.

<!DOCTYPE html>
<html>
<body>
  
<h2>JavaScript Operators</h2>

<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>

<p id="demo"></p>
<p id="demo2"></p>

<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
  
let x, y;
x = 5;
y = 6;
document.getElementById("demo2").innerHTML = x + y;
</script>

</body>
</html>

표현식

: 값, 변수, 연산자의 조합.
(계산을 평가라고 한다)

let 키워드는 변수를 만들 수 있는 브라우저를 알려준다.

let x, y;
x = 5 + 6;
y = x * 10;

var 키워드는 브라우저에 변수를 생성하도록 한다.

var x, y;
x = 5 + 6;
y = x * 10;

값은 숫자 및 문자열과 같은 다양한 유형이 될 수 있다.

<!DOCTYPE html>
<html>
<body>
  
<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "John" + " " + "Doe";
</script>

</body>
</html>

문자열을 값으로 둔 것으로, 가운데 " "은 뛰어쓰기를 나타낸다.
따라서 아래와 같이 실행된다.

JavaScript 식별자는 대소문자를 구분한다.

<!DOCTYPE html>
<html>
<body>
  
<h2>JavaScript is Case Sensitive</h2>

<p>Try to change lastName to lastname.</p>

<p id="demo"></p>

<script>
let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
document.getElementById("demo").innerHTML = lastname;
</script>

</body>
</html>

주석

// 또는 /및 사이의 코드 /는 주석으로 처리되어 실행되지 않는다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comments are NOT Executed</h2>

<p id="demo"></p>

<script>
let x;
x = 5;
//x = 6; I will not be executed
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>