HTML은 웹페이지의 구조를 제어한다. CSSHTML 구조의 디스플레이와 디자인을 제어한다. JavaScriptHTML 요소의 행동과 인터렉티비티(상호작용, Interactivity)을 추가해준다.


1. JavaScript는 스크립트 언어이다.

  • 의도적으로 제한되어 있다.
  • C++ 이나 Java같은 프로그래밍언어와 다른 특징들을 가진다.
  • 컴퓨터 내 파일시스템이나 데이터베이스와 직접 통신할 수 없다.
  • 웹페이지를 제어하기 위한 언어이다.
  • 클라이언트 사이드 언어이다.
  • 자바스크립트는 사용자 경험을 강화하기 위한 언어이다. 따라서 핵심 기능에서는 사용하지 않는다.
  • JAVA와는 상관없는 언어이다. 단지 당시 JAVA가 유명했기 때문에 이러한 이름이 붙여졌다.
  • 자바스크립트의 공식 이름은 ECMAScript이다.

클라이언트, 즉 브라우저에서 동작하는 언어를 클라이언트 사이드 언어라고 한다. 서버에서 받은 데이터를 브라우저에 처리하는 언어들이다. (ex_ HTML, CSS, JS)


2. 기본 문법

  • JavaScript는 대소문자를 구별한다.(이름처럼…)
  • 세미콜론(;)으로 종료하는 선언으로 구성한다.
  • 공백이나 줄바꿈을 인식하지 못한다.
  • //를 사용하여 한줄 주석을 쓴다.
  • /**/를 사용하여 여러 줄 주석을 쓴다.
  • 자바스크립트는 위에서부터 아래로 실행한다.


3. 기본 변수 선언

  • 다음과 같이 var를 사용하여 변수를 선언한다.
var myVar1 = 40;
  • 변수의 타입을 지정해줄 필요가 없다(동적타입을 지원한다)
var myVar2 = 20; (o)
int myVar3 = 10; (x)
  • 변수명은 CamelCase를 따른다.
  • 변수의 타입을 변환할 수 있다.(하지만 추천하지는 않는다.


4. 기본 연산자

// '=' 는 변수를 선언할 때 사용.
> var myVar = 5; 
> myVar
5

// 숫자끼리의 연산 가능
> 5 + 5
10

// 변수와 숫자 연산 가능
> myVar + 10
15

// 연산을 다시 변수에 할당
> myVar = myVar + 10
15
> myVar = myVar / 2
7.5

// 숫자와 문자를 합하면 숫자가 문자형으로 변환되어 합쳐진다.
> 5 + "hello"
"5hello"

> 100 + "wow"
"100wow"

// 문자와 문자형의 연산 가능
> "hello" + " david"
"hello david"

// 숫자와 문자는 곱해지지 않는다. 
// NaN은 Not a Number 이라는 뜻.
5 * "hello"
NaN

// myVar에 5를 더하여 새로 변수를 선언
> var myVar = 10;
undefined
> myVar = myVar + 5;
15
> myVar
15

// 위의 과정은 "<변수> <연산자>= <연산하려는 숫자>" 형식으로 짧게 사용가능
> myVar += 5;
20
> myVar
20

> myVar *= 2;
40
> myVar
40

// 전위/후위 연산자를 사용할 수도 있다.
> myVar
26

// 전위연산자 - 1 더한 후의 값을 출력
> ++myVar
27

// 후위연산자 - 출력하고 1 더하기 연산
> myVar++
27
// 다시 출력해보면 1이 더해져있다.
> myVar
28



Julia Hwang

디발자를 꿈꾸는 웹개발자의 블로그입니다.