안녕하세요, 세상! 첫 번째 JavaScript 프로그램

JavaScript 프로그래밍 학습의 첫 번째 단계 : "Hello, World!"부터 시작하십시오.

모든 프로그래밍 언어를 배우고 "Hello, World!" 이것은 "Hello, World!"라는 문구를 출력하여 프로그래밍 여행의 시작을 표시합니다. 우리는이 전통을 따르고이 프로그램을 JavaScript로 쓸 것입니다. "Hello, World!"라는 간단한 진술이 될 것입니다.

일반적으로 사용되는 콘솔 (Node Repl, Browser Console 또는 ES6 콘솔)을 열어야합니다. 콘솔이 열리면 다음 코드를 입력하십시오.

및

를 누르십시오. 모든 것이 잘되면 "Hello, World!"

<code class="language-javascript">console.log('Hello, World!');</code>

축하합니다, 당신은 방금 첫 JavaScript 프로그램을 썼습니다! 그것은 사소한 것처럼 보일지 모르지만, 한 명의 현명한 사람이 말했듯이 모든 프로그래밍 마스터는 코드 라인 (또는 유사한 것)으로 시작합니다.

브라우저의 javaScript 응용 프로그램 JavaScript는 호스트 환경을 실행 해야하는 해석 된 언어입니다. 기원으로 인해 JavaScript는 주로 브라우저에서 실행되고 있지만 방금 쓴 첫 번째 프로그램은 Node Repl에서 실행됩니다. 노드를 사용하여 서버에서 JavaScript를 실행할 수도 있습니다. 그러나 지금까지 JavaScript의 가장 일반적인 사용은 여전히 ​​웹 페이지를 대화식으로 만드는 것입니다. 따라서 진행하기 전에 웹 페이지의 구성을 이해해야합니다. 웹 페이지의 3 층 구조 거의 모든 웹 페이지는 HTML, CSS 및 JavaScript의 세 가지 주요 요소로 구성됩니다. HTML은 CSS를 표시하는 데 사용됩니다.

각 레이어는 이전 레이어의 기초 위에 구축됩니다. 웹 페이지는 HTML 계층에 의존하여 작동합니다. 사실 많은 웹 사이트가 "Naked Day"에서 CSS 계층을 제거합니다. HTML 레이어 만 사용하는 웹 사이트는 가장 순수한 형태로 제공되며, 이는 매우 구식으로 보이지만 여전히 완전히 작동해야합니다.

계층 적 분리를 유지하십시오 각 층의 초점을 분리하여 각 레이어가 한 가지만 담당하는 것은 모범 사례로 널리 알려져 있습니다. 그것들을 모으면 매우 복잡한 페이지로 결과를 이루면 모든 코드가 하나의 파일로 혼합되어 "레이블 수프"또는 "코드 파스타"가 생깁니다. 이것은 웹 사이트를 만드는 표준 방법이었으며 여전히 온라인으로 많은 예가 있습니다. 비 침습적 JavaScript

javaScript가 처음 사용되면 다음 예에서 볼 수 있듯이 버튼을 클릭하면 메시지가 표시됩니다.

JavaScript 코드가 HTML과 혼합되어 있으므로 이 상황을보기가 어렵습니다. 이는 또한 코드가 HTML에 밀접하게 연결되어 있음을 의미하므로 HTML로 변경하려면 파손을 방지하기 위해 JavaScript 코드를 변경해야합니다.

JavaScript 코드는 자체 태그 내에 배치하여 HTML의 나머지 부분과 분리 할 수 ​​있습니다. 다음 코드는 위와 동일한 결과를 달성합니다.

이것은 모든 JavaScript 코드가 HTML 태그와 혼합하는 대신 두 스크립트 태그 사이에 한 곳에 위치하기 때문에 더 좋습니다.

우리는 한 걸음 더 나아가 JavaScript 코드를 HTML 및 CSS에서 완전히 분리하여 자체 파일에 넣을 수 있습니다. 스크립트 태그의 SRC 속성을 사용하여 링크 할 파일을 지정하여 수행 할 수 있습니다.

<code class="language-javascript">console.log('Hello, World!');</code>

그런 다음 html 문서와 동일한 디렉토리에 main.js라는 파일에 javaScript 코드를 넣습니다. JavaScript 코드를 완전히 분리하는 개념은 비 침습적 JavaScript의 핵심 원칙 중 하나입니다.

마찬가지로 CSS는 별도의 파일에 배치해야하므로 웹 페이지의 유일한 코드는 실제 HTML과 CSS 및 JavaScript 파일에 대한 링크입니다. 이것은 종종 모범 사례로 간주 되며이 책에서 채택되는 접근법.

자체 폐쇄 태그 XML 또는 XHTML을 사용한 경우 그러한 자체 폐쇄 된 태그가 발생했을 수 있습니다.

이것은 HTML5에서 불필요하지만 여전히 작동합니다.

우아한 다운 그레이드 및 진보적 인 향상

<code class="language-html"><button id="button" href="#" onclick='alert("Hello World")'>Click Me</button></code>

Elegant Downgrade는 JavaScript를 사용하여 최신 브라우저에서 가장 잘 작동하는 웹 사이트를 구축하는 프로세스이지만 이전 브라우저 또는 JavaScript 또는 일부 기능을 사용할 수없는 경우에도 여전히 합리적인 표준으로 실행할 수 있습니다. 예를 들어 HD (HD) 방송 프로그램은 HD TV에서 가장 잘 작동하지만 여전히 표준 TV에서 실행됩니다. 이 프로그램은 흑백 TV에서도 실행될 수 있습니다.

Progressive Enhancement는 기본 수준의 기능으로 웹 페이지를 처음부터 구축하는 프로세스이며 브라우저를 사용할 수있는 경우 추가 향상을 추가합니다. 3 층 원칙을 따르면 JavaScript 레이어는 페이지의 필수 요소가 아닌 웹 페이지를 향상 시키면 자연스럽게 느껴집니다. 예를 들어 기본 레벨 전화 통화를 제공하는 전화 회사가있을 수 있지만 전화가 지원되면 전화 대기 및 전화 번호 디스플레이와 같은 추가 서비스가 있습니다.

웹 페이지에 JavaScript를 추가 할 때마다 항상 원하는 접근 방식을 고려해야합니다. 많은 놀라운 효과로 시작하고 경계를 푸시 한 다음 최신 브라우저가없는 사람들에게 경험이 우아하게 다운 그레이드되도록 노력하고 있습니까? 아니면 대부분의 브라우저에서 실행되는 기능 웹 사이트를 구축 한 다음 JavaScript를 사용하여 경험을 향상시키는 것으로 시작 하시겠습니까? 두 가지 방법은 비슷하지만 미묘함은 다양합니다.

두 번째 JavaScript 프로그램 우리는 브라우저에서 실행되는 두 번째 JavaScript 프로그램 으로이 장을 종료합니다. 이 예제는 이전의 예보다 복잡하며, 나중의 장에서 더 자세히 소개 될 많은 개념이 있으므로이 단계에서 모든 것을 모르더라도 걱정하지 마십시오! 목적은 JavaScript의 기능을 보여주고 다가오는 장에서 소개 될 몇 가지 중요한 개념을 소개하는 것입니다.

우리는 앞에서 언급 한 비 침습적 JavaScript의 관행에 따라 JavaScript 코드를 별도의 파일에 넣을 것입니다. 먼저 Rainbow라는 폴더를 만듭니다. 이 폴더에서 Rainbow.html이라는 파일과 main.js라는 다른 파일을 만듭니다.

HTML부터 시작하겠습니다. Rainbow.html을 열고 다음 코드를 입력하십시오

(나머지 내용은 언어가 조정되고 일부 단락이 병합되어 원본 의미를 변경하지 않은 경우를 제외하고 원래 텍스트와 유사합니다.) 네트워크를 파괴하지 마십시오 JavaScript 언어 개발의 중요한 개념은 이전 버전과 호환되어야한다는 것입니다. 즉, 모든 기존 코드는 새로운 사양을 실행하는 엔진에 의해 해석 될 때 동일한 방식으로 작동해야합니다 (PlayStation 4는 여전히 PlayStation 1, 2 및 3 용으로 생성 된 게임을 실행할 수 있어야한다고 말하는 것과 같습니다). 이는 현대 브라우저에서 예상대로 일부 웹 사이트에서 이전 코드가 실행되는 것을 방지하는 주요 변경을 통해 JavaScript가 "웹 중단"을 방지하기위한 것입니다.

<code class="language-javascript">console.log('Hello, World!');</code>

따라서 새로운 버전의 JavaScript는 이전 버전의 언어에서 불가능한 일을 할 수 없습니다. 변경되는 모든 것은 글을 쉽게 작성할 수 있도록 특정 기능을 구현하는 표현입니다. 기존 코드 스 니펫을보다 간결하고 간결한 방식으로 작성할 수 있기 때문에 Syntax Sugar

라고합니다. 모든 버전의 JavaScript가 뒤로 호환되었다는 사실은 번역기를 사용하여 코드를 한 버전의 JavaScript에서 다른 버전으로 변환 할 수 있음을 의미합니다. 예를 들어, 최신 JavaScript 버전을 사용하여 코드를 작성하고 거의 모든 브라우저에서 실행되는 버전 5 코드로 변환 할 수 있습니다.

매년 새로운 ECMAScript 버전이 있습니다. 즉, 최신 기능을 구현할 때 브라우저가 항상 약간 뒤쳐질 수 있음을 의미합니다 (더 빨리 수행하지만 대부분의 브라우저는 여전히 2 년이 걸릴 수 있습니다. 지원). 즉, 최신 코딩 기술을 사용하려면 번역기 (예 : Babel)로 끝날 수 있습니다.

첫 번째 JavaScript 프로그램에 대한 FAQ (FAQ) (콘텐츠 의이 부분은 원본 텍스트와 비슷하지만 언어는 더 매끄럽고 자연스럽게 만들기 위해 조정되었습니다.)

위 내용은 안녕하세요, 세상! 첫 번째 JavaScript 프로그램의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!