Александр Дудукало

Привет! Я — Александр Дудукало, автор базового курса по JavaScript. Сегодня JavaScript — это один из самых популярных языков программирования, который добавляет интерактивности и динамичности веб-сайтам. С помощью него можно разработать «что угодно»: от простых элементов управления до сложных веб-приложений. В тексте расскажу об основах JavaScript. По ходу работы мы напишем свою первую программу в редакторе Visual Studio Code и изучим такие операции, как присвоение данных в переменных, ввод и вывод информации. Инструкция подойдет новичкам без опыта в программировании. Рабочее окружение Для работы нам потребуется редактор кода или среда разработки — например, Visual Studio Code, WebStorm или Sublime Text 4. В тексте будем использовать первый вариант: он бесплатный и поддерживает огромное количество плагинов. Перед началом работы создаем папку на рабочем столе — название можно выбрать любое, в нашем случае project. Далее переходим в Visual Studio Code и запускаем новый проект. Наш первый проект. Редактор кода автоматически поддерживает функцию быстрого ввода кода. Вместо того, чтобы печатать HTML и CSS-код вручную, пишем аббревиатуры и нажимаем TAB. А чтобы создать простую разметку, используем сочетание клавиш ? и TAB. Далее меняем название внутри тега его содержимое . Важно, чтобы он отражал суть проекта или название страницы. Ради примера указываю Document, но вы можете назвать его по-своему. Не забываем сохранять file → save. Наш HTML-файл. Теперь создаем JavaScript-файл, точно так же как и HTML-файл main.js. Подключаем JavaScript к HTML с помощью тега и укажем название файла: Настало время написать нашу первую программу! Переходим в файл main.js и вводим команду console.log(). Она предназначена для вывода информации в консоль браузера. Вывод информации в браузере. Запускаем код! Для этого нам понадобится Live Server — плагин для Virtual Studio Code. Чтобы его установить, переходим во вкладку Extensions, вводим название плагина в поиск, выбираем open live server → install. После установки нажимаем на index.html ПКМ → Open with Live Server. Кнопка Open with Live Server. Переходим в браузер и открываем консоль любым удобным способом: с помощью клавиши F12, сочетания Ctrl + Shift + I или нажатия на пустое место в разделе контекстное меню → Посмотреть код. Далее открываем вкладку Console. Вывод информации в консоль браузера. Готово, мы написали первую программу! Двигаемся дальше. Вывод Разберем, что такое ввод и вывод. Представим, что у компьютера есть так называемые «органы чувств» — то, как он воспринимает информацию и выдает ответ. Такой механизм работы называется отображением информации, а точнее — выводом. Например, когда компьютер показывает какое-то изображение на экране. Вывод информации в нашем случае — это вывод текста в консоль браузера. Для этого мы использовали команду console.log(). Напишем еще один вывод: «Я стану хорошим программистом» — текст, который компьютер выводит в консоль. console.log() — не единственная команда вывода информации. Есть еще alert(), вывод информации в новом окне, и document.write(), вывод информации в документ. Хочу упомянуть, что на этом возможности вывода не ограничиваются. С его помощью можно создать HTML-заголовок: Как видите, мы создали HTML-тег с помощью JavaScript. Кавычки Двойные кавычки обозначают текстовое поле в коде. Можно использовать как одинарные кавычки 'текст', так и обратные `текст`. Однако важно понимать, что если мы будем использовать разные кавычки или писать текст за их пределами, то синтаксис будет неверным и программа не запустится. Если коротко, то одинарные кавычки практически ничем не отличаются от двойных. Их удобно использовать, если в выводимой строке присутствуют кавычки в самом содержании, например, как в этой цитате: Обратные кавычки позволяют расширять вывод информации и добавлять в строку вставки с выражениями. А с помощью шаблонной строки ${} можно использовать сложение, вычитание, умножение и деление в наших командах. Переменные Теперь разберем, что такое переменные. Представим пустую коробку. Мы можем что-либо в нее положить, достать или оставить на хранение. Переменные работают по такому же принципу: предоставляют место, где можно хранить свои данные. Переменные — именованные хранилища данных. Пользователи могут присвоить им значения и получить хранящуюся в них информацию, обратившись по имени. Чтобы создать переменную, мы используем ключевое слово let. Указываем имя, чтобы в них не запутаться. let — команда, создающая переменную, age — ее имя. В именовании переменных есть правила, которые помогают избежать ошибок при выполнении. Конкретные имена по назначению переменной можно давать только на английском языке. Пример: box. Спецсимволы нужно использовать с осторожностью, чтобы не возникала ошибка синтаксиса. Создаем переменную: Присвоение — это сохранение значения в переменную. 18 — значение, которое мы сохранили в переменную age. Теперь выводим нашу переменную с уже знакомой командой console.log(): В console.log() можно писать значения и переменные через запятую. В переменной можно присваивать не только числа, но и строки. Попробуем изменить наш код: Также можно выполнять математические операции: Можно выполнить операцию со своим годом рождения, чтобы лучше понять, как это работает. Ввод Мы уже узнали, как компьютер может выводить информацию, теперь поговорим о вводе. Напишем простую программу, которая покажет наши данные: имя и возраст. Ввод — отправка информации компьютера пользователям для выполнения заданных операций Используем promt(); — команду для ввода текстовой информации. Когда программа становится больше, контролировать код нужно с помощью комментариев на начальном этапе обучения. // — это спецсимвол для обозначения комментария. Обычно мы их используют, чтобы описать работу кода. Таким образом, можно понять что делает та или иная строка. Дополнительно можно улучшить или изменить нашу программу. Допустим, мы хотим научить программу считать возраст. Для этого добавим новую функцию Number(), которая умеет преобразовывать строку в число. Переименовываем переменную enterAge в enterYear. Далее создаем переменную currentYear и calcAge, в последнюю добавляем метод Number(). Внутри него размещаем переменную enterAge. JavaScript — это динамический язык программирования. Подробнее к этому вернемся к следующей части, а пока запомним, что синтаксис не может выполнять сложение строк и чисел. Например, если сложим строку '1' + 1, то получим совсем не тот результат, который хотели. Но с помощью метод Number() можно преобразовать эту строку в число. Заключение Подведем итоги. Сегодня мы установили рабочее окружение, познакомились с HTML, написали первую программу, вывели информацию в консоль браузера и создали переменные. Это начальные базовые знания и навыки, который помогут вам решать простейшие задачи в создании веб-страниц. В следующем шаге узнаете, как использовать функции и почему они так полезны.

Александр Дудукало

Материалы автора