Проект: Управление DOM при помощи jQuery
Сейчас, когда вы погрузились в работу с головой и изучили немного настоящего jQuery, пришло время применить полученные знания для генерации целой веб-страницы с использованием только Javascript и jQuery. Это будет простая домашняя страница ресторана, но вы должны придерживаться принципов использования Javascript для динамического (ре-)рендеринга страницы.
Задание
- Создайте Github репозиторий для этого проекта. Следуйте инструкциям по проекту домашняя страница Google, если вам нужна помощь.
- Создайте пустой HTML документ, содержащий для начала только тэги
<html>и<body>плюс один единственный div контейнер с названием<div id="content">. Также не забудьте включить библиотеку jQuery внутри ''. - Перейдите в консоль (помните про инструменты разработчика в вашем браузере?)) и вручную импользуйте jQuery для добавления тэга изображения в ваш div (просто любую картинку из интернета).Не забывайте, что в консоли можно использовать кнопку со стрелкой вверх для доступа к вашим предыдущим командам. Для вдохновения посмотрите на функцию .append() в документации jQuery и про эту же функцию на русском.
- Создайте скелет домашней страницы ресторана. Включите в него изображение, заголовок, немного текста с описанием того, как чудесен этот ресторан. Нестрашно, если вы сейчас будете использовать только HTML, чтобы посмотреть, как все будет выглядеть на странице.
- Теперь удалите эти элементы из HTML (чтобы остались только тэги
<html>,<body>, и<div id="content">) и создайте их с помощью только Javascript, т.е. добавляя каждый новый элемент вdiv#content, как только страница будет загружена. - Затем настройте сайт так, чтобы для доступа к Контактам и Меню использовались вкладки. Посмотрите пункт #7 в этой статье для визуального вдохновения. Фишка здесь в том, чтобы каждая из вкладок НЕ была привязана к разным HTML страницам... Наоборот, должна запускаться Javascript функция, которая будет стирать текущую страницу и затем создавать нужную. Возможно, будет проще, если сначала создать три разных HTML страницы, а потом уже превратить их в Javascript.
- Сохраняйте простоту! При клике на другую вкладку ваш Javascript должен автоматически удалять элементы "Меню" и добавлять элементы "Домашней" страницы.
- Отправьте решение на Github.
Решения студентов
- Решение jamie | Просмотр в браузере
- Решение Afshin M | Просмотр в браузере
- Решение Tom M | Просмотр в браузере
- Решение Marina Sergeyeva | Просмотр в браузере
Дополнительные ресурсы
Этот раздел содержит полезные ссылки на дополнительные материалы. Они не обязательны, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему.