JavaScript Tutorial.8

ansunny1170·2021년 12월 2일

JavaScript w3schools 공부

w3schools.JS Tutorial(웹제어용)

목록 보기

8/63

JS VARIABLES

JS 변수 선언에는 3가지 방법이 있다. var,let,const.
본 챕터에서는 var의 용법을 다룬다.

①Variables

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>In this example, x, y, and z are variables.</p>

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

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

</body>
</html>

결과 해석

예제를 통해 x에 값 5를 저장, y에 값 6을 저장, z에 값 11을 저장함을 알 수 있다.
또한 계산의 기능이 있음도 알 수 있다.

Identifiers

JS의 모든 변수명은 독립적으로 사용 되어야 한다.
독립적으로 사용되는 변수를 identifiers이라고 지칭한다.
identifiers는 이름은 짧을 수록 좋고, 변수에 저장되는 data의 성질을 담고 있어야 한다.
일반적인 규칙은 다음과 간다.

변수명은 글자,숫자,_,$ 를 포함할 수 있다.
변수명은 꼭 글자로 시작해야한다.
변수명은 $,_로 시작 할수 있다. 하지만! 이렇게 사용하지 않을 것이다.
변수명은 대소문자를 구분한다 예) x,X를 구분한다.
예약어들은 변수명으로 선언할 수 없다.

The Assignment Operator

=는 ~와 같다 라는 뜻이 아닌, 입력과 같은 뜻이다. 수학에서 =과 혼동하면 안된다.
x=x+5로 하면 x+5의 값이 x에 입력 될것 이다.
~와 같다 라는 뜻의 연산자는 ==이다.

②JavaScript Data Types

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>

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

<script>
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>

</body>
</html>

Data Types

JS의 변수에는 숫자와 문자도 저장 할 수 있다
프로그래밍에서 글자값은 문자열이라고 불리운다.
JS는 여러 종류의 data를 처리할 수 있다. 튜토리얼에서는 숫자와 문자열만 다룰 것이다.
문자열은 '',""사이에 입력되고, 숫자는 그냥 쓴다.
만약 숫자를 '',""사이에 입력하면 문자열 취급을 당한다.

③Declaring (Creating) JavaScript Variables

변수를 만들때 변수를 선언 한다라고 표현한다.
변수 선언 시 키워드 뒤에 변수 명을 쓴다.
변수 선언 후 '변수명 = 값;' 수식을 통해 값을 입력 할 수 있다.
혹은 선언과 동시 입력도 가능하다. '키워드 변수명 = 값;'

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>Create a variable, assign a value to it, and display it:</p>

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

<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

변수 선언은 script 최초에 시작하는것이 좋은 습관이다.

④One Statement, Many Variables

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>You can declare many variables in one statement.</p>

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

<script>
var person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>You can declare many variables in one statement.</p>

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

<script>
var person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

',' 이용하여 한번에 선언하기

,사용하여 하나의 키워드에 여러 변수를 선언 및 값 입력이 가능하다.
또한 한 줄로 작성할 수 도 있고, ,를 기준으로 문단을 나눌 수도 있다.

⑤Value = undefined

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>A variable declared without a value will have the value undefined.</p>

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

<script>
var carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

undefined

변수는 대부분 입력값 없이 선언되는 경우가 많다. 변수에 입력될 값이 나중에 계산되어야 할 수도 있고, 제공이 될 수 도 있다. 입력값 없이 선언된 변수의 값은 undefined이 입력된다.

⑥Re-Declaring JavaScript Variables

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>If you re-declare a JavaScript variable, it will not lose its value.</p>

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

<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Re-Declaring

변수를 재 선언 했고 이미 입력값이 있었다면 그값은 사라지지 않는다.

⑦JavaScript Arithmetic

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>The result of adding 5 + 2 + 3:</p>

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

<script>
var x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>The result of adding "John" + " " + "Doe":</p>

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

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

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>The result of adding "5" + 2 + 3:</p>

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

<script>
var x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>The result of adding 2 + 3 + "5":</p>

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

<script>
var x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Arithmetic + 연산자

사칙연산이 가능하며, 문자열도 합칠 수 있다.
특이하게 'var x = "5" + 2 + 3;' 해당 문법에서는 문자열인 5와 숫자인 2,3을 더하였다(합쳤다.) 이경우 모두 문자열로 인식하게된다.
마지막 코드를 보면 'var x = 2 + 3 + "5";' 문자열인 5가 마지막에 위치해 있다.
이경우 앞의 2와 3을 숫자로 인식하고 5라는 결과값을 낸 다음, 문자열 합치기로 55가 된다.

⑧JavaScript Dollar Sign $

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript $</h2>

<p>The dollar sign is treated as a letter in JavaScript names.</p>

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

<script>
var $ = 2;
var $myMoney = 5;
document.getElementById("demo").innerHTML = $ + $myMoney;
</script>

</body>
</html>

$

①내용을 참조하여 $문자가 변수명으로 가능한 것을 알고있다.
$문자를 사용하여 변수명을 선언하는 것은 흔하지 않지만,
몇몇 전문적인 프로그래머는 자주사용한다.
예를들어, 자바스크립트 라이브러리 jQuery에서 매인함수$문자는 HTML 요소를 선탁할 때 사용된다.
`$("P");의 뜻은 P의 모든 요소를 선택한다 라는 뜻

⑨JavaScript Underscore (_)

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript $</h2>

<p>The underscore is treated as a letter in JavaScript names.</p>

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

<script>
var _x = 2;
var _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>

</body>
</html>

사용하고 싶을때 사용해라 띄어쓰기 대신 쓴다. 가능하면 안쓰는게 좋겠다.

ansunny1170

공정 설비 개발/연구원에서 웹 서비스 개발자로 경력 이전하였습니다. Node.js 백엔드 기반 풀스택 개발자를 목표로 하고 있습니다.