Как писать javascript

Как начать писать на JavaScript с нуля

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

Рассмотрим, из чего состоят веб-странички. HTML (HyperText Markup Language) отвечает за придание странице структуры (показывает, где меню сайта, а где заголовок, логотип или статья) и контента (различные тесты, списки, изображения и т. д.). CSS (Cascading Style Sheets) отвечает за визуальную составляющую страницы: определяет, какого цвета и размера должен быть тот или иной блок, как его оформить и вывести пользователю.

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

У JavaScript очень интересная история. Он — реализация стандарта ECMAScript, может работать не только в браузере. Но в статье мы рассмотрим только взаимодействие с браузером.

Создаём самый простой скрипт

В первом задании, которое традиционно выполняет студент при изучении языка программирования, нужно вывести на экран фразу «Hello, world». Это позволяет отработать самый важный аспект — вывод информации пользователю, а также познакомиться с базовой структурой программы. Поступим так же.

Есть множество способов что-то вывести на экран в браузере, но мы выберем самый простой. Откроем «Инструменты разработчика» (Developer Tools) в браузере Chrome. Сделать это можно через сочетание клавиш Ctrl + Shift + I или F12 (Cmd + Opt + I на macOS) или через меню браузера. В Google Chrome нужно нажать на три точки, в других браузерах эта настройка может выглядеть иначе. Далее выбираем пункт «Дополнительные инструменты» и «Инструменты разработчика».

У вас должно появиться примерно такое окно, как ниже. Какой именно сайт выбрать для работы, не важно, можете открыть и GeekBrains.

Нас интересует вкладка Console. В ней могут быть ошибки и предупреждения (красные или жёлтые надписи) — не обращайте на них внимания, они нам не помешают. Выполним задание — выведем «Hello, world» на экран. Для этого нам понадобится команда alert(). Она выводит текст, который передан в круглых скобках.

alert("Hello, world")

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

Мы выполнили первое задание — вывели простой текст на экран.

Учимся писать чуть более сложные скрипты

На экране перед нами статичный текст, что не очень интересно. Хотелось бы больше взаимодействия с пользователем. Что, если мы будем спрашивать имя зашедшего на сайт и здороваться с ним?

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

Для создания переменной в JavaScript нужно применить ключевое слово let. Есть и другие, но не будем так глубоко погружаться в детали.

Требования к именованию переменных:

1. Имя переменной не может начинаться с цифры.
2. Имя переменной может содержать только буквы, цифры и символы «$» и «_».
3. Здравый смысл подсказывает нам, что имя переменной должно отражать суть того, что в ней находится.

Создадим простую переменную, поместив в неё имя. Например, Иван.

let name = "Иван" alert("Привет, " + name)

Обратите внимание: мы объединили слово «привет» и переменную. Здесь имеет значение каждый символ: сначала alert, потом открывающая круглая скобка, которая говорит, что дальнейшие инструкции нужно вывести на экран. Затем кавычки, в которых заключён приветственный текст. Далее знак +, который подсказывает программе, что текст справа от знака нужно объединить с тем, что слева. И завершает это закрывающая круглая скобка.

Мы вывели имя из переменной на экран, но ведь было нужно показать имя, которое сообщит пользователь. Исправим это. Нам понадобится команда prompt(). Она задаст пользователю вопрос — запишем его в круглых скобках. Сохраним в переменную результат выполнения команды prompt().

let name = prompt("Введите ваше имя") alert("Привет, " + name) 

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

Сохраняем наш первый скрипт

Мы написали программу (скрипт) в консоли браузера. Это было быстро и просто, но не очень практично — такой программой с пользователями не поделишься. Чтобы сделать это, сохраним программу в файл с расширением *.html. Имя можем дать произвольное. Так как HTML подразумевает определённую структуру контента, нужно её отчасти соблюсти, чтобы всё работало. Понадобятся теги и .

html> script> let name = prompt("Введите ваше имя") alert("Привет, " + name) /script> /html> 

Редактировать и сохранять файлы со скриптами можно с помощью любого текстового редактора. Cамый простой и примитивный — «Блокнот», который поставляется вместе с Microsoft Windows. Есть и специальные редакторы кода, например, Visual Studio Code. В блоге даже выходила специальная подборка редакторов кода JavaScript — выбирайте и дерзайте 🙂

А если хотите извлечь из JavaScript максимум — приглашаем на факультет Fullstack JavaScript-разработки GeekBrains!

С чего начать изучение JavaScript и как это делать эффективно

JavaScript (JS) — это многофункциональный язык программирования. В основном разработчики используют этот язык в вебе. По данным рейтинга W3Techs на ноябрь 2023 года, на JavaScript работает 98% всех сайтов.

JS, наравне с HTML и CSS, используется в создании веб-страниц. С его помощью фронтенд-разработчики придают веб-страницам интерактивность: добавляют различные слайдеры, плашки, кнопки, анимации и тем самым делают сайты удобнее для пользователей.

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

Кроме того, JavaScript используют в этих областях программирования:

• Мобильная разработка
• Разработка игр
• DevOps
• Машинное обучение
• Базы данных

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

С чего начать изучать JavaScript

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

Составьте план обучения

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

Изучите основы языка

• Лексика, синтаксис и семантика — то, без чего вы не освоите ни один язык программирования. На этом этапе вы должны понять, в какой последовательности давать компьютеру инструкции, как выводить информацию на экран и писать простейшие программы на языке JavaScript.
• Типы данных: что такое числа, строки, в чем разница между null и undefined.
• Операторы. Здесь нужно узнать, какие бывают операции и чем они отличаются от операторов, как складывать, вычитать, умножать и делить числа на JS, и в каком приоритете это выполняет программа.
• Переменные: что это такое, зачем они нужны, как изменять переменные и именовать их, как использовать.
• Функции: зачем их используют разработчики, какие бывают функции, что такое их сигнатура, что такое чистая функция и какие у нее особенности.
• Условные конструкции: как строить условия, как выполняется код в зависимости от условия и как строятся сложные условные конструкции.
• Методы, объекты и свойства: в чем особенность каждого понятия, что такое объекты и структуры данных.
• Циклы: для чего они нужны, как их задавать.

Описанные выше темы можно изучать по учебным пособиям, а еще можно воспользоваться бесплатными курсами в Хекслете. Вот некоторые из них:

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

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

Изучите HTML и CSS

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

Лучше всего изучать HTML и CSS параллельно с основами JS. Но здесь важно не переусердствовать и не запутаться в обилии информации. Если вы чувствуете, что в голове появляется «каша» из разных понятий, отложите изучение HTML и CSS и дайте знаниям время для усвоения. Занимайтесь в удобном для вас режиме.

Читайте также:

Установите и настройте редактор кода

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

Вот примеры нескольких редакторов кода с настраиваемым интерфейсом, подсветкой синтаксиса и удобной навигацией:

• Visual Studio Code — редактор со встроенным дебаггером, Git-командами для работы с системой управления версий GitHub.
• Sublime Text — редактор с горячими клавишами, автосохранением, автодополнением.
• WebStorm — редактор, который обеспечивает автодополнение, навигацию по коду, рефакторинг и отладку. Он платный, но очень популярный среди разработчиков.

О том, как настроить редакторы кода на JS, можно почитать в гайдах Хекслета.

Читайте также:

Пробуйте кодить

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

Зайдите на GitHub и найдите там открытый код на языке JS. Выберите из него самый привлекательный для вас фрагмент, скопируйте его и откройте у себя в редакторе. Изучите код, проанализируйте, почему он написан именно в таком порядке, за что отвечает каждая строка. Это хорошая практика, которая вырабатывает насмотренность и структурирует знания.

Найдите в интернете каталог плагинов для JavaScript. Выберите что-то простое, вроде слайдеров, плашек, каруселей и попытайтесь улучшить их код у себя в редакторе. Хорошее упражнение, которое научит вас, как писать JavaScript-код за счет использования сложных языковых конструкций.

Углубите свои знания

По мере вашего развития в программировании вам нужно будет познакомиться с этими понятиями языка JavaScript:

• Асинхронность и событийная модель — одна из «фишек» этого языка программирования. Кто-то ее любит, кто-то ненавидит, но у начинающих разработчиков эта концепция неизменно вызывает сложности. Чтобы стать программистом на JavaScript, нужно уметь работать с циклом событий и коллбеков, стеком вызова и промисами.
• BOM и DOM-дерево — альфа и омега веб-разработки. BOM — объектная модель браузера, а DOM — объектная модель документа. Программист должен знать, из каких элементов состоит веб-страница, какая у нее структура и как разные части взаимодействуют между собой.
• Объекты, классы, основы ООП — теоретический базис разработчика. ООП — это объектно-ориентированное программирование, одна из самых распространенных парадигм. Она предлагает создавать сущности в коде в виде различных объектов. А описывают их через классы — набор параметров и характеристик.
• Помимо самого языка программирования — JavaScript разработчику необходимо освоить популярные библиотеки и фреймворки. Библиотеки — это наборы готовых кусков кода, а фреймворки — каркасы или шаблоны для создания приложений.

Также изучите фреймворки и библиотеки. В JavaScript сейчас популярны:

• jQuery — помогает работать с событиями веб-страницы, а также содержит распространенные функции для использования в DOM, о которой говорили выше. jQuery каждый год хоронят, но за счет своей простоты библиотека не теряет актуальности.
• React — универсальный помощник для разработки пользовательских интерфейсов. У React есть еще версии для мобильной разработки и VR.
• AngularJS — фреймворк, который поддерживает Google. Он эффективен для разработки одностраничных приложений. AngularJS делит их на три отдельных части: модель, вид и контролер, что упрощает процесс написания кода.
• Vue.js — фреймворк с самым высоким рейтингом среди разработчиков и прекрасной документацией. К его особенностям относят простоту шаблонов, которая избавляет программиста от необходимости прописывать каждое действие.

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

Читайте также:

Дополнительная информация

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

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

Какие знания потребуются:

• Что такое протокол TCP/IP, какие у него есть уровни и как каждый из них работает, что такое DNS-зоны и домены.
• Сессии, куки и аутентификация — веб-разработчик должен знать, как приложения взаимодействуют с пользователями.
• База данных — одна из основных частей любого приложения, которое загружает или хранит информацию. Все разработчики используют их в своей деятельности. Нужно понимать, что такое реляционные и нереляционные базы данных, а также понимать типы связи между ними. Рекомендуется выучить основы SQL — языка запросов к базам данных.
• Инструменты разработчика от Chrome — помогают отслеживать маршруты и проводить отладку приложений прямо в консоли. Ими нужно научиться пользоваться.
• TDD — популярная техника разработки. Она предполагает, что крупный проект разбивают на несколько небольших циклов. В каждом сначала создают тесты, проверяющие изменения, а потом вносят их. Нужно понимать основы тестирования и знать об основных принципах этой техники.

Сколько времени нужно, чтобы выучить JavaScript

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

Истории выпускников Хекслета

Меня зовут Виталий. Расскажу, почему я ушел из нефтяной отрасли в фронтенд-разработку, как мой пет-проект придал мне уверенности на собеседованиях и тяжело ли вообще вливаться в IT после 30 лет.

Меня зовут Сергей, мне 39 лет. Расскажу, как я оставил перспективную должность ради IT, почему выбрал для развития бэкенд-разработку и чем помогаю стримерам на Twitch в свободное от работы время.

Соревнуйтесь на Codebattle

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

Codebattle особенно полезен новичкам, потому что он:

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

Если у вас появятся вопросы по кодингу на Codebattle, не стесняйтесь задавать их разработчикам напрямую — это можно сделать в канале по Codebattle в Хекслет Комьюнити. Чаще упражняйтесь в кодинге, постоянно прокачивайте свои знания и у вас все получится!

Изучайте дополнительные материалы

Читайте обучающие статьи на Хабре, учебники, смотрите видеоуроки на YouTube. Есть также много хороших книг по изучению JavaScript. Будет здорово, если вы прочитаете некоторые из них:

• Дэвид Флэнаган «JavaScript. Подробное руководство»
• Дуглас Крокфорд «Как устроен JavaScript»
• Алексей Васильев «JavaScript в примерах и задачах»

У Хекслета есть свой список рекомендованной литературы. Ознакомьтесь с этими книгами — они полезны для программистов любых направлений.

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

Руководство по JavaScript, часть 1: первая программа, особенности языка, стандарты

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

Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».

Hello, world!

Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.

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

Для того чтобы её написать, если вы пользуетесь Google Chrome, откройте меню браузера и выберите в нём команду Дополнительные инструменты > Инструменты разработчика . Окно браузера окажется разделённым на две части. В одной из них будет видна страница, в другой откроется панель с инструментами разработчика, содержащая несколько закладок. Нас интересует закладка Console (Консоль). Щёлкните по ней. Не обращайте внимания на то, что уже может в консоли присутствовать (для её очистки можете воспользоваться комбинацией клавиш Ctrl + L ). Нас сейчас интересует приглашение консоли. Именно сюда можно вводить JavaScript-код, который выполняется по нажатию клавиши Enter . Введём в консоль следующее:

console.log("Hello, world!")

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

После того, как текст программы оказался в консоли, нажмём клавишу Enter .

Если всё сделано правильно — под этой строчкой появится текст Hello, world! . На всё остальное пока не обращайте внимания.

Первая программа в консоли браузера — вывод сообщения в консоль

Ещё один вариант браузерного «Hello, world!» заключается в выводе окна с сообщением. Делается это так:

alert("Hello, world!")

Вот результат выполнения этой программы.

Вывод сообщения в окне

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

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

Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js , которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега . Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself ), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html , и добавим в него следующий код:

Здесь нас больше всего интересует строчка document.getElementById(«hello»).innerHTML = «Hello, world!»; , представляющая собой JS-код. Этот код заключён в открывающий и закрывающий теги . Он находит в документе HTML-элемент с идентификатором hello и меняет его свойство innerHTML (то есть — тот HTML код, который содержится внутри этого элемента) на Hello, world! . Если открыть файл hello.html в браузере, на ней будет выведен заданный текст.

Сообщение, выведенное средствами JavaScript в HTML-элемент

Как уже говорилось, примеры, приводимые на сайте w3school.com, можно тут же и попробовать. Существуют и специализированные онлайн-среды для веб-разработки, и, в частности, для выполнения JS-кода. Среди них, например codepen.io, jsfiddle.net, jsbin.com.

Вот, например, как выглядит наш пример, воссозданный средствами CodePen.

В поле HTML попадает код, описывающий HTML-элемент, в поле JS — JavaScript-код, а в нижней части страницы выводится результат.

Выше мы говорили о том, что JavaScript-программы можно выполнять на различных платформах, одной из которых является серверная среда Node.js. Если вы собираетесь изучать JavaScript, ориентируясь именно на серверную разработку, вероятно, вам стоит запускать примеры именно средствами Node.js. Учтите, что, говоря упрощённо, и не учитывая особенности поддержки конкретных возможностей языка используемыми версиями Node.js и браузера, в Node.js и в браузере будет работать один и тот же код, в котором используются базовые механизмы языка. То есть, например, команда console.log(«Hello, world!») будет работать и там и там. Программы, использующие механизмы, специфичные для браузеров, в Node.js работать не будут (то же самое касается и попыток запуска программ, рассчитанных на Node.js, в браузере).

Для того чтобы запустить наш «Hello, world!» в среде Node.js, установим Node.js, скачав отсюда подходящий дистрибутив. Теперь создадим файл hello.js и поместим в него следующий код:

console.log('Hello, World!');

Средствами командной строки перейдём в папку, в которой хранится этот файл, и выполним такую команду:

node hello.js

Вот каким будет результат её выполнения:

Сообщение, выведенное средствами Node.js

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

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

Общие сведения о JavaScript

JavaScript — это один из самых популярных языков программирования в мире. Он, созданный более 20 лет назад, прошёл в своём развитии огромный путь. JavaScript задумывался как скриптовый язык для браузеров. В самом начале он обладал куда более скромными возможностями, чем сейчас. Его, в основном, использовали для создания несложных анимаций, вроде выпадающих меню, о нём знали как о части технологии Dynamic HTML (DHTML, динамический HTML).

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

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

Основные характеристики JavaScript

JavaScript — это язык, который отличается следующими особенностями:

• Высокоуровневый. Он даёт программисту абстракции, которые позволяют не обращать внимание на особенности аппаратного обеспечения, на котором выполняются JavaScript-программы. Язык автоматически управляет памятью, используя сборщик мусора. Разработчик, в результате, может сосредоточиться на решении стоящих перед ним задач, не отвлекаясь на низкоуровневые механизмы (хотя, надо отметить, это не отменяет необходимости в рациональном использовании памяти). Язык предлагает мощные и удобные средства для работы с данными различных типов.
• Динамический. В отличие от статических языков программирования, динамические языки способны, во время выполнения программы, выполнять действия, которые статические языки выполняют во время компиляции программ. У такого подхода есть свои плюсы и минусы, но он даёт в распоряжение разработчика такие мощные возможности, как динамическая типизация, позднее связывание, рефлексия, функциональное программирование, изменение объектов во время выполнения программы, замыкания и многое другое.
• Динамически типизированный. Типы переменных при JS-разработке задавать необязательно. В одну и ту же переменную можно, например, сначала записать строку, а потом — целое число.
• Слабо типизированный. В отличие от языков с сильной типизацией, языки со слабой типизацией не принуждают программиста, например, использовать в неких ситуациях объекты определённых типов, выполняя, при необходимости, неявные преобразования типов. Это даёт больше гибкости, но JS-программы не являются типобезопасными, из-за этого усложняются задачи проверки типов (на решение этой проблемы направлены TypeScript и Flow).
• Интерпретируемый. Широко распространено мнение, в соответствии с которым JavaScript является интерпретируемым языком программирования, что означает, что программы, написанные на нём, не нуждаются в компиляции перед выполнением. JS в этом плане противопоставляют таким языкам, как C, Java, Go. На практике же браузеры, для повышения производительности программ, выполняют компиляцию JS-кода перед его выполнением. Этот шаг, однако, прозрачен для программиста, он не требует от него дополнительных усилий.
• Мультипарадигменный. JavaScript не навязывает разработчику использование какой-то конкретной парадигмы программирования, в отличие, например, от Java (объектно-ориентированное программирование) или C (императивное программирование). Писать JS-программы можно, используя объектно-ориентированную парадигму, в частности — применяя прототипы и появившиеся в стандарте ES6 классы. Программы на JS можно писать и в функциональном стиле, благодаря тому, что функции здесь являются объектами первого класса. JavaScript допускает и работу в императивном стиле, используемом в C.

JavaScript и стандарты

ECMAScript, или ES, это название стандарта, которым руководствуются разработчики JavaScript-движков, то есть — тех сред, где выполняются JS-программы. Различные стандарты вводят в язык новые возможности, говоря о которых нередко упоминают наименование стандартов в сокращённой форме, например — ES6. ES6 — это то же самое, что и ES2015, только в первом случае число означает номер версии стандарта (6), а во втором — год принятия стандарта (2015).

Сложилось так, что в мире веб-программирования очень долго был актуален стандарт ES3, принятый в 1999 году. Четвёртой версии стандарта не существует (в неё попытались добавить слишком много новых возможностей и так и не приняли). В 2009 году был принят стандарт ES5, который представлял собой прямо-таки огромное обновление языка, первое за 10 лет. После него, в 2011 году, был принят стандарт ES5.1, в нём тоже было немало нового. Весьма значительным, в плане новшеств, стал и стандарт ES6, принятый в 2015 году. Начиная с 2015 года, новые версии стандарта принимают каждый год.

Самой свежей версией стандарта на момент публикации этого материала является ES9, принятая в июне 2018 года.

Итоги

Сегодня мы написали «Hello, World!» на JavaScript, рассмотрели основные особенности языка и поговорили о его стандартизации. В следующий раз поговорим о стиле JavaScript-текстов и о лексической структуре программ.

Уважаемые читатели! Если вы, до чтения этого материала, не были знакомы с JavaScript, просим рассказать о том, получилось ли у вас запустить «Hello, world!».

Разработка кода JavaScript и TypeScript в Visual Studio без решений или проектов

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

Начиная с Visual Studio 2017 вы можете разрабатывать код без проектов и решений. Вы можете открыть папку кода и сразу же приступить к работе в полнофункциональном редакторе, используя IntelliSense, поиск, рефакторинг, отладку и многое другое. Помимо этих функций, в инструменты Node.js для Visual Studio добавлена поддержка сборки файлов TypeScript, управления пакетами npm и выполнения сценариев npm.

Чтобы приступить к работе, выберите Файл>Открыть>Папку на панели инструментов. Обозреватель решений отображает все файлы в папке, и можно открыть любой из файлов, чтобы начать редактирование. В фоновом режиме Visual Studio индексирует файлы, предоставляя функции npm, сборки и отладки.

Прежде чем использовать проект Open Folder, попробуйте создать решение из существующего кода Node.js. В некоторых сценариях этот метод обеспечивает лучшую поддержку функций в Visual Studio. Чтобы создать проект, выберите файл нового проекта > JavaScript > из существующего кода Node.js, а затем выберите папку проекта > в качестве источника.

Необходимые компоненты

• Visual Studio 2017 версии 15.8 или более поздней версии
• Необходимо установить рабочую нагрузку разработки Visual Studio Node.js

Интеграция npm

Если открытая папка содержит файл package.json, щелкните правой кнопкой мыши package.json, чтобы открыть контекстное меню для npm.

В контекстном меню вы можете управлять пакетами, установленными npm, так же, как вы управляете пакетами npm при использовании файла проекта.

Кроме того, в меню можно выполнять сценарии, определенные в элементе scripts в package.json. Эти скрипты будут использовать версию Node.js, доступную в переменной среды PATH . Скрипты выполняются в новом окне. Это отличный способ сборки и выполнения скриптов.

Сборка и отладка

package.json

Если package.json в папке указывает элемент main , команда отладки будет доступна в контекстном меню для package.json. При нажатии этой кнопки запускается node.exe с указанным скриптом в качестве аргумента.

Файлы JavaScript

Вы можете отлаживать файлы JavaScript, щелкнув файл правой кнопкой мыши и выбрав Отладка в контекстном меню. Запустится node.exe с этим файлом JavaScript в качестве аргумента.

Если вы не видите параметр меню отладки , возможно, потребуется создать проект из существующего кода Node.js, как описано ранее.

Файлы TypeScript и tsconfig.json

Если в папке нет файла tsconfig.json, щелкните правой кнопкой мыши файл TypeScript, чтобы открыть команды контекстного меню и скомпилировать и отладить этот файл. При использовании этих команд сборка и отладка выполняются с помощью tsc.exe с параметрами по умолчанию. (Вам нужно создать файл до отладки.)

При создании кода TypeScript мы используем последнюю версию, установленную в C:\Program Files (x86)\Microsoft SDKs\TypeScript .

Если в папке есть файл tsconfig.json, щелкните правой кнопкой мыши файл TypeScript, чтобы открыть команду меню для отладки этого файла TypeScript. Этот параметр отображается только в том случае, если в tsconfig.json не указан outFile . Если outFile указан, для отладки этого файла щелкните правой кнопкой мыши tsconfig.json и выберите нужный параметр. Файл tsconfig.json также предоставляет параметр сборки для указания параметров компилятора.

Модульные тесты

Вы можете включить интеграцию модульных тестов в Visual Studio, указав тестовый корень в файле package.json:

Средство запуска тестов перечисляет локально установленные пакеты, чтобы определить, какие платформы тестирования использовать. Если ни одна из поддерживаемых платформ не распознается, выбирается средство выполнения тестов по умолчанию ExportRunner. Другие поддерживаемые платформы:

• Mocha (mochajs.org)
• Jasmine (Jasmine.github.io)
• Tape (github.com/substack/tape)
• Jest (jestjs.io)

После открытия обозревателя тестов (выберите Тест>Windows>Обозреватель тестов) Visual Studio обнаруживает и отображает тесты.

Средство выполнения тестов перечисляет только файлы JavaScript в тестовом корне. Если ваше приложение написано в TypeScript, вам нужно сначала создать их.