[Javascript] Javascript란 무엇일까?

개발공부를 하면서 늘 궁금한 게 있었는데 자바스크립트는 무엇이며 우리가 왜 사용하는지?

자바스크립트로 무엇을 할 수 있는지에 대해서 간단하게 정리를 해보고자 한다.

 

 Javascript란?

 

자바스크립트는 웹 개발에서 주로 사용되는 프로그래밍 언어 중 하나이다.

웹 브라우저를 생동감 있게 내용을 만들어주거나 제어하기 위해 사용되는 언어이다.

HTML 및 CSS와 함께 웹 페이지를 구축하는데 중요한 역할을 한다.

 

예를 들어, 웹 페이지에서 버튼을 클릭하면 자바스크립트를 사용하여 그에 대한 반응을 만들 수 있다.

또한, 사용자가 어떤 입력을 하면 실시간으로 결과를 보여주거나, 화면을 업데이트하는 데에도 사용된다.

 

자바스크립트(Javascript)를 사용하는 이유는?

 

우리가 자바스크립트를 사용하는이유는 다양하겠지만 대표적으로 웹 페이지를 동적으로 만들고 조작할 수 있도록

해준다. 사용자의 상호작용에 따라 페이지를 다양하게 변경할 수 있다.

또한 브라우저 상호작용 구현을 통해 애니메이션, 페이지 내비게이션 등 다양한 기능을 구현할 수 있다.

자바스크립트는 거의 모든 웹 브라우저에서 지원되며, 커뮤니티와 생태계가 상당히 크고 활성화되어 있다.

 

자바스크립트(Javascript)를 사용하지 않고 HTML, CSS의 사이트라면?

 

HTML, CSS만 사용하여 웹페이지가 만들어졌다면 웹페이지는 정적인 웹사이트로

고정된 내용만 제공할 것이다. 사용자와의 상호작용에 의한 동적인 변경이 없을 것이다.

아래는 정적인 웹사이트와 동적인 웹사이트를 비교하는 것이다.

 

정적 웹사이트

클릭해도 반응이 없음

동적 웹사이트

 

javascript의 작동원리

 

1. 웹페이지 로드: 사용자가 웹 브라우저에서 웹페이지를 열면, HTML 문서가 다운로드되고 파싱된다. 2.DOM 생성:  HTML 문서의 내용을 기반으로 Document Object Model(DOM)이 생성된다. DOM은 웹페이지의 구조를 트리 형태로 표현하며, 각 요소에 대한 객체로 구성된다. 3. CSS 해석 및 렌더 트리 생성: CSS 스타일 시트가 다운로드되고 파싱된 후, DOM에 따라 각 요소에 스타일이 적용되어 렌더 트리(Render Tree)가 생성된다. 이는 실제 화면에 어떻게 표시될지를 정의한다. 4.자바스크립트 실행: 자바스크립트 코드가 만나는 시점에 실행된다. 일반적으로 <script> 태그 내부에 포함된 코드 또는 외부 스크립트 파일이 로드되면 해당 코드가 실행된다. 5.DOM 조작 및 이벤트 처리: 자바스크립트는 DOM을 조작하고 이벤트를 처리하여 동적인 내용 및 상호작용을 구현한다. 이는 사용자의 상호작용, 시간에 따른 이벤트 등을 다루는 데 사용된다. 6.비동기 작업: 비동기 작업, 예를 들면 AJAX 요청이나 타이머를 통한 작업,는 백그라운드에서 처리됩니다. 이를 통해 웹페이지는 사용자의 입력에 빠르게 반응하면서도 데이터를 비동기적으로 로드하거나 처리할 수 있다. 7.렌더링: 최종적으로 모든 작업이 완료되면, 브라우저는 렌더 트리를 기반으로 화면에 내용을 표시한다.