출력 : alert
HTML 페이지 기본 구성
<!DOCTYPE html>
<html>
<head>
<script>
alert('Hello World!');
</script>
</head>
<body>
</body>
</html>
자바스크립트는 html 내부에서 <script>로 시작해 </script>로 끝납니다. 이 태그 사이에 자바스크립트를 입력해 주면 됩니다.
- alert(message) : 인자로 받은 message를 브라우저에서 경고창으로 띄웁니다.
문자열
JavaScript에서 문자열은 큰따옴표("")로 감싸거나 작은따옴표('')로 감싸 표현합니다.
// 올바른 사용의 예
alert('This is "string"');
alert("This is 'string'");
// 잘못된 사용의 예
alert('This is 'string'');
alert("This is "string"");
위의 예제처럼 작은 따옴표 내에서 큰따옴표를, 큰따옴표 내에서 작은따옴표를 사용할 수는 있지만 작은 따옴표 내에서 작은 따옴표를, 큰 따옴표 내에서 큰 따옴표를 그대로 사용할 수는 없습니다. 꼭 사용해야 하는 경우라면 역슬래시로 이스케이핑해서 사용합니다.(\", \')
이스케이프 문자
| 이스케이프 문자 | 설명 |
|---|---|
| \t | 수평 탭 |
| \n | 줄바꿈 |
| \' | 작은 따옴표 |
| \" | 큰 따옴표 |
| \\ | 역슬래시 |
숫자
자바스크립트에서 숫자는 정수와 유리수를 특별히 구분하지 않습니다.
| 연산자 | 설명 |
|---|---|
| + | 더하기 |
| - | 빼기 |
| * | 곱하기 |
| / | 나누기 |
| % | 나머지 |
불리언
참과 거짓을 표현하는 자료형으로 true 혹은 false 값을 갖습니다. JavaScript에서 true는 1과, false는 0과 같다고 표현되기도 합니다.
| 연산자 | 설명 |
|---|---|
| >= | 좌변이 (우변보다) 크거나 같다. |
| <= | 좌변이 작거나 같다. |
| > | 좌변이 크다. |
| < | 좌변이 작다. |
| == | 서로 같다. |
| != | 서로 다르다. |
| 연산자 | 설명 | 사용 예 |
|---|---|---|
| ! | 논리 부정 연산자(not) | !(3>2) : false |
| && | 논리곱 연산자(and) | 3>2 && 1>0 : true |
| || | 논리합 연산자(or) | 1>10 || true : true |
alert(30 > 20 > 10);얼핏 보면 30이 20보다, 20이 10보다 크므로 true를 반환할 것 같지만 정답은 false 입니다.
30>20 => true
30>20>10 => true > 10 => 1 > 10 => false
위와 같이 연산되기 때문에 보통 사람이 생각하는 연산과는 다른 결과가 나오기 쉽습니다. 따라서 비교 연산자는 두 개의 항에서만 사용하는 것이 바람직합니다. 따라서 위 코드는 아래와 같이 수정되어야 합니다.
alert(30>20 && 20>10);위 코드는 true를 반환합니다.
변수
JavaScript는 변수를 선언할 때 자료형을 따로 선언하지 않습니다. 아래와 같이 키워드 var를 이용하여 변수를 선언합니다.
var pi = 3.14; alert(pi);
변수에 값이 초기화 또는 할당되면 그 값에 따라서 JavaScript가 알아서 자료형을 결정합니다.
var stringVar = 'string';
var numberVar = 10;
var booleanVar = true;
var functionVar = function () {};
var objectVar = {};
위와 같이 문자열, 숫자, 불리언, 함수, 객체의 자료형이 존재하고 자료형이 아직 결정되지 않은 undefined 까지 총 6개가 존재합니다.
복합 대입 연산자
| 연산자 | 설명 | 사용 예 |
|---|---|---|
| += | 기존 변수에 값을 + | a += 3; |
| -= | 기존 변수에 값을 - | a -= 3; |
| *= | 기존 변수에 값을 * | a *= 3; |
| /= | 기존 변수에 값을 / | a /= 3; |
| %= | 기존 변수에 값을 % | a %= 3; |
복합 대입 연산자는 a = a + 3;의 형태와 같으며, 단순히 코드를 짧게 만들어 놓은 것이다.
증감 연산자
| 연산자 | 설명 |
|---|---|
| 변수++ | 기존 변수 + 1(후위) |
| ++변수 | 기존 변수 + 1(전위) |
| 변수-- | 기존 변수 - 1(후위) |
| --변수 | 기존 변수 - 1(전위) |
전위와 후위의 차이는 증감 연산자가 다른 연산과 함께 쓰였을 때에만 차이를 갖는데, 전위는 기존 변수를 1 증가 시킨 후 다른 연산을 진행하고 후위는 다른 연산을 진행한 후 기존 변수를 1 증가시킵니다.
자료형 검사 : typeof()
alert(typeof('abcd'));
위와 같이 입력하면 'abcd'는 문자열이기 때문에 경고창에 string이 나타납니다. 위와 같이 자료형을 검사할 일이 생기면 typeof()를 사용합니다.
입력
var input = prompt('당신의 나이는?', '여기에 값을 입력하세요.');
alert(input);
- prompt(message, defstr) : 사용자의 값을 입력받는 창을 띄웁니다. 이 때, 메시지를 표시하려면 인자 message로 넘겨줍니다. defstr에는 입력받을 칸에 기본 값을 채웁니다.
prompt로 값을 문자열로 반환합니다. 즉 숫자 3을 입력했다고 하더라도 문자열 '3'을 리턴하게 되므로 숫자의 형태로 사용하고 싶다면 별도의 과정을 거쳐야 합니다.
var input = confirm('수락하시겠습니까?');
alert(input); // true / false
- confirm(message) : 확인/취소 두 개의 버튼을 갖는 경고창을 띄웁니다. 확인을 누르면 true를, 취소를 누르면 false를 반환합니다.
배열
var array = [12, 'abcd', true, function(){}, {}, [1, 2]];
alert(array);
alert(array[0]);
alert(array[1]);
alert(array[2]);
배열은 변수 여러 개를 한꺼번에 저장합니다. 이 때, 서로 다른 자료형의 변수들도 같이 저장할 수 있습니다. 변수의 요소에 접근 하기 위해서는 대괄호로 둘러싼 인덱스로 접근합니다. 인덱스는 0부터 시작합니다.
undefined
alert(a);
a라는 변수를 선언한 적이 없다고 합시다. 그리고 위의 코드를 실행시키면 undefined를 반환합니다. 존재하지 않는 a를 출력했기 때문입니다.
숫자와 문자열 자료형 변환
자동 형변환
JavaScript는 자동으로 자료형을 변환하는 경우가 많습니다. 숫자와 문자열을 더할 때 숫자보다는 문자열이 우선시 됩니다.
alert('52 + 273'); // 52 + 273
alert(52 + 273); // 325
alert('52' + 273); // 52273
alert(52 + '273'); // 52273
alert('52' + '273'); // 52273
반면, 더하기를 제외한 사칙 연산자는 숫자가 우선됩니다.
alert('52 * 273'); // 52 * 273
alert(52 * 273); // 14196
alert('52' * 273); // 14196
alert(52 * '273'); // 14196
alert('52' * '273'); // 14196
강제 형변환(명시적 형변환)
- Number() : 다른 자료형을 숫자로 바꿉니다.
- String() : 다른 자료형을 문자열로 바꿉니다.
만약 Number()에서 숫자로 변환할 수 없는 값을 입력할 경우 NaN(Not a Number)을 반환합니다. NaN의 자료형 자체는 숫자이지만 자바스크립트로 나타낼 수 없는 숫자라는 의미입니다. 참고로 자바스크립트는 복소수를 표현할 수 없습니다. 따라서 alert(Math.sqrt(-3))은 NaN을 반환합니다.
불리언 자료형 변환
// false를 반환하는 5가지 경우
alert(Boolean(0));
alert(Boolean(NaN));
alert(Boolean(''));
alert(Boolean(null));
alert(Boolean(undefined));
- Boolean() : 다른 자료형을 불리언형으로 바꿉니다.
Boolean() 함수는 위의 5가지 경우를 제외하고는 모두 true를 반환합니다. Boolean() 함수를 쓰지 않고 논리 부정 연산자를 두 번 사용하여 대체할 수도 있습니다.
alert(!!0); alert(!!NaN); alert(!!''); alert(!!null); alert(!!undefined);
동일(일치) 연산자
alert('' == false);
alert('' == 0);
alert(0 == false);
alert('273' == 273);
위의 네 가지 코드는 모두 true를 리턴합니다. 자바스크립트가 자동 형변환이 매우 잘 일어난다는 특징 때문인데 때로는 이것이 불편할 경우가 있습니다. 위와 같은 경우에 false를 반환하고 싶은 경우에는 동일 연산자를 사용합니다.
| 연산자 | 설명 |
|---|---|
| === | 양 변의 자료형과 값이 일치합니다. |
| !== | 양 변의 자료형 또는 값이 다릅니다. |
위의 코드에서 ==를 ===로 바꾸어주면 모두 false를 반환합니다.
