JavaScript 베이스캠프

JavaScript의 기초

1. JavaScript란?

자바스크립트는 1995년 넷스케이프사에서 브랜든 아이크 주도하에 만들어진 프로그래밍 언어입니다. 웹페이지에서 동작을 구현할 때 사용됩니다.

HTML, CSS를 프로그래밍적으로 제어할 수 있습니다.
웹브라우저가 해석해서 실행할 수 있는 유일한 프로그래밍 언어입니다. (최근 웹어셈블리가 포함되었으나, 웹어셈블리는 일반적인 프로그래머가 자주 사용하는 스택이 아니므로 여기서는 논외로 하겠습니다.)
요즘은 브라우저가 아닌 환경에서도 JavaScript를 실행할 수 있어, 게임 프로그래밍, 서버 프로그래밍 등 다양한 분야에서 사용되고 있습니다.

stackoverflow - most popular technologies language

자바스크립트는 프로그래밍 언어입니다.

프로그래밍 언어는 컴퓨터에게 명령을 내릴 수 있는 언어를 말합니다. 쉽게 말해, 우리가 컴퓨터에게 무엇을 하라고 지시할 때 사용하는 언어입니다. 이 언어는 컴퓨터가 이해할 수 있는 방식으로 작성되어야 합니다.

프로그래밍 언어는 Python, JAVA 등 다양한 언어가 있습니다. 이 중 JavaScript(JavaScript는 자바와 관련이 없음)는 웹 브라우저에서 작동하는 언어입니다. 웹 브라우저는 HTML, CSS, JavaScript라는 세 가지 중요한 언어를 사용하여 웹 페이지를 화면에 보여줍니다.

HTML은 웹 페이지의 구조를 만듭니다. 예를 들어, 제목, 문단, 목록 등을 정의합니다.
CSS는 웹 페이지의 디자인을 꾸밉니다. 색상, 글꼴, 레이아웃 등을 설정합니다.
JavaScript는 웹 페이지가 어떻게 작동할지를 결정합니다. 예를 들어, 버튼을 클릭했을 때 일어나는 일을 정의합니다.

이 세 가지를 함께 사용하면 멋진 웹 페이지를 만들 수 있습니다!

2. 정적인 웹에서 동적인 웹으로

HTML, CSS, JavaScript는 동시에 등장한 기술이 아닙니다. HTML은 1993년에, CSS는 1996년에, JavaScript는 1995년에 발표되었습니다. 초기 웹 브라우저는 HTML만을 해석할 수 있는 HTML 리더기였습니다. 이후 CSS가 등장하면서 웹페이지의 디자인을 꾸밀 수 있게 되었습니다. 마침내 JavaScript가 등장하면서 웹페이지에 동적인 기능을 추가할 수 있게 되었습니다.

이 세 가지 기술이 함께 사용되면서 웹페이지는 정적인 페이지에서 동적인 페이지로 변화했습니다.

JavaScript의 원래 명칭은 ‘모카’(Mocha)에서 ‘라이브 스크립트’(LiveScript)로 변경되었다가 최종적으로 ‘자바스크립트’(JavaScript)가 되었습니다. 라이브 스크립트가 출시될 당시, 인기 있던 언어인 ‘자바’의 이름을 빌려와 자바스크립트가 되었습니다.

JavaScript는 넷스케이프사에서 개발되었지만, 표준화를 위해 ECMA International이라는 기구에 의해 표준화되었습니다. 표준화 당시에는 다양한 브라우저에서 이미 작동 중인 JavaScript를 통합하여 표준을 정리하였습니다. 다만 이 표준을 모든 브라우저가 동일하게 지원하지 않습니다. 따라서 브라우저마다 JavaScript의 동작이 다를 수 있습니다. JavaScript 공부를 어렵게 만드는 요인 중 하나가 바로 이것입니다. 다행히도 가장 많은 것을 지원하지 않았던 인터넷 익스플로러가 사라지면서 이러한 문제가 어느정도 해결되고 있습니다.

그렇다면 브라우저마다 다르게 지원하는 JavaScript를 어디서 확인할 수 있나요?

주로 caniuse.com이라는 사이트를 이용합니다. 이 사이트는 브라우저별 HTML, CSS, JavaScript 등 웹 기술의 지원 현황을 확인할 수 있는 사이트입니다. 아래 링크를 통해 JavaScript의 한 문법인 for of 문법의 지원 현황을 확인해보세요.

for of 문법의 브라우저 별 지원 현황

JavaScript의 표준 명칭은 ECMAScript(ECMA-262)입니다. 현재 ECMAScript 2021(ES12)까지 발표되었습니다.

자바스크립트가 지향하는 동적인(Live) 웹은 무엇일까요? 무엇이 정적이고 무엇이 동적일까요? 아래 프로젝트를 살펴봐주세요. 이는 바닐라 JavaScript로 만든 프로젝트입니다.

flexngrid JSON Generator 알고리즘은 [Algoview] Weniv SQL game-with-phaser

ES6는 ECMAScript 2015를 의미합니다. 2015년에 발표된 ECMAScript의 6번째 주요 버전이기 때문에 ES6라고 불립니다.

공식 명칭은 ECMAScript입니다. "ES"는 ECMAScript의 약어로 자주 사용되지만, 정확한 명칭은 ECMAScript입니다. ES6는 2015년, 그 다음부터는 “ECMAScript연도”로 기억을 해주시는 편이 기억하기 좋습니다.

바닐라 자바스크립트는 순수한 자바스크립트입니다. 별도의 언어가 아닙니다. 자주 등장하는 용어이므로 앞에서 한 번 정리하고 가도록 하겠습니다.

3. 동적인 웹을 위해 자바스크립트가 할 수 있는 것들

데이터를 저장하다

JavaScript에서 데이터를 저장하는 방법과 데이터의 형태는 다음과 같습니다.
- 저장 공간: var, let, const
- 저장할 값의 형태: 숫자, 문자열, 빈 값(null, undefined), boolean(true, false), 배열, 객체
- 코드의 뭉치: 함수
값을 계산하다

JavaScript에서 값을 계산하는 방법은 다음과 같습니다.
- 사칙연산: +, -, *, /
- 논리연산: &&, ||, !
- 조건문: if, else, switch
- 반복문: for, while, do...while
- 자료형의 내장 함수: String, Array, Object 등의 내장 메서드
결과를 반영하다

JavaScript는 웹 페이지의 동작을 제어하기 위해 다음과 같은 API를 제공합니다.
- DOM API: 문서 객체 모델(Document Object Model)을 제어
- BOM API: 브라우저 객체 모델(Browser Object Model)을 제어
다른 컴퓨터와 통신하다

JavaScript는 다른 컴퓨터와의 통신을 위해 다음과 같은 기술을 사용합니다.
- Ajax: 비동기 JavaScript와 XML을 사용한 데이터 통신 기술

4. JavaScript를 사용하는 여러가지 방법들

HTML 파일 내부 삽입하기

HTML내에 javascript를 포함하고 로드합니다.

HTML 태그 내 삽입

<button onclick="window.alert('hello world');">hello</button>

<button onclick="window.alert('hello world');">hello</button>

script 태그를 통해 삽입

<!DOCTYPE html>
<html lang="ko">
  <head> </head>
  <body>
    <script>
      window.alert('hello world!');
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head> </head>
  <body>
    <script>
      window.alert('hello world!');
    </script>
  </body>
</html>

HTML 파일 외부에 있는 스크립트 파일을 로드

외부 파일로 저장을 하고 로드합니다.

<!DOCTYPE html>
<html lang="ko">
  <head> </head>
  <body>
    <script src="test.js"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head> </head>
  <body>
    <script src="test.js"></script>
  </body>
</html>

브라우저 콘솔창

크롬 브라우저의 콘솔창은 Ctrl + Shift + i 버튼을 누르면 나오는 창입니다. 다음은 크롬에서 about:blank 페이지에 접속한 화면입니다.

이 페이지는 비어있는 페이지이며 간단한 javascript 연습을 하기 충분합니다.