Изучаем JavaScript

Задача - создать функцию появления и исчезновения всплывающего модального окна по клику. Для этого смотрим раздел Effects http://api.jquery.com/category/effects/ Нас интересуют два эффекта:  .fadeIn() и .fadeOut() - соответственно, появление и исчезновение элемента. Кроме модального окна будет появляться и исчезать полупрозрачный оверлей, полоса прокрутки и, в итоге, мы сделаем так, чтобы код работал для разных модальных окон, которые могут быть на странице. Модальному окну присваиваем класс js-modal , так как модальных окон может быть много и логику для всех лучше прописать одну. И добавляем id = "js-modal-login" , чтобы отличить от других модальных окон. Этот же id прописываем в атрибуте href   ссылки, при клике по которой окно должно появляться. Для этой ссылки также прописываем класс js-show-modal . Класс, а не id, опять же потому, что подобных ссылок, при клике по которым должны открываться модальные окна, на странице может быть несколько.  Модальное окно должн

Сделаем так, чтобы при клике на каждый элемент меню страница скроллилась до нужного блока. Получаем событие клика на каждую ссылку меню: $("#js-nav a").on("click", function(event) {        });  Отменяем событие по умолчанию: event.preventDefault(); Проверяем, что код работает. Для этого внутри кода пишем: console.log("click"); При клике по ссылкам меню в консоли появляется надпись click. Теперь нам нужно при клике по ссылке скроллить именно до конкретного блока. Как это организовать. Делаем следующее. Каждому блоку, до которого будет скроллиться страница, прописываем свой собственный id. затем эти же id пишем у ссылок, при клике по которым должен идти скролл к данному блоку. То есть мы создаём якоря: Узнать, по какой ссылке был сделан клик, позволит следующий код var currentBlock = $(this).attr("href"); Мы создаём переменную currentBlock в которой сохраняем атрибут href той ссылки, по которой был сделан клик. Получим з

Чтобы при скролле страницы меню оставалось на своём месте, is не нужен, достаточно в css указать для него фиксированное позиционирование: position: fixed Автор ставит более сложную задачу: меню прокручивается вместе со страницей и фиксированным становится только когда прокрутился блок header Находим высоту блока header с id = "js-header", присваиваем значение переменной headerH var headerH = $("#js-header").height(); Отслеживаем на сколько проскроллен документ. Событие скролл $(document).on("scroll", function(){             }) Внутри создаём переменную: var documentScroll = $(this).scrollTop(); Добавляем условие if(documentScroll > headerH) {             $("#js-nav-container").addClass("fixed");             });         } else {             $("#js-nav-container").removeClass("fixed");         }  Код полностью         var headerH = $("#js-header").height();                 $(docu

 Просмотр информации о событиях в jQuery - http://api.jquery.com/category/events/ основные события click и hover Отслеживаем событие клик и меняем текст для проверки: $ (".js-get-started").on("click", function(){         $ (this).text("Test");     }) Конструкция $ (this) заменила $ (".js-get-started") . Так как мы находимся внутри события, связанного с этой кнопкой, повторно указывать её селектор не нужно. This означает, что речь идёт о том же самом элементе. по которому был сделан клик. Предыдущую конструкцию можно сократить: $ (".js-get-started").click(function(){         $ (this).text("Test");     }) Для сравнения. В vanilla js, не использующем библиотеку jQuery, событие клика отслеживается так: var getStarted = document.querySelector(". js-get-started "); getStarted .addEventListener("click", function(){     // про смену текста я ещё не знаю }); Трудно не заметить сходства конс

http://api.jquery.com/ - сайт документации по работе с jQuery. Раздел Selectors - получение доступа к элементам. Основные селекторы - селекторы по классу и по id. Важно! Нежелательно привязывать js к классам, отвечающие за стилевое оформление. Если к элементу привязывается js-функция, добавляем ему класс, начинающийся с префикса js- Селектор по классу: $ (".js-get-started") Проверяем, правильно ли мы получили доступ: $ (".js-get-started").text("Test"); Надпись на кнопке изменилась на Test. Если для стилизации селекторы по id крайне не рекомендуются, до для js они используются очень часто, тем более, что выборка по id работает быстрее. Ограничение - id на странице может быть только один. Селектор по id: $ ("#js-get-started") Контекстный селектор - выберет все ссылки вложенные в меню:   $ ("#js-nav a") Дочерний селектор - выберет только ссылки первого уровня вложенности:   $ ("#js-nav > a")

  jQuery — библиотека JavaScrip. Девиз jQuery: write less, do more - пиши меньше, делай больше. Сайт jQuery - https://jquery.com/ 1.Скачиваем jQuery Download --- Download the compressed, production jQuery 3.2.1 (скачать сжатую версию) 2. Создаём папку web (имя произвольное), в ней папку js, в неё копируем скачанную библиотеку jQuery и в ней же создаём файл custom.js 3. Открываем Brackets (или ваш редактор кода). В папке web создаём документ index.html Создаём основу веб-страницы. В Brackets с установленным дополнением Emmet для этого достаточно напечатать восклицательный знак и нажать Tab. Скрипты подключаем перед закрывающим </body> .  <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title> </head> <body>     <script src="js/jquery-3.2.1.min.js"></script>     <script src="js/custom.js"></script> </body>

Из отзывов:  Очень даже дельный курс. В первую очередь для тех, кто не хочет много времени разбираться в теоретических тонкостях, а стремится как можно скорей начать применять свои знания в JS на практике. В общем, для практиков-верстальщиков самое то что надо! А теорию можно будет подтянуть потом. Я с удовольствием смотрю этот материал. Практика в каждом уроке и показывает как просто и быстро пользоваться документацией чтобы создать действующий код для сайта. Ведь многие сразу бегут в гугл в поисках готового кода, а думать головой то некогда! Отличный видеокурс, без воды, всё по делу. Учит, как работать с JQuery и не только, показывает, где доки (что немаловажно), чёткая дикция, удобно смотреть и применять. Видеокурс разбит на правильные блоки, всё структурировано и отображено в стартовом HTML. Рекомендую. Название вводит в заблуждение, т.к. тут не JavaScript , а JQuery для верстальщика . Боже, кто вам мешает после прохождения курса длинной

1. Курс Дмитрия Валака JavaScript для верстальщика. Там около 11 часов видео, сплошная практика. Курс хороший и небольшой. За два дня прошла пять уроков всего их около 50. Так что реально пройти за две-три недели. 2. Современный учебник JavaScript Ильи Кантора. Автор считает, что за два месяца его можно пройти. Но это он большой оптимист. Два месяца я его уже проходила, дошла до ООП. Но это было зимой, так что сейчас можно начинать сначала. 3. Задачи по js на codewars . Как минимум две задачи каждый день. Или хотя бы одну. 4. Курс JavaScript30 - тридцать проектов за тридцать дней. Пока я не могу и одного проекта сделать потому что нет теоретической базы. Так что эти проекты будут после учебника Кантора.

Статья о том почему для того, чтобы научиться программированию, одних случайных ресурсов, найденных в интернете, недостаточно. 1. Нужно определиться что учить. Что сегодня важно и востребовано. И что будет важно и востребовано завтра. Где находится та ниша, в которой ты сможешь проявить свои способности. 2. Что и за чем учить. В каком порядке усваивать материал и насколько глубоко в него вникать. Что важное, что второстепенное. На чём сосредоточить внимание, а что достаточно просто просмотреть. 3. Учить современный материал, а не устаревший. С современным темпом развития технологий, когда устаревшими могут оказаться знания трёх-четырёхлетней давности, это не так просто. Статья 2009 года может оказаться актуальной, а написанная на несколько лет позже - безнадёжно устаревшей. Это если автор вообще как-нибудь обозначил дату написания статьи. Личность самого автора тоже важна: один отслеживает современные тенденции, другой живёт вчерашним днём. И да, это я ещё не говорю о неучах и