포스트

Day101 JavaScript 기초

자바스크립트 기본개념

1. 자바스크립트 코드실행

  • 자바스크립트는 Html에서 <script>태그를 사용한다.
  • <script type="text/plain"> : 스크립트를 텍스트로 인식하여 실행 되지 않는다.
  • <script type="text/javascrip"> : 스크립트를 제대로 실행한다.

2. 스크립트의 실행순서

  • 웹브라우저는 html을 로딩한 후 위에서부터 아래로 태그가 나온 순서대로 실행한다.
  • 태그 중간에 script 태그가 있으면 script문을 자바스크립트 엔진이 실행하고, 아래 태그는 랜더링 되지 않는다. image
  • script코드는 가장 마지막에 실행해야 랜더링을 완료 후 출력할 수 있다.
  • script코드에 에러가 있으면 실행오류를 콘솔에 출력하고 다음 코드를 수행한다.

자바스크립트의 기본 문법

1. 리터럴

  • 자바스크립트의 리터럴은 다음과 같다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
console.log("문자열");
console.log('문자열'); // 자바스크립트는 자바와 달리 문자와 문자열을 구분하지 않는다.
console.log(100);
console.log(3.14); // 부동소수점 뒤에 f를 붙이지 않는다.
console.log(314E-2);
console.log(true);
console.log(false);
console.log(undefined); // 변수는 존재하는데 값이 없음을 의미하는 상수 값
console.log(null); // 객체가 없음을 의미하는 상수 값
console.log(NaN); // 숫자가 아님을 의미하는 상수 값(Not a Number의 약자)
console.log(Infinity); // 양의 무한대를 의미하는 상수 값
console.log(-Infinity); // 음의 무한대를 표현할 때는 앞에 -를 붙인다.
console.log(new Object()); // 자바스크립트 객체
console.log(function f() {}); // 자바스크립트 함수
  • 숫자의 진수는 다음과 같다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"use strict";

console.log(100);  // 10진수 
console.log(0x64); // 16진수(기본)
console.log(0X64); // 16진수
// console.log(0144); // 8진수 <== ECMAScript 5(2009)의 strict 모드에서는 8진수 표현 불가!
console.log(0o144); // 8진수(기본) <== ECMAScript 2015(6)에서는 0o, 0O 접두사를 붙여서 8진수를 표현할 수 있다.
console.log(0O144); // 8진수
console.log(0b01100100) // 2진수(기본)
console.log(0B01100100) // 2진수
console.log("----------------------------");

let a = 100;
console.log(a.toString(10));
console.log(a.toString(8));
console.log(a.toString(2));
console.log(a.toString(16));
console.log("----------------------------");

2. Typeof 연산자

  • 값을 알아내는 연산자로는 typeof가 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//string 타입
console.log(typeof "문자열");
console.log(typeof '문자열');

//number 타입
console.log(typeof 100);
console.log(typeof 3.14);
console.log(typeof 314E-2);
console.log(typeof 31.4E-1);
console.log(typeof 0.314E1);
console.log(typeof 0.0314E2);

//boolean 타입
console.log(typeof true);
console.log(typeof false);

// 값이 없기 때문에 타입을 알 수 없다.
console.log(typeof undefined); // 값이 없음을 의미하는 상수 값

//object 타입 - null도 object 타입임을 기억하라! undefined와 다르다!
console.log(typeof null); // 객체가 없음을 의미하는 상수 값

//number 타입
console.log(typeof NaN); // 숫자가 아님을 의미하는 상수 값(Not a Number의 약자)
console.log(typeof Infinity); // 양의 무한대를 의미하는 상수 값
console.log(typeof -Infinity); // 음의 무한대를 표현할 때는 앞에 -를 붙인다.

//object 타입
console.log(typeof (new Object())); // 자바스크립트 객체

//function 타입
console.log(typeof (function f() {})); // 자바스크립트 함수
console.log(typeof ((a) => {console.log(a)})); // arrow function

var v = function() {};

// 이렇게 변수에 들어있는 값이 무슨 타입인지 검사할 때 사용한다.
if ("function" == typeof v) {
  console.log("함수입니다!");
}
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.