JavaScript 파일을 HTML 파일에 연결
이 기사에서는 JavaScript 파일을 HTML 파일에 연결하는 두 가지 방법에 대해 설명합니다. 첫 번째 프로세스에서는 JavaScript 파일을 만들고 파일을 외부에 연결합니다. 두 번째 프로세스에서는 HTML 문서에 JavaScript 코드를 삽입합니다.
<script> 태그 및 src 속성을 사용하여 외부 JavaScript를 HTML에 연결
<script> 태그의 src 속성을 사용하여 이 메서드에서 JavaScript 파일을 HTML 파일에 연결합니다. src 속성은 URL 또는 외부 파일의 파일 위치를 지정하는 데 사용됩니다. 웹사이트의 여러 페이지에서 동일한 JavaScript를 사용하려면 같은 시간을 반복해서 작성하는 대신 외부 JavaScript 파일을 만들어야 합니다. HTML의 <head> 태그 안에 <script>를 작성합니다. .js 확장자로 스크립트 파일을 저장한 후 <script> 태그의 src 속성을 사용하여 이를 참조합니다.
예를 들어 HTML과 JavaScript 파일의 두 파일을 만듭니다. JS 파일에 일부 JavaScript를 작성하고 HTML 파일에 일부 HTML을 작성하십시오. 두 파일을 저장할 때 각각 이름을 지정한 후 .html 및 .js 확장자를 사용하는 것을 잊지 마십시오. 이 두 파일을 같은 폴더에 넣습니다. HTML 파일에서 <script> 태그의 src 속성에 JavaScript 파일 이름을 씁니다. 예를 들어, 파일 이름이 hello.js인 경우 <script src="hello.js"> </script>를 작성합니다.
아래 예는 JavaScript 파일을 HTML 파일에 링크하는 방법을 보여줍니다. HTML 파일에 This is HTML이라고 썼고 JavaScript 파일에 This is write from JavaScript라고 썼습니다. 아래 출력 섹션의 두 텍스트에서 볼 수 있듯이 JavaScript가 HTML과 연결되어 있음을 증명합니다.
예제 코드:
<html>
<head>
<script src="hello.js"> </script>
</head>
<body>
<p> This is HTML</p>
</body>
</html>
document.write('This is written from JavaScript');
출력:
<script> 태그를 사용하여 내부 JavaScript를 HTML에 연결
첫 번째 방법과 달리 <script> 태그를 사용하여 HTML 파일에 JavaScript 코드를 추가합니다. <script> 태그는 클라이언트 측 스크립트를 추가하는 데 사용됩니다. HTML 파일의 <script> 태그 안에 JavaScript를 내부적으로 작성할 수 있습니다. HTML 파일을 실행하면 JavaScript가 로드된 것을 볼 수 있습니다.
예를 들어, HTML의 <p> 태그에 This is HTML이라는 텍스트를 작성합니다. 그런 다음 <script> 태그를 열고 document.write를 사용하여 This is write from JavaScript 메시지를 입력합니다. 그런 다음 스크립트 태그를 닫습니다.
HTML과 JavaScript로 작성된 텍스트가 모두 아래 출력에 표시되는 것을 볼 수 있습니다. HTML과 JavaScript가 연결되었음을 증명합니다.
예시:
<html>
<head>
</head>
<body>
<p> This is HTML </p>
</body>
<script>
document.write("This is written from JavaScript");
</script>
</html>
출력:
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn