на чем писать код javascript

Гайд для начинающих: как написать JavaScript

Современный интернет немыслим без скриптов. Учимся писать на JavaScript.

Если бы для интернета писали Библию, она начиналась бы так:

Сначала была почта. И увидели инженеры, что это хорошо. И создали они WWW с гиперссылками. И увидели инженеры, что это тоже хорошо. И создали они тогда язык JavaScript для оживления страничек.

Примерно так происходило в реальности. JavaScript придумали, чтобы «оживить» HTML. Скрипты JavaScript пишутся непосредственно в текст HTML или хранятся в отдельных файлах, как и стили CSS. Они выполняются сразу после загрузки страницы в браузер.

Даже сам язык в первое время назывался LiveScript. Потом его переименовали в JavaScript, потому что планировали как-то увязать с языком общего назначения Java. Но сейчас у них нет практически ничего общего, а JavaScript — совершенно независимый язык программирования со своей четкой спецификацией ECMAScript.

Формально JavaScript является торговой маркой Oracle, а этот язык — «расширение» ECMAScript, наряду с JScript от Microsoft и ActionScript, но это скорее заморочки владельцев торговых марок. Главное, что свободный ECMAScript никому не принадлежит.

Со временем сфера влияния JavaScript значительно расширилась. Его начали использовать не только для скриптов на странице HTML, но и для серьезных больших веб-приложений и целых программ, которые работают в браузере. Есть инструменты, чтобы специальным образом «упаковать» эти программы и выполнять их отдельно от браузера. Это компиляторы и интерпретаторы, которые более подробно рассматриваются на обучающих курсах «Java-разработчик» и «Веб-разработчик».

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

Как сделать JavaScript? Написать элементарный скрипт не сложнее, чем простую HTML-страничку, ведь скрипты JavaScript пишутся обычным текстом, то есть их можно создавать буквально в том же «Блокноте», сохраняя потом в отдельных файлах или вставляя в тело HTML-документа. Самые простые вещи на JavaScript делаются действительно просто.

Как написать JavaScript

Для примера сделаем простой скрипт для выполнения сервером сценариев Windows. Этот скрипт можно написать прямо в «Блокноте» и выполнить без браузера.

Пишем этот текст в «Блокноте», затем сохраняем файл под именем skillbox.js и запускаем в «Проводнике» Windows.

alert()

Метод alert() отображает окошко с кнопкой «OK». В окне выводится сообщение, которое указано в скобках. Например, «Привет, Skillbox!». То есть в данном случае браузер делает ровно то же самое, что перед этим делал сервер сценариев Windows.

Эти примеры тоже можно писать в «Блокноте», только сохранять в файлах с расширением HTML. Например, skillbox.htm.

В качестве аргумента alert() можно указать не только конкретный текст, но и результат каких-либо вычислений или обработки других данных. Например, alert(x), где x вычисляется отдельно.

confirm()

Метод confirm() выводит такое же окно с сообщением, но уже с двумя кнопками — «ОК» и «Отмена». В зависимости от того, какую кнопку щелкнет пользователь, метод возвращает либо значение true, либо false. Сервер получает это возвращаемое значение от пользователя и выполняет какое-то действие, в зависимости от ответа.

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

prompt()

Метод prompt() выводит диалоговое окно с сообщением и текстовым полем, куда пользователь вводит данные. Здесь тоже предусмотрены две кнопки «ОК» и «Отмена». По нажатию первой кнопки метод возвращает на сервер введенный текст, а по нажатию второй кнопки возвращает логическое значение false.

Синтаксис здесь такой:

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

Возможности современного JavaScript выходят далеко за рамки примитивного ввода-вывода данных через формы. Эти методы мы привели только в качестве самых простых примеров. Кроме этого, JavaScript позволяет реагировать на действия пользователя. Например, на движения мышкой или нажатие определенных клавиш. JavaScript часто используется для обеспечения асинхронной работы ( Технология AJAX), когда информация на странице обновляется без ее перезагрузки. В этом режиме данные отправляются на сервер и загружаются оттуда в интерактивном режиме. Кроме того, JavaScript способен манипулировать с HTML-элементами на странице (создавать и прятать теги и т.д.) и делать многое другое.

Полезные инструменты

Консоль разработчика

Во всех популярных браузерах есть специальная консоль разработчика. Она показывает код скриптов на странице, а также выводит другую полезную информацию. В Chrome, Firefox и IE консоль разработчика открывается по нажатию горячей клавиши F12, в Safari — Ctrl+Shift+I или Ctrl+Alt+C. На скриншоте скрипты отображаются справа вверху, вместе с другими элементами веб-страницы.

Редакторы кода

В дальнейшем для удобного программирования понадобится установить редактор кода или IDE (Integrated Development Environment), интегрированную среду разработки. IDE — это редактор с расширенной функциональностью, который интегрирован с другими полезными инструментами, поддерживает подключение дополнительных модулей и так далее.

Для начала можно рекомендовать один из легких редакторов:

В будущем есть смысл присмотреться к IDE:

Заключение

Инструкторы на курсе «JavaScript с нуля» посоветуют лучшие инструменты и помогут разобраться с любыми вопросами. Это практический 4-месячный курс для тех, кто хочет научиться основам языка сценариев с индивидуальным наставником, разработать фронтенд для интерактивного веб-проекта и положить кейс к себе в портфолио.

Курс идеально подойдет дизайнерам-разработчикам и начинающим программистам, кто уже знаком и умеет разрабатывать страницу на HTML и CSS, но не намерен останавливаться в изучении программирования. Преподаватели практически «на пальцах» объяснят базовые основы синтаксиса JavaScript, научат создавать визуальные интерактивные элементы и помогут разработать первый веб-проект на JavaScript.

Пишет про разработку в Skillbox. Работал главным редактором сайта «Хабрахабр», ведет корпоративные блоги.

Источник

6 редакторов и IDE для работы с JavaScript

Разбираем на примерах, как выбрать редактор кода для JavaScript.

Во-первых, нужна подсветка синтаксиса: названия, операторы и специальные символы должны отображаться по-разному, чтобы можно было быстро прочитать код.

Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.

Во-вторых, нужно автодополнение: когда вы вводите название функции или переменной, редактор должен предложить несколько вариантов команд, которые вы, вероятно хотите ввести. Желательно, чтобы он также показывал подсказки к выбранному компоненту — например, необходимые аргументы, тип переменной, краткое описание и так далее.

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

Желательно, чтобы подсвечивались ошибки — тогда вы сможете их сразу заметить и исправить:

Хорошими бонусами будут возможность работать с несколькими файлами в одном окне, менеджер проектов, выбор тем, установка плагинов и так далее.

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

Notepad++

Notepad++ — простой и удобный редактор с открытым исходным кодом. В нём есть подсветка синтаксиса нескольких языков, в том числе и JS, автоматическое форматирование и автодополнение. Присутствует навигация в виде вкладок, файлового менеджера и карты кода.

Доступны работа с разными кодировками, подключение компиляторов, использование плагинов и другие полезные функции. Например, добавив QuickText, вы улучшите встроенное автодополнение.

Notepad++ регулярно обновляется, поэтому в нём быстро исправляют баги и добавляют новые возможности. К сожалению, работает он только на Windows.

Редактор Vim уже давно стал классикой. Многие говорят, что в нём тяжело разобраться, но если уделить этому достаточно времени, пользоваться чем-то другим уже не захочется.

Помимо того, что он соответствует всем выбранным нами критериям, Vim ещё и полностью настраиваемый, поэтому вы можете:

Vim полностью бесплатный и работает на всех платформах, начиная с Windows, MacOS и Linux и заканчивая MS DOS и OS/2.

Microsoft Visual Studio

Microsoft Visual Studio — это IDE, в которой есть всё необходимое для работы с JS. Помимо обычной подсветки синтаксиса и автодополнения, можно также пользоваться дебагером и создавать Unit-тесты.

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

Месячная подписка может стоить от 45 до 250 долларов в месяц, но есть и бесплатная версия для начинающих разработчиков и тех, кто создаёт программы с открытым исходным кодом. IDE доступна для Windows и MacOS, а на Linux её можно установить с помощью Wine.

Visual Studio Code

170 МБ против 30 ГБ), кроссплатформенная и бесплатная версия Visual Studio. В этом редакторе предустановлена поддержка JavaScript, TypeScript и Node.JS.

Расширения с другими языками можно скачать прямо из Visual Studio Code.

Встроенные дебагер и Git-команды для работы с системой управления версий GitHub позволяют ускорить тестирование и публикацию приложений.

Sublime Text

Sublime Text — это простой кроссплатформенный редактор. Его интерфейс настраивается, а выполнять некоторые действия можно с помощью горячих клавиш.

Также в нём есть поддержка сниппетов, автодополнение, подсветка синтаксиса и навигация. Крутой бонус — автосохранение. Впрочем, он больше нужен новичкам — ведь профессиональные программисты за годы работы вырабатывают привычку сохраняться после ввода каждой команды.

Главный минус Sublime Text в том, что полная версия стоит 80 долларов (лицензия выдаётся на одного пользователя, который может использовать редактор на любом компьютере). В остальном он хорошо подходит
JS-разработчикам.

Источник

Лучшие инструменты для JavaScript-разработчика

Регулярно появляется какая-нибудь JS-библиотека, которую начинают шумно обсуждать на всевозможных форумах. Сначала постепенно нарастает энтузиазм, а затем сообщество быстро делится на противоборствующие лагери, по-разному относящиеся к новинке. Было бы просто невероятным подвигом рассмотреть все распространённые JS-фреймворки и библиотеки, поэтому хотим предложить вам список самых популярных и оказавших наибольшее влияние инструментов для фронтенд-разработки. А заодно дадим некоторые рекомендации по их использованию.

Но прежде чем перейти к делу, хотим уточнить:

AngularJS

Это популярный фреймворк корпоративного уровня, используемый многими разработчиками для создания и обслуживания сложных веб-приложений. Пожалуй, правильнее будет охарактеризовать его как ОЧЕНЬ популярный. Angular используют такие компании, как Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout и Google. Это фреймворк с открытым исходным кодом, поддерживаемый Google. Angular позиционируется как «расширение HTML» для создания комплексных веб-приложений. Если вы знакомы с TypeScript, то вам может быть небезынтересно узнать, что Angular 2 написан именно на нём.

Angular — MVC-фреймворк. В нём реализован двусторонний дата-биндинг между моделями и представлениями (view). Такой подход позволяет автоматически обновляться с обеих сторон при любом изменении данных. В Angular можно создавать многократно используемые компоненты представлений (View Component). А благодаря имеющейся в нём структуре сервисов (service framework) можно легко построить взаимодействие между бэкендом и фронтендом. Ну и, наконец, Angular — это чистый JavaScript.

Рекомендации по использованию: если вы создаёте сложное фронтенд-приложение и вам нужен единый модульный фреймворк, позволяющий решать любые задачи.

ReactJS

Один из самых популярных JS-проектов прошлого года. Не говорил о нём, наверное, только очень ленивый. Почти на каждой конференции можно было послушать выступление, посвящённое React и прочим библиотекам этого семейства (Flux, Redux).

React — JS-библиотека для создания пользовательских интерфейсов. Это проект с открытым исходным кодом, по большей части разработан в Facebook, при участии ряда крупных компаний. С точки зрения MVC-модели React относится к V, практически игнорируя все остальные аспекты архитектуры приложения. Он реализует уровень компонентов (component layer), облегчающий создание и комбинирование UI-элементов. Отрисовка интерфейса оптимизируется благодаря абстрагированию DOM, что также позволяет отрисовывать React из Node.js. Кроме того, в React реализован односторонний реактивный поток данных, что делает инструмент куда более простым в понимании и освоении по сравнению с другими фреймворками.

Иногда React заменяет V в Ember и Angular.

Рекомендации по использованию: если вам нужен мощный фреймворк уровня представления (view layer), а остальные уровни приложения постольку поскольку. Либо можно использовать React как дополнение к Angular, Backbone или Ember. Наконец, React будет полезен при создании изоморфного веб-фреймворка.

Backbone

Этот фреймворк известен своей простотой и умещается в один JS-файл. Автором Backbone является Джереми Ашкенас, создавший также CoffeScript и Underscore.js. Фреймворк особенно любят использовать команды разработчиков, создающие веб-приложения с простой структурой, которым не нужны монстры вроде Angular и Ember.

Backbone является полноценным MVC-фреймворком с маршрутизацией. С помощью моделей реализованы привязка key-value и события для обработки изменения данных. Модели и коллекции могут взаимодействовать с RESTful API. В представлениях используется декларативная обработка событий, а маршрутизатор управляет состоянием с помощью URL. Достаточно лишь создать одностраничное приложение без избыточного функционала и сложности.

Рекомендации по использованию: это отличный GOTO-фреймворк для создания простых веб-приложений.

Ember

В этом достаточно популярном фреймворке упор делается на повышение производительности программиста. Одним из ключевых разработчиков Ember является Йехуда Кац (Yehuda Katz), принимавший активнейшее участие в создании Ruby on Rails и jQuery. Ember позиционируется как «фреймворк для создания амбициозных веб-приложений», который не будет попусту тратить ваше время. Он ведёт себя очень своевольно и многие вещи решает самостоятельно, ставя разработчика перед фактом.

Ember тоже относится к MVC-фреймворкам. В нём используется шаблонизация и встроенный view engine, который автоматически обновляет данные так же, как и Angular, Backbone и React. Ember поддерживает технологию веб-компонентов, позволяющую расширять HTML с помощью собственных тэгов (как и Angular). Также во фреймворк встроен движок маршрутизации и модели, умеющие работать с вашим RESTful API.

Рекомендации по использованию: если вам нужен фреймворк, который просто работает. Также Ember будет полезен тем, кто не нуждается в гибкости из-за ограниченного бюджета или жёсткого дедлайна.

jQuery

Библиотека jQuery не нуждается в представлении. Только благодаря ей кроссбраузерные сайты стали реальностью, а веб обрёл современный вид. jQuery стала одной из причин, по которой большинство основных браузеров начали поддерживать веб-стандарты. Миссией jQuery Foundation является «улучшение открытого веба, чтобы он был доступен для всех, благодаря разработке и поддержке ПО с открытым кодом, а также сотрудничество с сообществом разработчиков».

jQuery — наиболее используемая JS-библиотека в мире, упрощающая работу с DOM, обработку событий, анимацию и использование AJAX.

Рекомендации по использованию: эту библиотеку можно использовать всегда. За исключением случаев, когда вы предпочтёте более компактную версию вроде Zepto.

Underscore и lodash

Иногда стандартные возможности JavaScript не позволяют нам работать с полной отдачей. Всегда не хватает какой-нибудь вспомогательной функции, или функции, позволившей бы упростить код. Underscore и lodash — это JS-библиотеки, предлагающие свыше 100 вспомогательных функций и прочих «вкусностей» без необходимости делать monkey patching для встроенных JS-объектов. В частности, вам будут доступны такие вещи, как map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone и многое другое.

Рекомендации по использованию Underscore: если вам нужен один единственный JS-файл, который немедленно облегчит вашу жизнь как программиста.

Рекомендации по использованию lodash: если вам нужна модульная и чуть более быстрая версия Underscore, с улучшенной поддержкой AMD и плагинов, созданных сообществом.

Одним из стандартных требований для веб-приложений является визуализация данных и построение графиков. И в этой сфере стандартом де-факто является D3.js. Это один из самых популярных проектов на Github, он используется во множестве компаний. D3 лежит в основе кучи библиотек для построения диаграмм, графиков и прочих видов визуализации.

D3 позволяет брать данные из любых источников и преобразовать в DOM/SVG/CSS. Проект поддерживает современные веб-стандарты, поэтому не беспокойтесь о возможности столкнуться с какими-то проприетарными форматами наподобие Flash или Silverlight.

Рекомендации по использованию: для визуализации любого вида.

Babylon.js

Хотите сделать кроссбраузерную игру, целиком соответствующую современным веб-стандартам? Тогда присмотритесь к Babylon.js, трёхмерному движку на базе WebGL и JavaScript. Он позволяет создавать невероятные высококачественные игры с реалистичной физикой, звуком, системой частиц и прочими красотами.

Рекомендации по использованию: при создании любых игр и сложных 3D-сцен.

Three.js

Это довольно компактная 3D-библиотека, позволяющая рендерить трёхмерные сцены на HTML5 холсте (canvas), SVG и WebGL без использования полноценных игровых движков. Three.js довольно проста в использовании, на офсайте можете посмотреть всевозможные способы её применения.

Рекомендации по использованию: если вам нужна простая 3D-визуализация, которую можно вывести на холст.

Mocha и Chai

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

Mocha — это JS-фреймворк, облегчающий тестирование асинхронного кода в node модуле или браузерном приложении. Тесты в Mocha имеют улучшенное качество трассировки исключений и могут прогоняться сериями.

Chai — TDD/BDD assertion библиотека, которая может использоваться совместно с Mocha и позволяет выражать тесты в простой читаемой форме.

Рекомендации по использованию: всегда! Тестируйте свой код и делайте мир немного лучше.

Karma

Раз уж в списке появились Mocha и Chai, то нужно включить сюда и прогонщика тестов, позволяющего проводить непрерывное интеграционное тестирование. Karma поможет вам автоматизировать работу тестов Mocha и Chai в разных браузерах.

Поскольку не все браузеры могут работать на любых платформах, то обратите внимание на пару бесплатных инструментов, которые облегчат вам процесс тестирования:

PhantomJS

Было бы не слишком экономно запускать браузеры целиком во время прогона тестов, это приводит к излишнему расходу памяти и ресурсов процессора. PhantomJS позволяет запустить headless версию WebKit, движка, используемого в Safari, а ранее ещё и в Chrome (сегодня в нём используется Blink). Так что прямо из JavaScript API вы сможете прогнать тесты, наделать скриншотов, помониторить сеть и автоматизировать просмотр страниц.

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

Grunt и Gulp

В ходе подготовки выкатывания сайтов в продакшен нам обычно приходится выполнять такие задачи, как улучшение производительности с помощью минификации JavaScript и CSS, компиляцию CoffeeScript/TypeScript, модульное тестирование и т.д. Наверняка у вас уже есть под рукой пакет инструментов, которые готовят сайт к развёртыванию в продакшен. Но если нет, то можно порекомендовать Grunt или Gulp в качестве исполнителя задач (task runner). Для обоих написано несметное количество плагинов, позволяющих сделать с сайтом что угодно в процессе подготовки к развёртыванию.

Рекомендации по использованию Grunt: если вы предпочитаете писать конфигурационные файлы и вас не волнует, что исполнитель задач может генерировать промежуточные файлы.

Рекомендации по использованию Gulp: если вы предпочитаете писать код вместо конфигурирования, и были бы не против использовать Node.js-потоки для увеличения производительности.

Babel

JavaScript как язык быстро развивается. Например, прошлым летом был выпущен ECMAScript 2015, а многие из его основных возможностей уже реализованы в ряде браузеров. Если вас интересует вопрос совместимости с ECMAScript 2015, то можете изучить таблицу от kangax. Обратите внимание, что последние версии Edge, Chrome и Firefox почти полностью совместимы.

Но мы не живём в идеальном мире. Разработчикам приходится поддерживать старые версии браузеров, не поддерживающих самые современные и лучшие возможности JavaScript. А нам хотелось бы улучшить веб и наши кодовые базы. Это можно сделать с помощью Babel, JS-компилятора, преобразующего последние возможности SS-стандарта в ES5. Это поможет вам запускаться даже на очень старых браузерах наподобие IE 9. Для Babel написано несколько плагинов, облегчающих разработку с React, а также использование возможностей, не описанных спецификацией (например, ES7).

Рекомендации по использованию: если вы хотите использовать самые современные возможности JavaScript, но при этом необходимо сохранить поддержку старых браузеров.

Источник