내부 및 외부 JavaScript: 예제로 배우기

두 가지 방법으로 JavaScript 코드를 사용할 수 있습니다.

  1. JavaScript 코드를 포함할 수 있습니다. 내부적으로 HTML 문서 내에서 그 자체
  2. JavaScript 코드를 보관할 수 있습니다. 별도의 외부 파일 그런 다음 HTML 문서에서 해당 파일을 가리킵니다.

내부 JavaScript란 무엇입니까?

우리는 지금까지 Internal JS를 사용해왔습니다. 다음은 샘플입니다.

<html>
<head>
  <title>My First JavaScript code!!!</title>
  <script type="text/javascript">
    // Create a Date Object
    var day = new Date();
    // Use getDay function to obtain todays Day.
    // getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
    // This value is stored in today variable
    var today = day.getDay();
    // To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
    var weekday = new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";
    // weekday[today] will return the day of the week as we want
    document.write("Today is " + weekday[today] + ".");
  </script>
</head>
<body>
</body>
</html>

외부 JavaScript란 무엇입니까?

모든 웹 페이지에 현재 날짜와 시간을 표시하려고 합니다. 코드를 작성하고 모든 웹페이지(예: 100)에 복사했다고 가정해 보겠습니다. 하지만 later, 날짜 또는 시간이 표시되는 형식을 변경하려고 합니다. 이 경우 100개의 웹페이지를 모두 변경해야 합니다. 이것은 매우 시간이 많이 걸리고 어려운 작업이 될 것입니다.

따라서 저장 자바 스크립트 확장자가 .js인 새 파일의 코드입니다. 그런 다음 모든 웹 페이지에 다음과 같이 .js 파일을 가리키도록 코드 줄을 추가합니다.

<script type="text/javascript" src="currentdetails.js">

주의 사항: .js 파일과 모든 웹 페이지가 동일한 폴더에 있다고 가정합니다. external.js 파일이 다른 폴더에 있는 경우 src 속성에 파일의 전체 경로를 지정해야 합니다.

외부 JavaScript를 연결하는 방법

var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;
	
var hours = currentDate.getHours(); 
var mins = currentDate.getMinutes(); 
var secs = currentDate.getSeconds(); 
var strToAppend;
if (hours >12 )
{
	hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
	hours1 = "0" + hours;
	strToAppend = "AM";
}
else
{
	hours1 = hours;
	strToAppend = "PM";
}
	
if(mins<10)
mins = "0" + mins;
if (secs<10)
	secs = "0" + secs;

switch (month)
{
	case 1:
		monthName = "January";
		break;
	case 2:
		monthName = "February";
		break;
	case 3:
		monthName = "March";
		break;
	case 4:
		monthName = "April";
		break;
	case 5:
		monthName = "May";
		break;
	case 6:
		monthName = "June";
		break;
	case 7:
		monthName = "July";
		break;
	case 8:
		monthName = "August";
		break;
	case 9:
		monthName = "September";
		break;
	case 10:
		monthName = "October";
		break;
	case 11:
		monthName = "November";
		break;
	case 12:
		monthName = "December";
		break;
}

var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day +  " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);

이것이 당신의 현재입니다tails.js 파일. 긴 코드 줄이 보이더라도 걱정하지 마세요. 곧 코딩을 배우게 될 것입니다. HTML 문서를 다음과 같이 변경하세요.

<html>
	<head>
	   <title>My External JavaScript Code!!!</title>
	   <script type="text/javascript" src="currentdetails.js">
	   </script>
	</head>
	<body>
	</body>
</html>

내부 및 외부 JavaScript 코드는 언제 사용합니까?

특정 웹페이지와 관련된 코드가 몇 줄밖에 없다면 HTML 문서 내부에 JavaScript 코드를 유지하는 것이 좋습니다.

반면에 JavaScript 코드가 여러 웹페이지에서 사용되는 경우 코드를 별도의 파일에 보관하는 것을 고려해야 합니다. 이 경우 코드를 일부 변경하려면 파일 하나만 변경하면 코드 유지 관리가 쉬워집니다. 코드가 너무 길면 별도의 파일에 보관하는 것이 좋습니다. 이는 쉬운 디버깅에 도움이 됩니다.