Основы JavaScript. Введение и первая программа

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

Всем привет! Начинаем цикл обучения языку программирования JavaScript «Основы JavaScript». В данной статье познакомимся с языком и напишем первую программу.

Основы JavaScript. Что это такое?

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

Программы, выполняемые на JS, называются скриптами, которые выполняются при загрузке страницы. Непосредственно сам код можно интегрировать внутрь HTML или выносить в отдельные файлы.

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

Основы JavaScript. Код
Основы JavaScript. Код

Вернёмся к движкам. У каждого браузера свой движок. Движков существует несколько и все они имеют свои имена:

  • SpiderMonkey — Mozilla Firefox
  • V8 — Google Chrome и Opera
  • Trident и Chakra — в разных версиях IE
  • ChakraCore — Microsoft Edge
  • Nitro и SquirrelFish — Safari

Возможности JavaScript

В браузере JavaScript может манипулировать веб-страницами, взаимодействовать с пользователем и сервером.

Основные возможности JS:

  • реагирование на действия пользователя (щелчки, клики, перемещения курсора, нажатия клавиш, скролл страницы и тд)
  • изменение существующего содержимого страницы, удаление содержимого, вставка нового HTML и CSS кода
  • получение и установка cookies, отображение сообщений
  • отправка сетевых запросов на удалённые сервера, скачивание и загрузка файлов
  • запоминание данных на стороне клиента (сохранение сессий и тд)

Электронные ресурсы по JavaScript

Несколько самых популярных интернет-ресурсов, с помощью которых можно легко изучать JavaScript, а также узнать о тех или иных особенностях языка:

  • Learn JavaScript — современный учебник JavaScript полностью на русском языке. Очень удобно обращаться к нему в случае изучения любых аспектов языка JavaScript
  • MDN JavaScript Reference (Mozilla) — справочник с примерами и прочей информацией от небезызвестной компании Mozilla.
  • MSDN — справочник от Microsoft, в котором можно найти много информации по JavaScript.

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

Редакторы кода для JavaScript

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

Кстати, про некоторые редакторы мы уже выпускали статьи и даже видео, ознакомиться с нимим вы можете в разделе «Инструменты» или по ссылке. Ну и конечно же, предоставим ссылки на эти материалы отдельно:

Sublime Text

Sublime Text (видео)

Visual Studio Code

Самые популярные редакторы кода для JavaScript:

  • Visual Studio Code — это один из самых популярных редакторов кода в мире. Разработан компанией Microsoft для систем Windows, MacOS и Linux
  • Sublime Text — является одним из самых популярных редакторов кода. В том числе и для веб-разработчиков. Благодаря своему удобству и возможностям точной настройки он довольно прочно закрепился среди самых востребованных редакторов кода.
  • Webstorm — также один из самых популярных редакторов кода. По сути, является IDE («интегрированная среда разработки», то есть редактор с множеством функций, которые работают в рамках целого проекта).

Первая программа на языке JavaScript

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

Однако, прежде, чем мы приступим к написанию программы, сделаем небольшое отступление. Кратко ознакомимся с тем, где будет выводиться результат работы нашей программы, а именно с консолью. Некоторые редакторы кода, вроде Visual Studio Code или Webstorm позволяют запускать код непосредственно в консоли внутри себя. Однако, для этого потребуется установить некоторые расширения. В целом ничего сложно, но в данной статье на этом останавливаться не будем. Об этом будет другая статья.

Разберёмся с тем, как увидеть результат выполнения кода в браузере. Почти все современные браузеры включают в себя инструменты разработчика. А именно, просмотр кода веб-страницы, используемых файлов и тд. Нам же понадобится консоль. Чтобы получить к ней доступ необходимо в любом месте на веб-странице кликнуть правой кнопкй мыши и в контекстном меню выбрать пункт вроде «Просмотреть код элемента».

Контекстное меню браузера
Контекстное меню браузера

Открывшиеся элементы будут выглядеть примерно вот так:

Встроенные в браузер инструменты разработчика
Встроенные в браузер инструменты разработчика

Здесь нам понадобится вкладка Console. К ней мы ещё вернёмся. Настало время написать первую программу. Для начала создадим базовый HTML код в файле index.html:

<!DOCTYPE html>
<html lang="ru">
    <head>
    </head>

    <body>
        <script>
            console.log("Я учу JavaScript")
        </script>
    </body>
</html>

Дальше осталось лишь открыть html файл в браузере и открыть вкладку Console в инструментах разработчика. В качестве результата увидим в консоли строку «Я учу JavaScript».

JavaScript это язык не только для «оживления» веб-страниц, но и для серверной части сайта. Он достаточно прост в освоении в плане синтаксиса, да и в целом (точка с запятой то не требуется, хаха). Смело можно сказать, что если в 2021 году вы решили заняться веб-разработкой, то JS, так или иначе, обойти не получится.

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

nikiteJke
Оцените автора
( Пока оценок нет )
Hack Life
Добавить комментарий