Проект: Javascript/jQuery

В этом проекте вы получите возможность создать довольно удобный инструмент, чтобы размять ваши Javascript- и jQuery-мышцы. До этого момента Codecademy вел вас за руку, но настало время поработать самим. Вы создадите браузерную версию блокнота для зарисовок.

Это НЕ ДОЛЖНО быть легко. Возможно, вы уже наведались в Google и узнали о нескольких методах jQuery или что-то о CSS. Собственно, в этом весь смысл! Вы МОЖЕТЕ создать это и вам доступны все ресурсы. Мы обсудим несколько основных шагов, но их реализация будет зависеть только от вас. Например, откуда взялся эффект hover?

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

Следуйте инструкциям, описанных в начале проекта по созданию домашней страницы Google, чтобы создать репозиторий для этого проекта на Github (разумеется, вам нужно будет изменить его название).
Создайте веб-страницу (или используйте JSFiddle) с сеткой 16x16, состоящей из квадратных элементов <div>
1. Создайте div-ы при помощи Javascript/jQuery... не пытайтесь создать их вручную при помощи копипастинга!
2. Лучше всего поместить вашу сетку из квадратов внутрь div-контейнера.
3. Если необходимо, добавьте jQuery в свой файл, вы можете поместить его прямо в HTML, добавив <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> внутрь тега <head> над всеми прочими JS-файлами.
4. Существует несколько разных способов заставить div-ы выглядеть как сетка (а не по одному на строке) -- float/clear, используя свойства display со значением table и inline-block. Попробуйте каждый из способов.
5. Будьте осторожны с рамками и внешними отступами (margin)... Они увеличивают размер квадратов!
6. "OMFG, почему моя сетка не создается???"
  1. Откройте инструменты разработчика в вашем браузере
  2. Убедитесь, что в консоли Javascript нет ошибок
  3. Убедитесь, что элементы видны на странице, а не спрятаны каким-либо образом
  4. Попробуйте подебажить, добавив console.log в ваш js-код, чтобы увидеть, загружается ли что-либо
Добавьте эффект при наведении, чтобы квадрат менял свой цвет, когда вы проводите над ним курсор мыши, оставляя "пикселизованый" след на сетке подобно тому, что оставляет ручка.
1. Что происходит, когда вы наводите мышь? Ну, вы наводите (hover), вам нужно войти в div (enter) и покинуть его (leave). Любое из этих событий будет хорошим началом.
2. Здесь снова несколько способов изменить цвет - добавить новый класс (addClass), изменить фон div-a индивидуально, и так далее.
Добавьте над сеткой кнопку, которая будет очищать сетку и отправлять пользователю всплывающее сообщение с вопросом, сколько квадратов должно быть на стороне новой сетки. Когда пользователь вводит число, новая сетка должна быть создана в том же месте, где и старая, чистая и одноцветная. Новый лист для наброска!
1. Узнайте о тегах button в HTML и о том, как можно запускать функцию javascript по клику на кнопку.
2. Узнайте о prompt в jQuery.
3. Вы должны иметь возможность ввести 64 и получить сетку размера 64х64 занимающую не больше пикселей, чем сетка меньшего размера. Другими словами, меняется количество квадратов в сетке, но не её фактический размер на экране.
4. Почему оно такое медленное??? Помните, что когда вы вызываете jQuery-селектор вроде $(".square"), вы, на самом деле, получаете ВСЕ элементы, подходящие под это описание. Так что если вы выполняете сотни подобных операций в секунду, это может занимать определенное время.
5. Посмотрите, насколько большой должна быть сетка, чтобы работа с ней была медленной настолько, чтобы её нельзя было использовать.
(Необязательно): Вместо того, чтобы просто менять цвет вашей сетки с черного на белый (для примера), задавайте для каждого квадрата полностью случайный цвет в формате RGB. Попробуйте при каждом новом наведении передавать цвет на 10% темнее, чтобы через 10 наведений квадрат был полностью черным.
Отправьте ваш проект на Github.

Проект: Javascript/jQuery

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