БлогNot. Варианты заданий по JavaScript и простые примеры приложений

Варианты заданий по JavaScript и простые примеры приложений

Наверное, примерно так. После дюжины проб и попыток лекций с таким планом:

Лекция 1. Введение и основные понятия. Структура гипертекстового документа

Лекция 2. Гиперссылки и навигация

Лекция 3. Списки и таблицы

Лекция 4. Использование мультимедиа

Лекция 5. Формы и обработка данных

Лекция 6. Основы CSS

Лекция 7. Свойства CSS

Лекция 8. Вёрстка и макетирование

Лекция 9. Основы Javascript
Простейшие скрипты. Переменные и константы. Типы данных и преобразования типов. Массивы. Организация ветвлений и циклов. 2 задачи

Лекция 10. Функциональное и объектное программирование в Javascript
Функции и замыкания. Модули. Объекты. Классы. 2 задачи

Лекция 11. Встроенные объекты, работа с браузером и DOM
Объекты Date, Math, Array, Number, String, RegExp. BOM и объект window. Таймеры. Введение в DOM и доступ к элементам. 2 задачи

Лекция 12. События, работа с формами, хранение данных
Обработка событий. События мыши и клавиатуры. Работа с формами из JS. Формат JSON. Сохранение и чтение данных. Основы AJAX. Итоговое задание

Лекция 13 (дополнительная). Работа с канвой и (возможно) внешние библиотеки

P.S. Здесь

Варианты задания (большей частью, уже были реализованы, но не обязательно на JS)

Итоговую задачу по курсу Вы можете выбрать себе сами из имеющихся свободных вариантов. Список уже выбранных задач - у преподавателя.

Для всех задач реализованное приложение должно поддерживать:

  • кодировку Юникода utf-8 и корректную работу во всех распространённых браузерах;
  • работу с DOM и (при необходимости) создание динамических элементов разметки;
  • сохранение данных между сеансами работы (при необходимости).

Обработка текста

1. Анализатор текста c составлением частотной таблицы слов

2. Преобразование неформатированного текста (очистка от пустых строк, выделение тегами абзаца и перевода строки, все возможности опциональны)

3. Работа со списком слов (сортировка, удаление дублей и пустых или недопустимых слов, все возможности опциональны)

4. Класс - строковый буфер с функциями создания, добавления строки, получения содержимого, очистки буфера

5. Сервис для форматирования листингов программ на C++ (отступы для вложенных блоков, удаление комментариев, возможности опциональны)

6. Сервис для замены пробелов на табуляции и обратно без изменения внешнего вида текста, размер отступа табуляции настраивается

7. Сервис для работы с регулярными выражениями

8. Анализатор содержимого web-страницы с выводом результатов в виде таблицы

9. Сервис для получения "текстовых градиентов" строк с плавным изменением цвета символов

Математика и статистика

10. Сервис для выполнения типовых операций над множествами целых чисел (ввод и вывод, объединение, пересечение, разность)

11. Сервис для статистической обработки числовых множеств (отбор числовых значений из текста, вычисление основных статистических характеристик)

12. Сервис для расчета показателей успеваемости по 5-балльной системе и системе 0-1-2 (средний балл, абсолютная и качественная успеваемость, процент аттестованных, возможности дополнительной интервальной оценки)

13. Сервис для решения систем линейных алгебраических уравнений прямым и итерационным методом (например, методами обратной матрицы и Якоби)

14. Сервис для решения нелинейного уравнения итерационным методом (например, методом Гаусса-Зейделя)

15. Сервис для работы с дробями (сокращение, округление, приведение к общему знаменателю и другие основные действия)

16. Сервис для работы с комплексными числами

17. Сервис для решения диофантовых уравнений

18. Калькулятор произвольных систем счисления с основанием от 2 до 36 (включая вещественные числа)

Web-дизайн

19. Сервис для конвертирования неформатированного текста в HTML (разбиение на абзацы, выделение заголовков и ссылок, "чистка" от лишних разделителей, настройки)

20. Интерфейс для создания многоуровневых списков HTML

21. Интерфейс для создания таблиц HTML (можно ограничиться таблицей-сеткой)

Случайная генерация

22. Сервис для создания наборов случайных чисел с заданными параметрами (интервал и вид распределения)

23. Сервис для создания наборов случайных предложений из заданного списка слов

24. Сервис для генерации синтаксически правильного текста на основе словарей из фраз

Графика

25. Сервис для онлайн-построения на канве одномерного интерполяционного сплайна

26. Сервис для онлайн-построения на канве кривой метода наименьших квадратов заданного порядка

27. Динамическое построение многоугольников на канве и вычисление их геометрических характеристик

28. Интерфейс для создания на канве рисунков заданного вида (например, градиентов, фоновых изображений)

29. Фильтрация изображений, загружаемых с диска

30. Построение фракталов с выбором параметров построения

31. Сервис для математического анализа произвольной функции и построения её графика (последнее можно выполнять на основе имеющегося фреймворка, например, chart.js)

Дата и время

32. Календарный сервис с возможностью задавать, сохранять и показывать строку с описанием событий дня

33. Сервис для распределения ресурсов (например, гостиничных комнат) по схеме "свободно-занято" с точностью до одних суток

34. Сервис аналоговых часов с функцией напоминания (будильника)

35. Сервис секундомера и таймера (прямой и обратный отсчёт времени, текстовые метки отсчётов, возможность накопления суммарного времени по нескольким попыткам, статистика, настройки)

?

Ваша собственная задача: обсуждается в индивидуальном порядке

Примеры приложений (выполняются как файлы .html в кодировке Юникода utf-8)

Приведённые ниже листинги ниже достаточно сохранить как файлы типа .html в кодировке Юникода utf-8 и выполнить из браузера. Нужно учесть, что некоторые браузеры, например, Chrome, не сохраняют cookies для локальных файлов, открытых по протоколу file:// (то есть, просто как файл с диска, а не через URL-адрес). В этом случае откройте файл с помощью локального сервера, скажем, XAMPP

Приложение 1 на JS (простой календарь праздников)
<!DOCTYPE html>
<html lang="ru">
 <head>
 <meta charset="utf-8">
 <title>Проект Javascript</title>
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
 <div id="holidayId" style="background-color: #CCFFCC">
  Сегодня нет праздника...
 </div>
 <script>
  var checkHoliday = function (id) {
   var Holidays = [ //массив праздников
    //о каждом: день, месяц, описание
	{ day: 28, month: 10, desc: 'День хомячка' }, //0
	{ day: 31, month: 12, desc: 'Новый год' }     //1
   ];
   function today () { //Сегодня в формате {day: 31, month:12}
    var t = new Date();
	var d = t.getDate();
	var m = t.getMonth() + 1;
	//console.log (d+' '+m); //Ctrl+Shift+J
	return { day: d, month: m };
   }
   function check (t) {//Номер праздника в списке или -1
    for (var i=0; i < Holidays.length; i++)
	 if (Holidays[i].day == t.day &&
	     Holidays[i].month == t.month) return i;
	return -1;
   }
   function strDate (t) {
    var monthes = [ '','января','февраля','марта','апреля','мая','июня',
	 'июля','августа','сентября','октября','ноября','декабря'
	];
	return t.day+' '+ monthes[t.month];
   }
   var t = today(); //alert (t.day+' '+t.month);
   var k = check (t);
   if (k > -1) { //если сегодня найден праздник
    var el = document.getElementById(id);
	el.innerHTML = strDate(t)+': '+Holidays[k].desc; //или .value, если элемент ввода (текстовое поле)
   }
  };
 
  window.addEventListener ('load', function (e) {
   checkHoliday('holidayId'); //передали id раздела, куда пишем
  } );
 </script>
 <noscript>Включите Javascript в браузере!</noscript>
 </body>
</html>
Приложение 2 на JS (обработка и фильтрация текста)
<!DOCTYPE html>
<html lang="ru">
 <head>
 <meta charset="utf-8">
 <title>Проект Javascript 2</title>
 </head>
 <body>
 
 <form name="myForm">
  <p>Введите или вставьте текст:<br>
   <textarea name="myText" rows="12" cols="80"></textarea>
  </p>
  <p>Результат обработки:<br>
   <textarea name="myResult" rows="12" cols="80"
    readonly></textarea>
  </p><p> 
<input type="button" value="Обработать" onclick="myDo();">
<input type="button" value="Очистить" onclick="myClear();">
  </p>
 </form>
 <script>
  function myDo() {
   var words = document.myForm.myText.value;
   words = words.replace (/<\/?[^>]+(>|$)/gm,''); //удалить теги
   var arr = words.split(/\s+/); //разбить на слова
   arr = arr.filter( function (n)    { //отфильтровали ненужные слова
    return n!=undefined && n != '';  } );
   arr.sort(); //сортируем как строки
   arr = Array.from (new Set(arr)); //оставили только уникальные
   var res = '';
   arr.forEach ( //применили действие функции к каждому элементу
    function (item, i, arr) {
	 res += (i+1) + '. ' + item + "\n";
	}   );
   res += 'Всего слов: ' + arr.length;
   document.myForm.myResult.value = res;
  }
  function myClear() {
   document.myForm.myText.value = '';
   document.myForm.myResult.value = '';
  }
 </script>
 <noscript>
  <p>Требуется JavaScript для работы приложения!</p>
 </noscript>
 
 </body></html>
Приложение 3 на JS (частотная таблица символов "на лету")
<!DOCTYPE html>
<html lang="ru">
 <head>
 <meta charset="utf-8">
 <title>Проект Javascript 3</title>
 </head>
 <body>
 
 <form name="myForm">
  <p>Введите или вставьте текст:<br>
   <textarea id="myText" rows="12" cols="80"
   onselect = "myDo(this.id,'myResult')" 
   onclick  = "myDo(this.id,'myResult')" 
   onkeyup  = "myDo(this.id,'myResult')"
   ></textarea>
  </p>
  <p>Результат обработки:<br>
   <textarea id="myResult" rows="12" cols="80"
    readonly></textarea>
  </p>
 </form>
 <script>
  function myDo (idText, idRes) {
   var text = document.getElementById(idText).value;
   var arr = text.split(''); //массив символов
   var n = arr.length, freq = [], c = '';
   while (n--) { //прошлись по всем символам
    c = arr[n]; 
	freq[c] = (freq[c] || 0) + 1; //инициализировали 1 или прибавили 1
   }
   //console.log(freq);
   keys = Object.keys(freq); keys.sort(); //вытащили символы-ключи массива freq
   var res = keys.map ( function (c) {
    var c1; if (c=='\t') c1 = 'TAB';
	else if (c=='\n') c1 = 'NEWLINE';
	else if (c==' ') c1 = 'SPACE';
	else c1 = c;
    return c1 + ': ' + freq[c]+"\n";
   });
   document.getElementById(idRes).value = res;
  }
 </script>
 <noscript>
  <p>Требуется JavaScript для работы приложения!</p>
 </noscript>
 
 </body></html>
Приложение 4 на JS ("выбор дня" с хранением данных в cookies)
<!DOCTYPE html>
<html lang="ru">
 <head>
 <meta charset="utf-8">
 <title>Проект Javascript 4</title>
 </head>
 <body>

 <div id="myMood"></div>
 <script>
/* Некоторые браузеры, например, Chrome, не сохраняют
   cookies для локальных файлов, открытых по протоколу
   file://
   В этом случае откройте файл с помощью локального 
   сервера, скажем, XAMPP
*/
 (function (gameId) {  
  var divId = document.getElementById (gameId);
  var p1 = document.createElement('p');
  p1.innerHTML = 
  'Моё настроение сегодня:'+
  '<br><input type="radio" name="moods" id="myMood5" value="5">'+
  '<label for="myMood5">'+
  'Вау! (<span id="cntMood5">0</span>)</label>'+
  '<br><input type="radio" name="moods" id="myMood4" value="4">'+
  '<label for="myMood4">'+
  'Норм (<span id="cntMood4">0</span>)</label>'+
  '<br><input type="radio" name="moods" id="myMood3" value="3">'+
  '<label for="myMood3">'+
  'Хм-м... (<span id="cntMood3">0</span>)</label>'+
  '<br><input type="radio" name="moods" id="myMood2" value="2">'+
  '<label for="myMood2">'+
  'Бе-е (<span id="cntMood2">0</span>)</label>';
  divId.appendChild (p1);
  document.getElementById("myMood5").addEventListener ("click", function(e) { check(5); });
  document.getElementById("myMood4").addEventListener ("click", function(e) { check(4); });
  document.getElementById("myMood3").addEventListener ("click", function(e) { check(3); });
  document.getElementById("myMood2").addEventListener ("click", function(e) { check(2); });
   
  var p2 = document.createElement('p');
  p2.id = "msgBox";
  p2.style.fontSize = "80%";
  divId.appendChild (p2);
  
  var checked = true;
    
  function setCookie (name, value, expires) {
   let c = name + "=" + escape(value)+
    (expires ? "; expires="+expires.toGMTString() : "");
   document.cookie = c; //Ограничение 4 Кб!
  }
  
  function getCookie (name) {
   let p = name+"=";
   let i1 = document.cookie.indexOf(p);
   if (i1 == -1) return null;
   let i2 = document.cookie.indexOf(";",i1 + p.length);
   if (i2 == -1) i2 = document.cookie.length;
   return unescape(
    document.cookie.substring(i1 + p.length,i2));
  }
  
  function fixDate(date) {
   let base = new Date (0);
   let t = base.getTime();
   if (t > 0) date.setTime(date.getTime()-t);
  }
  
  function check (m) {
   if (!checked) { putMessage (1); return; }
   let el = document.getElementById("cntMood"+m);
   let c = parseInt(el.innerHTML); 
   if (!isNaN(c)) c++; else c = 0;
   el.innerHTML = c; 
   checked = false;
  }
  
  function today () { 
   let date = new Date();
   let day=date.getDate();
   let month=date.getMonth() + 1;
   let year = date.getFullYear();
   return (day<10 ? '0' : '') + day + '/' + 
          (month<10 ? '0' : '') + month + '/' + year;
  }
  
  function putMessage (n) {
   let messages = [
    "Отметьте настроение дня",
    "Сегодняшнее настроение уже отмечено, приходите завтра :)"
   ];
   if (n<0 || n>messages.length-1) n = 0;
   document.getElementById("msgBox").innerHTML = messages[n];
  }
  
  window.addEventListener('load', function(e) {
   for (let m = 5; m >= 2; m--) {
    let c = getCookie("myMood"+m);
    if (c==undefined || c=='') c = '0';
    let el = document.getElementById("cntMood"+m);
    el.innerHTML = c;
   }
   let c = getCookie("myDate");
   let d = today();
   if (c == d) {
    checked = false;
    putMessage (1);
   }
   else putMessage (0);
  });
  
  window.addEventListener('beforeunload', function(e) {
   let n, now = new Date();
   fixDate(now);
   now.setTime(now.getTime()+5*365*24*60*60*1000);
   for (let m = 5; m >= 2; m--) {
    let el = document.getElementById("cntMood"+m).innerHTML;
    setCookie("myMood"+m,parseInt(el),now);
   }
   setCookie("myDate",today(),now);
  });
 }("myMood"));
 </script>
 <noscript>
  <p>Требуется JavaScript для работы приложения!</p>
 </noscript>
 
 </body></html>
Приложение 5 на JS (Динамическая таблица)
<div align="center" name="table" id="table"></div>
<div align="center">
 <form name="f1">
  N = <select name="N_select" id="N_select"></select>
  M = <select name="M_select" id="M_select"></select>
  <input type="button" value="New" onclick="create()">
  <input type="button" value="Calc" onclick="get()">
 </form>
 <p id="result"></p>
</div>

<script>
 function DynamicTable (N,M,tableId) { //Объект Динамическая таблица
  this.N = N; this.M = M;
  var tableDiv;

  this.table = function() { //Формирование таблицы в элементе tableId
   tableDiv = document.getElementById(tableId);
   var tbl = document.createElement('table');
   tbl.setAttribute('align', 'center');
   tbl.setAttribute('border', '1');
   var tbdy = document.createElement('tbody');
   for (var i = 1; i <= N; i++) {
    var tr = document.createElement('tr');
    for (var j = 1; j <= M; j++) {
     var td = document.createElement('td');
     var inp = document.createElement('input');
     inp.setAttribute('type', 'input');
     inp.setAttribute('size', '5'); //видимый размер
     inp.setAttribute('maxlength', '4'); //макс.длина ввода
     inp.setAttribute('id', 'c'+i+''+j); //inp.id = "";
     inp.setAttribute('name', 'c'+i+''+j);
     td.appendChild(inp);
     tr.appendChild(td);
    }
    tbdy.appendChild(tr);
   }
   tbl.appendChild(tbdy);
   tableDiv.appendChild (tbl);
  }

  this.erase = function () { //Удалить старую таблицу
   while (tableDiv.firstChild) { 
    tableDiv.removeChild (tableDiv.firstChild);
   }
  }

  this.calc = function() { //Вычисления
   var s = 0;
   for (var i = 1; i <= N; i++)
   for (var j = 1; j <= M; j++) {
    var n = parseFloat(document.getElementById("c"+i+""+j).value);
    if (isNaN(n)) document.getElementById("c"+i+""+j).value = '0';
    else s += n;
   }
   document.getElementById('result').innerHTML = s;
  }
 }

 var task; //Объект таблицы

 function get() { //Вычисления по заполненной таблице
  task.calc();
 }

 function create() { //По кнопке New создать новую таблицу нужного размера
  var n = parseInt (document.f1.N_select.value);
  if (isNaN(n)) {
   n = 3; document.f1.N_select.value = n;
  }
  var m = parseInt (document.f1.M_select.value);
  if (isNaN(m)) {
   m = 3; document.f1.M_select.value = m;
  }
  task.erase();
  task = new DynamicTable (n,m,'table');
  task.table();
 }

 function putLists (low,hi,def) { //Получить списки значений для размерностей таблицы
  var s = '';
  for (var i = low; i<= hi; i++) s += '<option value="'+i+'"'+
   (i==def?' selected':'')+'>'+i+"\n";
  document.getElementById('N_select').innerHTML = s;
  document.getElementById('M_select').innerHTML = s;
 }

 window.addEventListener('load', function (e) {
  //По загрузке страницы создать объекты по умолчанию
  putLists (2,9,3);
  task = new DynamicTable(3,3,'table');
  task.table();
 }, false); 
</script>
<noscript><div align="center">Включите Javascript для работы приложения!</div></noscript>

23.11.2019, 15:31 [2328 просмотров]


теги: программирование учебное javascript список

К этой статье пока нет комментариев, Ваш будет первым