See the Pen 자바스크립트 var by nilgi (@nilgi) on CodePen.
• 자바스크립트 변수 var : var은 데이터를 저정한다.
<p id="js1"></p>
<script>
var a = 5;
var b = 5;
var c= a + b;
document.getElementById("js1").innerHTML = "합 :" + c;
</script>
• 자바스크립트 식별자
- 자바스크립트는 변수와 함께 고유 식별자가 있어야한다.
- 위 a, b, c를 식별자라고 한다.
• 식별자 쓰는 규칙
- 이름은 문자, 숫자, 밑줄(_), 달러 기호($)를 포함한다.
- 이름은 문자로 시작한다.
- 이름은 $, _로 시작할 수 있다.
- 대소문자를 구분한다. a와 A는 다른 변수다.
- 이미 사용하고 있는 이름(예:자바스크립트 명령어)은 사용할 수 없다.
- 자바스크립트에서 =은 '같음'이 아니라 데이터의 '할당'을 의미한다. 자바스크립에서 같음은 '=='라 쓴다.
<p id="js2"></p>
<script>
var weight = 68;
var name = "nilgi";
var gender = "male";
document.getElementById("js2").innerHTML = weight + "<br/>" + name + "<br/>" + gender;
</script>
▲ 변수는 숫자와 텍스트 값(문자열)을 가진다.
문자열은 ", '안에 쓴다. 숫자는 따옴표 없이 그냥 쓴다.
숫자를 따옴표로 쓰면 문자열로 처리한다.
var weight = 68, var name = "nilgi", var gender + male;
var weight = 68;
var name = "nilgi";
var gender + male;
▲ 변수는 한 줄에 다 쓸 수 있다.
<p id="js3"></p>
<script>
var color;
document.getElementById("js3").innerHTML = color;
</script>
▲ 변수가 데이터값이 없음을 'undefined'라고 한다.
<p id="js4"></p>
<script>
var color = "tomato"
var color;
document.getElementById("js4").innerHTML = color;
</script>
▲ 변수를 재선언하여도 기존값은 손실되지 않는다.
<p id="js5"></p>
<p id="js6"></p>
<script>
var z = 1 + 2 + 3
document.getElementById("js5").innerHTML = z;
var z2 = "1" + 2 + 3
document.getElementById("js6").innerHTML = z2;
</script>
▲ 숫자를 따옴표로 쓰면 뒤에 오는 숫자도 문자로 인식한다.
<p id="js7"></p>
<script>
var I = "nilgi" + " " + "blog"
document.getElementById("js7").innerHTML = I;
</script>
▲ 공백을 " " 이렇게 쓸 수 있다.
<p id="js8"></p>
<p id="js9"></p>
<script>
var $ = 100;
var $a = 200;
var _my = 123;
document.getElementById("js8").innerHTML = $ + $a;
document.getElementById("js9").innerHTML = _my;
</script>
▲ $, _ 사용