javascript에 대해 간단히 설명해 보자면 1995년 12월 4일 개발된 언어로 브랜든 아이크가 10일 만에 설계한 것으로 시작한다.
모질라 재단 프로토타입 기반 프로그래밍 언어로, 스크립트 언어에 해당된다. 특수한 목적이 아닌 이상 모든 웹 브라우저에 인터프리터가 내장되어 있다.
웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어이다.
웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼 많은 비 브라우저 환경에서도 사용하고 있다.
프로토타입 기반, 다중 패러다임, 단일 스레드, 동적 언어로 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원한다.
html이 웹 페이지의 기본 구조를 담당하고
css가 디자인을 담당한다면
javascript는 클라이언트 단에서 웹페이지가 동작하는 것을 담당한다.
쉽게 비유하자면
자세히 말하자면
HTML은 웹 콘텐츠의 구조를 짜고 의미를 부여하는 마크업 언어이다. 예를 들어 페이지의 어디가 문단이고, 헤딩이고, 데이터 표와 외부 이미지/비디오인지 정의한다.
CSS는 HTML 콘텐츠에 스타일을 적용할 수 있는 스타일 규칙 언어이다. 배경색을 추가하고, 글꼴을 바꾸고, 콘텐츠를 신문처럼 다열 레이아웃으로 배치할 수 있다.
JavaScript는 동적으로 콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가하는 등 많은 것들을 만들 수 있는 스크립팅 언어이다.
JavaScript는 DOM (Document Object Model) API를 통해 HTML과 CSS를 동적으로 수정, 사용자 인터페이스를 업데이트하는 일에 가장 많이 쓰인다.
브라우저가 JavaScript 블록을 마주치면, 일반적으로는 순서대로 위에서 아래로 실행한다. 따라서 코드 배치 순서에도 주의를 기울여야 한다.
const abc = document.querySelector('p');
abc.addEventListener('click', updateID);
function updateID() {
const id = prompt('Enter a new ID');
abc.textContent = `Player 1: ${id}`;
}
인터프리터를 사용하는 언어에서는 코드를 위에서 아래로 실행하고, 코드 구동 결과는 즉시 반환된다. 브라우저에서 JavaScript 코드를 실행하기 전에 다른 형태로 변환할 필요가 없다는 점을 기억하자
코드는 프로그래머가 읽을 수 있는 형태로 입력되고, 별도의 처리 없이 그대로 실행된다.
웹 브라우저는 JavaScript 코드를 원문 텍스트 형식으로 입력받아 실행한다.
대부분의 모던 JavaScript 인터프리터들은 사실 JIT 컴파일(just-in-time 컴파일)이라는 기술을 사용해 성능을 향상한다.
이 방법은 스크립트의 실행과 동시에 소스 코드를 더 빠르게 실행할 수 있는 이진 형태로 변환하여 최대한 높은 실행 속도를 얻는 방법이다.
하지만 JavaScript는 여전히 인터프리터 언어로 분류된다. 컴파일을 먼저 해놔야 하는 것이 아니라 런타임에 일어나기 때문이다.
클라이언트 사이드 코드 : 클라이언트(사용자)측 컴퓨터에서 동작하는 코드이다.
서버 사이드 코드 : 서버(제공자)측애서 즉시 처리하는 코드이다.
실행 결과를 브라우저가 다운로드해서 화면에 띄우게 된다.
유명한 서버 사이드 웹 언어로는 PHP, Python, Ruby, 등등 그리고 JavaScript또한 포함 된다.
JavaScript는 브라우저 뿐만 아니라, 많은 사람들이 사용하는 Node.js 환경처럼 서버 사이드 언어로도 사용할 수 있다.
클라이언트 사이드 JavaScript와 서버 사이드 언어들 모두 동적이라는 단어로 설명할 수 있다.
그 이유는 웹 페이지/웹 앱의 서로 다른 상황에 서로 다른 화면을 보여줄 수 있고, 필요하면 새로운 콘텐츠를 생성할 수 있기 때문이다.
클라이언트 사이드 JavaScript는 클라이언트의 브라우저 내에서 새로운 콘텐츠를 생성 새로운 HTML 표를 생성하고, 서버에서 받아온 데이터로 채운 후, 사용자가 보고 있는 웹 페이지에 표시한다.
서버 사이드 코드는 서버에서 새로운 콘텐츠를 생성 데이터베이스에서 데이터를 가져오는 등등 수행한다.
두 맥락 내에서 '동적'이라는 단어의 정확한 뜻은 약간 다르지만, 그럼에도 서로 연관되어 있으며,
두 방법(클라이언트와 서버 사이드)을 보통 함께 사용한다.
Browser API는 웹 브라우저에 내장된 API로, 현재 컴퓨터 환경에 관한 데이터를 제공하거나 여러가지 유용하고 복잡한 일을 수행한다.
EX)
DOM (Document Object Model) : API로 HTML 콘텐츠를 추가, 제거, 변경하고, 동적으로 페이지에 스타일을 추가하는 등 HTML/CSS를 조작할 수 있다. 페이지 위에 뜨는 팝업창이나, 새로운 콘텐츠가 나타나는 것을 본 적이 있으면 DOM이 동작한 것이다.
Geolocation : API로 지리 정보를 가져올 수 있다. Google 지도에서 우리의 위치를 찾아 지도에 그릴 수 있는 이유가 바로 이 API이다.
Canvas와 WebGL : API로 애니메이션을 적용한 2D와 3D 그래픽을 만들 수 있다.
HTMLMediaElement와 WebRTC : 를 포함하는 오디오와 비디오 API로는 멀티미디어를 사용한 일을 할 수 있다. 예를 들어 오디오나 비디오를 웹 페이지에서 바로 재생하거나, 웹캠으로 비디오를 찍어 다른 사람의 화면에 보여줄 수 있다.
감사합니다 😊