Изучаем JavaScript

FreeCodeCamp - бесплатные онлайн курсы для изучающих программирование. Созданы они были в октябре 2014 года, у проекта уже около тридцати тысяч выпускников . Курс постоянно расширяется, появляются и наполняются разделы. Если вначале всё время прохождения курса оценивалось в 800 часов, то сейчас оно увеличилось примерно до 2000 часов: 1200 часов занимает самостоятельная работа и 800 часов участие в некоммерческих проектах. Карта курса показывает порядок прохождения тем. Те из них, которые отмечены звёздочкой, обязательны для получения сертификата. Всего сертификатов четыре: первые три получают после прохождения тем Front End, Data Visualization, Back End и выполнения учебных проектов по этим темам, четвёртый - за получение первых трёх сертификатов, и уже он даёт право на прохождение бесплатной практики и получения первых реальных проектов в своё портфолио. Приступая к прохождению курса нужно очень чётко понимать чего от него можно ожидать, а чего он дать не сможет. Теории и си...

Займёмся оформлением и научим JavaScript менять цвет фона страницы по клику. Нам нужен массив цветов и функция, позволяющая выбирать их в случайном порядке. А затем назначим случайный цвет - цветом фона страницы. Вот так: var color = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"]; var randomColor = color[Math.floor(Math.random() * color.length)];     document.body.style.backgroundColor = randomColor;  Так же изменила цвет кнопки и текста : document.getElementById("button").style.backgroundColor = randomColor; document.getElementById("quotation").style.color = randomColor;     document.getElementById("source").style.color = randomColor;  Результат можно увидеть по ссылке .

Продолжим предыдущую тему и попробуем немного усовершенствовать полученный код воспользовавшись этой инструкцией . Здесь предлагают вместо массива с цитатами использовать JSON массив. Что это и зачем читаем здесь и здесь . Разметка страницы изменилась незначительно: добавился ещё один div для автора цитаты и у кнопки убрали свойство onclick, оно будет реализовано в js-коде, что более правильно с точки зрения семантики. function randomQuote() {     var random = quotes[Math.floor(Math.random() * quotes.length)];       quotation.innerText = `“${random.quote}.”`;     source.innerText = random.source; } document.querySelector("button").addEventListener('click', randomQuote) Результат работы кода можно увидеть здесь . В качестве источника цитат использовались сайты Жемчужины мысли , Омар Хайям , Ad me .

Речь пойдёт о вариантах решения 262 задания Free Code Camp — онлайн курсов для обучения программированию. Пояснений к заданию минимум: предлагают сделать свой проект на JavaScript по функционалу похожий на предлагаемый даже не заглядывая в его исходный код. Тем не менее читать искать и спрашивать не запрещается. Тем более, не запрещается думать. Давайте посмотрим что нужно реализовать: 1. Случайная смена цитаты по клику. 2. Случайная смена цвета фона страницы. 3. Кнопка позволяющая поделиться цитатой в Твиттере. Что хотелось бы изменить по сравнению с предлагаемым проектом: 1. Зафиксировать кнопку для смены цитаты в определённом месте страницы. 2. Использовать русскоязычные цитаты. 3. Не использовать бутстрап и jQury. 4. Возможно, реализовать не только смену цитат и цвета фона, но ещё и смену картинки к цитате. В поисковике находим статью называющуюся "Как построить генератор случайных цитат  с JavaScript и HTML, для абсолютных новичков". Статья действите...

Сравнивая скорость загрузки страницы с шрифтами, загруженными через GoogleFonts и подключенными локально, заметила, что первый вариант может быть намного медленнее второго: даже при хорошей скорости интернета сотни миллисекунд могут уходить на подключение шрифтов GoogleFonts. Вывод, который сделала для себя: для скорости загрузки страницы лучше, если используемые шрифты загружены в папку проекта и подключаются оттуда. Как подключать шрифты в 2017 году: @font-face { font-family: 'Web font'; src: url('webfont.woff2') format('woff2'), url('webfont.woff') format('woff'); font-weight: normal; font-style: normal; }   Ибо кроссбраузерность WOFF и кроссбраузерность WOFF2 (на будущее) — позволяют. Источник Хороший сайт для скачивания шрифтов: https://www.onlinewebfonts.com/