В этом блоке вас ждет введение в программирование с помощью JavaScript (JS) для того чтобы вы могли познакомиться с основами программирования и понять вектор развития во фронтенд разработке. Изучим синтаксис и организацию кода.
JavaScript — это язык программирования, который используется для создания интерактивных веб-страниц, десктопных и мобильных приложений.
Для того чтобы запускать код JS нам потребуется дополнительная программа node.js
Перейдите по ссылке и скачайте приложение к себе на компьютер: https://nodejs.org/en/
Установите файл на компьютер, следуя инструкции инсталятора.
Чтобы проверить корректно ли запустила node.js нам понадобится командная строка. Что бы вызвать командную строку нажмите:
для Windows: Найдите иконку поиска в панели задач и нажмите на неё. В строке «Поиск в Windows» введите фразу «Командная строка» или просто «cmd». Нажмите клавишу «Enter» для запуска командной строки
для macOs: В Launchpade (список всех программ) в поиске наберите «terminal». Нажмите клавишу «Enter» для запуска командной строки
В командной строке вводим «node -v» и нажимаем enter
В моем случае установлена версия «v20.16.0» у вас эти цифры могут отличаться. Зависит от того, какая версия стоит на вашем компьютере.
Далее запустим node.js командой «node».
*после каждой введенной команды нужно нажимать enter, чтобы команда запустилась. Поэтому далее по тексту я не буду это упоминать каждый раз.
Видим приветственное сообщение от node.js
Далее в командной строке пишем «console.log(‘hello!’)»
Видим, что команда сработала и вывела нам нужный текст. Значит всё работает корректно.
Перейдем сразу к практике
Откройте папку с проектом Академии в VS Code.
С помощью кнопки «Создать папку» создайте новую папку в проекте с названием js. В ней будут храниться все ваши файлы с разрешением .js
Внутри папки js создайте файл с названием main.js
Попробуем посмотреть работу js кода через консоль. Для этого нам нужно на консоле попасть в папку с проектом.
Но перед этим необходимо остановить работу node в консоли.
Нажмите сочетание клавиш Ctrl+C два раза.
Командой «clear» можно полностью очистить содержимое консоли.
В консоле наберите команду «cd путь до вашей папки»
У меня это будет «cd /Users/natali_sohareva/Desktop/Фронтенд-разработчик/Academy» Путь к папке можно скопировать нажав ПКМ на самой папке.
После нажатия на enter вы увидите, что теперь новая строка показывает вам в какой папке вы находитесь.
В моем случае это папка «Academy»
Команда «ls» позволяет нам посмотреть содержимое папки
Наш js файл лежит в папке js, поэтому нам нужно переместиться в эту папку.
С помощью команды «cd js» перемещаемся в папку js и проверяем содержимое папки командой «ls»
Отлично, мы в нужной папке с нужным нам файлом.
Теперь запустим main.js с помощью node.js через консоль
Пишем команду «node main.js» и видим, что ничего не произошло.
Это потому что в файле main.js нет никаких записей.
Добавим код в файл и сохраним изменения.
и еще раз введем команду в консоли:
Видим, что команда отобразилась в консоли.
Теперь откроем наш файл index.html и добавим в системный тег head новую строчку, для подключения файла js
И откроем наш сайт в браузере. В визуальной части сайта нет никаких изменений, но нам нужно зайти в панель управления во вкладку «Console» и там мы увидим, что наш код работает.
В этом уроке мы попробовали поработать с новыми программами и посмотрели как можно проверять работу кода JS. В следующих уроках мы познакомимся с минимальным набором кода JS для работы с веб-сайтами.
В следующих уроках мы не будем использовать консоль для проверки кода, а будем проверять его в консоли браузера. Пример работы с консолью, встроенной в компьютер, нужен для понимания различных способов проверки работы.