자바 스크립트
객체 기반의 스크립트 프로그래밍 언어입니다. 자바 스크립트로 작성한 프로그램을 '스크립트'라고 부릅니다. 스크립트는 웹 페이지의 HTML 안에 작성할 수 있는데요, 웹 페이지를 불러올 때 스크립트를 자동으로 실행합니다. 스크립트는 다른 컴퓨터 언어(자바, c언어)와 달리 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있습니다. 자바 스크립트는 웹 브라우저 뿐만 아니라, 서버에서도 실행할 수 있습니다. 이 외에도 자바 스크립트는 자바스크립트 엔진이라 불리우는 특별한 프로그램이 들어 있는 모든 디바이스에서 동작합니다. 즉, 자바스크립트 엔진이 탑재된 다른 응용 프로그램의 내장된 객체에도 접근할 수 있습니다. 자바 스크립트의 개념에 대해 알아봤으니, 이제 자바 스크립트의 기본 문법에 대해 알아보도록 하겠습니다.
자바 스크립트의 문법
1.코드 구조
문장(statement): 어떤 작업을 수행하는 문법 구조와 명령어
코드에는 얼마던지 원하는 문장을 작성할 수 있습니다. 이때, 서로 다른 문장은 ;으로 구분합니다.
자바스크립트에서는 ;(세미콜론)이 항상 사용되지 않습니다.
예를 들어 보겠습니다.
Java Script
alert("Hello");
alert("Hi world");이렇게 문장이 끝날 때마다 세미콜론을 작성할 수 있지만 줄 바꿈이 있을 경우, 세미콜론을 생략할 수 있습니다.
Java Script
alert("Hello")
alert("Hi world")위의 코드 또한 오류없이 실행됩니다.
자바스크립트는 만약 줄바꿈이 있을 경우, 대부분의 경우 이를 암시적 세미콜론으로 해석합니다. 이러한 방식을 세미콜론 자동 삽입이라고 합니다. 하지만 줄바꿈이 세미콜론을 뜻하지 않는 경우도 존재합니다.
어떤 줄이 +로 끝나면, 그 줄은 불완전한 표현식이므로 세미콜론이 필요하지 않습니다. 세미콜론이 자동으로 삽입되지 않았기 때문에 6이 출력됩니다.
자바스크립트에서 세미콜론이 꼭 필요한 상황도 존재합니다.
위 코드를 실행하면 alert문만 출력되고 에러가 발생함을 확인할 수 있습니다.
이러한 에러가 발생하는 이유는 자바스크립트가 [] 에서는 세미콜론이 있다고 가정하지 않기 때문입니다.
세미콜론을 넣어봅시다.
alert 다음 문장도 제대로 작동하는 것을 알 수 있습니다.
주석은 두개의 슬래쉬(//)로 표현할 수 있습니다. 여러 줄의 주석 같은 경우, /~/ 이렇게 표현할 수 있습니다. 중첩 주석(주석 안에 또다른 주석 작성하기)의 경우 자바스크립트에서는 지원되지 않습니다.
2.변수
변수는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소' 입니다. 자바 스크립트에서 변수는 var, let, const를 사용하여 정의할 수 있습니다. 주로 변수를 선언할 때는 let을 이용하여 선언합니다. var는 let과 비슷하나, let보다 더 '오래된' 방식이기 때문에 현재 시점에서는 거의 대부분 let을 사용합니다. 변수 명에는 오로지 문자와 숫자, $, 언더바로만 만들어 사용할 수 있습니다. 변수의 맨 앞부분에는 숫자가 들어올 수 없습니다. 변수는 자바와 마찬가지로 대소문자 구분이 가능합니다.
let message;
message = 'Hello';
let 1a; //error, 숫자가 맨 앞부분에서 위치하므로const의 경우, 변화하지 않는 변수(상수)를 선언할 때 사용한다. 상수는 변하지 않으므로, 만약 상수를 변경하려고 하면 에러가 발생합니다.
const aa = 10;
aa= 500; //error, const값을 변경하려고 하므로상수를 선언할 때는 변수를 대문자로 시작하는게 보기 좋습니다.
3. 출력
자바 스크립트에서는 console.log() 인터페이스를 통해서 코드에 입력한 값을 콘솔창에 출력할 수 있습니다. console.log()의 () 안에 출력하고 싶은 값을 입력하면, 콘솔 창에 입력한 값이 출력됩니다.
alert()의 경우, ()안에 값을 입력할 경우 위의 알림창에 입력한 값이 뜨게 해 주는 인터페이스 입니다.
alert()인터페이스를 이용할 경우, 상단에서 뜨는 알림창에는 확인 버튼밖에 존재하지 않습니다.
confirm()인터페이스는 alert()인터페이스와 유사하게 사이트 상단에 알림창이 뜨게 해 주는 인터페이스이나, alert()와 다른 점은 알림창에 확인 버튼 뿐만 아니라 취소 버튼도 뜬다는 점입니다.
cf) 나중에 좀 더 자세히 설명하겠지만, 만약 사용자가 확인 버튼을 누르면 true로 처리되고, 취소 버튼을 누르면 false로 처리됩니다.
prompt()는 외부에서 값을 입력받을 수 있는 인터페이스입니다. prompt()로 입력받은 값은 형변환을 하지 않으면 자동으로 문자형으로 받아들여집니다.
자동으로 문자형으로 받아들여지는 예제를 한번 살펴볼까요?
prompt()에 20+30을 입력해본다고 합시다.
입력받은 값인 20과 30은 문자열로 인식되기 때문에 연산자 +를 이용하여 출력하면 20, 30은 문자열이기 때문에 2030으로 출력됩니다.
prompt()의 경우, default 값도 입력이 가능합니다.
prompt("a", "b");를 입력할 경우,
이렇게 a는 안내문으로 뜨고, b는 입력창에 이미 존재해 있는 default 값으로서 들어가 있게 됩니다. 여기서 주의할 것은, 위 사진에서처럼 안내문과 default로 들어가는 값은 ""큰 따옴표 안에 들어가야 한다는 것입니다.
참고로, alert 나 prompt, confirm 인터페이스로 나타나는 알림창은 스타일링이 불가능하다...😥
4. 자료형
자바 스크립트에는 8가지 기본 자료형이 존재합니다.
문자형, 숫자형, 불린형, null, undefined, 객체형, 심볼형, bigint
여기서는 일단, 문자형, 숫자형, 불린형에 대해서만 써 보도록 하겠습니다.
1)문자형
자바스크립트에서는 문자열(String)을 따옴표("", '', 역따옴표) 로 묶습니다. 큰따옴표와 작은따옴표는 기본적인 따옴표로서, 자바스크립트에서는 이 둘에 큰 차이를 두지 않습니다.
역 따옴표로 변수나 표현식을 감싼 후 ${}안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다. 물론 기본적인 따옴표인 "", ''따옴표의 경우 중간에 변수의 값이나 표현식을 넣을 수 없습니다.
2)숫자형
정수, 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 숫자형과 관련된 연산은 다양한데, 곱셈*, 나눗셈 /, 덧셈 +, 뺄셈 - 등이 대표적입니다. 숫자형엔 일반적인 숫자 외에도 Infinity(무한대), -Infinity(-무한대), NaN(Not a number)같은 '특수 숫자 값(special numeric value)'도 포함되어 있습니다.
let n ;
n=10; //여기서 n은 숫자형 변수3)불린형
불린형(다른 말로 논리 타입)은 true와 false 이 두 가지 값밖에 없는 자료형입니다. 불린형은 긍정이나 부정을 나타내는 값을 저장할때 사용합니다.
불린형에서 true/false 로 판정되는 값의 종류를 알아봅시다.
false
숫자 0
NaN(Not a number)
빈 문자열(따옴표 안에 스페이스 키도 없어야 함)
Null
Undefined
이 외에는 모두 true로 표현된다.
스페이스바도 true로 출력됨을 잊지 말자...
typeof 연산자 - 변수의 자료형을 알 수 있다.
