Внутрішній і зовнішній JavaСценарій: Вчимося на прикладі
Джеймс Гартман
Ви можете використовувати JavaКод сценарію двома способами.
- Ви можете включити JavaКод скрипта внутрішньо у вашому документі HTML сам
- Ви можете зберегти JavaКод сценарію в окремий зовнішній файл а потім вкажіть на цей файл із вашого документа HTML.
Що таке внутрішній JavaСценарій?
Досі ми використовували внутрішній 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>
Що таке зовнішній JavaСценарій?
Ви плануєте відображати поточну дату й час на всіх своїх веб-сторінках. Припустімо, ви написали код і скопіювали його на всі свої веб-сторінки (скажімо, 100). Але пізніше ви захочете змінити формат, у якому відображаються дата або час. У цьому випадку вам доведеться внести зміни на всі 100 веб-сторінок. Це буде дуже трудомістке і складне завдання.
Отже, збережіть JavaScript у новому файлі з розширенням .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);
Це ваш файл currentdetails.js. Не хвилюйтеся, побачивши довгі рядки коду. Скоро ти навчишся кодувати. Внесіть зміни у свій HTML-документ таким чином:
<html> <head> <title>My External JavaScript Code!!!</title> <script type="text/javascript" src="currentdetails.js"> </script> </head> <body> </body> </html>
Коли використовувати внутрішній і зовнішній JavaКод сценарію?
Якщо у вас є лише кілька рядків коду, який стосується конкретної веб-сторінки, краще зберегти свій JavaКод сценарію всередині вашого HTML-документа.
З іншого боку, якщо ваш JavaКод сценарію використовується на багатьох веб-сторінках, тож вам слід зберегти свій код в окремому файлі. У такому випадку, якщо ви бажаєте внести деякі зміни у свій код, вам потрібно лише змінити лише один файл, що спрощує обслуговування коду. Якщо ваш код занадто довгий, то також краще зберегти його в окремому файлі. Це сприяє легкому налагодженню.
