자바스크립트
자바스크립트(
웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 객체(object) 기반의 스크립팅 언어 또는 프로그래밍 언어
지금까지 배운 HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인할 수 있었습니다.
그렇다면 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응할 순 없을까요?
가능합니다. 자바스크립트로는 웹의 동작을 구현할 수 있습니다.
자바스크립트는 정말 많은 일을 할 수 있지만 핵심적으로 다음과 같은 일을 가능하게 해줍니다.
- 변수에 값을 저장할 수 있습니다.
- 프로그래밍에서 "문자열"(string)이라고 부르는, 텍스트 조각을 조작합니다.
- 웹 페이지에서 발생하는 어떤 이벤트에 코드가 응답하도록 합니다.
위의 내용처럼 이번엔 자바스크립트의 핵심적인 기능이자 가장 기본적인 변수에 대해서 어떻게 이루어져 있는지 알아볼 것입니다.
변수
변수란, 숫자(합계나 계산에 사용되는) 또는 문자열(문장의 일부로 사용되는)과 같은 값의 컨테이너
쉽게 말하자면 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’
또한 물건(값 : 문자 또는 숫자)을 넣기 위해서 필요한 이름표가 붙은 상자(컨테이너)
라는 표현도 많이 합니다. 개인적으로 '이름이 붙은 저장소'라는 말이 잘 와닿는 거 같습니다.
변수에 대한 또 다른 특별한 점은 문자열과 숫자뿐 아니라 무엇이든 포함 할 수 있다는 점입니다.
변수에는 복잡한 데이터 뿐아니라 추후 배우게 될 놀랄만 한 기능을 수행하는 함수(Function)까지 포함할 수 있다는 사실! 하지만 이 내용은 나중에 배워도 충분합니다.
그런데 이 때 착각하기 쉬운 부분이 있는데 변수는 값을 포함하고 있습니다. 그렇지만 변수는 값 자체가 아닙니다. 변수는 값을 위한 컨테이너일 뿐입니다.
변수의 선언
일단 함수를 사용하기 위해서는 선언이 필요합니다. 이 때 선언을 하기 위해서 필요한 키워드 let을 사용해야합니다. 그리고 나서 원하는 변수 이름을 입력합니다.
let message;자바스크립트에서 마지막에 세미콜론을 붙여 주는 이유는 내가 쓰는 구문이 종료가 되었다 라는 의미입니다
변수의 이름은 마음대로 부여 할 수 있지만 사실 제한이 있습니다
이것에 대한 규칙은 여기에서 확인하시면 좋을 것 같습니다.
선언을 한 이후에 할당 연산자 =를 사용해 변수 안에 문자열 데이터를 저장해 봅시다.
message = "Hi!";문자열이 변수와 연결되어 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있습니다.
alert(message); // Hi!
(alert()의 괄호 안에 값을 넣으면 해당 값을 웹페이지에 보여줍니다.)아래와 같이 변수 선언과 값 할당을 한 줄에 작성할 수도 있습니다.
let message = "Hi";그리고 선언한 변수에 값을 바꿀 수도 있습니다. (이 때 새로 선언한다는 뜻이기에 let 키워드는 쓰면 안됩니다.)
message = "Hello!";
alert(message); // Hello!이렇게 간단하게 변수에는 여러 값을 저장하고 확인해보는 과정을 해보았습니다.
변수의 종류
지금까지 숫자와 문자열 이 두 가지 형태의 데이터 유형을 살펴 봤지만 변수에 저장할 수 있는 몇가지 유형의 데이터가 더 있습니다.
숫자
30과 같은 숫자 나 2.456(부동소수점 또는 부동 소수점 숫자라고도 함) 같은 십진수 숫자를 변수에 저장할 수 있습니다. JavaScript는 일부 프로그래밍 언어처럼 숫자 유형에 따른 다른 데이터 유형을 가지고 있지 않습니다. 변수에 숫자 값 대입할 때, 따옴표 사용하지 않습니다.
var myAge = 17;문자열
문자열은 텍스트의 조각입니다. 변수에 문자열 값을 대입할 때, 작은따옴표(')나 큰따옴표(")로 묶어야 합니다. 그렇지 않으면 JavaScript는 다른 변수 이름으로 해석하게 됩니다.
var do = 'So long and thanks for all the fish';불리언(Booleans)
불리언(Booleans)은 true 이나 false 라는 값을 가지는 참/거짓을 표현하는 데이터 유형입니다. 일반적으로 조건을 테스트하는 데 사용되며 그 다음 코드가 조건에 따라 실행됩니다.
var iAmAlive = true;배열
배열은 대괄호로 묶이고 쉼표로 구분 된 여러 값을 포함하는 단일 객체입니다.
var myNameArray = ['Chris', 'Bob', 'Jim'];
var myNumberArray = [10,15,40];객체
프로그래밍에서 객체(Objects)는 실제 사물(real life object)을 모델링 하는 코드 구조입니다. 예를들어 주차장 객체는 주차장의 높이와 넓이 정보를 가지고 표현 할 수 있으며, 사람 객체는 이름, 키, 몸무게, 사용하는 언어등의 정보를 가지고 표현 할 수 있습니다.
var dog = { name : 'Spot', breed : 'Dalmatian' };
여기서 불리언, 배열, 객체는 생소할 수 있지만 지금 설명하기보다 이 후에 따로 자세히 다뤄보도록 하겠습니다.
지정되지 않은 타입
JavaScript는 "느슨한 유형의 언어(loosely typed language)" 이라고도 합니다. 이말은 즉, 다른 언어와 달리 변수에 포함 할 데이터의 유형을 지정할 필요가 없다는 뜻입니다.
예를 들어, 변수를 선언하고 그 변수의 값을 따옴표로 묶은 값을 지정하면 브라우저는 변수의 값을 문자열로 인식합니다.
var myString = '1234Hello';이처럼 따옴표 안에 숫자가 포함되어 있어도 여전히 문자열로 인식되므로 주의해야 하고 필요하다면 해당 데이터의 유형에 맞게 선언을 해야합니다.
