자바스크립트 분산해서 작성한 스크립트 실행 방법

2023.08.07

분산해서 작성한 스크립트 다루기

 스크립트는 XHTML 파일 안에 여러 곳에 작성할 수 있습니다.

<p>XHTML 문장1</p> 
<script type="text/javascript"> 
  document.write("<p>스크립트 문장1</p>"); 
</script> 

<p>XHTML 문장2</p> 
 <script type="text/javascript"> 
   document.write("<p>스크립트 문장1</p>");
 </script> 

<p>XHTML 문장3</p>

 

각각의 스크립트는 <script> 요소가 읽어 들여질 때마다 다시 실행됩니다.

이처럼 여러 곳에 스크립트를 HTML 페이지 안에 작성할 수 있지만 스크립트는 <script> 요소 단위로 완성되어 있는 것이 아닌 스크립트가 작성되어 있는 HTML 페이지 단위로 모아서 취급합니다.

따라서 페이지 안에 여러 곳에 스크립트가 분산되어 있어도 각각의 스크립트는 하나로 모아서 작성된 것처럼 실행됩니다.

그렇기 때문에 head 안에서 정의한 함수를 나중에 호출하거나 여기저기서 계산한 결과를 마지막에 출력하는 것이 가능하게 됩니다.

<p>XHTML 문장1</p> 
<script type="text/javascript"> 
  var num = 10; 
</script> 
 
 <p>XHTML 문장2</p> 
 <script type="text/javascript">
   num = num * 10; 
 </script> 
 
 <p>XHTML 문장3</p> 
 <script type="text/javascript"> 
   document.write("<p>결과는 " + num + "입니다.</p>"); 
 </script>

 

위에서는 스크립트가 3개로 나누어져 작성되어 있지만 실제로는 다음과 같이 모아져 작성된 거 같이 취급됩니다.

<script type="text/javascript"> 
  var num = 10;
  num = num * 10; 
  document.write("<p>결과는 " + num + "입니다.</p>"); 
</script>

 

샘플 코드 

sample3_1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head>
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="kr" lang="kr"> 
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
  <meta http-equiv="Content-Script-Type" content="text/javascript"> 

  <title>JavaScript 테스트</title> 
</head> 
<body> 
  <p>변수의 선언과 초기값 설정</p> 
  <script type="text/javascript" src="./js/script3_1.js"> 
  </script> 
 
  <p>별도의 변수의 선언과 초기값 설정</p> 
  <script type="text/javascript" src="./js/script3_2.js"> 
  </script> 
 
  <p>계산 결과를 출력</p> 
  <script type="text/javascript" src="./js/script3_3.js"> 
  </script> 
 </body> 
 </html>

 

※스크립트 파일은 HTML 파일이 있는 곳에 js 라는 폴더를 만들어 넣어줍니다.

script3_1.js

var num1 = 10; 
document.write("<p>num1 = " + num1 + "</p>");

 

script3_2.js

var num2 = 24; 
document.write("<p>num2 = " + num2 + "</p>");

 

script3_3.js

var sum = num1 + num2; 
document.write("<p>sum = " + sum + "</p>");

 

브라우저에 다음과 같이 표시 됩니다.

댓글