Представляет собой модульный упаковщик, который создаёт граф зависимостей со всеми модулями для приложения на JavaScript. Webpack упаковывает модули в один или несколько маленьких пакетов для загрузки браузером. Кроме того, Webpack может использоваться в качестве средства запуска задач, так как он анализирует зависимости между модулями и образовывает ресурсы (ассеты). Подробнее с использованием Webpack в своих проектах вы можете ознакомиться в нашей .
- Swagger - это набор правил и инструментов для описания API. Инструмент представляет собой языконезависимую утилиту. Это значит, что Swagger создаёт чёткую документацию, которая читается одинаково хорошо как человеком, так и машиной, позволяя автоматизировать процессы зависящие от API.
- JSDoc - набор инструментов, автоматически создающий многостраничную текстовую документацию (HTML, JSON, XML и т. д.) из комментариев из исходного кода на JavaScript. Это приложение может пригодиться для управления крупномасштабными проектами.
- jGrouseDoc (jGD) - это гибкий инструмент с открытым исходным кодом, который позволяет разработчикам генерировать API из комментариев из исходного кода на JavaScript. jGD документирует не только переменные и функции, но и пространства имён, интерфейсы, пакеты и некоторые другие элементы.
- YUIDoc - приложение, написанное на NodeJS. Оно использует синтаксис, подобный тому, который применяется в Javadoc и Doxygen. Также инструмент может похвастаться поддержкой предварительного просмотра в реальном времени, расширенной поддержкой языка и продвинутой разметку.
- Docco - бесплатный инструмент для документации, написанный на «литературном» CoffeeScript. Он создаёт HTML-документ для отображения ваших комментариев, чередующихся с кодом. Следует отметить, что инструмент поддерживает не только JavaScript, но и другие языки. Например, Python, Ruby, Clojure и прочие.
Инструменты тестирования для JavaScript созданы для обнаружения ошибок на этапе разработки, чтобы избежать в будущем ошибок у пользователей. С ростом сложности пользовательских приложений автоматические тесты не только повышают производительность приложения, но и помогают компаниям сохранить бюджет.
- Jasmine - BDD-фреймворк (Behavior-driven Development - разработка на основе поведений) служит для тестирования JS-кода. У него нет внешних зависимостей, и он не требует запуска DOM. Jasmine имеет чистый и понятный синтаксис, что позволяет ускорять и упрощать тестирование. Также фреймворк может использоваться для тестирования кода Python и Ruby.
- Mocha - это функциональная тестовая среда, работающая на Node.js в браузере. Она проводит тесты последовательно для обеспечения гибкой и точной отчётности, делая асинхронные тесты весёлыми и лёгкими. Mocha часто используется вместе с Chai для проверки результатов теста.
- PhantomJS часто используется для интерфейсных тестов и юнит-тестов. Учитывая то, что это что-то вроде «безголового» WebKit, скрипты выполняются намного быстрее. Также он включает в себя встроенную поддержку различных веб-стандартов. Например, JSON, Canvas, обработку DOM, SVG и селекторы CSS.
- Protractor - это сквозной тестовый фреймворк, написанный на Node.js для тестирования приложений на AngularJS и Angular. Он был создан на основе WebDriverJS и проверяет приложения подобно конечному пользователю, используя специальные драйвера и встроенные события.
Отладка кода - довольно трудоёмкий и поглощающий время процесс для JavaScript-разработчиков. Инструменты для отладки кода будут особенно полезны при работе с тысячами строк кода. Многие из инструментов отладки обеспечивают довольно точные результаты.
- JavaScript Debugger - инструмент от сообщества разработчиков Mozilla (MDN), который может быть использован как автономное веб-приложение для отладки кода в разных браузерах. Firefox предлагает локальные и удалённые функциональные возможности, а также возможность отладки кода на Android-устройстве с помощью Firefox для Android.
- Chrome Dev Tools - набор инструментов, включающий в себя несколько утилит для отладки кода JavaScript, редактирования CSS и тестирования производительности приложений.
- ng-inspector - кроссбраузерное расширение, которое призвано помочь разработчикам с написанием, пониманием и отладкой приложений на AngularJS. Утилита поставляется с обновлениями в реальном времени, подсветкой DOM, прямым доступом к областям, моделям и прочим элементам приложения.
- Augury - расширение для браузера Google Chrome и отладки приложений на Angular 2. Оно позволяет разработчикам приложений на Angular 2 напрямую анализировать структуру приложения и рабочие характеристики, а также позволяет обнаружить изменения.
- Snyk - коммерческий инструмент для обнаружения, исправления и предотвращения известных уязвимостей в приложениях на JavaScript, Java и Ruby. Служба имеет собственную базу данных уязвимостей и берёт данные из NSP и NIST NVD. Патчи и обновления, которые предлагает компания, позволяют разработчикам предупредить риски, связанные с безопасностью.
- Node Security Project предлагает полезные инструменты для сканирования зависимостей и обнаружения уязвимостей. NSP использует свою собственную базу данных, построенную на сканировании модулей npm, а также данные из общих баз данных, таких как NIST NVD (National Vulnerability Database). Кроме того, NSP обеспечивает интеграцию с программным обеспечением GitHub Pull Request и CI. Также имеется проверка в реальном времени, предупреждения и рекомендации по устранению уязвимостей в приложениях на Node.js.
- RetireJS - это средство проверки зависимостей с открытым исходным кодом. Включает в себя различные компоненты, такие как сканер командной строки, плагин Grunt, расширения Firefox и Chrome, плагины Burp и OWASP ZAP. Retirejs собирает информацию об уязвимостях из NIST NVD и других источников, таких как системы отслеживания ошибок, блоги и списки рассылки.
- Gemnasium - это коммерческий инструмент с бесплатной пробной версией. Он поддерживает различные технологии и пакеты, включая Ruby, PHP, Bower (JavaScript), Python и npm (JavaScript). Инструмент безопасности Gemnasium поставляется с полезными функциями, такими как автоматическое обновление, оповещения в реальном времени, уведомления о безопасности и интеграция с сервисом Slack.
- OSSIndex поддерживает различные экосистемы (Java, JavaScript и.NET / C #) и множество платформ, таких как NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal и MSI. Он собирает информацию об уязвимостях из Национальной базы данных уязвимостей (NVD) и отзывов. Также он обрабатывает информацию от членов сообщества.
Для проверки качества кода обычно обращаются к функциональному тестированию и юнит-тестированию. Однако существует еще один подход, который позволяет разработчикам проверять качество кода и его соответствие стандартам кодирования, а именно статический анализ кода.
В настоящее время в современном программном обеспечении объединяются инструменты анализа статического кода во время разработки, чтобы исключить попадание некачественного кода в продакшен.
- JSLint - это аналитический веб-инструмент для проверки качества кода JavaScript. Как только он обнаруживает проблему в источнике, он возвращает сообщение с описанием проблемы и приблизительным местоположением в коде. JSLint способен анализировать некоторые нормы стиля и раскрывать синтаксические ошибки и структурные проблемы.
- JSHint - гибкий инструмент, развивающийся сообществом, для обнаружения ошибок и потенциальных проблем в вашем JS-коде, кроме того, JSHint - форк от JSLint. Основная цель этого инструмента статического анализа кода - помощь разработчикам JavaScript, работающим над сложными программами. Он способен обнаруживать ошибки синтаксиса, неявное преобразование типов данных или отсутствие переменной. Однако он не может определить скорость и правильность работы вашего приложения, как и не сможет определить проблемы с памятью в вашем приложении. JSHint - форк от JSLint.
- ESLint – это линтер с открытым исходным кодом для веб-приложений JSX и JavaScript. Он помогает обнаруживать сомнительные шаблоны или находить код, который не соответствует конкретным стилям. Это позволяет разработчикам обнаруживать ошибки в JS-коде без его выполнения, тем самым экономя время. Будучи написанным на Node.js, инструмент предлагает оперативную среду выполнения и плавную установку через npm.
- Flow - статический контролёр кода для JavaScript, разработанный компанией Facebook. Он использует аннотации статического типа для проверки кода на предмет ошибок. Типы - параметры, установленные разработчиками, а Flow проверяет ваше программное обеспечение на соответствие требованиям.
- В последние годы Git стала широко используемой системой контроля версий как для небольших, так и для крупных проектов. Эта бесплатная утилита обеспечивает отличную скорость работы и эффективность. Её популярность объясняется распределённой системой и различными типами элементов управления, а также промежуточной областью, где версии могут быть просмотрены и отформатированы непосредственно перед завершением фиксации.
- Инструмент Subversion или SVN приобрёл огромную популярность, и он по-прежнему широко используется в проектах с открытым исходным кодом и такими платформами, как Python Apache или Ruby. Этот CVS поставляется со множеством функций, позволяющих управлять различными операциями (переименование, копирование, удаление и т. д.), слияниями, блокировкой файлов и многим другим.
Список лучших инструментов для разработки на JavaScript может продолжаться до бесконечности. В этой статье вы увидели лишь популярные и надёжные инструменты, которые служат основой для качественных продуктов.
Хинт для программистов: если зарегистрироваться на соревнования Huawei Honor Cup, бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании. .
Инструменты для создания сплывающих меню и других подобных элементов для своего сайта!
↓ Новое в категории "JavaScript, java ":
Бесплатная
Namo WebEditor 2006 Suite является профессиональным и очень мощным конструктором сайтов. Конструктор может работать в двух режимах одновременно: визуальном и ручном кодировании. Работа с конструктором не требует знаний HTML или же других языков программирования, так как программа сама генерирует код.
Бесплатная
HTML TreeView Generator 1045 является простым инструментом, который создаёт на web-странице древовидные раскрывающиеся HTML-списки. Причем при применении HTML TreeView Generator для их создания любому пользователю можно обойтись без наличия знаний в языках javascript, HTML или CSS. Также данное приложение может осуществлять импорт проектов среды Visual Folder Tree Builder.
Бесплатная
Greasemonkey 0.9.2 – это очень полезное дополнения для известного браузера Mozilla Firefox. При помощи дополнения Greasemonkey у вас будет возможность самостоятельно писать пользовательские страницезависимые Java-скрипты. Благодаря данному дополнению к браузеру Mozilla Firefox вы сможете довольно быстро и легко внести множество новых функций по изменению вида открываемой вами страницы в интернете.
Бесплатная
Apycom Java Menus and Buttons 5.00 является пакетом, который может создавать навигационные блоки для веб-сайтов. Уникальность программы Drop Down Menus and Buttons заключается в том, что она позволяет осуществлять свою работу не только профессионалам, но и начинающим веб-дизайнерам для создания, как простейших выпадающих меню, так и для величественных трехмерных панелей или кнопок с множеством функциональных возможностей, устанавливаемых самостоятельно.
Бесплатная
Antechinus javascript Editor 9.0 build 3 – это удобный и мощный редактор, который содержит все необходимые функции, которые помогут в написании или редактировании кода javascript. Программа Antechinus javascript Editor содержит порядка 30 примеров по добавлению javascript на ваши веб-странички.
Бесплатная
Anfy 2.1 является библиотекой, которая содержит 52 приложения основанных на технологии Java и предназначенных для создания навигационных меню и визуальных эффектов. Библиотека Anfy благодаря наличию в своём составе таких приложений, как Water, Tree Menu, Fireworks, Lake, Text Scroll, Fade banner или Anfy Cam даёт возможность придать новый вид вашей веб-странице с рабочим столом, графикой и экранной заставкой.
Бесплатная
Adobe Edge 1.0.0.38.9626 – это качественный продукт от компании Adobe, который предназначен для работы в качестве профессионального инструмента по добавлению на сайты интерактивных элементов при помощи стандартов HTML5, javascript и CSS3 и, не используя для этого технологию Flash.
Бесплатная
Сборник javascriptS 7.0 представляет собой этакий сборник, который содержит в себе больше чем 230 различных скриптов. «Сборник javascriptS» легко поможет вам оформить свой сайт таким образом, какое у вас будет желание. Этот набор DHTML и javascript имеет возможность осуществлять работу в Internet Explorer или же Netscape Navigator.
Бесплатная
Коллекция javascript 1.0 представляет собой увлекательную выборку скриптов выполненную на языке javascript. «Коллекция javascript» может использовать подключения в код HTML, который дополняет её способности. Благодаря возможностям приложения «Коллекция javascript» вы можете создавать клавиши с анимацией выполнять такие действия, как переадресация на другой документ и многое другое.
Бесплатная
MenuEditor1 1.0.3.122 инструмент, который практически самостоятельно создаёт полноценное меню на страницах интернета. Программа MenuEditor позволяет осуществлять создание меню с профессиональным качеством даже наиболее неискушённым пользователям, что довольно сильно отличает её от аналогичных приложений.
Редактор кода - подручный инструмент каждого программиста. И каждый подбирает под себя: кто-то ценит функциональность, кто-то мобильность, для кого-то главное - дизайн и удобство. Кому-то даже нравится писать код в Notepad, но это всё равно, что пытаться построить дом при помощи молотка.
JavaScript - мощный и капризный язык. С одной стороны, множество фреймворков и библиотек, с другой - не самый простой синтаксис и опасности, связанные с «динамикой». Поэтому для работы с ним важно подобрать редактор. Правильный выбор обеспечит вам чистоту кода, высокую скорость разработки, минимум ошибок и удовольствие от работы. На выбор одного из сотен существующих редакторов потратите уйму времени, поэтому мы проделали часть работы за вас. Вот 5 лучших.
WebStormWebStorm от JetBrains прекрасен в обоих своих проявлениях: как IDE он поддерживает работу с системами контроля версий, позволяет удалённо развернуть код, как редактор - стандартные удобства, вроде подсветки синтаксиса, автодополнений, навигации.
Преимущества:
- LiveEdit - просмотр внесённых в код изменений без необходимости его сохранять;
- взаимодействие с фреймворками, например React, Angular, Meteor;
- больше сотни встроенных тестов для обнаружения ошибок;
- интегрирование с Mocha, Protractor, Jest, Karma для юнит-тестов;
- полномасштабный дебаггер для отладки кода на серверной и клиентской сторонах;
- навигация для одновременной работы с несколькими файлами;
- автодополнение кода, подсветка синтаксиса.
Недостатки:
- стоит 129 $ за первый год работы;
- для начинающих кодеров функционал избыточен.
Ответвление IDE Visual Studio, направленное на работу с кодом. Он прост для освоения, удобен в использовании, и при этом функционален.
Преимущества:
- контекстное автодополнение, как синтаксиса, так и используемых переменных, модулей, функций и т. д.;
- дебаггер с точками останова, стеком вызовов, интерактивной консолью;
- поддержка сниппетов и шаблонов;
- интеграция с Git;
- удобный и простой интерфейс;
- бесплатный редактор.
Недостатки:
- мало плагинов.
Удобный и проверенный временем кроссплатформенный редактор, с настраиваемым интерфейсом и возможностью совершать тривиальные действия при помощи горячих клавиш.
Преимущества:
- горячие клавиши;
- навигация по коду в виде мини-карты;
- возможность изменить визуальную тему;
- поддержка сниппетов;
- подсветка, автодополнение переменных и синтаксиса;
- множественная правка благодаря использованию указателей;
- поддержка систем сборки;
- проверка синтаксиса прямо во время ввода;
- автосохранение.
Недостатки:
- полная версия стоит 70 $;
- отсутствие анализатора кода для расстановки ссылок.
Появившийся в 2015 году редактор кода от Git, копирующий дизайн Sublime Text и обёрнутый в Chromium.
Преимущества:
- более 50 открытых модулей;
- удобный и приятный интерфейс;
- бесплатный;
- автодополнение и подсветка кода;
- менеджер пакетов, которых уже более 3,5 тысяч;
- гибкие настройки редактора, подключаемых пакетов, тем интерфейса;
- редактирование и навигация при помощи горячих клавиш.
Недостатки:
- невысокая производительность;
- пустая комплектация «из коробки».
В 2014 году Brackets отпугнул программистов багами и недоработками, но теперь постепенно возвращает доверие новым качественным функционалом.
Преимущества:
- богатая комплектация «из коробки»;
- режим Live Preview - предварительный просмотр правок в браузере в режиме реального времени;
- менеджер пакетов;
- показ в коде используемых изображений и цветов;
- автодополнение и подсветка синтаксиса;
- анализатор кода;
- бесплатный.
Недостатки:
- строгая ориентация на веб и HTML+CSS+JavaScript;
- медленное развитие;
- низкое быстродействие из-за функций предпросмотра.
Ни для кого не секрет, что в наше время JavaScript стал одним из самых популярных языков программирования. В далекие 90е годы, в момент зарождения языка, когда он был создан с единственной целью добавить интерактивность веб страницам и улучшить процесс взаимодействия с пользователем, кто бы мог подумать, что он достигнет столь небывалых высот. Ведь сейчас на нем можно делать практически все что угодно. Хотите написать сайт: и бэкэнд и фронтэнд на JavaScript? пожалуйста! Хотите написать мобильное приложение на JavaScript? нет проблем. Программируете микроконтроллер – и тут вам на помощь придет JavaScript.
Есть конечно небольшие минусы в подходе использования JavaScript везде, но если поразмыслить, то сколько времени и сил можно сэкономить, изучив всего лишь одни язык, особенно, если то же самое приложение должно работать на разных платформах. Разных платформах говорите? Хм… Точно – разных платформах – теперь JS может позволить себе десктопные приложения для Windows, Linux, Mac, как спросите вы? Ответ прост: встречайте – NW.js .
Node.js – программная платформа, основанная на движке V8, который транслирует наш скрипт в машинный код. Данная платформа была создана в 2009 году преимущественно для работы с бэкэндом сайтов.
WebKit
- свободный движок, разработанный компанией Apple. Впервые был анонсирован в составе Safari в 2003 году
Итак, коду, написанному на JS для данной технологии, будут доступны как Node.js модули, так и стандартный браузерный API (соответственно WebKit)
После того, как необходимое ПО скачано и установлено, вы написали свое приложение на любимом JS (как это сделать читайте далее) и локализовали все в одну папку. Полдела сделано, теперь остается самое сложное и долгое – упаковать все в один файл и подготовить для распространения . Для упрощения вы можете воспользоваться готовыми библиотеками, например nw-builder . Установка библиотеки не составит труда, если вы уже работали с node.js. Как известно, в состав node.js входит менеджер пакетов npm , с которым нужно работать из командной строки. Для того, чтобы поставить какую-либо библиотеку, необходимо выполнить команду:
> npm install [имя_библиотеки] [опции]
Обратите внимание, что библиотеку можно ставить, как локально, так и глобально, для локальной установки используйте опцию --save-dev
, для глобальной -g
. Таким образом поставим наш сборщик для NW.js глобально, выполнив команду:
> npm install nw-builder -g
Для того, чтобы собрать наше приложение, необходимо выполнить команду (с большим количеством опций можно ознакомиться в документации):
> nwbuild -p [имя_платформы] -o [путь_к_папке_для_собранной_версии] [путь_до_приложения]
В качестве имени платформы могут быть следующие значения: win32, win64, osx32, osx64, linux32, linux64
.
Во время разработки нет нужды каждый раз собирать приложение, можно просто запустить его как есть и оно откроется в отдельном окне. Для этого нужно запустить приложение nw.exe из командной строки и передать в качестве параметров путь к папке с вашим приложением. Кроме того, если вы работаете под Windows, можно просто методом drag-n-drop перетащить папку с исходным кодом приложения на JS (обратите внимание, что именно папку целиком) в nw.exe.
Hello, world! Теперь, когда вы знаете, как запустить приложение, как собрать его в один файл, давайте напишем что-нибудь. По традиции знакомство с новой платформой начинается с написания приложения Hello, world.Для данного приложения, нам даже не понадобится JavaScript , только HTML . Создадим папку с названием HelloWorld . Поместим внутрь файл index.html со следующей разметкой:
Hello, world
Hello, world, from NW.js
Кроме того для каждого приложения под NW.js необходим файл, который обязательно должен называться package.json
. Из него будет браться информация для построения приложения. Создадим простейший вариант файла и поместим в папку HelloWorld
. Итак:
{
"name": "hello-world",
"version": "1.0.0",
"description": "First application",
"main": "index.html",
"author": "Developer",
"window": {
"toolbar": false,
"width": 500,
"height": 200
}
}
Содержимое файла понятно без пояснений (обратите внимание, что обязательные поля только main и name
). В main
необходимо записать файл с разметкой, который будет являться точкой входа в приложение. Секция window
настраивает параметры окна (в данном случае мы отключаем панель инструментов и задаем размеры окна 500x200).
Кроме того, можно настроить такие поля как (за полным списком опций обращайтесь в документацию):
- icon – указываем путь до иконки (переопределить стандартную)
- position – можно указать позицию окна при загрузке (null , center или mouse )
- min_width , min_height , max_width , max_height – ограничение размеров окна
- resizable – логическое значение, которое показывает можно ли пользователю изменять размеры окна
- fullscreen – включить полноэкранный режим
- kiosk – включить режим киоска
- transparent – сделать окно прозрачным
Приложение написано, но в нем всего один div элемент и совсем нет логики, а что делать, если у нас богатая на элементы разметка и сложная логика? На помощь к нам приходит элемент конфигурационного файла toolbar , который мы установили в false. Для того, чтобы сделать доступными средства отладки, необходимо установить toolbar в true . Проделав это при запуске приложения мы получим следующее окно:
После нажатия на кнопку в верхнем правом углу откроется еще одно окно, в котором будут отображены знакомые инструменты разработчика:
Var gui = require("nw.gui");
Общий шаблон для использования контролов:
Var element = new gui.ElementName(option);
Таким образом для создания элементов меню можно воспользоваться следующей конструкцией:
Var menu = new gui.Menu();
Кроме того любые свойства созданного нами объекта можно легко изменить стандартными конструкциями JS, например так:
Menu.title = "New Title";
Меню создано, теперь нужно его заполнить, для манипуляции дочерними элементами существуют методы:
Menu.append(new gui.MenuItem({label: "Label of menu item"}));
menu.removeAt(0);
Кроме того для более гибкого добавления элементов в menu можно воспользоваться методом insert
, в параметрах которого необходимо передать MenuItem
и номер позиции, куда его вставить (позиция перед первым элементом соответствует 0
).
Для доступа к созданным элементам можно использовать свойство items :
Menu.items.title = "New title"
Обратите внимание, что нельзя напрямую создавать элементы:
Menu.items = new gui.MenuItem(); // НЕПРАВИЛЬНО
Самое главное при работе с нативными контролами, это помнить, что любая ошибка при работе с ними может привести к краху всего приложения
, поэтому необходимо быть крайне внимательными и по возможности при удалении элементов, также присваивать переменной значение null. Таким образом для удаления контрола
, можно выполнить следующее:
Control.remove();
control = null;
Для более удобной работы с контролами, они унаследованы от EventEmitter , поэтому хорошая новость в том, что мы можем легко работать с событиями, например так:
Menuitem.on("click", function() {
// сделать что-нибудь полезное
});
Меню было создано, но если запустить приложение, то никакого меню вы не увидите. Для отображения меню существует метод popup, в параметрах которого необходимо передать координаты для отображения меню.
Для демонстрации основных возможностей меню добавьте следующий скрипт к созданному ранее проекту Hello, world :
Var gui = require("nw.gui");
var menu1 = new gui.Menu();
menu1.append(new gui.MenuItem({label: "Item 1"}));
var subMenu1 = new gui.Menu();
subMenu1.append(new gui.MenuItem({label: "Item 2"}));
menu1.append(new gui.MenuItem({
label: "Submenu",
submenu: subMenu1
}));
document.body.addEventListener("contextmenu", function(ev) {
ev.preventDefault();
menu1.popup(ev.x, ev.y);
return false;
});
После запуска приложения, мы можем увидеть созданное контекстное меню для body. Таким образом, мы можем определить контекстное меню для любого элемента.
Добавить метки
Эта глава посвящается языку программирования сценариев JavaScript. Вы узнаете, что же такое язык JavaScript и для чего он необходим.
Рассмотрим особенности создания динамики на странице, обработки форм, а также работы со слоями и стилями.
JavaScript
- это объектно-ориентированный язык программирования сценариев с синтаксисом, немного аналогичным синтаксисам языков C, Perl
и Python
. Несмотря на то что язык имеет схожее название с языком программирования Java, ничего общего, кроме части названия, у них нет.
В настоящее время JavaScript используется в основном для создания встраиваемых в веб-страницы сценариев, позволяющих полностью управлять как самими веб-страницами, там и веб-браузерами, в которых эти веб-страницы открыты. Таким образом, язык JavaScript в большинстве случаев используется для создания интерактивных веб-страниц и веб-приложений.
Сеть Интернет построена по технологии «клиент-сервер
».
Серверы - это компьютеры или программы, которые предоставляют какие-либо сервисы клиентам, например веб-сервер или сервер электронной почты.
Клиенты - это компьютеры или программы, которые используют то, что предлагают серверы, например веб-браузеры или почтовые клиенты.
Сценарии JavaScript - это небольшие программы, которые выполняются на компьютере пользователя при загрузке с сервера вместе с веб-страницами.
Область применения JavaScriptС самого начала своего развития язык JavaScript применялся для написания различных клиентских сценариев. Они широко применялись для решения таких задач, как, например, проверка информации, введенной пользователем в форму, перед ее отправкой на сервер или программирование ответных реакций на действия пользователя, делающие веб-страницы интерактивными. Сегодня с помощью языка JavaScript создаются уже целые веб-приложения, некоторые из них мало чем уступают своим настольным «собратьям». Хорошие примеры таких веб-приложений можно найти среди сервисов компании Google, например Google Calendar - многофункциональный органайзер в веб-браузере и Google Doc & Spreadsheet - текстовый и табличный редактор, позволяющий работать с офисными документами прямо в окне веб-браузера. Для создания динамического содержимого веб-страниц используется язык создания динамических страниц HTML Dynamic HTML (Динамический HTML), ключевой частью которого является опять же JavaScript.
Язык JavaScript применятся не только в Интернете, но и в таких программах, как, например, Adobe Dreamweaver, Adobe Acrobat Reader и Adobe Photoshop для расширения их возможностей, аналогично использованию языка Visual Basic в Microsoft Office.
Теперь рассмотрим создание сценариев и способы их внедрения в HTML-документ.
Создание сценариевРазберем все этапы создания JavaScript-сценария - от организации рабочего окружения до подключения кода к HTML-документу.
Для работы над сценариями подойдет практически любой текстовый редактор, позволяющий создавать обычные текстовые файлы и сохранять их с расширением htm или html. Например, в операционной системе Windows в числе стандартных есть два подходящих текстовых редактора - Блокнот и WordPad. Существуют также редакторы, специально разработанные для создания веб-страниц, например Microsoft FrontPage и Adobe Dreamweaver (ранее известный как Macromedia Dreamweaver). Такие редакторы позволяют создавать веб-страницы с помощью визуальных инструментов, а затем переключаться в режим отображения кода и вносить нестандартные изменения, например добавлять сценарии. В отличие от обычных текстовых редакторов, в таких редакторах подсвечивается синтаксис языка HTML и JavaScript, что очень удобно.
Кроме того, в Интернете вы можете найти большое количество других текстовых редакторов, которые позволяют создавать веб-страницы и подсвечивать синтаксис языков HTML и JavaScript. Эти редакторы имеют также много других полезных возможностей, которые существенно упрощают процессы создания веб-страниц и разработки сценариев. Многие такие редакторы распространяются бесплатно или условно бесплатно, и, возможно, какой-нибудь из них придется вам по душе.
Вы будете создавать сценарии, управляющие веб-страницами, поэтому для проверки работоспособности этих документов вам понадобится какой-либо веб-браузер. Учтите, что, проверив работоспособность своего творения в одном веб-браузере, нельзя быть уверенным в его работоспособности и в других. Следовательно, веб-страницы желательно проверять в нескольких веб-браузерах, и чем их будет больше, тем лучше.
Веб-разработчикам приходится считаться, в основном, с особенностями веб-браузера Microsoft Internet Explorer. Следовательно, свои веб-страницы нужно обязательно протестировать в этом веб-браузере, который имеется в каждой операционной системе Windows.
Большой популярностью пользуются также веб-браузеры Mozilla Firefox и Opera, которые стремятся максимально соответствовать стандартам. Mozilla Firefox можно загрузить с сайта http://www.mozilla.ru/, а Opera - с сайта .
Отдельно рассмотрим отладку программы (сценария). Когда сценарий большой, разобраться в нем не так просто и отладка, то есть процесс поиска и устранения ошибок, может занимать большую часть времени разработки всей программы (или сценария). Для упрощения и ускорения отладки созданы специальные программы, называемые отладчиками . Типичный отладчик имеет такие возможности, как пошаговое выполнение программы с остановкой в каждой строке кода или в заранее отмеченных для этого точках остановки, а также отслеживание и изменение значений каждой переменной прямо при выполнении программы.
Существует немало программ для отладки сценариев на JavaScript. Например, отладчик Microsoft Script Debugger имеет все необходимое для успешной отладки сценариев на JavaScript. Он применяется совместно с веб-браузером Microsoft Internet Explorer. Этот наладчик распространяется бесплатно компанией Microsoft, его можно загрузить с сайта . Кроме того, данный отладчик распространяется вместе с редактором Microsoft FrontPage в рамках программы Microsoft Script Editor, которая практически не отличается от Microsoft Script Debugger.
Существуют также и другие отладчики, например для веб-браузера Mozilla Firefox они созданы в виде расширений. В частности, отладчик FireBug можно загрузить с сайта , причем если на эту страницу перейти в веб-браузере Mozilla Firefox, то отладчик сразу же установится.
Мы не будем рассматривать процесс отладки в этой книге, так как это отдельная тема, требующая внимательного изучения. Чтобы писать простые сценарии, отладка не требуется.
Встраивание сценариевРассмотрим встраивание сценариев в веб-страницы.
Сценарии внедряются в HTML-документ тремя стандартными способами:
Как известно, для создания на веб-страницах гиперссылок применяется контейнерный тег
имеющий атрибут href для указания адреса страницы или файла, к которому приведет гиперссылка. Однако вместо адреса данный атрибут может содержать и JavaScript-сценарий, если перед сценарием поставить слово javascript: (со знаком двоеточие). Пример такой гиперссылки следующий:
Нажмите сюда
Когда пользователь щелкает кнопкой мыши на гиперссылке, интерпретатор сценариев JavaScript получает код
Alert("Привет, мир!");
и исполняет его, в результате чего на экране появляется диалоговое окно (рис. 2.1).
Рис. 2.1. Результат перехода по гиперссылке
Здесь сценарий состоит всего из одной функции alert(), которая выводит на экран диалоговое окно с текстом, полученным в качестве параметра. Объем кода может быть любым.
Встраивание сценариев для обработки событий
Поведение каждого элемента зависит от событий, которые постоянно происходят в веб-браузере. Допустим, пользователь выполнил следующие действия: щелкнул кнопкой мыши на тексте, переместил указатель мыши и загрузил HTML-документ. Веб-браузер сам решает, как реагировать на каждое событие, однако вы можете «перехватить» отдельные события и задать для них новое поведение. В языке HTML многие теги имеют атрибуты, соответствующие различным событиям. Эти атрибуты могут содержать код языка JavaScript, который выполняется в ответ на событие, например:
Это простой текст
Контейнерный тег
просто объединяет текст в параграфы, однако на него возлагается еще одна функция. Если вы определите атрибут onclick, то ваш текст будет реагировать на щелчок кнопкой мыши. Результат обработки кода приводится на рис. 2.2.
Рис. 2.2. Результат щелчка кнопкой мыши на тексте
В языке HTML практически каждый тег имеет атрибуты для обработки событий. Благодаря возможности обработки событий вы можете создавать интерактивные страницы, которые будут реагировать на действия пользователей.
Встраивание сценариев в тег
В HTML есть специальный контейнерный тег
Если при разборе кода HTML-документа веб-браузер встретит этот тег, то он интерпретирует последующий до закрывающего тега
текст как сценарий на каком-либо языке. Язык сценария указывается с помощью атрибута type. Например, для указания языка JavaScript используется следующий код:
Здесь располагается код сценария
Этот атрибут можно и не указывать, так как значение «text/javascript» является значением по умолчанию.
В коде сценария можно использовать комментарии - текст, который игнорируется интерпретатором JavaScript. Комментарии // и
// Это первый комментарий // Второй комментарий, далее идет код Код сценария ... // Код на JavaScript ...