Изучаем JavaScript

Скрипт позволяет создавать галерею фото, которые при клике увеличиваются во весь экран и можно дальше листать уже увеличенные фото Demo http://sachinchoolur.github.io/lightGallery/ Скрипт https://github.com/sachinchoolur/lightGallery Подключение стилей <link rel="stylesheet" href="bower_components/lightgallery/dist/css/lightgallery.min.css"> <link rel="stylesheet" href="bower_components/lightgallery/dist/css/lg-transitions.min.css"> Подключение скрипта <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/lightgallery/dist/js/lightgallery.min.js"></script> <script src="bower_components/lightgallery/dist/js/lg-thumbnail.min.js"></script> <script src="bower_components/lightgallery/dist/js/lg-fullscreen.min.js"></script> <script src="js/custom.js"></script> Особеннос...

Скрипт позволяет добавить в таблицу пагинацию, проводить поиск по таблице и регулировать количество отображаемых результатов. И так же умеет сортировать данные в таблице Demo https://datatables.net/ Скрипт https://github.com/DataTables/DataTables

 Скрипт для сортировки цифровых данных в таблицах по возрастанию или убыванию. Нужен для интернет-магазинов Скрипт https://github.com/Mottie/tablesorter Документация и Demo https://mottie.github.io/tablesorter/docs/

Скрипт, позволяющий прокручивать сайт страницами или блоками очень востребован в лендингах и сайтах с структурированной блочной подачей информации. С такой задачей сталкивалась и использовала этот скрипт https://github.com/lukehaas/Scrollify Здесь Demo В видео автор предлагает использовать другой скрипт  fullPage.js Ссылка на гитхаб https://github.com/alvarotrigo/fullPage.js Команда для установки через bower $ bower install fullpage.js Подключение стилей <link rel="stylesheet" href="bower_components/fullpage.js/jquery.fullPage.css"> Стили выравнивают слайды по центру страницы Подключение js <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/jquery.easing/jquery.easing.min.js"></script> <script src="bower_components/fullpage.js/dist/jquery.fullpage.min.js"></script> <script src="js/custom.js"></script> Иниц...

В каждом уроке рассказывается об установке и использовании какого-то скрипта работающего с jQuery. Особо интересными они мне не показались, только перечислю их здесь Урок 7. Автонабор текста Скрипт typed.js Demo Имитирует печатение и стирание текста на машинке. Можно использовать для заголовков или каких то элементов. Видео https://youtu.be/e76YNHgEQtE Урок 8. Hoverdelay Задержка при появлении hover эффекта при наведении курсора на элемент Скрипт jQuery-Hover-Delay Довольно частый вопрос в гугле. Решает, например, проблему частых наводов курсора на кнопку с hover эффектом после которых он ещё некоторое время моргает Видео  https://youtu.be/IaAaa12CApc Урок 9. Стилизация checkbox/radio Решается средствами css. Видео  https://youtu.be/0H8ccb29jl8 Урок 10. Валидация форм Скрипт jquery-validation Используется для валидации данных введённых пользователем в форму на сайте Видео  https://youtu.be/dlv-w16mGhQ Урок 11. Стилизация input[type=range] ...

 Заходим на гитхаб, вбиваем в поиск counter up, первый результат - самый популярный репозиторий с таким именем. Скачиваем командой: $ bower i https://github.com/bfintal/Counter-Up.git Ещё нам необходим скрипт waypoints.js Скачиваем и его $  bower i waypoints Подключаем <script src="bower_components/jquery-waypoints/waypoints.min.js"></script> <script src="bower_components/Counter-Up/jquery.counterup.min.js"></script> В файле custom.js подключение выглядит так (скопировано с гитхаба) $('.counter').counterUp(); В разметке счетчику присваиваем класс .counter. Примеры разметки есть на гитхабе <span class="counter">1,234,567.00</span> <span>$</span><span class="counter">1.99</span> <span class="counter">12345</span> Best practices давать классам, которые используем в js, названия, которые об этом говорят. Поэтому вместо класса counter...

В добавлении на сайт карт Google Maps воспользуемся сайтом Snazzy Maps https://snazzymaps.com/ Он предлагает различные стили для карт, фильтры внизу страницы, стили отсортированы по популярности. Кроме того, есть возможность самостоятельно поменять оформление карты нажав на карандашик слева вверху. Нажимаем на понравившуюся карту. Сбоку видим css-стили карты, а чтобы скачать js-код, нажимаем на ссылку внизу Скачивается html-файл. Всё, что находится внутри тега script копируем и сохраняем в файл google_map.js В index.html подключаем скрипты <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="js/google_map.js"></script> Первая строка - сама карта из google.api, код её подключения был в скачанном html-файле, мы её чуть-чуть отредактировали, убрав type="text/javascript" , так как это новым стандартом не требуется. В файле google_map.js следующие строки отвечают за стиль карты. styles: [{...

Чтобы увидеть как будет выглядеть сайт в старых версиях Internet Explorer, нужно открыть его в Internet Explorer10, нажать клавишу F12, которая активирует панель инструментов для разработчиков. В панели инструментов разработчика выбираем пункт «Browser mode: IE10». Теперь можно  выбрать нужную версию IE и перезагрузить страницу, чтобы увидеть как в ней отображается сайт. В Internet Explorer 9 и ниже вокруг картинок появляется синяя рамка. Исправляется стилем img { border: 0; outline: 0; } И ещё в IE не отображается placeholder - это заполнитель формы, подсказывающий, что туда вводить. Последнее лечится скриптом. Вводим в  Google jquery placeholder и первая ссылка приводит нас на сайт https://github.com/mathiasbynens/jquery-placeholder Скачиваем. Кстати, для скачивания можно использовать ссылку с гитхаба Скачиваем скрипт командой $ bower i https://github.com/mathiasbynens/jquery-placeholder.git Подключаем в index.html <script src="bower_components...

Анимацию при скролле обеспечивает скрипт wow.js - первая ссылка в Google на пример работы скрипта http://mynameismatthieu.com/WOW/ , вторая - на его репозиторий на гитхабе https://github.com/matthieua/WOW . Скачиваем командой $ bower i wow.js В состав wow.js входит файл animate.css с эффектами анимации. Первая ссылка в Google ведёт на сайт где можно увидеть и выбрать понравившиеся эффекты: https://daneden.github.io/animate.css/ Все они входят в файл animate.css, который весит 70 кБ, если скачивать его отдельно $ bower i animated.css Позже, этот файл нужно будет отредактировать, оставив только те эффекты, которые были использованы. Автор советует использовать не больше 5 эффектов на странице Подключием стиль <link rel="stylesheet" href="css/animate.css"> Подключаем скрипт <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/wow/dist/wow.min.js"></script...

 Скрипт слайдера мы скачали в прошлом уроке командой $ bower i slick.js Также его можно найти в Google - первая ссылка по запросу slick http://kenwheeler.github.io/slick/ Преимущества слайдера: - поддерживает touch events - можно просматривать с телефона, листая пальцем - поддерживает responsive - можно задать разное количество слайдов в зависимости от размера экрана: на больших экранах просматривать по 4 слайда, на средних по 2-3, на телефонах по одному Хорошая практика - подключение скриптов из папки bower_components <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/slick-carousel/slick/slick.min.js"></script> <script src="js/custom.js"></script> Тогда при обновлении скрипта программой bower не придётся переписывать номер версии в коде, так как bower даёт скриптам постоянные имена, которые при обновлении не меняются. Что касается стилей, которые находят...

Установим несколько программ, которые пригодятся в дальнейшей работе. Node.js - https://nodejs.org/en/ - Download for Windows --- Recommended For Most Users Git - https://git-scm.com/ - Downloads for Windows Bover - https://bower.io/ - устанавливается командой $ npm install -g bower , которую вводим в свежеустановленный git, нажимаем enter и ждём, когда программа установится. Основные команды, которые нужно знать Переход по папкам: $ cd d $ cd admin Или сразу набрать cd и указать нужный адрес Дополнено. Простой и удобный способ открыть Git в нужной папке без переходов вручную или копирования адреса, это в проводнике вызывать контекстное меню правой кнопкой мыши и выбрать пункт Git Bush here . Git Bush автоматически откроется в выбранной папке  Посмотреть содержимое папки $ ls Очистить консоль $ clear Установка скриптов $ bower install jquery $ bower i jquery Удаление скриптов $ bower uninstall jquery Поиск скриптов по ключевому слову, наприм...