Как написать простое приложение на HTML и Javascript?
Типично "каникулярная" задача состояла в том, чтобы показать совсем простой, но, по возможности, не слишком кривой "шаблон" для приложений на Javascript с интерфейсом в виде формы HTML 4 или 5.
Кроме того, требовалась совместимость со старыми браузерами, вплоть до Internet Explorer 6, входившего в состав Windows XP и в этом качестве кое-где благополучно дожившего до наших времён.
Показанные ниже листинги должны быть сохранены в файлы с типом .html и в кодировке русской Windows (Windows-1251).
Разумеется, можно использовать и другую кодировку, поменяв мета-теги в заголовках файлов.
Первый листинг демонстрирует, как выполнить код Javascript, если приложение не предполагает ввода пользовательских данных из формы HTML, а результаты работы скрипта выводятся просто в выбранный для этой цели элемент HTML (в нашем случае - раздел <div> с атрибутом id="data").
Заголовки HTML здесь соответствуют стандарту HTML4, а мета-тег DOCTYPE
для простоты не указан.
Более современным путём выглядит прятать весь код в безымянную функцию-замыкание, но она обычно начинающих пугает, как и
объекты. Функция shell, содержащая в себе все определения переменных приложения и вызываемая один раз, вполне заменит такое замыкание в несложных учебных задачах, тем более, что в яваскрипте спокойно можно писать функции внутри функций.
Тег <noscript> также полезно указывать всегда, особенно когда речь о нашей ситуации со старым браузером.
Вот первый листинг полностью:
<HTML>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<title>JS</title>
</head>
<body>
<p>Без интерфейса и с заголовками HTML4</p>
<div id="data"></div>
<script type="text/javascript">
function shell () {
var element = document.getElementById('data');
var n = 0;
while (n++ < 100) {
element.innerHTML += '.';
}
}
shell ();
</script>
<noscript>
<div align="center">Извините, для работы приложения нужен включённый Javascript</div>
</noscript>
</body></HTML>
Сам "расчёт" здесь - рисование 100 точек в HTML-элементе, но это ведь непринципиально :)
Второй пример предполагает, что пользователь должен передать скрипту некоторые данные, в нашем случае - числовое значение из элемента HTML <input type="text" name="data">.
Функция shell получает аргументом имя поля, откуда берутся данные.
Конечно, можно было не возиться с яваскрипт-функцией eval, а брать скриптом значения прямо из документа
(см. ниже "Более простой вариант второго скрипта"), но это уменьшило бы переносимость кода явным указанием имен формы (dataForm) и поля ввода (data) в коде.
Скрипт проверяет вводимые значения на допустимость (целочисленные от 1 до 999), при необходимости корректирует их и затем выполняет расчёт, зависящий от полученного из формы значения m.
<!DOCTYPE HTML>
<HTML lang="ru">
<head>
<meta charset="windows-1251">
<title>JS</title>
</head>
<body>
<p>С интерфейсом и с заголовками HTML5</p>
<div id="result"></div>
<script type="text/javascript">
function shell (fieldName) {
var data;
eval('data = document.'+fieldName+'.value;');
var m = parseInt (data);
if (isNaN(m) || m<0 || m>999) {
m=10;
}
eval('document.'+fieldName+'.value = m;');
var element = document.getElementById('result');
element.innerHTML = '';
var n = 0;
while (n++ < m) {
element.innerHTML += '.';
}
}
</script>
<noscript>
<div align="center">Извините, для работы приложения нужен включённый Javascript</div>
</noscript>
<form name="dataForm">
<p>
M=
<input type="text" name="data" id="data" maxlength="3" size="4" value="" />
<input type="button" value="OK" onclick="shell('dataForm.data');return false" />
</p>
</form>
</body></HTML>
Более простой вариант второго скрипта (только основная часть без HTML-обрамления):
<div id="result"></div>
<script type="text/javascript">
function shell () {
var m = parseInt (document.dataForm.data.value);
if (isNaN(m) || m<0 || m>999) {
m=10;
}
document.dataForm.data.value = m;
var element = document.getElementById('result');
element.innerHTML = '';
var n = 0;
while (n++ < m) {
element.innerHTML += '.';
}
}
</script>
<noscript>
<div align="center">Извините, для работы приложения нужен включённый Javascript</div>
</noscript>
<form name="dataForm">
<p>
M=
<input type="text" name="data" id="data" maxlength="3" size="4" value="" />
<input type="button" value="OK" onclick="shell();" />
</p>
</form>
В этом коде могут быть не учтены нюансы, связанные с отправкой или не-отправкой браузерами данных формы по нажатию клавиши Enter.
Например, старые версии Internet Explorer для такого тега <form> (не указан метод отправки GET или POST) на нажатие Enter из поля ввода отправили бы данные методом GET, принятым по умолчанию, то есть, скрипт попытался бы перейти на URL-адрес вида
{URL_скрипта}/Имя_файла.html?data=ВВОД_ЮЗЕРА
Конечно, мы могли бы и создавать формы встроенными средствами современных версий Javascript, и величину из поля ввода передавать просто как this.value, но всё это уменьшит совместимость.
А вот делать приложения без кнопки отправки, выполняющие свою работу "на лету" (по мере ввода данных в форму) можно и для старого браузера.
Наше приложение без кнопки, печатающее столько точек, сколько в данный момент указано в поле ввода и "не дающее" ввести туда недопустимое значение, могло бы выглядеть, например, так:
<!DOCTYPE HTML>
<HTML lang="ru">
<head>
<meta charset="windows-1251">
<title>JS</title>
</head>
<body>
<p>С интерфейсом, заголовками HTML5 и без кнопки</p>
<div id="result"></div>
<script type="text/javascript">
function shell (idData, idRes) {
var m = parseInt (document.getElementById(idData).value);
if (isNaN(m)) m = '';
else if (m < 1) m = 1;
else if (m > 999) m = 999;
document.getElementById(idData).value = m;
var element = document.getElementById(idRes);
element.innerHTML = '';
var n = 0;
while (n++ < m) {
element.innerHTML += '.';
}
}
</script>
<noscript>
<div align="center">Извините, для работы приложения нужен включённый Javascript</div>
</noscript>
<form name="dataForm">
<p>
M=
<input type="text" name="data" id="data" maxlength="3" size="4" value=""
onselect="shell(this.id,'result')" onclick="shell(this.id,'result')"
onkeyup="shell(this.id,'result')" />
</p>
</form>
</body></HTML>
28.08.2018, 18:00 [5036 просмотров]