6.1. Основы JavaScript: Структура кода, работа в консоли

 

Прежде, чем изучать уязвимость XSS и методы её эксплуатации/взлома, в первую очередь необходимо освоить основы JavaScript. JS является неотъемлемой частью современных веб страниц, так как позволяет динамически генерировать и изменять содержимое страниц. С помощью него создаются красивые анимации. Кроме того, именно JS позволяет пользователю интерактивно взаимодействовать со страницей.

Чтобы успешно находить и тестировать уязвимости XSS не нужно быть супер крутым программистом.

 

Как использовать консоль браузера в JS

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

Для этого наберите комбинацию Ctrl+Shift+I (одинаковая для Chrome и Firefox) и откройте вкладку Консоль (Console):

Консоль разработчиков на Chrome

Консоль разработчиков на Firefox

 

Теперь попробуйте ввести данный код:

let name = "Анна";console.log("Привет, " + name + "!");

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

Однако, данный способ не всегда удобен, поэтому рассмотрим другой способ.

 

Подключение JS к веб-странице

В этот раз мы сохраним код в файле, а сам файл будем открывать в браузере, то есть мы просто создадим локальную веб страницу с расширением .html. Для этого откройте простой текстовый редактор Блокнот (Notepad). Вы можете также использовать специальные редакторы, как Visual Studio Code, Notepad++ и другие. Они очень удобны для редактирования кода на различных языках программирования. Затем введите предыдущий код, заключенный между тегами <script> …</script>

 

<script>let name = "Анна"; console.log("Привет, " + name + "!"); </script>

 

 Затем сохраните файл с расширением .html. Запустите файл, откройте панель разработчика с помощью Ctrl+Shift+I и вкладку Console:

Результат работы сркипта в консоли

 Как видите, код был успешно выполнен. Данный метод используется повсеместно, то есть, создается HTML страница, а в нее встраивается JavaScript код (inline code), который в браузере не отображается. Подобный подход удобен для небольшого кода, однако на практике часто используют другой подход. Необходимый скрипт сохраняют в отдельных файлах с расширением .js, а затем данные файлы подключают к HTML странице. В той же папке, что и HTML файл, создадим еще один файл с помощью Блокнота и сохраним в нем уже знакомый нам код, однако в этот раз мы удалим теги <script> и </script>. Сохраняем файл с расширением .js. Данные теги используются только в файла с расширением .html или .htm. Теперь открываем HTML файл, удаляем предыдущий код JS и вставляем следующую строку: 

<script src="/script.js"></script>

 Атрибут src (source=источник) указывает, где хранится файл со скриптом для его последующей загрузки. Браузер скачивает файл и затем исполняет код. В принципе — это равносильно предыдущему подходу только в данном случае мы разделяем HTML и JavaScript коды, а не мешаем в одной куче. Мы можем создать несколько файлов со скриптами и затем последовательно их подключить в HTML файле.

 

Структура кода

Структура кода стандартна и проста:

инструкция_1;инструкция_2;инструкция_3;функция_1() {различные инструкции}функция_2() {различные инструкции}

Состоит код из инструкций, которые выполняются последовательно. Инструкции представляют собой указания что делать, например, присвоить переменную, выполнить арифметическую операцию или просто вызвать функцию. В конце инструкций обязательно наличие точки с запятой.

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

 

Переменные

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

Чтобы создать переменную, нужно использовать ключевое слово var или let, а затем дать ей имя. Например:

var имяПеременной;let другаяПеременная;

Вы можете присваивать переменным значения, используя оператор =. Например:

имяПеременной = 5;другаяПеременная = "Привет!";

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

 

Функции

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

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

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

Для создания и объявления функции достаточно указать оператор function, после которого следует придуманное вами имя функции. Затем внутри фигурных скобок {…} пишете инструкции для выполнения.

Для наглядности приведу пару примеров.

Пример 1. Суммирование двух чисел:

function sum(a, b) {  return a + b;}let result = sum(5, 3); // Вызываем функцию sum с аргументами 5 и 3console.log(result); // Выведет 8

В этом примере мы создали функцию sum, которая принимает два аргумента a и b, складывает их и возвращает результат. Затем мы вызываем эту функцию с аргументами 5 и 3, получаем сумму и выводим результат на экран. Для возврата результата вычислений используется оператор return.

Пример 2. Приветствие:

function hello(name) {     return "Привет, " + name + "!";}let message = hello("Вася");console.log(message); // Выведет "Привет, Вася!"

В этом примере функция hello принимает аргумент name и возвращает приветственное сообщение с этим именем. Мы вызываем функцию с аргументом "Вася" и выводим полученное сообщение.

Упражнение 1. Напишите функцию, которая вычисляет площадь окружности и возращает результат вычисления. Вызовете функцию, передав ей радиус окружности, а результат выведете в консоли. Формула площади: S=3.14*R2.