Приклади програм JavaScript-сценаріїв
Нижче подано ряд взірцевих прикладів, що мають на меті збагатити досвід студентів з застосування методів дінамізації HTML-документів, а також закріпити навички програмування Web-додатків засобами мови JavaScript. Для виконання прикладів рекомендується створити на флеш-диску папку "Приклади_JS", в яку потрібно поміщати файли JavaScript-програм, створюваних за наведеними далі прикладами, щоб перевіряти їх дієвість та відпрацьовувати різні варіанти особистих програм.
Представлені в прикладах програми це HTML-документи, подані або як самостійні Web-додатки (скрипти), або як скрипти Web-додатків у складі HTML-документів, або як інтерактивні Web-додатки у складі HTML-документів, доступ до яких виконується застосуванням форм в HTML-документах. В усіх випадках браузер сприймає їх і відображає зміст.
За першим способом є можливість відпрацьовувати Web-додатки автономно. За другим способом підготовлені Web-додатки включаються безпосередньо в HTML-документи. За третім – забезпечується інтерактивний зв’язок Web-документа з Web-додатком шляхом застосування форми для введення даних користувачем та виведення результатів. Приклади супроводжуються методичними поясненнями та коментарями в лістингах програм. В переважній більшості в прикладах використовуються масиви – найбільш характерні типи даних для економічних задач.
Приклад 9.1. Web-додаток "Масив.html" зі скриптами типових операцій в масиві.
Обробка масивів даних є однією з найбільш поширених операцій в професійній роботі економістів. Нижче ілюструється лістинг документа "Масив" зі скриптами, що виконують наступні дії: введення масиву, оголошення змінних, виведення конкретного елемента масиву (в першій частині), визначення мінімального та максимального елементів (в другій частині). В скриптах застосовані об’єкти, їх методи та властивості.
<SCRIPT>
document.write(”Масив чисел arr()”+”<BR>”);
document.write(”Частина 1”+”<BR>”);
var k,m;
var arr;
arr=[3,4,7,20,3,7,5];
document.write(arr+”<BR>”);
k=arr[5];
document.write(”Елемент k=”+k+”<BR>”+”<BR>”);
</SCRIPT>
<SCRIPT>
document.write(”Частина 2”+”<BR>”);
m=Math.min(3,4,7,20,3,7,5);
max=Math.max(3,4,7,20,3,7,5);
document.write(”Мінімальний елемент m=”+m+”<BR>”);
document.write(”Максимальний елемент max=”+max+”<BR>”);
</SCRIPT>.
Щоб перевірити дієвість даної програми, наберіть (або скопіюйте) текст лістинга "Масив.html" в редакторі Блокнот і збережіть файл в папці "Приклади_JS". Здійсніть виконання програми. Для цього просто відкрийте файл, і він автоматично виконається. Робіть це і в наступних прикладах!
Результат виконання програми браузером має бути таким:
Частина 1 Масив чисел arr() 3,4,7,20,3,7,5 Елемент k=7 Частина 2 Мінімальний елемент m=3 Максимальний елемент max=20.
Приклад 9.2. Web-додаток "mas_photo.html" зі скриптом (сценарієм) показу зображень. Особливістю є те, що зображення подаються як масив, а для їх перегляду застосовано оператор for.
Файли зображень попередньо необхідно зібрати в одній папці, наприклад "frames". Файлам слід присвоїти імена: 1.gif, 2.gif, 3.gif, 4.gif, 5.gif, 6.gif, 7.gif. Така папка має бути поміщена в папку "Приклади_JS".
Лістинг скрипта HTML-документа (mas_photo.html) наступний:
<SCRIPT>
document.write(”Масив фотографій arr”+”<BR>”);
var arr;
arr=[];
arr[0]=’<IMG id=”animate” src=”frames/1.gif” height=100 width=75>’;
arr[1]=’<IMG id=”animate” src=”frames/2.gif” height=100 width=75>’;
arr[2]=’<IMG id=”animate” src=”frames/3.gif” height=100 width=75>’;
arr[3]=’<IMG id=”animate” src=”frames/4.gif” height=100 width=75>’;
arr[4]=’<IMG id=”animate” src=”frames/5.gif” height=100 width=75>’;
arr[5]=’<IMG id=”animate” src=”frames/6.gif” height=100 width=75>’;
arr[6]=’<IMG id=”animate” src=”frames/7.gif” height=100 width=75>’;
for (i=0;i<7;i++)
{
document.write(arr[i]);
}
</SCRIPT>.
Результатом виконання приклада має бути колекція зображень (рис. 9.8), розміщених в один ряд.
Рис. 9.8. Колекція зображень
Показ зображень на Web-сторінках – ефективний засіб залучення студентів до творчості. Наведений приклад має ту особливість, що подає зображення як елементи масиву і спонукає студентів опановувати роботу з масивами.
Приклад 9.3. HTML-документ "Покупка(форма).html" з елементами інтерактивності: функцією і формою (рис. 9.9) для запиту на виконання сценарію (рис. 9.10). Ілюструється розрахунок за здійснену покупку.
Приклад має на меті розвивати навички програмування розрахункових задач. Зміст лістинга зрозумілий з тексту і не потребує детальних коментарів.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Задача</title>
<script language="JavaScript">
<!--// Скрипт використовує функцію mult(obj)
function mult(obj) // Функція працює з об’єктами
{ // Оголошення змінних, як об’єктів
var kolich=obj.strkolich.value;
var cena=obj.strcena.value;
var uplach=obj.struplach.value;
stoim=kolich*cena;
obj.result.value=stoim;
if(uplach<stoim)
{
r=stoim-uplach;
document.write("Вам потрібно доплатити"+r+"грн."+"<br>");
}
else{
sdacha=uplach-stoim;
document.write("Отримайте здачу"+sdacha+"грн."+"<br>");
}
document.write("Натисніть кнопку 'назад', щоб повернутись до форми, і перегляньте дані і результати");
}
//-->
</script>
</head>
<body bgcolor="yellow" text="black">
<form name="form1"> // Дані до сценарію вводяться через форму
Покупка,<br></br>
Введіть(kolich): <input size="7" name="strkolich" type="text"><br></br>
Введіть(cena): <input size="7" name="strcena" type="text"><br></br>
Введіть(uplach): <input size="7" name="struplach" type="text"><br></br>
<input value="Обчислити" onclick="mult(form1)" type="button"><br></br>
<input size="16" name="result" type="text"><br></br>
<INPUT TYPE="reset" NAME="Очистити форму" VALUE="Очистити"><br></br>
</form>
Натисніть кнопку 'вперед', щоб переглянути інші результати;
</body>
</html>.
Рис. 9.9. Форма для запиту на виконання скрипта
Рис. 9.10. Результат виконання скрипта
Приклад 9.4. Лістинг файла "Дата_час.html" з набором операцій, пов’язаних з об’єктом Date().
<SCRIPT>
today=new Date();
nextDecember=new Date("December 31,2011");
nextDecember.setYear(nextDecember.getYear());
msPerDay=24*60*60*1000; //Кількість млсек в добі
daysLeft=(nextDecember.getTime()-today.getTime())/msPerDay;
daysLeft=Math.round(daysLeft);
interval_1=daysLeft-30; // Інтервал зменшено на 30 днів
interval_2=daysLeft+30; // Інтервал збільшено на 30 днів
document.write("Поточна дата:"+today+"<BR>");
document.write("До кінця грудня 2011 року залишилось:_"+daysLeft+"_днів"+"<BR>");
document.write("Інтервал_1 складає:_"+interval_1+"_днів"+"<BR>");
document.write("Інтервал_2 складає:_"+interval_2+"_днів"+"<BR>"+"<BR>");
</SCRIPT>.
Результат виконання Web-додатка має бути таким (рис. 9.11):
Рис. 9.11. Вікно з результатом застосування об’єкту Date()
Приклад 9.5. Web-додаток "js 200.html", , що ілюструє обчислення урожайності при відомій кількості зібраного урожаю та площі поля. Додаток використовує інтерактивний скрипт, що застосовує для розрахунків користувацьку функцію calculator(form), котра отримує аргументи з HTML-форми шляхом введення їх значень користувачем. Крім того, в скрипті застосована функція eval() і оригінальні атрибути для призначення обробників подій:
оnchange – коли елемент втрачає фокус і значення елемента змінюється користувачем;
onKeyUp – подія при відпусканні клавіші після події KeyPress;
/([^0-9])/g – десятковий запис числа (у вигляді регулярного виразу) натиском клавіш.
this.value – задає дію.
<script lang="JavaScript">
function calculator(form) {
a = eval(form.a.value);
b = eval(form.b.value);
c = b/a;
form.total.value = c;
}
</script>
<form>
Введіть площу поля в гектарах <input type="text" name="a" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;"><br><br>
Введіть кількість зібраного урожаю в тонах <input type="text" name="b" onkeyup="this.value=this.value.replace(/([^0-9])/g,'');"><br><br><br>
<input type="button" value="Розрахувати" onclick="calculator(this.form)">
<input type="reset" value="Сброс"><br><br>
Средняя урожайность <input type="text" name="total">
</form>.
Результат відображається безпосередньо в формі (рис. 9.12).
Рис. 9.12. Форма для виконання сценарія