ИТОГ видеокурса JavaScript. Уроки по js

Видео-курс по JavaScript на русском языке / Блог компании Hexlet / Хабр

Здравствуй, Хабр!

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

Раздача на Рутрекере (видео+слайды)
Прямые ссылки на видеофайлы: первая лекция, вторая, третья, четвертая, пятая, шестая и седьмая
Прямая ссылка на слайды (zip-архив pdf-файлов)
Подкаст в iTunes
Плейлист на YouTube
Форум курса

Первая лекция: Введение в JavaScript, немного истории, числа (тут есть ошибка: функция toFixed округляет значения).

Остальное – под катом.

Вторая лекция: Строки и объекты. Прототипы объектов и цепочки свойств. Небольшое введение в наследование.

<center><ins class="adsbygoogle" style="display:block;height:250px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="3076124593" data-ad-format="link" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></center>

Третья лекция: Самые важные части JavaScript: функции и замыкания (closures).

Четвертая лекция: Наследование свойств и конструкторы в JavaScript.

Пятая лекция: Массивы и работа с массивами.

Шестая лекция: Регулярные выражения.

Седьмая лекция: Сравнение переменных и объектов, var, eval и заключение.

P.S. Напомню, что проект Хекслет существует благодаря пожертвованиям пользователей. Вы можете поддержать проект любым удобным вам способом на этой странице. Ну и простая информационная поддержка (расскажите друзьям, расшарьте в соц. сети и так далее) сильно поможет нам. Большое спасибо!

Знания должны быть свободными!

habr.com

коллекция уроков по JS, jQuery и др.

В этом разделе собраны уроки по программированию на JavaScript. Сегодняшние тенденции предрасполагают программирование на фреймверках, таких как jquery, dojo, mootools и другие. Мы также рассмотрим уроки по программированию включая эти библиотеки js кода. Все уроки содержат живые примеры (демо работа скриптов), а также архивы исходных файлов. Это значительно экономит время, нервы, более иллюстративно и практично. Надеемся, js уроки, будут интересными и полезными в вашей практике программирования.

Progressive Web App – от А до Я: что это? Как создать прогрессивное веб приложение? Просмотров: 218

Progressive Web App – это веб приложение, которое обладает рядом преимуществ, использует передовые возможности браузеров, и может быть добавлено как ярлык на ваш рабочий стол. Его поведение в целом напоминает нативные приложения.

В этом уроке мы будем рассматривать все моменты которые стоить знать о Progressive Web App (дальше PWA). Шаг за шагом, с примерами кода и демо приложением. Как пример, мы будем создавать приложение для создания селфи.

Создаем jQuery popup окно Просмотров: 79282

Внешние popup окна с рекламой – это ужасные идеи! Все здравомыслящие вебмастера, никогда не посоветуют вам использовать их на сайте. Но, если речь идет о внутренних popup окнах – это полезный элемент, который дает дополнительную информацию, предупреждает, предотвращает, дает возможность выбора и многое другое.

Что мы создадим?

В этом уроке мы создадим простое и красивое popup окно на jquery. Оно будет похоже на то, что используется в twitter. Естественно, вы сможете придать стиль, какой вам по душе.

Создаем слайдер картинок на jQuery Просмотров: 14376

В этом уроке мы создадим оригинальный слайдер картинок с помощью jQuery. Такой же стоит на Mac App Store. Он автоматически пролистывает вниз, после чего самая нижняя картинка выводиться в поле обзора слайда.

Что мы хотим от слайдера?

Естественно, удивить пользователя и повысить конверсию поискового трафика. Для этого мы создадим список нужд и пожеланий, руководствуясь которыми будем разрабатывать слайдер.

Будем пролистывать 4 картинки (можно и больше, если вам это надо)
Перелистывание слайдов должно быть автоматическим
Картинка с главной области должна красиво исчезнуть
Понадобиться две картинки для каждого слайда: большая и маленькая

Начнем разработку слайдера...

Проверка надежности пароля, проверяем пароль на сложность с помощью jQuery Просмотров: 14121

В этом уроке, мы создадим красивый индикатор надежности пароля. Он будет определять сложность пароля, и перемещать стрелку индикатора соответственно. В этом нам поможет новый jQuery плагин Complexify. Как только пароль будет достаточно надежным, пользователю можно будет продолжать процедуру регистрации.

Исходные файлы также доступны, вы сможете настроить дизайн так, как вам нравиться.

Создаем кнопку «Наверх» или Scroll to Top на jQuery Просмотров: 46544

В этом уроке, мы узнаем, как создать свою Scroll to Top кнопку для длинных страниц. Способ реализации очень прост. Если вы его усвоите, вы сможете настроить кнопку Scroll to Top так, как вам захочется. Преимущество в том, что данная кнопка реализована на популярном фреймверке jQuery, который используется практически на каждом сайте.

Скрипт прогноза погоды для сайта на jQuery + Yahoo API Просмотров: 18067

Сегодня мы будем использовать геолокацию, для вывода пользователям персонального прогноза погоды. Большей мерой, наш скрипт будет написан на jQuery, который с помощью AJAX запросов будет получать информацию из двух популярных Yahoo API. После чего эти данные будут использованы для формирования и вывода прогноза погоды для каждого конкретного пользователя.

Горизонтальное выпадающее меню на jQuery + HTML + CSS Просмотров: 32049

Меню играет неотъемлемую роль в дизайне сайта. Оно позволяет пользователю найти информацию и помогает в навигации. Поэтому, когда вы разрабатываете меню, юзабилити должно быть прежде всего.

Прошлый раз, рассматривалось создание горизонтального выпадающего меню на CSS, но такое меню слишком ограниченное для некоторых сайтов. Что я имею в виду? Если к сайту подключена библиотека jQuery, почему бы не написать 5-6 строк кода, и создать красивые эффекты для выпадающего меню. Сегодня мы узнаем, как сверстать такое меню на HTML + CSS. После чего, мы напишем несколько строк jQuery кода, для плавности выпадения подменю.

sitear.ru

15 профессиональных уроков по JavaScript

В этой статье, мы для вас собрали очень полезные и практические уроки по JavaScript для начинающих и продвинутых веб разработчиков.

Кому будет полезно : программистам

Язык : русский

Что вы вы получите от просмотра :

Вы узнаете об истории создания данного языка, использовании конструкции JavaScript для создания условий (ветвлений), узнаете о массивах, работой с конструкторами и прототипами и многое другое.

<div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div style="display:block; background:#fff; margin: 1px auto"><center><div id="rtbBlock1"> <div id="yandex_rtb_R-A-2" class="yandex-adaptive classYandexRTB"></div> </div> <script type="text/javascript"> (function(w, n) { if ( rtbW >= 960 ){ var rtbBlockID = "R-A-744222-3"; } else { var rtbBlockID = "R-A-744222-5"; } w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: rtbBlockID, renderTo: "yandex_rtb_R-A-2", async: false, pageNumber: getRTBpageNumber( rtbBlockID ), directSettings: { }, onRender: function(data) { if (data.product == "direct"){ document.getElementById("rtbBlock1").style.textAlign = "center"; } } }, function() { var g = document.createElement("ins"); g.className = "adsbygoogle"; g.style.display = "inline-block"; if (rtbW >= 960){ g.style.width = "580px"; g.style.height = "400px"; g.setAttribute("data-ad-slot", "9935184599"); }else{ g.style.width = "300px"; g.style.height = "600px"; g.setAttribute("data-ad-slot", "9935184599"); } g.setAttribute("data-ad-client", "ca-pub-1812626643144578"); g.setAttribute("data-alternate-ad-url", "/back.html"); document.getElementById("yandex_rtb_R-A-2").appendChild(g); (adsbygoogle = window.adsbygoogle || []).push({}); }); }); document.write('<sc'+'ript type="text/javascript" src="//an.yandex.ru/system/context.js"></sc'+'ript>'); })(this, "yandexContextSyncCallbacks");</script></center></div>

Мы рекомендуем :

14 уроков по основам Bootstrap 3

Уроки по основам jQuery

Курс по PHP для начинающих

say-hi.me

JavaScript - Видеоурок - обучение JavaScript

Уважаемый читатель!

Предлагаю вам скачать все видеоуроки курса JavaScript в лучшем качестве + все исходники примеров, демонстрируемых во время видеоурока + справочник по JavaScript, на которой я частенько ссылался одним архивом с выделенного сервера на высокой скорости (до 5 Мбит/сек).

Стоимость услуги – $2,95. Оплатить можно пластиковыми картами Visa и Mastercard, мобильным платежом (Мегафон, МТС, Билайн), а также WebMoney, Яндекс.Деньгами, Qiwi и другими популярными платежными системами.

Модуль оплаты встроен в WordPress при помощи этого плагина.

После оплаты вам будет предоставлена ссылка для быстрого скачивания архива (372,4 Мбайт, *.zip). Скорость закачки – до 1.5 Мегабит в секунду.

Стоимость быстрого скачивания курса — $2,95.

Введите Ваш адрес эл. почты (после оплаты мы отправим на него ссылку для загрузки видеокурса):

Вот и подошла к концу серия из семи видеоуроков по JavaScript. Сегодня я предлагаю вашему внимание еще один бонусный (восьмой) видеоурок, в котором пойдет речь о принципах отладки JavaScript-кода.

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

Динамический сайт, отвечающий высоким требованиям функциональности, можно реализовать и без использования JavaScript, вполне достаточно понимания связок HTML+CSS и PHP+MySQL. Ведь, на современном уровне развития веб-дизайна, ушли в прошлое разнообразные колхозные визуальные эффекты, реализуемые только посредством JavaScript (ползающий текст, изменяющийся title, произвольный текст в строке состояния). Для воплощения мыслей дизайнера все большую и большую свободу веб-мастеру дает CSS.

Но появился Ajax, JQuery, разнообразные API (карты Яндекса и Google) и все это базируется на старом добром JavaScript.

Насколько упрощается труд верстальщика, когда, благодаря использованию некоторых функция JavaScript, появляется возможность рассчитать координаты вывода блоков веб-страницы, реализовать кроссбраузерные эффекты, задуманные извращенным дизайнером, отобразить всплывающие подсказки, проверить правильность вводимых посетителем данных и все это без перезагрузки страницы.

Если от красивых эффектов можно отказаться, кстати иной раз это идет на пользу дизайну сайта, то обработка вводимых пользователем данных, их проверка, отображение всплывающих подсказок, изменение видимости блоков без перезагрузки страницы – это важный и серьезный вопрос из области юзабилити. Дизайн – дело спорное, а вот тормозной сайт, который не может на лету обрабатывать действия пользователя – это серьезный звоночек безуспешности сложного проекта.

Отсюда вывод: JavaScript изучать нужно, он полезен как верстальщику, так и веб-мастеру, желающему упростить жизнь посетителей сайта, а в хозяйстве просто незаменим.

Из моей серии бесплатных видеоуроков по JavaScript вы сможете, более интерактивным и наглядным образом, в отличии от книги, быстро получить базовые знания и освоить:

Синтаксис языка JavaScript.
Основные его конструкции и функции.
Принципы работы с парадигмой DOM (объектно-ориентрированная модель программирования), которая значительно облегчает жизнь JavaScript-программисту.
Возможности динамической верстки на JavaScript.
Проверка данных, получаемых от пользователя, на стороне клиента, без перезагрузки страницы.
Сохранение данных между визитами посетителя сайта (cookies).

А теперь, как и обещал, бонусный видеоурок по отладке программного кода. Подход, который я демонстрирую, применим не только для отладки JavaScript, но и любого другого скрипта.

В качестве основного инструмента отладки я использую собственную голову, а в качестве вспомогательного – FireBug (о котором я более-менее подробно рассказывал здесь, а также, на примере CSS-framework-а, демонстрировал принципы удобного ознакомления FireBug-ом с чужим кодом здесь).

В лучшем качестве видеоурок можно скачать с Народного.Диска (*.wmv, 14.1 МБайт).

Все видеоуроки по JavaScript, для удобства, объединены одной меткой. Вы сможете их найти перейдя по ссылке JavaScript видеокурс.

С уважением, Андрей МорковинScript.