JavaScript를 HTML로 가져오는 방법에는 두 가지가 있습니다. 1. "<script>js 코드</script>" 문을 사용하여 HTML 페이지에 JavaScript 코드를 삽입합니다. 2. HTML에서 src 속성을 통해 외부 JavaScript를 도입합니다. 스크립트 태그 스크립트 파일의
이 튜토리얼의 운영 환경: 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:html;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个JavaScript程序</title>
<script type="text/javascript">
document.write("<h1>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>PHP中文网：https://www.php.cn/</h1></code>"을 작성하기 위해 Document 개체의 write() 메서드를 호출하는 것을 나타냅니다. </p><p><img src="https://img.php.cn/upload/image/130/704/652/1634190316525013.png" 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:js;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:html;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="https://img.php.cn/upload/image/123/185/283/1634190484108956.png" 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
