PS-Studio.info

Веб и веб-технологии

ABC 21.01.2020 в 15:34

Хочу изучать JavaScript! C чего начать? Подготовка рабочей среды для работы.



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

Для этого переходим на официальный сайт и скачиваем последнюю версию программы для вашей операционной системы (выбирайте левую кнопку с надписью Recommended For Most Users).
После того, как установочный файл скачается, запустите его и установите на свой компьютер. Проверить, установлен ли Node.js на компьютере, можно, выполнив в командной строке команду

node -v

если Node.js установлен, вы увидите в консоли версию установленной программы, например:

v12.14.0

Установленный Node.js даст нам возможность использовать пакетный менеджер npm, с помощью которого мы сможем устанавливать различные плагины, которые сделают нашу работу более удобной.
Кстати, аналогично, в консоли можно посмотреть версию для установленного npm-менеджера

npm -v

у меня, например, выдало следующую информацию:

6.13.4

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

Atom

Brackets

Notepad++

Sublime Text

Visual Studio Code

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

Какой из редакторов выбрать, пожалуй, решать вам. Попробуйте установить разные редакторы и сравнить, насколько удобно работать в том или ином из них, думаю, вы сразу поймёте что из них ваше!
Какие плагины устанавливать в выбранный вами редактор кода и как? Думаю, для вас не составит особого труда прогуглить данный вопрос, к примеру: "Лучшие плагины для Atom", "Как устанавливать плагины в Atom". В интернете масса материала по данным запросам.

Например, неплохая подборка по Atom есть тут.
Неплохой обзор для Brackets можете посмотреть тут
Отличный видеообзор по Visual Studio Code здесь
Гайд по Sublime Text можно просмотреть здесь

Работа с консолью браузера + плагин Live Server для VS Code

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

Как установить Live Server в Visual Studio Code?

Первым делом, для вашего проекта создайте папку, поскольку Live Server работает только с папками. Допустим, я создал папку, назвал её myproject, внутри неё создал html-файл index.html с произвольным содержимым. Также создал в этой же папке файл нашего скрипта script.js и подключил его на странице в секции head:

Код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src = "script.js"></script>
</head>
<body>
  <h1>Моя тестовая страница</h1>
</body>
</html>


Теперь, запускаем Visual Studio Code и слева на панели выбираем иконку Extensions (Расширения). В поле поиска вверху вводим live server, видим в списке нужный нам плагин и жмём зеленую кнопочку Install.



После установки открываем в проводнике Visual Studio Code нашу папку с проектом, открываем файл index.html и видим что у нас появилась кнопочка Go Live в правом нижнем углу окна, это значит наш плагин установился и работает.



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



Если нужно остановить работу Live Server, просто нажмите на кнопку с иконкой зачёркнутого круга и надписью Port:5500.  

Live Server нам нужен для удобства, в том плане, что очень удобно работать с кодом в редакторе и тут же видеть изменения в браузере. Мелочь, а приятно.

Я работаю с браузером Opera, вы можете работать со своим любимым браузером. Сейчас нас интересует такая вещь, как консоль разработчика.
В браузере Opera она открывается комбинацией клавиш Ctrl + Shift + I, либо через Меню - Разработка - Инструменты разработчика
Настроить отображение консоли вы можете, нажав на иконку с тремя вертикальными точками в правом верхнем углу консоли



и далее в выпавшем окне выбрать вариант отображения консоли: внизу, справа и т.д. В консоли нас интересует вкладка Console, в которой мы сможем отсматривать результаты вывода в консоль команд из нашего скрипта.
Чтобы вывести что-то в консоль, в скрипте используется команда:

Код
console.log(здесь то, что нужно вывести в консоль);


например, в файле скрипта я набрал:

Код
console.log(4/0);


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



Таким образом, в консоли мы можем смотреть не только результат работы скрипта (вывод данных в консоль), но и ошибки, допущенные при написании скрипта (а они непременно будут, особенно на начальном этапе).
Например, на скриншоте ниже в консоли отображена ошибка из-за того, что в скрипте в скобках строка не обёрнута в кавычки



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

Добавлять комментарии могут только зарегистрированные пользователи.