Разработчик javascript: JavaScript разработчик: с чего начать в профессии, сколько получают JavaScript программисты

Лучшие инструменты для JavaScript-разработчика / Блог компании NIX / Хабр

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

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

• Не нужно ломать копий, если в этот список не попали какие-то из ваших любимых фреймворков или библиотек.
• Следите за обновлениями используемых вами инструментов. В последнее время начала активно внедряться кроссбраузерная и кроссаппаратная (cross-device) поддержка. Например, можно воспользоваться сканером, который подскажет, совместимы ли более старые версии с большинством устройств.

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.

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

GitHub: https://github.com/angular/angular.js

Офсайт: angularjs.org

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 будет полезен при создании изоморфного веб-фреймворка.

GitHub: https://github.com/facebook/react
Офсайт: Facebook.github.io/react/

Backbone

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

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

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

GitHub: https://github.com/jashkenas/backbone/
Офсайт: backbonejs.org

Ember

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

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

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

GitHub: https://github.com/emberjs/ember.js
Офсайт

: emberjs.com

jQuery

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

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

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

GitHub: https://github.com/jquery/jquery
Офсайт: jquery.com

Underscore и lodash

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

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

GitHub: https://github.com/jashkenas/underscore
Офсайт: underscorejs.org

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

GitHub: https://github.com/lodash/lodash
Офсайт: lodash.com

D3.js

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

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

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

GitHub: https://github.com/mbostock/d3
Офсайт: d3js.org

Babylon.js

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

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

GitHub: https://github.com/BabylonJS/Babylon.js
Офсайт: babylonjs.com

Three.js

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

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

GitHub: https://github.com/mrdoob/three.js/
Офсайт: threejs.org

Mocha и Chai

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

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

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

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

GitHub Mocha: https://github.com/mochajs/mocha
Офсайт Mocha: mochajs.org

GitHub Chai: https://github.com/chaijs/chai
Офсайт Chai: chaijs.com

Karma

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

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

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

GitHub: https://github.com/karma-runner/karma
Офсайт: karma-runner.github.io

PhantomJS

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

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

GitHub: https://github.com/ariya/phantomjs
Офсайт: phantomjs.org

Grunt и Gulp

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

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

GitHub Grunt: https://github.com/gruntjs/grunt
Офсайт Grunt: gruntjs.com

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

GitHub Gulp: github.com/gulpjs/gulp
Офсайт Gulp: gulpjs.com

Babel

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

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

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

GitHub: https://github.com/babel/babel
Офсайт: babeljs.io

Автор текста: Rami Sayar
Top JavaScript Frameworks, Libraries and Tools and When to Use Them

JavaScript — Веб-технологии для разработчиков

Эта часть сайта посвящена самому языку JavaScript, и она не затрагивает тонкостей, связанных с веб-страницами или окружением, в котором исполняется JavaScript. Информация об API, относящихся к веб-страницам, находится в разделах, посвященных Веб-API и DOM.

Стандартом языка JavaScript является ECMAScript. По состоянию на 2012, все современные браузеры полностью поддерживают ECMAScript 5.1. Старые версии браузеров поддерживают по крайней мере — ECMAScript 3. 17 июня 2015 года состоялся выпуск шестой версии ECMAScript. Эта версия официально называется ECMAScript 2015, которую чаще всего называют ECMAScript 2015 или просто ES2015. С недавнего времени стандарты ECMAScript выпускаются ежегодно. Эта документация относится к последней версии черновика, которой является ECMAScript 2018.

Не следует путать JavaScript c языком программирования Java. И «Java», и «JavaScript» являются торговыми марками или зарегистрированными торговыми марками Oracle в США и других странах. Однако, у обоих языков различный синтаксис, семантика и применение.

Учебные материалы

Научитесь программировать на JavaScript вместе с нашим руководством.

Для абсолютных новичков

Загляните в наш Учебный План, если вам хочется изучить JavaScript, но у вас нет опыта в JavaScript или программировании.  Доступные разделы: 

Первые шаги в JavaScript

Отвечаем на такие вопросы, как «что такое JavaScript?», «как он выглядит?», «и что он может делать?», а также обсуждаем основные возможности JavaScript, такие, как переменнные, строки, числа и массивы.

Структурные элементы JavaScript

Продолжаем наше изучение главных возможностей JavaScript, обращаем наше внимание на самые часто встречающиеся блоки кода, такие, как условные выражения, циклы, функции и события.

Введение в объекты JavaScript

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

Асинхронный JavaScript

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

Клиентские (браузерные) веб-API

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

Руководство по JavaScript

Руководство по JavaScript

Более подробное руководство по языку программирования JavaScript, нацеленное на тех, кто уже имеет опыт программирования на JavaScript или на любом другом языке.

Средний уровень

Понимание JavaScript-фреймворков для фронтенда

JavaScript-фреймворки являются неотъемлемой частью современной веб-разработки,

предоставляя разработчикам проверенные и протестированные

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

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

Повторное введение в JavaScript

Обзор для тех, кто думает, что знает JavaScript.

Структуры данных JavaScript

Обзор существующих структур данных в JavaScript.

Операторы сравнения и тождественности

JavaScript предоставляет три различных оператора сравнения значений: строгое равенство ===, с приведением типов == и метод Object.is().

Замыкания

Замыканния это сочетание функции и лексического окружения в котором она была определена.

Продвинутый уровень

Наследование и цепочка прототипов

Статья разъясняет бытующие заблуждения и недооцененность наследования, основанного на прототипах.

Строгий режим jон ж «use strict»

Строгий режим говорит о том, что вы не можете использовать какую-либо переменную до её объявления. Это ограниченный вариант ECMAScript 5, для более быстрой производительности и простой отладки.

Типизированные массивы

Типизированные массивы предоставляют механизм для работы с необработанными двоичными данными в JavaScript.

Управление памятью

Жизненный цикл памяти и сборка мусора в JavaScript.

Модель параллелизма (мультипоточности) и цикл событий

В JavaScript есть модель параллелизма, основанная на «цикле событий».

Введение в использование XPath в JavaScript

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

Подробный справочник по JavaScript.

Стандартные встроенные объекты

Узнайте о стандартных встроенных объектах Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String, Map, Set, WeakMap , WeakSet и других.

Выражения и операторы

Узнайте о поведении таких операторов в JavaScript, как instanceof, typeof, new, this, приоритете операторов и многом другом.

Инструкции и объявления

Узнайте о do-while, for-in, for-of, try-catch, let, var, const, if-else, switch и многих других выражениях и ключевых словах в JavaScript.

Функции

Узнайте, как работать с функциями в JavaScript, чтобы разрабатывать свои приложения.

Полезные инструменты для написания и отладки вашего JavaScript кода.

Инструменты разработчика Firefox

Простой редактор JavaScript, Веб-консоль, JavaScript Профайлер, Отладчик и другие.

JavaScript шеллы

JavaScript шеллы позволяют быстро проверять фрагменты JavaScript кода.

TogetherJS

Объединение усилий стало проще. Добавляя TogetherJS на вашу веб-страницу, ваши пользователи могуь помочь другу-другу в реальном времени!

Stack Overflow

Вопросы по JavaScript на Stack Overflow.

Версии JavaScript и информация о релизах

Просмотрите историю возможностей JavaScript и их статус.

JSFiddle

Редактируйте JavaScript, CSS, HTML и получайте живые результаты. Используйте экспериментальные ресурсы и взаимодействуйте с вашей командой онлайн.

Plunker

Plunker — это онлайн-сообщество для создания, обмена и совместной работы над идеями, касающимися веб-разработки. Редактируйте ваши JavaScript, CSS, HTML файлы, смотрите результат их выполнения и организуйте их в файловую структуру.

JSBin

JS Bin это инструмент с открытым исходным кодом для отладки и совместной разработки.

Codepen

Codepen ещё одна платформа для совместной веб-разработки, дающия результать в реальном-времени.

StackBlitz

StackBlitz — это «песочница»/инструмент отладки, где вы можете размещать полновесные приложения написанные на React, Angular, т др.

JavaScript — Изучение веб-разработки | MDN

JavaScript — это язык программирования, который даёт возможность реализовывать сложное поведение веб-страницы. Каждый раз, когда вы видите веб-страницу, она не только отображает статическое содержимое, но и делает большее — своевременно отображает обновление контента, выводит интерактивные карты, 2D/3D анимацию, прокручивает видео и т.д. — будьте уверены, здесь не обошлось без JavaScript.

Учебный план

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

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

После изучения основ JavaScript вы будете готовы к ознакомлению с более сложными темами, например:

Модули

Этот раздел содержит следующие модули, проходить которые рекомендуется в порядке перечисления.

Первые шаги в JavaScript

В нашем первом модуле, посвященном JavaScript, мы сначала ответим на несколько главных вопросов, таких, как «Что такое JavaScript?»,  «На что он похож?» и «Что с его помощью можно сделать?», а затем перейдем к практике — расскажем, как писать и выполнять код на JavaScript. После чего подробнее рассмотрим некоторые ключевые конструкции JavaScript: переменные, строки, числа и массивы.

Структурные элементы JavaScript

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

Введение в объекты JavaScript

Практически всё, что встречается в JavaScript, является объектом. Начиная с таких ключевых конструкций, как строки и массивы, и заканчивая интерфейсом взаимодействия с браузером, который построен поверх JavaScript. Вы даже можете создавать собственные объекты, заключая взаимосвязанные функции и переменные в готовые пакеты. Если Вы хотите продолжить изучение языка и писать более эффективный код, то очень важно понять объектно-ориентированную природу JavaScript. Чтобы помочь Вам в этом, мы представляем этот модуль. В нем мы подробно рассматриваем основы и синтаксис ООП (объектно-ориентированного программирования), показываем, как создавать свои объекты, и объясняем, что такое данные в формате JSON и как с ними работать.

Клиентский Web API

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

Решение общих проблем на JavaScript

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

Смотрите также

JavaScript на MDN

Главная точка входа к ядру JavaScript-документации на MDN — то место, где вы найдёте обширную справочную документация по всем аспектам языка JavaScript, и некоторые продвинутые учебники для опытных JavaScript-разработчиков.

Learn JavaScript

Отличный ресурс для начинающих веб-разработчиков — изучайте JavaScript в интерактивной среде, с короткими уроками и интерактивными тестами с автоматизированной оценкой. Первые 40 уроков бесплатно, а полный курс доступен за небольшую разовую плату.

JavaScript Fundamentals on EXLskills

Изучайте JavaScript бесплатно с курсом с открытым исходным кодом EXLskills, который знакомит вас со всем необходимым, чтобы начать создавать приложения в JS.

Математика для программиста

Великолепная серия видеоуроков по математике от Keith Peters, которую необходимо понимать каждому эффективному программисту

JavaScript Первые шаги — Изучите веб-разработку

В нашем первом модуле JavaScript мы сначала отвечаем на некоторые фундаментальные вопросы, такие как «что такое JavaScript?», «Как он выглядит?» И «что он может делать?», Прежде чем перейти к ознакомлению с вашей первой практической практикой. опыт написания JavaScript. После этого мы подробно обсудим некоторые ключевые строительные блоки, такие как переменные, строки, числа и массивы.

Хотите стать интерфейсным веб-разработчиком?

Мы разработали курс, который включает в себя всю необходимую информацию, необходимую для достижения вашей цели.

Начало работы

Пререквизиты

Перед запуском этого модуля вам не нужны никакие предыдущие знания JavaScript, но вы должны быть немного знакомы с HTML и CSS. Перед началом работы с JavaScript рекомендуется проработать следующие модули:

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

Направляющие

Что такое JavaScript?

Добро пожаловать на курс JavaScript для начинающих в MDN! В этой первой статье мы рассмотрим JavaScript с высокого уровня, ответим на такие вопросы, как «что это?» И «что он делает?», И убедимся, что вы знакомы с целью JavaScript.

Первый всплеск в JavaScript

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

Что пошло не так? Устранение неполадок JavaScript

Когда вы создали игру «Угадай число» в предыдущей статье, возможно, вы обнаружили, что она не работает. Никогда не бойтесь — эта статья направлена ​​на то, чтобы уберечь вас от подобных проблем, предоставив вам несколько простых советов о том, как найти и исправить ошибки в программах JavaScript.

Хранение необходимой информации — переменные

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

Базовая математика в JavaScript — числа и операторы

На этом этапе курса мы обсуждаем математику в JavaScript — как мы можем объединить операторов и другие функции, чтобы успешно манипулировать числами для выполнения наших ставок.

Обработка текста — строки в JavaScript

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

Полезные строковые методы

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

Массивы

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

Оценки

Следующая оценка проверит ваше понимание основ JavaScript, описанных в руководствах выше.

Генератор глупых историй

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

См. Также

учить JavaScript

Отличный ресурс для начинающих веб-разработчиков — изучите JavaScript в интерактивной среде, с небольшими уроками и интерактивными тестами под руководством автоматизированной оценки. Первые 40 уроков бесплатны, а полный курс доступен за небольшую разовую плату.

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

Код подвержен ошибкам. Скорее всего, вы будете делать ошибки … О чем я говорю? Вы абсолютно будете делать ошибки, по крайней мере, если вы человек, а не робот.

Но в браузере пользователи не видят ошибок по умолчанию. Так что, если что-то пойдет не так в сценарии, мы не увидим, что сломано, и не сможем это исправить.

Чтобы увидеть ошибки и получить много другой полезной информации о скриптах, в браузеры были встроены «инструменты разработчика».

Большинство разработчиков склоняются к Chrome или Firefox для разработки, потому что эти браузеры имеют лучшие инструменты для разработчиков. Другие браузеры также предоставляют инструменты разработчика, иногда со специальными функциями, но обычно играют в догонялки в Chrome или Firefox. Поэтому большинство разработчиков имеют «любимый» браузер и переключаются на другие, если проблема связана с браузером.

Инструменты разработчика являются мощными; у них много функций. Для начала мы узнаем, как их открывать, смотреть на ошибки и запускать команды JavaScript.

Откройте страницу bug.html.

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

Нажмите F12 или, если вы используете Mac, затем Cmd + Opt + J .

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

Это выглядит примерно так:

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

• Здесь мы можем увидеть сообщение об ошибке красного цвета. В этом случае скрипт содержит неизвестную команду «lalala».
• Справа — ссылка на источник, доступная по клику. bug.html: 12 с номером строки, в которой произошла ошибка.

Ниже сообщения об ошибке находится синий символ > . Он помечает «командную строку», в которой мы можем вводить команды JavaScript. Нажмите Введите , чтобы запустить их.

Теперь мы можем видеть ошибки, и этого достаточно для начала.Позже мы вернемся к инструментам разработчика и более подробно обсудим вопросы отладки в главе Отладка в Chrome.

Многострочный ввод

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

Чтобы вставить несколько строк, нажмите Shift + Enter . Таким образом, можно вводить длинные фрагменты кода JavaScript.

Большинство других браузеров используют F12 для открытия инструментов разработчика.

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

Safari (браузер Mac, не поддерживаемый Windows / Linux) здесь немного особенный. Сначала нужно активировать «Меню разработки».

Откройте «Настройки» и перейдите на панель «Дополнительно». Внизу есть флажок:

Теперь Cmd + Opt + C может переключать консоль. Также обратите внимание, что появился новый пункт верхнего меню под названием «Разработка». У него много команд и опций.

Инструменты разработчика
• позволяют нам видеть ошибки, запускать команды, проверять переменные и многое другое.
• Их можно открыть с помощью F12 для большинства браузеров в Windows. Chrome для Mac требуется Cmd + Opt + J , Safari: Cmd

.