Создание сайта. Часть 6: JavaScript

Очередная статья серии, посвященной сайтострою. Полное содержание серии - в конце статьи.

Теперь начинается реальный кодинг. Можно конечно отказаться от использования JavaScript на своих сайтах, тем более что браузеры по-разному понимают js-код (тут бардак не меньше, чем в дизайне). Но возможности, которые он дает, заставляют хотя бы попробовать с ним разобраться.

Важный момент, который упускают новички web-разработки: код JavaScript выполняется на машине клиента. Из этого в частности следует, что через JavaScript крайне проблематично взломать сайт. Внесенные на клиентской машине изменения останутся только на ней, что бы там хакер в коде не своял. Другой вопрос, если он раскопает какое-то скрытое поле или засунет в запрос к серверу что-то свое. Но это тоже не проблема, если серверные скрипты правильно написаны. Есть еще такая атака, как XSS, но опять же правильный подход к безопасности кода сводит ее на "нет".

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

Еще момент, касательно безопасности клиентской машины: через js-код нельзя получить доступ к винту или буферу обмена. Этот запрет установлен в браузерах.

Код на js всегда открыт, так уж он устроен. Поэтому можно использовать чужой код, выдранный с сайта. Однако на рабочих сайтах он обычно сжатый (удалены пробелы, переносы строк, комментарии) или вообще обфусцированный, и разбираться в нем сложно.

Можно поискать готовые разработки для внедрения в свои проекты. Например, есть отдельные модули комментариев, полноразмерных картинок, выпадающего меню, подсветки кода и т.д. А можно писать свои скрипты с нуля, что значительно круче 8-) В этом случае вам обязательна к прочтению книга Дэвида Флэнагана "JavaScript Подробное руководство" (6-е изд., 2012). Там тысяча страниц. Я надеюсь, к этому моменту вы уже поняли суть изучения материалов: все читать необязательно.

В изучении JavaScript очень помогает копание в чужом коде. Наиболее удобный инструмент - Firebug (расширение браузера Firefox). Я так и учился, много позже нашел указанную книгу. Теперь использую ее как справочник, а так же сайт javascript.ru

Касательно JavaScript нужно упомянуть такие "слова", как jQuery, prototype и Ajax. Все это – надстройки над чистым JavaScript. Говоря иначе, это библиотеки функций и интерфейсов, упрощающих программирование на JavaScript. Они сами написаны на том же js и содержат в себе кроссбраузерный код, укорачивают некоторые конструкции языка и еще много всяких плюшек. Ни каких хитростей, все это можно описать самостоятельно на чистом JavaScript. Что выбрать, решайте сами. Я предпочитаю javascript без надстроек.

Пример: AJAX —набор техник разработки веб-интерфейсов, позволяющих делать динамические запросы к серверу без видимой перезагрузки веб-страницы, т.е. проводить ассинхронные запросы на JavaScript. Механизм основан на объекте XMLHttpRequest. Разобравшись со спецификацией этого объекта, Я сделал свой библиотечный модуль на чистом JavaScript и теперь с сайта так же можно отправлять ассинхронные запросы. Посмотрите, как устроен блок с календарем справа.

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

JavaScript обладает большой свободой синтаксиса, а неявное преобразование типов – так это вообще подарок для кодера. Однако такая свобода может привести к глюкам, как было у меня. Вывод: пишите код с максимальной строгостью синтаксиса. Так же не забывайте о соблюдении регистра букв. Например, в js существует свойство innerHTML, но нет innerhtml. Имен переменных регистр тоже касается. В JavaScript необязательно заканчивать строки точкой с запятой, но все равно их пишите, иначе после обфускации можете получить нерабочий скрипт.

Обязательно проверяйте готовый js-код в разных браузерах, особенно если он самописный. Есть большая вероятность, что где-то работать не будет. Поддержание кроссбраузерности - это главная проблема в JavaScript. Обычно рассхождения возникают между IE и всеми другими бродилками, но могут быть и более экзотичные исключения. Как сделать код кроссбраузерным, зависит от ситуации. Указанные выше ресурсы вам в помощь :)

[UPD] Нашел полезную статью, рекомендую прочитать, "7 пунктов JavaScript, которые облегчат жизнь новичкам".

Когда доберетесь до регулярных выражений, скачайте себе очень полезную программку - The regex coach. Адрес сайта почему-то не совпадает с тем, что у меня в программе, поэтому лучше через поисковик найдите, где скачать. Текущая версия 0.9.2. Она пригодится вам как не только в JavaScript, но и в PHP.

Кроме JavaScript на стороне клиента может работать, как минимум, Java и Flash. Это совершенно разные направления, не имеющие почти ничего общего с JavaScript. Чтобы работал код указанных языков, у пользователя должны быть установлены соответствующие компоненты поддержки, причем после их установки юзер будет озадачен периодическим обновлением этих компонентов. А JavaScript поддерживается любым современным браузером без дополнительного ПО. Это весомый плюс в сторону использования JS. Но с другой стороны, заморочки со стандартами и проблема кроссбраузера – такой же весомый минус. Как обстоят дела с кроссбраузерностью в Java или Flash, не могу сказать, еще не добрался до их детального изучения.