테크

JavaScript란 무엇인가, 무엇을 할 수 있는가?

이스코 2023. 3. 3. 14:38

이 글에서는 JavaScript는 무엇인가 그리고 무엇을 하는가에 대해 알아보겠습니다. 또한 JavsScript는 페이지에서 어떻게 작용하는가에 대해서도 알아보겠습니다.

JavaScript란 무엇인가

JavaScript는 웹 페이지에 복잡한 기능을 구현할 수 있게 해주는 스크립팅 또는 프로그래밍 언어입니다. 웹 페이지는 단순히 거기에 앉아서 사용자가 볼 수 있도록 정적 정보를 표시하는 것 이상을 수행할 때마다 적시에 콘텐츠 업데이트, 대화형 지도, 애니메이션 2D/ 3D 그래픽, 스크롤 비디오 주크박스 등  JavaScript와 관련되어 있을 것입니다. 

  • HTML 은 예를 들어 단락, 제목 및 데이터 테이블을 정의하거나 페이지에 이미지 및 비디오를 삽입하는 등 웹 콘텐츠를 구조화하고 의미를 부여하는 데 사용하는 마크업 언어입니다.

 

  • CSS 는 HTML 콘텐츠에 스타일을 적용하는 데 사용하는 스타일 규칙 언어입니다. 예를 들어 배경색과 글꼴을 설정하고 콘텐츠를 여러 열에 배치합니다.

 

  • JavaScript 는 동적으로 업데이트되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 것을 가능하게 하는 스크립팅 언어입니다. 

 

세 개의 레이어가 서로 멋지게 쌓입니다. 간단한 텍스트 레이블을 예로 들어 보겠습니다. 구조와 목적을 부여하기 위해 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;
}

 

마지막으로 동적 동작을 구현하기 위해 JavaScript를 추가할 수 있습니다.

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

para.addEventListener('click', updateName);

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

JavaScript는 그보다 훨씬 더 많은 일을 할 수 있습니다. 자세한 내용을 살펴보겠습니다.

 

그렇다면 실제로 무엇을 할 수 있는가

'소위 애플리케이션 프로그래밍 인터페이스 ( API )는 JavaScript 코드에서 사용할 수 있는 추가 강력한 기능을 제공합니다.

API는 개발자가 구현하기 어렵거나 불가능한 프로그램을 구현할 수 있도록 하는 기성품 코드 빌딩 블록 세트입니다. 

 

그들은 기성품 가구 키트가 주택 건설을 위해 하는 것과 동일한 프로그래밍을 합니다.

 

직접 디자인을 해결하고 가서 원하는 것을 찾는 것보다 기성품 패널을 가져와서 나사로 조여 책장을 만드는 것이 훨씬 쉽습니다.

 

올바른 나무, 모든 패널을 올바른 크기와 모양으로 자르고 올바른 크기의 나사를 찾은 다음 함께 책장을 만듭니다.

그들은 일반적으로 두 가지 범주로 나뉩니다.

브라우저 API는 웹 브라우저에 내장되어 있으며 주변 컴퓨터 환경에서 데이터를 노출하거나 유용하고 복잡한 작업을 수행할 수 있습니다. 

예를 들어:

 

- DOM (Document Object Model) API사용하면 HTML 및 CSS를 조작하고 HTML을 생성, 제거 및 변경하고 페이지에 새 스타일을 동적으로 적용하는 등의 작업을 수행할 수 있습니다. 페이지에 팝업 창이 표시되거나 일부 새로운 콘텐츠가 표시될 때마다 간단한 데모) 예를 들어 작동 중인 DOM입니다.

 

- 지리 정보를 검색 Geolocation API합니다. 이것이 Google 지도가 사용자의 위치를 ​​찾아 지도에 표시하는 방법입니다.

 

- API를 Canvas사용 WebGL하면 애니메이션 2D 및 3D 그래픽을 만들 수 있습니다. 사람들은 이러한 웹 기술을 사용하여 놀라운 일을 하고 있습니다. 

 

- 오디오 및 비디오 API는 웹 페이지에서 바로 오디오 및 비디오를 재생하거나 웹 카메라에서 비디오를 가져와서 다른 사람의 컴퓨터 에 표시하는 것과 같이 멀티미디어로 정말 흥미로운 일을 할 수 있도록 합니다.

 

타사 API는 기본적으로 브라우저에 내장되어 있지 않으며 일반적으로 웹 어딘가에서 해당 코드와 정보를 가져와야 합니다. 예를 들어:

  • Twitter API를 사용하면 웹사이트에 최신 트윗을 표시하는 것과 같은 작업을 수행할 수 있습니다.
  • Google Maps API 및 OpenStreetMap API를 사용 하면 맞춤 지도를 웹사이트 및 기타 기능에 삽입할 수 있습니다.

 

페이지에서 JavaScript는 무엇을 하는가

브라우저에서 웹 페이지를 로드할 때 어떤 일이 발생하는지 간략하게 요약해 보겠습니다. 

브라우저에서 웹 페이지를 로드하면 실행 환경(브라우저 탭) 내에서 코드(HTML, CSS 및 JavaScript)가 실행됩니다. 

 

이것은 원자재(코드)를 들여와 제품(웹 페이지)을 출력하는 공장과 같습니다.

 

JavaScript의 매우 일반적인 용도는 Document Object Model API(위에서 언급한 대로)를 통해 HTML 및 CSS를 동적으로 수정하여 사용자 인터페이스를 업데이트하는 것입니다. 

 

웹 문서의 코드는 일반적으로 페이지에 나타나는 순서대로 로드되고 실행됩니다. 수정하려는 HTML 및 CSS보다 먼저 JavaScript를 로드하여 실행하면 오류가 발생할 수 있습니다.

브라우저 보안

각 브라우저 탭에는 코드를 실행하기 위한 별도의 버킷이 있습니다.

즉, 대부분의 경우 각 탭의 코드는 완전히 개별적으로 실행되며 한 탭의 코드는 직접 다른 탭 또는 다른 웹 사이트의 코드에 영향을 미칩니다. 

 

이것은 좋은 보안 조치입니다. 그렇지 않은 경우 해적은 다른 웹사이트에서 정보를 훔치는 코드를 작성하기 시작할 수 있습니다.

 

해석된 코드와 컴파일된 코드

프로그래밍 콘텍스트에서해석되고 컴파일 되는 용어를 들을 수 있습니다.

인터프리터 언어에서는 코드가 위에서 아래로 실행되고 코드 실행 결과가 즉시 반환됩니다.

 

브라우저가 실행하기 전에 코드를 다른 형식으로 변환할 필요가 없습니다. 

 

코드는 프로그래머에게 친숙한 텍스트 형식으로 수신되어 바로 처리됩니다.

 

반면에 컴파일된 언어는 컴퓨터에서 실행되기 전에 다른 형식으로 변환(컴파일)됩니다. 

 

예를 들어 C/C++는 컴퓨터에서 실행되는 기계 코드로 컴파일됩니다. 프로그램은 원래 프로그램 소스 코드에서 생성된 바이너리 형식에서 실행됩니다.

 

JavaScript는 경량 해석 프로그래밍 언어입니다. 

 

웹 브라우저는 원래 텍스트 형식의 JavaScript 코드를 수신하고 그로부터 스크립트를 실행합니다. 

 

기술적인 관점에서 볼 때 대부분의 최신 JavaScript 인터프리터는 실제로 적시 컴파일이라는 기술을 사용하여 성능을 향상합니다.

 

JavaScript 소스 코드는 스크립트가 사용되는 동안 더 빠른 바이너리 형식으로 컴파일되어 가능한 한 빨리 실행될 수 있습니다.

 

그러나 JavaScript는 컴파일이 미리 처리되지 않고 런타임에 처리되기 때문에 여전히 해석된 언어로 간주됩니다.

 

페이지에 JavaScript를 어떻게 추가합니까?

JavaScript는 CSS와 유사한 방식으로 HTML 페이지에 적용됩니다. CSS는 <link>요소를 사용하여 외부 스타일시트를 적용하고 <style>요소를 사용하여 내부 스타일시트를 HTML에 적용하는 반면 JavaScript는 HTML 세계에서 단 하나의 친구인 요소만 있으면 됩니다 <script> 이것이 어떻게 작동하는지 알아봅시다.

 

내부 자바스크립트

  1. 우선, 예제 파일인 apply-javascript.html 의 로컬 복사본을 만듭니다 . 적당한 디렉토리에 저장하십시오.
  2. 웹 브라우저와 텍스트 편집기에서 파일을 엽니다. HTML이 클릭 가능한 버튼이 포함된 간단한 웹 페이지를 생성하는 것을 볼 수 있습니다.
  3. 다음으로, 텍스트 편집기로 이동하여 닫는 태그 바로 앞에 머리 속에 다음을 추가합니다 </head>. 
    <script>
  // JavaScript goes here
</script>

     

  4. 이제 요소 내부에 JavaScript를 추가하여 <script>페이지가 더 흥미로운 작업을 수행하도록 합니다. "// JavaScript goes here" 줄 바로 아래에 다음 코드를 추가합니다. 
    document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});
  5. 파일을 저장하고 브라우저를 새로 고칩니다. 이제 버튼을 클릭하면 새 단락이 생성되어 아래에 배치되는 것을 볼 수 있습니다.
 

 

외부 자바스크립트

JavaScript를 외부 파일에 넣고 싶다면 어떻게 해야 할까요? 지금부터 살펴보겠습니다.

  1. 먼저 샘플 HTML 파일과 동일한 디렉토리에 새 파일을 만듭니다. 그것을 호출하십시오 script.js 그것이 JavaScript로 인식되는 방식이므로 .js 파일 이름 확장자를 가지고 있는지 확인하십시오.
  2. 현재 <script>요소를 다음으로 바꿉니다. 
    <script src="script.js" defer></script>

     

     

  3. 내부에 script.js다음 스크립트를 추가합니다. 
    function createParagraph() {
  const para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

const buttons = document.querySelectorAll('button');

for (const button of buttons) {
  button.addEventListener('click', createParagraph);
}

     

  4. 브라우저를 저장하고 새로 고치면 같은 내용이 표시됩니다.  동일하게 작동하지만 이제 외부 파일에 JavaScript가 있습니다. 이것은 일반적으로 코드를 구성하고 여러 HTML 파일에서 재사용할 수 있도록 하는 측면에서 좋은 것입니다. 또한 HTML은 엄청난 양의 스크립트를 덤프하지 않고도 읽기 쉽습니다.

 

 addEventListener 사용

HTML에 JavaScript를 포함하는 대신 순수한 JavaScript 구조를 사용하십시오. 이 querySelectorAll()기능을 사용하면 페이지의 모든 버튼을 선택할 수 있습니다. 그런 다음 를 사용하여 각 버튼에 핸들러를 지정하여 버튼을 반복할 수 있습니다 addEventListener(). 이에 대한 코드는 다음과 같습니다.

const buttons = document.querySelectorAll('button');

for (const button of buttons) {
  button.addEventListener('click', createParagraph);
}

이것은 속성보다 약간 길 수 있지만 onclick페이지에 얼마나 많은 버튼이 있는지, 얼마나 많은 버튼이 추가 또는 제거되었는지에 관계없이 모든 버튼에 대해 작동합니다. JavaScript는 변경할 필요가 없습니다.