Основы кибербезопасности 2025
MOOC.fi
Module 2.2

Веб-приложения, продолжение...

Динамическое содержимое в браузере

Страницы, которые показываются пользователю, определяются с помощью языка HTML. Один HTML-документ состоит из вложенных и последовательных элементов, которые определяют структуру и содержимое страницы.

Каждый элемент может содержать атрибуты, у которых может быть одно или несколько значений. Например, элемент input обычно имеет атрибут name, и значение этого атрибута затем используется для идентификации данных из этого элемента input при отправке на сервер. Среди других распространенных имен атрибутов есть id, который используется для определения уникального идентификатора элемента, и class, который используется для определения классификации этого элемента.

JavaScript

Хотя HTML — это язык для определения структуры и содержимого веб-страницы, JavaScript — это язык для определения динамического содержимого страницы. JavaScript является языком программирования и, как почти любой язык программирования, выполняется по одной команде за раз: сверху вниз, слева направо.

Имена файлов JavaScript обычно заканчиваются на .js, и они подключаются к HTML-странице с помощью элемента script. У элемента script есть атрибут src, который определяет расположение файла исходного кода. Также код можно добавить непосредственно в HTML, окружив его тегами <script>.

Файлы исходного кода JavaScript можно хранить в каталоге, предназначенном для статических файлов (там же, где CSS-файлы или изображения); см. документацию. Каталог, специфичный для приложения, обычно выглядит примерно как pages/static/, но также можно настроить глобальный статический каталог. Настройка выполняется в config/settings.py. Чтобы получить доступ к файлам из шаблона, нужно добавить к ним префикс пути, указанный в settings.py, обычно static/. Например, <script src="static/javascript/code.js"></script>, или можно использовать тег {% static %}.

Предположим, что файл code.js имеет следующее содержимое, то есть функцию, которая показывает всплывающее окно alert с текстом "Hello there!".

function sayHello() {
    alert("Hello there!");
}

Файл JavaScript можно подключить к HTML-сайту следующим образом. Обратите внимание, что мы загружаем файл JavaScript в конце документа. Это делается и для того, чтобы браузер успел разобрать страницу перед подключением кода JavaScript, и для того, чтобы избежать блокирующей загрузки содержимого.

<!DOCTYPE html>
<html>
    <head>
        <title>Title (shown in the browser bar)</title>
    </head>
    <body>
        <header>
            <h1>Title on the page.</h1>
        </header>

        <article>
            <p>Text content (within a paragraph, p). By pressing
            the button below, a javascript function "sayHello" is called.</p>
            <input type="button" value="Boom!" onclick="sayHello();" />
        </article>

        <!-- Ask the browser to load the Javascript -->
        <script src="static/javascript/code.js"></script>

    </body>
</html>

Изменение содержимого страницы с помощью JavaScript

К каждому элементу веб-страницы можно обратиться и изменить его с помощью JavaScript. Конкретные элементы можно идентифицировать с помощью метода querySelector. Он позволяет находить элементы по значению атрибута id (обозначается решеткой), а также по значению атрибута class (обозначается точкой). Если существует несколько элементов с одним и тем же class, используется querySelectorAll.

<!DOCTYPE html>
<html>
    <head>
        <title>Title (shown in the browser bar)</title>
    </head>
    <body>

        <article>
            <input type="text" id="content" value="0"></input></p>
            <input type="button" value="Add!" onclick="increment();" />
        </article>

        <!-- Ask the browser to load the Javascript -->
        <script src="static/javascript/code.js"></script>

    </body>
</html>

В HTML-документе выше поле input можно идентифицировать по значению id "content". С помощью JavaScript значение поля можно изменить следующим образом.

function increment() {
    document.querySelector("#content").value = "new value";
}

Эта функциональность изменит значение поля на "new value", что не совсем соответствует обещанию функции. Мы также можем изменить функциональность так, чтобы она увеличивала предыдущее значение на один.

function increment() {
    var value = Number(document.querySelector("#content").value) + 1;
    document.querySelector("#content").value = value;
}

Установка значения как части текста

В предыдущем примере был изменен атрибут value текстового поля. Однако у некоторых элементов нет атрибута value. Вместо этого у некоторых элементов значение находится внутри самого элемента. Значение внутри элемента можно изменить, например, с помощью параметра innerHTML элемента.

Например, можно создать простой валидатор, который проверяет, что поле input не пустое.

<!DOCTYPE html>
<html>
    <head>
        <title>Title (shown in the browser bar)</title>
    </head>
    <body>

        <article>
            <p>Type in your username</p>
            <p id="error"></p>
            <input type="text" id="content"></input></p>
            <input type="button" value="Add!" onclick="validate();" />
        </article>

        <!-- Ask the browser to load the Javascript -->
        <script src="static/javascript/code.js"></script>

    </body>
</html>
function validate() {
    var content = document.querySelector("#content").value;
    if(!content) {
        document.querySelector("#error").innerHTML = "No content to process";
        return;
    }

    // do something else
}

Добавление элементов на страницу

Новые элементы можно создавать с помощью функции createElement. В примере ниже создается новый элемент p, в него добавляется текстовое содержимое. В конце абзац добавляется в элемент с id "messages".

var paragraph = document.createElement("p");
var textContent = document.createTextNode("content");

paragraph.appendChild(textContent);

document.querySelector("#messages").appendChild(paragraph);

Формат данных JSON и получение данных с сервера

Объекты и данные в JavaScript обычно представляются с помощью формата JavaScript Object Notation (JSON). Формат по сути следует структуре ключ: значение, где переменные разделяются запятыми. Определение объекта начинается и заканчивается фигурной скобкой. Например, человека можно представить следующим образом.

var person = {name: "Jack Bauer", age: 24};

Предположим, что на странице есть элемент с id "user". Данные о человеке можно добавить на страницу динамически. Значения переменных можно получать с помощью точечной нотации.

var person = {name: "Jack Bauer", age: 24};
document.querySelector("#user").innerHTML = person.name;

Часто нужно получить данные с сервера. Это можно сделать с помощью объекта XMLHttpRequest следующим образом.

var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var response = JSON.parse(xmlHttp.responseText);
        document.querySelector("#content").value = response.setup + " " + response.punchline;
    }
}
xmlHttp.open("GET", "https://official-joke-api.appspot.com/random_joke", true);
xmlHttp.send(null);

В примере выше выполняется запрос к адресу "https://official-joke-api.appspot.com/random_joke". Когда ответ получен, он обрабатывается, и содержимое из ответа показывается пользователю в элементе с id "content".

Возврат JSON-данных из веб-приложения

Представления Django также могут возвращать JSON-данные. Это делается с помощью JsonResponse.

# views.py
from django.http import JsonResponse

def taskView(request):
    return JsonResponse({'name' : 'Book of Eli', 'author' : 'Eli'})
Loading
Вы дошли до конца этого раздела! Перейти к следующему разделу:
2. Данные имеют ценность — сохраним их!

Не забудьте проверить свои баллы в индикаторе в правом нижнем углу материала!