SdelaySite.com » JavaScript

Верстальщик + JavaScript = вместе веселее

Андрей Морковин — Mon, 12 Apr 2010 20:33:57 +0000

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

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

Видео на сервисе YouTube:

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

Исходники демонстрируемых файлов тоже можно скачать с Народа (4 Кбайта *.zip)

Кстати, у этого поста есть спонсор. Zakaz-Buketa.ru букеты под заказ.

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

ИТОГ видеокурса JavaScript

Андрей Морковин — Fri, 08 Jan 2010 15:24:11 +0000

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

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

Размер архива – 185 МБайт.

Услуга быстрого скачивания платная – 50 рублей. Данный платеж, скорее стимул для дальнейшего развития блога и благодарность за проделанную работу, нежели заработок. При желании вы всегда можете скачать видеоуроки бесплатно: ссылка на бесплатное скачивание с DepositFiles размещена в каждом текстовом описании к очередному видеоуроку.

Оплата принимается в WebMoney (WMR, WMZ, WMU). После совершения оплаты вы получите ссылку на скачивание архива видеокурса с выделенного сервера.

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

Вот и подошла к концу серия из семи видеоуроков по 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.

JavaScript видеоурок #7

Андрей Морковин — Mon, 28 Dec 2009 23:27:27 +0000

Предлагаю вашему вниманию, уважаемый читатель, седьмой видеоурок курса JavaScript. Я долго раздумывал, стоит ли рассказывать о cookies в JavaScript, существуют ли задачи, в которых неприменим PHP.

Из статьи Dimox-а я узнал о существующей проблеме в MaxCahe. И, на сколько я понял, она заключается именно в невозможности применения PHP-скриптов для работы с cookies.

Поэтому в данном видеоуроке речь пойдет о cookies в JavaScript.

Что вообще представляют из себя cookies?

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

А вообще, работа с cookies посредством JavaScript – это любимый подход хакеров. Запихивают они невидимый JavaScript в незащищенный форум и получают cookie ни о чем не подозревающего форумчанина. Из cookie выцарапывается идентификатор сессии и злостный хакер получает доступ к личной информации пользователя.

Подробно о том как работать со всем этим хозяйством вы можете узнать из видеоурока.

Видео с сервиса RuTube:

Видео с сервиса YouTube (первая часть):

Видео с сервиса YouTube (вторая часть):

Видео с сервиса YouTube (третья часть):

Видео с сервиса YouTube (четвертая часть):

Традиционно вы можете скачать видео в лучшем качестве с Народного.Диска (*.zip с файлом *.wmv 58.3 МБайт).

Исходный код демонстрируемого HTML + JavaScript файла можно скачать с Народного.Диска (*.zip, 1.2 Кбайта).

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

JavaScript видеоурок #6

Андрей Морковин — Sat, 19 Dec 2009 00:49:34 +0000

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

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

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

После просмотра видео конструкция типа /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/ перестанет быть для вас загадочным набором символов, я очень на это надеюсь

Ну что же, приступаем?

Видеоурок на сервисе RuTube:

Видеоурок на сервисе YouTube (первая часть):

Видеоурок на сервисе YouTube (вторая часть):

Видеоурок на сервисе YouTube (третья часть):

Как и всегда видео в лучшем качестве можно скачать с Deposit Files (в этом случае автор заработает несколько центов) или с Народного.Диска (тогда автор ничего не заработает) *.wmv, 50.1 МБайт.

Исходники, которые демонстрировались во время видеоурока, можно скачать с Народного.Диска (*.zip, 0,9 КБайт).

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

JavaScript видеоурок #5

Андрей Морковин — Mon, 14 Dec 2009 00:43:57 +0000

Приветствую вас, уважаемый читатель, в новом видеуроке по JavaScript. Продолжаем погружение в программирование.

Сегодня я предлагаю вашему вниманию видеурок, в котором речь пойдет еще об одном принципиально-важном моменте JavaScript – DOM-модели.

DOM-модель в JavaScript представляет из себя сложную для понимания парадигму (с первой особенностью – ООП мы разбирались в предыдущем видеуроке).

Я постарался максимально подробно и просто объяснить принципы DOM. Удалось мне это или нет, решать вам

Виде на сервисе RuTube:

Первая часть видео на сервисе YouTube:

Вторая часть видео на сервисе YouTube:

Третья часть видео на сервисе YouTube:

Как и всегда, скачать видео в лучшем качестве вы можете с Deposit Files (*.wmv, 48.8 МБайт) (кстати, скачивая с Депозита вы даете возможность автору блога заработать хоть какие-то гроши) и с Народного.Диска (в этом случае автор ничего не заработает).

Исходники, демонстрируемые в видеоуроке, можно скачать с Deposit Files (*.zip, 2.3 КБайта)

Продолжается бессрочная акция по обмену постовыми с тематически-близкими ресурсами. Если вы хотите обменяться постовыми, то свяжитесь со мной любым удобным способом, представленным в разделе “Контакты”.

Сегодня в обмене постовыми участвует только один блог:

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

До встречи в следующих видеоуроках.

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