JavaScript를 HTML로 가져오는 방법-프런트엔드 Q&A-php.cn

PHP中文网：https://www.php.cn/

집

웹 프론트엔드

프런트엔드 Q&A

JavaScript를 HTML로 가져오는 방법

青灯夜游

Oct 14, 2021 pm 01:54 PM

html javascript

JavaScript를 HTML로 가져오는 방법에는 두 가지가 있습니다. 1. "<script>js 코드</script>" 문을 사용하여 HTML 페이지에 JavaScript 코드를 삽입합니다. 2. HTML에서 src 속성을 통해 외부 JavaScript를 도입합니다. 스크립트 태그 스크립트 파일의

JavaScript를 HTML로 가져오는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript를 HTML 문서로 가져오는 방법

1. HTML 문서에 JavaScript 코드 삽입

HTML 페이지에 JavaScript 스크립트를 삽입하려면 <script> 태그를 사용해야 합니다. ; 태그에 직접 JavaScript 코드를 작성합니다. </script>

1단계, 새 HTML 문서를 만들고 test.html로 저장합니다.

2단계,

태그 안에 <script> 태그를 삽입합니다. <p>3단계, <script> 태그에 대해 type="text/javascript" 속성을 설정합니다. <p>최신 브라우저의 <script> 태그의 기본 스크립트 유형은 JavaScript이므로 이전 버전의 브라우저와의 호환성을 고려하면 유형 속성을 설정해야 합니다. <p>4단계, <script> 태그에 JavaScript 코드를 입력하세요<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第一个JavaScript程序</title> <script type="text/javascript"> document.write("<h1 id="PHP中文网-https-www-php-cn">PHP中文网：https://www.php.cn/</h1>"); </script> </head> <body></body> </html></pre><div class="contentsignin">로그인 후 복사</div></div><p>5단계, 웹 문서를 저장하고 브라우저에서 미리보기하면 그림과 같습니다. JavaScript 스크립트에서 document는 웹 페이지 문서 개체를 나타내며 document.write()는 현재 웹 페이지 소스 코드에 HTML 문자열 "<code><h1 id="PHP中文网-https-www-php-cn">PHP中文网：https://www.php.cn/</h1></code>"을 작성하기 위해 Document 개체의 write() 메서드를 호출하는 것을 나타냅니다. </p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/130/704/652/1634190316525013.png" class="lazy" title="1634190316525013.png" alt="JavaScript를 HTML로 가져오는 방법"/></p><p><strong>2. 외부 JavaScript 코드 스크립트 파일을 HTML 문서에 도입</strong></p><p>JavaScript 프로그램은 HTML 문서에 직접 배치할 수 있을 뿐만 아니라 JavaScript 스크립트 파일에도 배치할 수 있습니다. JavaScript 스크립트 파일은 텍스트 편집기를 사용하여 편집할 수 있는 확장자가 .js인 텍스트 파일입니다. </p><p>일반적으로 사용되는 텍스트 편집기에는 Windows 시스템의 Notepad, Linux 시스템의 Vim, Sublime Text, Notepad++ 등이 있습니다. 초보자의 경우 텍스트 편집기를 사용하여 JavaScript 코드를 먼저 작성하는 것이 좋습니다. 이는 JavaScript 구문, 키워드, 함수 등을 기억하는 데 도움이 됩니다. 실제 개발 단계에서는 Visual Studio Code(이하 "VS Code"라고 함), WebStorm(유료), Atom 등 좀 더 전문적인 코드 편집기를 선택하여 개발 효율성을 높일 수 있습니다. </p><p>새 JavaScript 파일을 만드는 단계는 다음과 같습니다. </p><p>1단계, 새 텍스트 파일을 만들고 test.js로 저장합니다. 확장자는 .js이며 이는 텍스트 파일이 JavaScript 유형 파일임을 나타냅니다. </p><p>2단계, test.js 파일을 열고 다음 JavaScript 코드를 작성합니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>alert("PHP中文网：https://www.php.cn/");</pre><div class="contentsignin">로그인 후 복사</div></div><p>3단계, JavaScript 파일을 저장합니다. JavaScript 파일과 웹페이지 파일을 동일한 디렉토리에 두는 것이 좋습니다. 위 코드에서 Alert()는 Window 개체의 메서드를 나타냅니다. 이 메서드를 호출하면 "Hi, JavaScript!"라는 매개 변수 문자열을 표시하는 프롬프트 대화 상자가 나타납니다. </p><p>JavaScript 파일은 독립적으로 실행될 수 없으며 웹 페이지로 가져와서 브라우저를 통해 실행해야 합니다. JavaScript 파일은 <script> 태그를 사용하여 가져올 수 있습니다. </p><p>4단계, 새 HTML 문서를 만들고 test.html로 저장합니다. </p><p>5단계, <head> 태그 안에 <script> 태그를 삽입합니다. src 속성을 정의하고 속성 값을 외부 JavaScript 파일을 가리키는 URL 문자열로 설정합니다. 코드는 다음과 같습니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script type="text/javascript" src="test.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><p>6단계, 웹 문서를 저장하고 브라우저에서 미리 봅니다. 표시 효과는 그림과 같습니다. 참고: <script> 태그를 사용하여 외부 JavaScript 파일을 포함하는 경우 기본 파일 형식은 Javascript입니다. 따라서 로드된 파일의 확장자가 .js인지 여부에 관계없이 브라우저는 해당 파일을 JavaScript 스크립트로 구문 분석합니다. <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/123/185/283/1634190484108956.png" class="lazy" title="1634190484108956.png" alt="JavaScript를 HTML로 가져오는 방법"/><p>src 속성을 정의하는 <script> 태그에는 더 이상 JavaScript 코드가 포함되어서는 안 됩니다. 코드가 포함된 경우 외부 JavaScript 파일만 다운로드되어 실행되며 포함된 코드는 무시됩니다. <p>【추천 학습: <a href="https://www.php.cn/course/list/2.html" target="_blank">javascript 고급 튜토리얼】</script>

위 내용은 JavaScript를 HTML로 가져오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.