Language & Solution/JavaScript

JavaScript 무엇인가?(1)

hc_Jo 2021. 8. 25. 19:54

JavaScript 란

JavaScript (JS)는 스크립트 혹은 프로그래밍 언어이다. 보통 클라이언트 측에서 웹 페이지를 동적으로 다룰 때 사용된다. 그러나 서버측에서 Node.js 와 같은 패키지를 이용하여 사용되기도 한다.

 자바스크립트는 표준 웹 기술이라는 레이어 케이크에서 세번째 층이라고 볼 수 있습니다. 

  • HTML은 제공할 웹 컨텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 등으로 정의하고 부여하는 마크업 언어입니다.
  • CSS는 배경색, 폰트 등의 레이아웃등을 지정하여 HTML 컨텐츠를 꾸며주는 스타일 규칙 언어입니다.
  • JavaScript는 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 그리고 꽤나 많은 다른 일(물론, 전부는 아니지만 몇 줄만의 자바스크립트 코드로 얻는 결과는 놀라울겁니다.)들을 할 수 있는 스크립트 언어입니다.

 

3개의 요소들은 각각 유기적으로 잘 구성되어 있습니다. 예제와 같이 간단한 폼을 만들어 봅시다. HTML을 사용하여 그 구조와 목적에 맞게 마크업 할 수 있습니다

 

 

<p>Player 1: Chris</p>

그리고 CSS를 추가하여 이쁘게 꾸밀 수도 있습니다:

p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor:pointer;
}

그러고 마지막으로 약간의 자바스크립트로 동적인 기능을 추가할 수 있습니다:

 

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

마지막 버전의 텍스트 라벨을 클릭하여 어떻게 되는 지 확인하기.

 

자바스크립트 언어의 핵심은 다음과 같은 일들을 할 수 있게하는 프로그래밍 기능들로 구성되어 있습니다:

  • 변수안에 값을 저장할 수 있습니다. 위의 예시를 보면, 작성된 새로운 이름을 name이라는 변수에 저장하였습니다.
  • 프로그밍에서 '문자열(strings)'이라고 불리는 문자들도 조작 가능합니다. 위 예시에 보면 "Player 1:"이라는 문자열을 name이라고 만든 변수와 겹합하여 "Player 1: Chris"라는 글을 완성할 수 있었습니다.
  • 웹 페이지상의 이벤트에 응답하는 코드를 작성할 수 있습니다. 예제에서 사용한 click 이벤트를 통해 요소가 언제 클릭되고, 텍스트 라벨을 업데이트 시킬지 정정의하였습니다.

Application Programming Interfaces (APIs) 라는 것은 자바스크립트 코드에 사용할 수 있는 것들을 제공합니다. 

API는 이미 만들어진 코드의 집합체, 개발자들이 만들기 어려운 부분을 쉽게 구현하도록 도와주는 프로그램입니다.

일반적으로 두 종류로 구분됩니다.

Browser API는 웹 브라우저에 설치된 API들입니다.

  • DOM (Document Object Model) API 는 동적으로 페이지의 스타일을 정하는 등 HTML과 CSS를 알맞게 조정하는 역할을 합니다. 우리가 매일 보는 팝업창이나, 위의 사진과 같이 컨텐츠들이 보여지는 것들이 모두 DOM의 결과라고 볼 수 있습니다.
  • Geolocation API은 지리적인 정보를 검색하게 해줍니다. 이는 Google Maps이 어떻게 위치를 찾고 지도에 표시하는지 알 수 있게 합니다.
  • Canvas 와 WebGL API는 2D와 3D 그래픽을 만들 수 있도록 합니다. 이러한 웹 기술을 사용하여 다양하고 재미있는 것들을 지원합니다. 
  • HTMLMediaElement 와 WebRTC 같은 Audio and Video API는 음악과 비디오를 웹 페이지 상에서 재생하고, 웹캠으로 캡처하고 다른 컴퓨터에 표시하는 등의 멀티미디어를 활용할 수 있는 재미있는 기술을 지원합니다.

Third party API 는 브라우저에 기본적으로 설치된 API가 아닌 인터넷에서 개인적으로 정보와 코드를 얻어 프로그래밍한 것입니다.