Проект: Управление DOM при помощи jQuery

Сейчас, когда вы погрузились в работу с головой и изучили немного настоящего jQuery, пришло время применить полученные знания для генерации целой веб-страницы с использованием только Javascript и jQuery. Это будет простая домашняя страница ресторана, но вы должны придерживаться принципов использования Javascript для динамического (ре-)рендеринга страницы.

Задание

  1. Создайте Github репозиторий для этого проекта. Следуйте инструкциям по проекту домашняя страница Google, если вам нужна помощь.
  2. Создайте пустой HTML документ, содержащий для начала только тэги <html> и <body>плюс один единственный div контейнер с названием <div id="content">. Также не забудьте включить библиотеку jQuery внутри ''.
  3. Перейдите в консоль (помните про инструменты разработчика в вашем браузере?)) и вручную импользуйте jQuery для добавления тэга изображения в ваш div (просто любую картинку из интернета).Не забывайте, что в консоли можно использовать кнопку со стрелкой вверх для доступа к вашим предыдущим командам. Для вдохновения посмотрите на функцию .append() в документации jQuery и про эту же функцию на русском.
  4. Создайте скелет домашней страницы ресторана. Включите в него изображение, заголовок, немного текста с описанием того, как чудесен этот ресторан. Нестрашно, если вы сейчас будете использовать только HTML, чтобы посмотреть, как все будет выглядеть на странице.
  5. Теперь удалите эти элементы из HTML (чтобы остались только тэги <html>, <body>, и <div id="content">) и создайте их с помощью только Javascript, т.е. добавляя каждый новый элемент в div#content, как только страница будет загружена.
  6. Затем настройте сайт так, чтобы для доступа к Контактам и Меню использовались вкладки. Посмотрите пункт #7 в этой статье для визуального вдохновения. Фишка здесь в том, чтобы каждая из вкладок НЕ была привязана к разным HTML страницам... Наоборот, должна запускаться Javascript функция, которая будет стирать текущую страницу и затем создавать нужную. Возможно, будет проще, если сначала создать три разных HTML страницы, а потом уже превратить их в Javascript.
  7. Сохраняйте простоту! При клике на другую вкладку ваш Javascript должен автоматически удалять элементы "Меню" и добавлять элементы "Домашней" страницы.
  8. Отправьте решение на Github.

Решения студентов

Дополнительные ресурсы

Этот раздел содержит полезные ссылки на дополнительные материалы. Они не обязательны, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему.

Поделиться уроком: