В этой статье предполагается, что читатель ничего не знает о том, как работают веб-сайты. Нет никаких предпосылок для прочтения этой статьи.
Я избегал использования каких-либо официальных определений, чтобы это выглядело как история.
К концу этой статьи вы:
- Сможете оценить работу, которую HTML, CSS и JavaScript делают для нас
- Уметь объяснить процесс создания веб-сайта с нуля.
- Четко разграничивайте работу HTML, CSS и JavaScript
Давайте начнем с основного различия между веб-сайтами и веб-приложениями, поскольку в будущем я могу использовать их взаимозаменяемо.
- Веб-сайт. В основном содержит статический контент. В основном для отображения информации конечному пользователю.
- Веб-приложения. Веб-приложение предназначено для взаимодействия с конечными пользователями. Это может быть игра, приложение для отслеживания расходов, список дел и так далее.
Теперь давайте посмотрим, как создается веб-приложение с нуля.
- Мальчик по имени Элон хочет создать веб-приложение, которое принимает два числа и возвращает результат их суммы.
- Например. Пользователь вводит два ввода: 2, 3 ; так что результат будет (2 + 3 = 5)
Что даст Илону HTML? 🤔
- Он сможет создать структуру всего приложения с помощью HTML.
- Структура будет включать предоставление двух полей ввода пользователям для ввода двух чисел и кнопку вычисления суммы, которую пользователи могут щелкните, чтобы отобразить результат.
- Структура также предоставит некоторое пространство для отображения вывода.
Что сделает CSS для Илона? 🤔
- Он сможет украсить приложение: добавляя цвета, устанавливая пробелы между полями ввода и т. д. с помощью CSS.
- Улучшение будет включать в себя создание пространства между двумя полями ввода, добавление цвета фона, стилизацию кнопки вычисления суммы и так далее.
- Это важный шаг, так как Илону нужно удобное веб-приложение, в котором каждый мог бы легко перемещаться.
- Если украшение не сделано должным образом, многие люди могут столкнуться с проблемами при навигации по веб-приложению.
Что даст Илону JavaScript? 🤔
- Он сможет сделать веб-приложение интерактивным, добавив различные функции, которые будут выполняться, когда пользователь нажимает кнопку с помощью JavaScript.
- Кнопка вычисления суммы, которая была создана с помощью HTML, теперь будет сделана интерактивной, так что всякий раз, когда пользователь нажимает на нее после ввода ввода, отображается результат.
- Вся логика сложения также будет находиться внутри функции, которая выполняется, когда пользователь нажимает кнопку вычисления суммы.
В целом можно сказать: представьте себе человеческое тело. Затем :
HTML — это скелет, CSS — это тело, а JavaScript заставляет тело двигаться. 💻
Вот как, используя HTML, CSS и JavaScript, Илон сможет создать свое веб-приложение. 👩🏻💻