Изучение JavaScript и HTML для создания динамических сайтов

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

Например, для создания простого приложения, которое предлагает пользователю ввести своё имя и выводит его на экране, можно использовать следующий код на HTML и JavaScript:

html



	


	
Приветствую Вас!
	
Введите своё имя:
	
	Нажмите, чтобы продолжить
	

	

В этом примере мы использовали форму, состоящую из поля ввода и кнопки, на которую можно нажать. Когда пользователь вводит своё имя и нажимает кнопку, вызывается функция `greet()`. Она получает значение поля ввода с помощью метода `getElementById()` и создаёт приветствие, которое затем выводится на экран с помощью метода `innerHTML`. Программа может быть расширена многими способами, используя множество функций и методов на JavaScript.

Теперь давайте рассмотрим более сложный пример, который предполагает взаимодействие с веб-сервером. Разработаем простое приложение-калькулятор, которое будет принимать два числа, выполнять математические операции и отображать результат на экране. Для этого нам потребуются следующие функции, которые будут обрабатывать отправку запроса, получение и парсинг ответа:

javascript
function sendData() {
    // Создаем новый XMLHttpRequest объект, который будет отправлять HTTP запрос
    var xhr = new XMLHttpRequest();
    // Устанавливаем функцию, которая будет вызвана при изменении состояния запроса
    xhr.onreadystatechange = function() {
        // Если состояние запроса – "DONE" (4), значит ответ готов
        if (xhr.readyState === XMLHttpRequest.DONE) {
            // И обаботка завершена без ошибок
            if (xhr.status === 200) {
                // Получаем ответ в виде текста и вызываем функцию обработки
                handleResponse(xhr.responseText);
            } else {
                console.log('Ошибка', xhr.status);
            }
        }
    }
    // Получаем значение первого поля ввода по id
    var firstNumber = document.getElementById("firstNumber").value;
    // Получаем значение второго поля ввода по id
    var secondNumber = document.getElementById("secondNumber").value;
    // Получаем выбранный тип операции по id выбора
    var operation = document.getElementById("operation").value;
    // Формируем строку запроса с использованием полученных значений
    var url = "http://myserver.com/calculate?firstNumber=" + firstNumber + "&secondNumber=" + secondNumber + "&operation=" + operation;
    // Открываем соединение к серверу, указываем метод - GET
    xhr.open('GET', url, true);
    // Отправляем запрос на сервер
    xhr.send(null);
}
function handleResponse(responseText) {
    // Получаем элемент на странице для вывода результата
    var resultElement = document.getElementById("result");
    // Парсим JSON-ответ с помощью встроенной функции JSON.parse()
    var response = JSON.parse(responseText);
    // Если ответ содержит ошибку, выводим её на экран
    if (response.error) {
        resultElement.innerHTML = response.error;
    } else {
        // Иначе, выводим результат
        resultElement.innerHTML = response.result;
    }
}

Код на HTML будет таким:

html



	


	
Калькулятор
	
Введите два числа и выберите операцию:
	
	
	
		Сложение
		Вычитание
		Умножение
		Деление
	
	Выполнить
	
Результат:
	

	

Тут мы использовали несколько функций: `sendData()`, которая формирует строку запроса и отправляет его на сервер с помощью метода `XMLHttpRequest`; и `handleResponse()`, которая получает ответ от сервера, парсит его и отображает результат на экране. Чтобы можно было извлечь данные из JSON-ответа, мы использовали встроенную функцию `JSON.parse()`.

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