JavaScript 과정 - 1/3 섹션

[clique aqui para ler em português]

JS란?
JavaScript는 WEB의 정보를 조작하는 데 도움이 되는 프로그래밍 언어입니다.

역사.
JavaScript는 Brendan Eich가 Netscape 서비스에서 1995년 5월 불과 열흘 만에 만들었다.처음에는 모카라고 불렸지만 나중에는 LiveScript라고도 불렸다.얼마 후 망경회사는 Sun회사로부터 상표 허가증을 받았고 그 이름을 자바스크립트로 바꾸어 마케팅 전략으로 이 언어를 홍보했다. 그러나 결국 많은 사람들이 자바스크립트가 자바를 기반으로 한 것이라고 곤혹스러워했다.1997년에 자바스크립트는 ECMA(유럽 컴퓨터 제조업체 협회)에 제출되어 규범을 만들었다.JavaScript라는 이름은 Sun Microsystems(오늘의 Oracle)의 특허를 획득하여 사용할 수 없습니다.따라서 ECMA 및 JavaScript로 구성된 이름을 사용하여 ECMAScript가 생성됩니다.이 이름이 있더라도 이 언어는 여전히 자바스크립트라고 친근하게 불린다.ECMAScript는 언어 버전을 참조하는 데만 사용됩니다.

바닐라 JS
몇 개의 js 프레임워크가 있는데 매일 새로운 것이 나타난다. 이것이 바로 그들이 작은 농담을 해서 바닐라라는'프레임워크'를 만들었기 때문이다.js는 최종적으로 순수한 자바스크립트에 불과하다. 라이브러리나 프레임워크를 사용하는 것이 항상 최선의 방법은 아니다. 때로는 순수한 자바스크립트를 사용하여 기능을 만드는 것이 더 간단하고 빠르다는 것을 나타낸다.

우스갯소리
한 사이트는 Vanilla JS를 틀로 경쾌하게 표현했다고 한다.

Vanilla JS is a fast, lightweight, cross-platform framework
for building incredible, powerful JavaScript applications.

영어에는 어떤 사물의 가장 흔한 버전을 뜻하는'Vanilla something'이라는 짧은 말이 있다.
바닐라 맛은 과자나 사탕에서 가장 흔하기 때문이다.

공구.
브라우저:

Chrome ;

Firefox ;

Microsoft Edge ;

Opera ;

Internet Explorer ;

Safari ;

등...

편집:

Visual Studio Code ;

Notepad++ ;

Sublime Text ;

Atom ;

Brackets ;

등...

페이지에 JavaScript 추가
JavaScript는 <script> 요소를 사용하여 페이지를 삽입하는데, 내부와 외부의 두 가지 삽입 방식이 있다.

내부 JavaScript
내부 JavaScript는 <script> 태그에서 다음과 같이 사용됩니다.

<script>
alert('ok');
</script>

외부 JavaScript
외부에서 사용하기 위해서 <script> 표시를 사용하지만, 스크립트 파일의 위치를 정의하기 위해 src 속성을 추가했습니다.

<script src="script.js"></script>

스크립트를 로드하는 정책
스크립트를 올바른 순서로 불러올 때 몇 가지 문제가 발생합니다.불행히도 보기만큼 쉬운 일은 없다!흔히 볼 수 있는 문제는 페이지의 모든 HTML이 나타나는 순서대로 불러오는 것이다.JavaScript를 사용하여 페이지의 일부 요소를 조작하는 경우 HTML 요소가 사용 가능하기 전에 JavaScript를 로드하고 실행하면 코드가 작동하지 않습니다. 몇 가지 해결 방안이 있습니다.
첫 번째 방법은 전체 문서를 불러온 후에만 실행되는 이벤트를 추가하는 것입니다.

document.addEventListener("DOMContentLoaded", function() {
});

이것은 'DomcontentLoaded' 이벤트가 브라우저에서 오는 것을 감청하고 기다리는 이벤트 감청기입니다. 이것은 HTML 주체가 완전히 불러오고 준비가 되었다는 것을 의미합니다.이벤트를 트리거하기 전에는 블록의 JavaScript 코드가 실행되지 않으므로 오류를 방지할 수 있습니다.
외부 JavaScript를 사용하면 현대 JavaScript 기능을 사용하여 이 문제를 해결할 수 있습니다. 이것은 defer 속성입니다. 이것은 브라우저가 도착 <script> 표시된 후에 HTML 내용을 계속 보여 주는 것입니다.

<script src="script.js" defer></script>

이 경우 스크립트와 HTML이 동시에 로드되고 코드가 정상적으로 작동합니다.
주의: 외부 상황에서 DomcontentLoaded 이벤트를 사용할 필요가 없습니다. defer 속성이 이 문제를 해결했기 때문입니다.외부 스크립트에만 적용되기 때문에 defer를 내부 예시로 사용하지 않습니다.
이 문제를 해결하는 구식 방법은script 요소를 페이지의 맨 밑에 놓는 것이다. ((</body> 표시하기 전에)그러면 모든 HTML 컨텐트가 바로 로드됩니다.이러한 해결 방안의 문제는 모든 HTML 내용을 분석하기 전에 스크립트의 불러오기/렌더링이 완전히 차단된다는 것이다.많은 스크립트가 있는 대형 사이트에서 이 해결 방안은 심각한 성능 문제를 초래하고 사이트의 운행 속도를 떨어뜨릴 수 있다.

비동기 및 지연(비동기 및 지연)

비동기식 속성(비동기식)
async 속성은 브라우저에 스크립트가 비동기적으로 실행될 수 있음을 표시하는 데 사용됩니다.HTML 구문 분석은 스크립트 요소를 찾을 때 일시 중지되지 않으며 요청이 병렬적으로 발생하며 스크립트가 완전히 로드될 때 실행됩니다.

<script async src="script.js">

이 속성은 외부 파일에 있는 스크립트에만 적용됩니다.외부 스크립트에 이 속성이 포함된 경우 HTML을 분석할 때 파일을 요청할 수 있습니다.완료되면 HTML 분석을 일시 중지하고 스크립트를 실행합니다.

지연 속성(지연)
defer 속성은 브라우저에 HTML 분석이 완료된 경우에만 스크립트를 실행할 수 있음을 알려줍니다.
async와 마찬가지로 defer를 사용할 때 스크립트는 비동기적으로 다운로드되지만, 그 실행은 전체 렌더링 과정이 끝났을 때만 발생합니다. 이 속성의 이름이 알려준 것처럼 (to defer=delay) 일부 내용을 '늦추기' 합니다. 이 예에서 스크립트의 실행을 가리킵니다.

<script defer src="script.js">

스크립트는 비동기적으로 요청되고 다운로드가 완료되며 HTML 문서의 분석이 완료된 경우에만 실행됩니다.전체 스크립트 다운로드가 전체 HTML 구문 분석 전에 발생하더라도 구문 분석 후에야 실행됩니다.
지연 속성이 있는 여러 스크립트 요소가 있는 경우

<script defer src="jquery.js">
<script defer src="bootstrap.js">

그것들은 병렬 요청을 받고 성명된 순서대로 실행될 것이다.

정상 실행, 비동기식 또는 지연?
모든 상황을 이해하고 분석한 후에도 문제는 여전히 존재한다. 우리는 언제 정상적인 실행, 비동기, 지연을 사용해야 합니까?예전과 같이, 이것은 상황에 달려 있다!우리는 또 다른 몇 가지를 고려해야 한다.

스크립트 요소는 어디에 있습니까?
async와 defer가 있는script 요소는 HTML 문서의 끝에 있지 않을 때 가장 큰 차이가 발생합니다.HTML 문서의 분석은 왼쪽에서 오른쪽으로, 위에서 아래로, 첫 번째 성명된 요소에서 시작하여 닫힐 때까지 합니다.외부 스크립트가/body 요소 앞에 있으면 async와 defer 속성을 사용하면 군더더기가 됩니다.이때 문서 분석이 거의 완성되었기 때문에, 이 스크립트 요소들은 막을 수 있는 내용이 많지 않다.

이 스크립트는 다른 스크립트에 의존하지 않습니까?
불러오는 외부 스크립트가 다른 파일과/또는 자신들에게 의존하지 않는다면, async 속성은 보통 매우 유용합니다.언제 실행될지 너무 걱정할 필요가 없기 때문에, 비동기적으로 불러오는 것이 올바른 선택입니다.

JavaScript 실행 순서
브라우저에서 JavaScript 코드를 찾으면 일반적으로 위에서 아래로 실행됩니다.이것은 네가 물건을 놓는 순서에 주의해야 한다는 것을 의미한다.

서버측 및 클라이언트
서버 사이드 (server-side) 와 클라이언트 (client-side) 라는 두 용어를 들을 수 있습니다. 특히 웹 개발 환경에서.클라이언트 코드는 사용자의 컴퓨터에서 실행됩니다. 웹 페이지를 볼 때 브라우저는 클라이언트 코드를 다운로드하고 실행하며 표시합니다.
다른 한편, 서버 측 코드는 서버에서 실행되고 실행 결과는 다운로드하여 브라우저에 표시됩니다.유행하는 서버측 언어의 예​​PHP, Python, Ruby 및 ASP가 포함됩니다.그물그리고 자바스크립트!JavaScript는 유행하는 노드와 같은 서버측 언어로도 사용할 수 있습니다.js 환경.

동적 및 정적
'동적' 이란 클라이언트와 서버측 자바스크립트를 설명하는 데 쓰인다. 이 단어는 웹 페이지와 응용 프로그램의 디스플레이를 업데이트하여 서로 다른 상황에서 서로 다른 내용을 표시하고 요청에 따라 새로운 내용을 생성하는 능력을 가리킨다.서버측 코드는 서버에서 동적으로 새 내용을 생성하고 데이터베이스에서 데이터를 추출하며 클라이언트 자바스크립트는 클라이언트 브라우저에서 동적으로 새 내용을 생성합니다. 예를 들어 서버에서 받은 데이터로 새 HTML 테이블을 만들고 사용자에게 표시되는 웹 페이지에 이 테이블을 표시합니다.이 두 컨텍스트의 의미는 약간 다르지만 서로 연관되어 있으며 일반적으로 두 컨텍스트(JavaScript 서버와 클라이언트)가 함께 작동합니다.
동적 업데이트가 없는 페이지를 정적 페이지라고 부른다. 모든 시간에 같은 내용을 표시한다.

읽어주셔서 감사합니다!
질문, 고소, 알림이 있으면 댓글에 남겨 두십시오.나는 기꺼이 대답한다!
😊😊 안녕히 계세요!😊😊