WeniVooks

검색

JavaScript 에센셜

JavaScript란?

1. 자바스크립트란?

htmlcssjs.gif

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

  • HTML, CSS를 프로그래밍적으로 제어할 수 있습니다.
  • 웹브라우저가 해석해서 실행할 수 있는 프로그래밍 언어입니다. (최근 웹어셈블리가 등장하면서 웹에서 실행할 수 있는 프로그래밍 언어가 늘어나고 있습니다.)
  • 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있게 되면서 서버 프로그래밍, 모바일 앱, 게임 프로그래밍 등 다양한 분야에서도 사용되고 있습니다.
most-popular-technologies-language | 2024

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

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

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

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

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

2. 자바스크립트의 등장과 변천사

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

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

JavaScript는 넷스케이프사에서 개발되었지만, ECMA International이라는 기구에 의해 표준화되었습니다. 표준화 당시에는 다양한 브라우저에서 이미 작동 중인 JavaScript를 통합하여 표준을 정리하였습니다. JavaScript의 표준은 ECMAScript(ECMA-262) 입니다. 2015년에 발표된 ES6를 기준으로 매년 새 버전으로 개정하고 있습니다.

ECMAScript

ES6는 2015년에 발표된 ECMAScript의 6번째 주요 버전으로, ES6 또는 ES2015로 불립니다.

표준 자바스크립트의 공식 명칭은 ECMAScript입니다. "ES"는 ECMAScript의 약어로 자주 사용되지만, 정확한 명칭은 ECMAScript입니다. 2015년 ES6를 이후로 매년 새 버전이 나오고 있으며, “ECMAScript연도” 형식으로 불리고 있습니다.

다만 이 표준을 모든 브라우저가 동일하게 지원하지 않습니다. 따라서 브라우저마다 JavaScript의 동작이 다를 수 있습니다. JavaScript 공부를 어렵게 만드는 요인 중 하나가 바로 이것입니다. 다행히도 가장 많은 것을 지원하지 않았던 인터넷 익스플로러가 사라지면서 이러한 문제가 어느정도 해결되고 있습니다.

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

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

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

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

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

FLEX x GRID DataGen | JSON Generator 알고리즘은 ALGO.VIEW weniv SQL game-with-phaser

바닐라 자바스크립트는 프레임워크나 라이브러리 없이 순수한 자바스크립트만 사용하는 것을 의미합니다. 별도의 언어가 아니며, 자주 등장하는 용어이므로 기억해두시면 좋습니다.

  1. 데이터를 저장하다

    JavaScript에서 데이터를 저장하는 방법과 데이터의 형태는 다음과 같습니다.

    • 저장 방법: var, let, const
    • 저장할 값의 형태: 숫자, 문자열, 빈 값(null, undefined), boolean(true, false), 배열, 객체
    • 코드의 뭉치: 함수

  2. 값을 계산하다

    JavaScript에서 값을 계산하는 방법은 다음과 같습니다.

    • 사칙연산: +, -, *, /
    • 논리연산: &&, ||, !
    • 조건문: if, else, switch
    • 반복문: for, while, do...while
    • 자료형의 내장 함수: String, Array, Object 등의 내장 메서드

  3. 결과를 반영하다

    JavaScript는 웹 페이지의 동작을 제어하기 위해 다음과 같은 API를 제공합니다.

    • DOM API: 문서 객체 모델(Document Object Model)을 제어
    • BOM API: 브라우저 객체 모델(Browser Object Model)을 제어

  4. 다른 컴퓨터와 통신하다

    JavaScript는 다른 컴퓨터와의 통신을 위해 다음과 같은 기술을 사용합니다.

    • Ajax: 비동기 JavaScript를 사용한 데이터 통신 기술
1장 JavaScript 기초1.2 JavaScript 실행하기