БлогNot. Как написать простое приложение на HTML и Javascript?

Как написать простое приложение на 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 [4821 просмотр]


теги: учебное javascript html ретро браузеры ie

показать комментарии (1)