В наши дни javascript занимает лидирующие позиции, если речь идет о клиентской части программных продуктов и используется профессиональными программистами и веб-разработчиками по всему миру. javascript – это мощный язык программирования с множеством расширенных функциональных возможностей и инфраструктурами вроде jQuery, YUI, SproutCore и Cappuccino. Но у него есть определенные недостатки, например, javascript в разных браузерах работает по-разному и может ограничивать доступ к веб-сайту и его удобство для пользователя. Но эти факторы не должны ограничивать возможности этого чудесного языка.
Для многих программистов работа с javascript может показаться немного сложной, но у нас есть множество инструментов для разработчиков javascript, которые не только просты в использовании, но и показывают отличные результаты в считанные минуты. Имея знания в javascript, вы можете выполнять любые задачи – написание документации, редактирование, тестирование, отладку и др.
Инструменты по работе с документацией
jGrouseDoc – это инструмент, позволяющий генерировать документацию API из комментариев в исходном коде (программы) и документировать, таким образом, все необходимые концепции, функции, переменные, классы, интерфейсы, пространства имен и др., что производит в результате отличный настраиваемый продукт.
JSDoc Toolkit – это приложение, написанное с помощью javascript для автоматической генерации форматов шаблонов и многоязычной HTML-документации из комментируемого исходного кода javascript.
Инструменты сжатия
JSCompress – это он-лайн компрессор javascript, который сжимает файлы javascript, используя алгоритмы сжатия вроде JSMin и Packer, а сжатые файлы javascript просто идеальны для рабочей среды, так как их размер уменьшается на 30%–90%.
YUI Compressor – это уменьшитель javascript, созданный для того, чтобы получить более высокую степень сжатия, чем могут дать другие инструменты. Начиная с версии 2.0 YUI Compressor сжимает файлы CSS, используя порт на базе обычного выражения Isaac Schluter.
javascript Compressor сжимает и оптимизирует ваши файлы javascript. Из-за этого они быстрее загружаются и уменьшают, таким образом, использование пропускного канала. Благодаря этому, названия функций и глобальные переменные остаются нетронутыми.
Scriptalizer – это онлайновый инструмент для уменьшения ваших Java и CSS скриптов, который позволяет вам сэкономить место на жестком диске благодаря уменьшению размера кода. Он также удаляет лишние пробелы, символы табуляции и пустые строки, символы новых строк и комментарии, а также блокирует ограничители.
Инструменты форматирования
JSbeautifier – это онлайновый инструмент, который переформатирует и меняет отступы букмарклетов (от слов bookmark и applet), «неопрятные» фрагменты кода javascript и распаковывает скрипты, а также «распутывает» сложные фрагменты скриптов. Просто вставьте свой код и нажмите кнопку «Украсить».
Редакторы и инструментарий для IDE
Aptana Studio – это рабочая среда веб-разработки от ведущей компании в своей области, которая объединяет в себе мощные программные продукты для работы с HTML, CSS и javascript. Aptana RadRails – это полностью завершенная среда разработки для построения профессиональных приложений с богатым расширением кода на Ruby & Rails, javascript, CSS и HTML.
Spket IDE – это мощный набор инструментов для разработок в javascript и XML, а также для javascript, XUL/XBL и Yahoo Widget. Предоставляет такие функции, как расширение кода, выделение синтаксиса и план контента.
Komodo Edit – это бесплатный многоязычный редактор с открытым кодом для более легкого написания качественного кода. Он поддерживает PHP, Python, Ruby, Perl и Tcl, а также javascript, CSS, HTML и такие языки шаблонов, как RHTML, Template-Toolkit, HTML-Smarty и Django.
Инструменты для отладки
Firebug – наиболее мощный инструмент для веб-разработок, который используется для проверки HTML и модификации стиля и макета в режиме реального времени, точного анализа использования сети и производительности. Наладчик javascript можно использовать с любым браузером.
Blackbird – это проект с открытым программным кодом, который предлагает простой способ протоколирования сообщений на javascript и привлекательную консоль для их просмотра и фильтрации, таким образом, минимизируя или полностью устраняя использование функции alert().
Faux Console – это javascript, который можно вставлять в документ, чтобы получить базовую консоль наладки в IE, и вы можете использовать файлы YUI или файл console.log () для протоколирования информации между браузерами.
JS Bin – это веб-приложение, которое помогает javascript и фрагментам CSS-кода тестироваться в определенном контексте и совместно налаживать код. Позволяет редактировать и тестировать javascript и HTML.
JSON – это формат данных, который в наши дни завоевывает популярность и широко используется во многих Web 2.0 сайтах с AJAX. Многие сайты, которые предлагают API, возвращают данные в формате JSON. Зачастую в предоставленных JSON данных пробелы сжимаются для того, чтобы уменьшить объем передаваемых данных. Этот сайт предоставляет вам быстрый и простой способ форматирования JSON таким образом, чтобы вы могли его прочитать.
Клиент Eclipse Marketplace (MPC) – это богатый клиентский интерфейс для просмотра и установки решений, основанных на Eclipse. MPC предоставляет сильную интеграцию инсталляции между рабочей средой Eclipse и Eclipse Marketplace, плюс распечатки решений третьей стороны.
Venkman – это наладчик javascript для Mozilla, основанный на таких браузерах, как Firefox 3.x, Netscape 7.x, Seamonkey 1.x и Mozilla Seamonkey 2.x. Наладчик также доступен как расширительный пакет в формате XPI.
JS.Class – это набор инструментов для создания объектно-ориентированных программ на javascript, основанных на Ruby. Также предлагает мощный пакетный менеджер, целью которого является помощь в загрузке ваших приложений и поддержка всех основных веб-браузеров, включая Rhino, Node.Js и Narhwal.
Инструменты для тестирования
Sugartest облегчает написание тестов для javascript, он работает поверх JsUnitTest, как DSL, у которой есть установка, удаление, вложенный контент, нет никаких зависимостей, и работа производится посредством простого и в то же время выразительного синтаксиса.
jSLint берет исходник javascript и сканирует или отмечает проблемы. Если он находит проблему, то он отображает сообщение, описывающее ее, а также указывает месторасположение, где синтаксической проблемы быть не должно, а также проверяет подбор стиля и структурные программы.
Созданный Джоном Резигом (John Resig) и Яном Одварко (Jan Odvarko), FireUnit представляет простой javascript API для проведения простого теста по его протоколированию и просмотру в новой вкладке Firebug.
JsUnit – это модуль, который тестирует структуру клиентской стороны javascript, которая выступает портом JUnit, а также включает в себя платформу для автоматизации проведения тестирования в различных браузерах и компьютерах под управлением различных ОС.
YUI Test – это среда для тестирования для решений javascript на базе браузеров, в которой вы можете легко добавлять в решения для javascript тестирование модулей. YUI Test также предоставляет функцию усовершенствованного определения ошибок для тех методов, которые перемещают ошибки, асинхронных тестов для проверки событий, коммуникации на основе Ajax и многое другое.
JSpec – это очень маленькая, но очень мощная среда для тестирования, которая использует собственную грамматику и препроцессор, и включает в себя много буквенных сокращений, читабельный синтаксис, поддержку Async и Rhino, вложенное описание, общий образ действия, поддержку аксессуаров, имитацию Ajax и многое другое.
JSLitmus – это легкий инструмент для создания узкоспециальных контрольных задач в javascript, который работает со всеми наиболее распространенными браузерами. У него открытый исходник, лицензия MIT-style, адаптивные циклы тестов и его также можно разместить на существующих веб-страницах или приложениях.
Выдающийся javascript Checker используется для отслеживания на веб-странице элементов a;;, а когда он находит элемент HTML с встроенными событиями, он выделяет этот участок красной рамкой, а ссылки javascript: – малиновой.
Другие полезные инструменты
PrettyPink – это переменный javascript дампер (dumper), встроенный в браузер, который дает вам возможность печатать объекты любого типа для просмотра во время сеансов наладки в формате таблицы. Он не требует никаких таблиц стилей или изображений, он может работать с бесконечным количеством вложенных объектов, защищает от круговых/повторяющихся ссылок и полностью совместима с JSLint.
Firediff – это расширение для Firebug, предназначенное для отслеживания изменений в DOM и CSS, то есть он осуществляет контроль изменений, который предоставляет возможность понять функциональность приложения, а также ведет запись произведенных изменений и подстраивает отображение страницы.
JS charts – это генератор графиков javascript, который позволяет вам создавать графики с помощью различных шаблонов, например, гистограммы и простые линейные графики.
PageSpeed – это дополнение Firefox/Firebug с открытым исходником, которое используется для оценки производительности веб-страниц и получения рекомендаций по их улучшению. Оно также ускоряет работу вашего сайта, уменьшает использование пропускной способности линии и стоимости хостинга.
В Rockstar Web Profiler или Razor входит три компонента, а именно, RockStar Profiler Server для анализа сетевых подключений и производительности сервера, RockStar Profiler Probe для анализа производительности клиентской стороны и RockStar Profiler Console, который представляет собой информацию для проведения анализа собранных данных по производительности.
Мобильная (под Safari) структура javascript в уменьшенном виде весит менее 8 Кб, обращается к лаборатории Sizzle в iPhone, поддерживает переходы CSS и анимацию, является объектно-ориентированным и легко расширяется.
php.js – проект с открытым исходником для того, чтобы перенести высокоуровневые PHP-функции в низкоуровневые платформы javascript, например, веб-браузеры, расширения для браузеров, движки AIR и SSJS, например, V8, Rhino и SpiderMonkey.
JSSpec – это javascript «BehaviorDrivenDevelopment»-структура, которая показывает разницу между ожидаемыми и реальными значениями, четко показывает линию повреждений, поддерживает условное выполнение поддержки для IE 6 или IE 7, FireFox 2 и Safari 3.
MochaUI – это библиотека пользовательских интерфейсов в виде веб-приложения, построенного на базе Mootools javascript, использованной в веб-приложениях, веб-элементах на рабочем столе, веб-сайтах, виджетах и отдельных диалоговых окнах.
Highlight.js выделяет синтаксис в примере кода в блогах, на форумах и, в общем, на любой веб-странице. Автоматически находит блоки кода, определяет язык и выделяет его.
Библиотеки утилит и компонентов для javascript
Uploadify – это плагин для jQuery, который позволяет легко интегрировать несколько загрузок на ваш сайт и который требует Flash или любой другой внутренний язык разработки. Основная реализация довольно проста и предлагает огромные возможности для модификации для опытных пользователей.
Burst – это пример характерной анимации с использованием технологий javascript и HTML5 и без какого-либо использования технологии Flash. Файл SVG создается с помощью Inkscape. Burst синтаксически схож с jQuery.
JSTestDriver строит тестовую машину на javascript, которую можно легко интегрировать в непрерывные системы билдов; она позволяет быстро запускать тесты на различных браузерах, чтобы облегчить разработку TDD-стилей и предоставляет быстрое выполнение теста, полностью контролированный DOM, управление с командной строки и так далее.
Booklaylet – это код упаковщика-букмарклет, запрограммированный загружать любое содержимое другой страницы внутрь открытого окна с использованием слоев div и iframe. Работает с браузерами Firefox, Safari и Opera, но не работает с Internet Explorer.
javascriptools – это набор компонентов, функций и классов javascript, в которых функции выполняют основные операции с объектами, строками, массивами данных, полями форм и так далее. У набора имеется динамическая таблица, которая поддерживает страничную подкачку файлов, их сортировку и редактирование и является полностью настраиваемой с помощью CSS.
liteAJAX является доказательством концепции легких классов AJAX.
JSPDF – это библиотека для генерации PDF-документации с использованием javascript и открытыми исподниками. Она может использоваться в расширениях Firefox, серверной стороны javascript с URL-данных в некоторых браузерах.
Narwhal – это кросс-платформенная, мультиинтерпретационные среда разработки javascript, которая строит приложения javascript и структуры, такие как Nitro. Включает в себя менеджер пакета, систему модулей и стандартную библиотеку для нескольких интерпретаторов javascript.
Полезные библиотеки javascript и другие инструменты
Tablecloth – это легкий и ненавязчивый способ добавить стиль и образ действия в своих таблицах html-элементов. Имеет функцию назначения четных/нечетных имен классов альтернативным строкам, добавляет имена классов для положения мыши над и за пределами конкретной области.
Moousture – это библиотека перемещений мыши, написанная только на javascript и обладающая способностями и гибкостью, чтобы сворачиваться для вас. Библиотека написана на Mootools, которая следует объектно-ориентированным стандартам. Её цель – начать работу над будущей структурой движений мыши в любом браузере, включая современные мобильные устройства.
jQuery Tools – это коллекция наиболее важных компонентов пользовательского интерфейса для современных сайтов, где все инструменты можно использовать вместе, расширяя, конфигурируя и утилизированные. Она используется крупными сайтами по всему миру.
Tipimage используется для создания и управления tooltips над изображениями, создает квадратные части изображений и прилагает к каждой описание, которое показывается в виде облака подсказки. Также поддерживает использование специальной функции обратного вызова.
qGallery – это маленькая программа в виде командной строки, которая обрабатывает изображения в формате jpeg и специально переименовывает файлы в некоторых структурах папок, чтобы сформировать статическую галерею HTML для публикаций, автоматически создает индексы изображений для предварительного просмотра, комментариев для каждого изображения, а дополнительные изображения и HTML можно добавить позже.
LivePipe UI – это набор высококачественных виджетов и элементов управления для приложений WEB 2.0, использующих Prototype javascript Framework, где каждый элемент управления хорошо испытан, полностью открыт, задокументирован и гибко заменяется более упрощенным вариантом в браузерах без включенного javascript.
javascript Virtual keyboard – это система многократного использования для добавления интерфейса графической клавиатуры в тестовые поля, поля для ввода пароля и полей для текста. Она также предоставляет легкий доступ к специальным символам.
Unobtrusive Table Actions Script может расчертить таблицу полосками, поддерживает перемещение курсора над горизонтальной и вертикальной полосой меню и эффекты для перемещения курсора над отдельными ячейками может работать с rowSpans и ColSpans, а также быстро работает в Internet Explorer.
Glassbox – легкий пользовательский интерфейс javascript, который использует Prototype и Script.aculo.us для достижения некоторых эффектов. GlassBox позволяет вам легко построить яркие светящиеся рамки, цветные схемы и эффекты «под» Flash.
Glimmer – это интерактивный инструмент для дизайна или приложение Windows, которое может легко создать анимацию и ощущение взаимодействия, а также другие эффекты. Он также генерирует jQuery, XHTML и CSS.
Bookmarklets используется для выполнения полезных функций, Bookmarklet позволяет вам создать URL из javascript и занести его в Избранное. Введите свой код javascript, а Bookmarklets сделает все остальное.
javascript Regex Generator генерирует правильные относительно базовых выражения, в которые вы должны только ввести данные для тестирования и отметить части, которые Regex должен сравнить. Бета-версия инструмента позволяет вам добавить семь групп.
Compatibility Master Table содержит ссылки на отдельные таблицы. В нем также есть ключи по совместимости таблиц, определяющих полностью он поддерживается, с трудом или не поддерживается вообще.
Java Script It! — приятная программа по созданию неплохих эффектов на JavaScript. При помощи этой программы вы явно облегчите себе жизнь при создании сайтов. В основном, она предназначена для людей, которым лень самим писать скрипты и вообще что-либо на JavaScript. Конечно, при своем создании она ориентировалась на начинающих, хотя для работы с ней вам все-таки потребуются минимальные знания HTML.
Что такое JavaScript?
JavaScript — объектно-ориентированный скриптовый язык программирования, предназначенный для создания активных HTML-страниц. Под «активными» здесь имеются в виду HTML-страницы, на которых размещены всевозможные динамически изменяющиеся веб-элементы, например:
- Меню, раскрывающиеся при наведении курсора мыши.
- Небольшие анимированные изображения, следующие за курсором или, к примеру, передвигающиеся в определенную часть страницы при клике по какому-либо элементу.
- Информационные блоки (например, с кратким описанием товаров) с автоматизированной прокруткой по времени и многое другое.
Т.е. JavaScript позволяет создавать такие веб-элементы, которые каким-либо образом взаимодействуют с пользователем, реагируя на перемещение курсора мыши, нажатия клавиш, прокрутку страницы в браузере и т.д. В этот же список следует добавить и полностью автоматизированные веб-элементы, выполняющие какие-либо действия без участия пользователя.
Как и в любом другом языке программирования, в JavaScript присутствует такие понятия как переменные, массивы, логико-арифметические вычисления и т.д. и т.п. Т.е. при помощи JavaScript можно производить сложные расчеты, управлять большими массивами данных и много чего еще, что остается вне поля зрения посетителя сайта.
Еще больше возможностей для программиста открывает то, что JavaScript — это объектно-ориентированный язык программирования, но этот вопрос здесь рассматриваться не будет.
Изучение JavaScript через Java Script It!
Одна из главных причин столь высокой популярности JavaScript среди начинающих веб-программистов — это обладание данным языком программирования, т.н."низким порогом вхождения". Т.е. для его изучения достаточны базовые знания HTML и языка разметки CSS.
Программа Java Script It! предоставляет инструменты для быстрой вставки в HTML-страницу кодов разнообразных готовых веб-элементов, написанных на JavaScript. Все доступные элементы разбиты на 3 категории:
- Апплеты — элементы, выполняющие какую-либо самостоятельную функцию: баннер, анимированный текст, передвигающееся изображение и т.д.
- Скрипты — в основном здесь представлены веб-элементы, управляемые пользователем: формы для ввода текста по маске (даты, пароли и т.п.), блоки, позволяющие создавать слайд-шоу с автоматической прокруткой изображений, разнообразные системные кнопки (например, для открытия диалоговых окон для загрузки файлов на сайт).
- И DHTML — разнообразные интерактивные элементы, состоящие из HTML-разметки, каскадных таблиц CSS и скриптов JavaScript (например, выпадающие меню или всплывающие окна/формы).
Любой из доступных элементов имеет собственные настройки. Для простоты и удобства их ввода/изменения предусмотрена специальная форма.
Вставка JavaScript-кода посредством программы Java Script It! Выглядит так:
- Пользователь создает на диске файл с расширением HTM или HTML. Можно использовать и готовый HTML-файл, заполненный каким-либо кодом.
- Далее выбирается один из доступных веб-элементов, после — заполняется форма с его настройками (например, габаритные размеры, названия пунктов меню и т.д.).
- Сгенерированный JavaScript-код вставляется в HTML-файл в нужную пользователю позицию (делается это в форме настроек веб-элемента).
- Готово.
В Java Script It! встроен подключаемый модуль стандартного Windows-браузера Internet Explorer, т.е. результат работы отображается сразу после окончания настройки веб-элемента. Посмотреть результат можно и в любой другом браузере, для чего достаточно открыть в нем созданный/отредактированный HTML-файл.
Если открыть в браузере исходный код HTML-страницы, можно посмотреть и изучить сам JavaScript-код. Здесь же можно и отредактировать его, изменяя различные значения вручную. Таким образом, пользователь сможет получить базовые навыки JavaScript-программирования, а именно — как происходит вставка кода в HTML-документ, какие команды используются для настройки тех или иных свойств веб-элемента и т.д.
Конечно, Java Script It! можно использовать и для заполнения веб-страниц различными активными элементами, но ввиду устаревания программы она больше подходит для ознакомления с азами программирования в JavaScript.
Редактор кода - подручный инструмент каждого программиста. И каждый подбирает под себя: кто-то ценит функциональность, кто-то мобильность, для кого-то главное - дизайн и удобство. Кому-то даже нравится писать код в Notepad, но это всё равно, что пытаться построить дом при помощи молотка.
JavaScript - мощный и капризный язык. С одной стороны, множество фреймворков и библиотек, с другой - не самый простой синтаксис и опасности, связанные с «динамикой». Поэтому для работы с ним важно подобрать редактор. Правильный выбор обеспечит вам чистоту кода, высокую скорость разработки, минимум ошибок и удовольствие от работы. На выбор одного из сотен существующих редакторов потратите уйму времени, поэтому мы проделали часть работы за вас. Вот 5 лучших.
WebStorm
WebStorm от JetBrains прекрасен в обоих своих проявлениях: как IDE он поддерживает работу с системами контроля версий, позволяет удалённо развернуть код, как редактор - стандартные удобства, вроде подсветки синтаксиса, автодополнений, навигации.
Преимущества:
- LiveEdit - просмотр внесённых в код изменений без необходимости его сохранять;
- взаимодействие с фреймворками, например React, Angular, Meteor;
- больше сотни встроенных тестов для обнаружения ошибок;
- интегрирование с Mocha, Protractor, Jest, Karma для юнит-тестов;
- полномасштабный дебаггер для отладки кода на серверной и клиентской сторонах;
- навигация для одновременной работы с несколькими файлами;
- автодополнение кода, подсветка синтаксиса.
Недостатки:
- стоит 129 $ за первый год работы;
- для начинающих кодеров функционал избыточен.
Visual Studio Code
Ответвление IDE Visual Studio, направленное на работу с кодом. Он прост для освоения, удобен в использовании, и при этом функционален.
Преимущества:
- контекстное автодополнение, как синтаксиса, так и используемых переменных, модулей, функций и т. д.;
- дебаггер с точками останова, стеком вызовов, интерактивной консолью;
- поддержка сниппетов и шаблонов;
- интеграция с Git;
- удобный и простой интерфейс;
- бесплатный редактор.
Недостатки:
- мало плагинов.
Sublime Text
Удобный и проверенный временем кроссплатформенный редактор, с настраиваемым интерфейсом и возможностью совершать тривиальные действия при помощи горячих клавиш.
Преимущества:
- горячие клавиши;
- навигация по коду в виде мини-карты;
- возможность изменить визуальную тему;
- поддержка сниппетов;
- подсветка, автодополнение переменных и синтаксиса;
- множественная правка благодаря использованию указателей;
- поддержка систем сборки;
- проверка синтаксиса прямо во время ввода;
- автосохранение.
Недостатки:
- полная версия стоит 70 $;
- отсутствие анализатора кода для расстановки ссылок.
Atom Editor
Появившийся в 2015 году редактор кода от Git, копирующий дизайн Sublime Text и обёрнутый в Chromium.
Преимущества:
- более 50 открытых модулей;
- удобный и приятный интерфейс;
- бесплатный;
- автодополнение и подсветка кода;
- менеджер пакетов, которых уже более 3,5 тысяч;
- гибкие настройки редактора, подключаемых пакетов, тем интерфейса;
- редактирование и навигация при помощи горячих клавиш.
Недостатки:
- невысокая производительность;
- пустая комплектация «из коробки».
Brackets
В 2014 году Brackets отпугнул программистов багами и недоработками, но теперь постепенно возвращает доверие новым качественным функционалом.
Преимущества:
- богатая комплектация «из коробки»;
- режим Live Preview - предварительный просмотр правок в браузере в режиме реального времени;
- менеджер пакетов;
- показ в коде используемых изображений и цветов;
- автодополнение и подсветка синтаксиса;
- анализатор кода;
- бесплатный.
Недостатки:
- строгая ориентация на веб и HTML+CSS+JavaScript;
- медленное развитие;
- низкое быстродействие из-за функций предпросмотра.
