Пропустить навигацию

Практика 8

Задание

  1. Разберите пример Blog.html, в котором находится блог для любителей учиться =). Принцип работы данного сценария: имеется массив blog, содержащий объекты, формирующие записи блога. Конструктор Blog() создает объект записи блога с двумя свойствами – текст записи (body) и дата записи. Функция showBlog() выводит записи блога под атрибутом div.
  2. Усовершенствуйте код страницы Blog.html следующим образом:
  • Модифицируйте способ сохранения дат, изменив тип данных переменной date на объект Date().  Формат даты для записей блога должен отображаться в виде ДД:ММ:ГГГГ.
  • Создайте функцию сортировки массива записей блога по дате их создания в обратном хронологическом порядке (самая свежая запись должна быть наверху). Данная функция должна запускаться при каждом добавлении новой записи (sort).
  • Создайте функцию поиска текста по всем записям блога searchText(). Результат поиска (запись, содержащая совпадения) должен выводиться на экран (alert). В случае отсутствия результатов поиска в текстовое поле searchfail должно выводиться сообщение об отсутствии совпадений. (indexOf, toLowerCase).
  • Напишите функцию randomBlog(), случайным образом выбирающую запись блога
    и отображающую её в отдельном окне.
  • Создайте метод containsText() объекта Blog на основе функции поиска (this), возвращающий true в случае, если запись блога содержит поисковую строку.
  • Создайте метод toHTML() объекта Blog, на основе функции showBlog(), возвращающий запись блога как отформатированный HTML-код.
  • Создайте метод toString() объекта Blog, выполняющий преобразование записей блога в строку вида: “[ДД:ММ:ГГГГ] текст записи из body”.
  • Для избавления от излишнего дублирования методов для каждого экземпляра объекта Blog, создайте прототип объекта Blog, который содержит три вышеупомянутых метода.
  • Создайте в прототипе объекта Blog, свойство signature, которое содержит подпись автора блога. Реализуйте добавление этой подписи к каждой записи блога.
  • Осуществите возможность опционального добавления картинки к записи блога (файл добавляемого изображения должен находиться в той же папке, что и файл Blog.html).

 

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

 

Исходный код:

файл Blog.html

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title>Blog v.1.0 - The Blog about person's life</title>
<script type="text/javascript">
	function Blog(body, date) {
		this.body = body;
		this.date = date;
	}
	var blog = [ new Blog("Got the new book I ordered...", "28/08/2015"),
		     new Blog("It was a pretty sunny day...", "14/08/2015"),
		     new Blog("And now we begin to learn again", "01/09/2015"), 
		     new Blog("I got a new bicycle and look forward to ride", "15/09/2015") ];
	function showBlog(numEntries) {
		if (!numEntries)
		  numEntries = blog.length;
		var i = 0, blogText = "";
		while (i<blog.length && i<numEntries) {
		  if (i % 2 == 0)
		    blogText += "<p style='background-color:#EEEEEE'>"
		  else
		    blogText += "<p>";
		  blogText += "<strong>" + blog[i].date + "</strong><br/>" + blog[i].body + "<p>";
		  i++;
		}
		document.getElementById("blog").innerHTML = blogText;
	}
</script>
</head>
<body onload="showBlog(5);">
  <h3>The Blog about someone life</h3>
  <img src="who.jpg" alt="math" />
  <input type="button" id="search" value="Search the Blog" onclick="searchBlog();" />
  <input type="text" id="searchtext" name="searchtext"  value="" /><p id="searchfail"></p>
  <div id="blog"></div>
  <input type="button" id="showall" value="Show All Blog Entries" onclick="showBlog();" />
  <input type="button" id="randomBlog" value="View a Random Blog Entry" onclick="randomBlog();" />
</body>
</html>

Галерея изображений