웹 개발자를 위한 JavaScript 실행 시 및 구성 요소 - ECMAScript, DOM 및 BOM

8868 단어 reactnodewebdevjavascript

JavaScript is certainly one of those programming languages which you can get started within a few hours due to its simple syntax, but would probably take you years to master it.


JavaScript를 파악하려면 전체 생태계의 작업 방식을 깊이 있게 이해해야 한다.자바스크립트의 핵심 생태계는 ECMAScript, 자바스크립트 엔진, 자바스크립트가 실행될 때 세 가지 주요 구성 요소로 구성되어 있다.이 모든 것은 이해what is ECMAScript and how is it different from JavaScript부터 시작하고, 그 다음은 JavaScript Engine과JavaScript Runtime에 대한 이해이다.바로 자바스크립트가 실행될 때NodeJS and Google Chrome can use the same JavaScript Engine 개발자의 자바스크립트 구현이 매우 다르기 때문이다.

JavaScript 런타임 또는 JavaScript 호스트란 무엇입니까?


JavaScript가 실행될 때(또는 JavaScript 호스트)는 JavaScript 엔진을 사용하여 API를 생성하는 용기로 이해할 수 있으며, 소프트웨어 개발자는 이러한 API를 사용하여 JavaScript를 사용하는 응용 프로그램을 만들 수 있습니다.브라우저의 JavaScript가 실행될 때 예를 들면, 일반적으로 브라우저에 더 특정한 JAVScript 구현을 포함한다.NodeJs와 같은 실행은 자바스크립트를 사용하여 서버 측 응용 프로그램을 실행하고 구축하는 데 더욱 특정한 실현을 가진다.

웹 개발을 위한 브라우저의 JavaScript 실행 시


브라우저의 자바스크립트가 실행될 때 자바스크립트를 실현하여 개발자가 웹을 위해 응용 프로그램을 개발할 수 있도록 합니다.웹 브라우저가 실행될 때 다음 세 가지 중요한 구성 요소를 포함합니다.

  • ECMAScript의 핵심인 JavaScript의 기본적인 실현을 바탕으로 개발자가 사용할 수 있는 모든 입력과 출력 함수를 갖추고 있다.

  • 문서 객체 모델(DOM) - 브라우저에서 XML 및 HTML을 클라이언트 또는 사용자에게 표시하는 노드의 계층 구조로 표시합니다.

  • 브라우저 객체 모델(BOM) - 개발자가 브라우저 창을 조작할 수 있도록 하는 기능입니다.BOM을 사용하면 개발자는 브라우저 기능에 액세스하여 DOM 또는 현재 표시되는 페이지의 컨텍스트 외부에서 작업할 수 있습니다.
    • 모든 구성 요소의 세부 사항을 깊이 있게 이해합시다.

    ECMAScript 기반 핵심 IO 함수


    history of JavaScript에 대해 조금만 알아보면 ECMAScript가 무엇인지 똑똑히 알 수 있습니다.ECMAScript는 유럽컴퓨터제조업체협회(ECMA)가 ECMA-262에서 정의한 표준에 따라 구축한 유니버설 스크립트 언어이다.1997년부터 JavaScript의 표준화를 실현하기 위해서다.
    JavaScript는 ECMAScript의 구현입니다. 모든 웹 브라우저는 JavaScript 엔진을 만들고 실행할 때 환경을 따라야 합니다.ECMAScript는 입출력 함수를 포함하지 않으며, 반대로 ECMAScript 설정의 준칙을 사용하여 다양한 함수를 구현하는 JavaScript입니다.ECMAScript와 JavaScript는 서로 다릅니다.ECMAScript는 ECMA-262에 정의된 표준 스크립트 언어로 웹 브라우저와 무관합니다.ECMAScript를 기반으로 JavaScript와 같은 강력한 스크립트 언어를 구축했습니다.

    문서 객체 모델 또는 DOM


    문서 객체 모델은 언어와 무관한 XML 및 HTML 인터페이스로 전체 문서를 노드 계층으로 매핑하여 트리 표현을 만듭니다.아래에 제시된 HTML 코드는 노드 차원 구조의 완벽한 예이다.
    <!DOCTYPE html>
<html>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
</body>
</html>

    문서 객체 모델(DOM)이 필요한 이유는 무엇입니까?


    인터넷 초기에 Netscape Navigator 4와 인터넷 탐색기 4 사이에 브라우저가 있었다.이 두 브라우저는 모두 서로 다른 버전의 동적 HTML(DHTML)을 따르기 때문에 서로 다른 브라우저에서 같은 HTML 코드를 실행하기 어렵다.사람들이 인터넷이 크로스플랫폼 성격을 잃을까 봐 갈수록 걱정하면서 새로운 독립 기구인 유니버설 네트워크 연맹 (W3C) 이 설립되었다.W3C는 DOM에서 작업을 시작할 때 웹 통신의 표준을 유지할 책임이 있습니다.DOM 덕분에 JavaScript는 동적 HTML을 만들 수 있고 개발자는 문서의 각 노드를 조작할 수 있습니다.
    DOM은 개발자가 원하는 방식으로 HTML 문서를 변경할 수 있도록 다양한 방법을 프로그래밍 인터페이스로 제공합니다.다음은 DOM API 기능의 몇 가지 예입니다.
  • id나 클래스를 바탕으로 웹 페이지에서 요소를 찾는 능력.
  • 레이블 간의 스타일 또는 컨텐트를 변경할 수 있습니다.
  • 페이지의 각종 이벤트를 추적하고 이벤트 탐지기의 능력을 추가합니다.
  • HTML 노드를 추가하거나 삭제할 수 있습니다.
  • 다음으로 추정
    • 브라우저의 객체document를 사용하여 DOM에 액세스할 수 있습니다.다음은 브라우저의 id="demo" 객체의 도움말에서 document 액세스 요소를 사용하여 JavaScript를 사용하는 간단한 예입니다.
    <HTML>
  <body>

   <p id="demo"></p>

   <script>
   document.getElementById("demo").innerHTML = "Hello World!";
   </script>

  </body>
</html>
    이것은 브라우저에서 문서 객체의 공식 list of all the properties and methods 입니다.

    브라우저 객체 모델 또는 BOM 테이블


    DOM이 문서와 상호작용하는 인터페이스인 것처럼 브라우저 대상 모델은 문서 자체의 상하문 밖에서 브라우저와 상호작용하는 인터페이스이다.BOM은 자바스크립트에서 유일하게 표준이 없는 부분이기 때문에 상당히 문제가 있다고 여겨진다.그러나 HTML5의 출시에 따라 BOM과 관련된 대부분의 기능은 HTML5의 공식 표준의 일부가 되었고 이는 BOM을 둘러싼 혼란을 크게 감소시켰다.
    브라우저 창을 나타내는 window 객체를 사용하여 BOM 테이블에 액세스할 수 있습니다.모든 전역 변수는 브라우저에서 창 객체의 일부입니다.창 객체와 해당 속성에 액세스하는 방법을 살펴보겠습니다.
    <!DOCTYPE html>
<HTML>
  <body>

    <p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
</script>

</body>
</html>
    다음은 BOM API에서 제공하는 몇 가지 기능의 예입니다.
  • 창문을 열거나 닫습니다.
  • 창 크기를 이동하거나 조정합니다.
  • 창의 크기를 가져옵니다.
  • 사용자의 위치를 요청합니다.
  • 브라우저의 기록을 가져옵니다.
  • 쿠키 액세스
  • 다음으로 추정
    • 이것은 브라우저 대상 모델의 공식 버전list of all the properties and methods이다.
    이 세 가지 구성 요소는 브라우저에서 JavaScript가 실행될 때 JavaScript 엔진과 상호작용하는 API를 제공합니다.이 글에 엄지손가락을 세워 사랑을 전파해 주십시오. 만약 당신이 그것을 좋아한다면, 저를 동력을 유지하게 해 주십시오.너는 여기서 다음 문장을 볼 수도 있고, subscribe to my Newsletter도 볼 수 있다. 나는 다음 문장이 발표된 후에 즉시 너에게 통지할 것이다.만약 쓸모가 있다면, 칭찬을 남기거나 이 글을 공유하는 것을 잊지 마세요!
    Search IMAP Mailbox for Email Matching Criteria
    Linux 정시 작업 스케줄링

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage