Что лучше html или javascript

HTML против JavaScript — 8 полезных сравнений, которые нужно знать

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

JavaScript

JavaScript был спроектирован Бренданом Айхом, который появился впервые в 1995 году. JavaScript был стандартизирован и поддерживается группой ECMA (Европейская ассоциация производителей компьютеров), которая называется ECMAScript как его «стандартизированное имя». Для интерпретации и запуска требуется механизм JavaScript. код JavaScript, который теперь доступен в большинстве веб-браузеров как на стороне сервера, так и на стороне клиента.

HTML был первоначально выпущен в 1993 году. HTML 5.2 является последней версией на данный момент. HTML разрабатывается совместно W3C (World Wide Web Consortium) и WHATWG (Рабочая группа по технологиям веб-гипертекста). Расширения имени файла могут быть .html или .htm, обычно используется .html. Внешний вид HTML также можно изменить и улучшить, добавив CSS (каскадные таблицы стилей), который является языком таблиц стилей и поддерживается только W3C. CSS делает внешний вид и внешний вид веб-страниц насыщенными и улучшенными за счет загрузки или включения содержимого в HTML.

Сравнение лицом к лицу между HTML и JavaScript

Ниже приводится сравнение 8 лучших между HTML и JavaScript

Ключевые различия между HTML и JavaScript

Вот разница между HTML и JavaScript

HTML имеет различные типы элементов для представления различных форм данных, отображаемых на веб-страницах, тогда как JavaScript — это язык сценариев, который делает статический HTML-контент динамичным.
HTML просто предоставляет то, что должна отображать веб-страница, а не как, тогда как JavaScript обеспечивает функциональность отображения данных в соответствии с требованиями пользователя.
HTML требует CSS для правильного форматирования и отображения данных в структурированном формате, тогда как JavaScript обеспечивает динамическую функциональность путем интеграции в код HTML.
Стандарты HTML используются для разметки веб-контента, тогда как JavaScript обеспечивает функциональность программирования для HTML и CSS, аналогичную возможности создания объектов с помощью HTML и манипулирования ими с помощью JavaScript на основе ввода пользователя.
HTML имеет различные типы тегов, такие как теги заголовка, теги абзаца, теги разрыва строки, горизонтальные линии, центрирование содержимого и т. Д., В то время как JavaScript имеет различные встроенные функции для определения и манипулирования данными в форме объектов, которые наследуются на основе прототипов в объектно-ориентированного программирования.
HTML имеет элемент, который можно определить как начальный элемент или начальный тег (

) с закрывающим или завершающим тегом с именем элемента, которому предшествует косая черта (

Сравнительная таблица HTML и JavaScript

Ниже приведено подробное сравнение HTML с JavaScript

Вывод — HTML против JavaScript

HTML предоставляет соответствующие API для HTML и XHTML, который является расширенной формой HTML. HTML предоставляет фактический контент, тогда как JavaScript обеспечивает интерфейс для взаимодействия конечных пользователей, генерируя динамический контент для пользователей.

HTML в основном используется для предоставления статического веб-контента, тогда как JavaScript обеспечивает динамическую среду для обработки динамических событий на веб-страницах. У HTML нет вспомогательных библиотек, тогда как у JavaScript есть мощные библиотеки, такие как AngularJS, ReactJS, ExtJS, Vue JS и т. Д., Которые обеспечивают сверхбыстрые и многофункциональные веб-приложения.

HTML vs CSS vs JavaScript Explained

Curated backend podcasts, videos and articles. All free.

If you’re looking to become a backend developer, or just stay up-to-date with the latest backend technologies and trends, you found the right place. Subscribe below to get a copy of our newsletter, The Boot.dev Beat, each month in your inbox. No spam, no sponsors, totally free.

HTML, CSS, and JavaScript are the most important tools in your arsenal for all your web design escapades. Rather than compete, they complement and augment each other, and their power expounds when they’re combined – like internet Power Rangers.

JavaScript brings HTML to life, CSS makes HTML beautiful, and HTML gives JavaScript and CSS their structure on a web page. Here we’ll run through the major differences between HTML, CSS, and JavaScript as programming languages.

When they combine forces they’re unstoppable – the internet’s Power Rangers.

What are HTML, CSS and JavaScript? ��

Here’s a TL;DR mixed in with a Frankenstein reference, if that’s your thing.

Imagine you’re building your own version of Frankenstein’s monster.

You need bones (the structure), skin (the aesthetics), and you need to make it come to life (the interactivity).

That’s how you build a webpage, too:

building a webpage with HTML, CSS and JavaScript

HTML makes up this web page’s skeleton and structure, and almost every other web page you’ll ever visit. It’s a markup language that “marks up” and forms the backbone to online content, putting the site structure in place for the web browser to understand.

HTML, or Hypertext Markup Language, was first proposed and published in 1993, though its roots trace back to proposals by Sir Tim Berners-Lee in 1989 for an internet hypertext system. It’s developed by WHATWG, with the latest version, HTML5, currently in place.

Whereas HTML makes up the structure, or bones, of the site, CSS adds the skin — the aesthetics you see and navigate. The CSS on a webpage designs it and makes it look more attractive for the visitor reading the page.

CSS, or Cascading Style Sheets, shape the HTML and affects how it’s displayed to the website visitor. These forms of styling include font color, background color, border-radius (rounded corners on boxes), the position of columns, hue, opacity, and separation. New CSS features even allow for animations, flexbox gaps, and much more responsive design.

JavaScript ��

JavaScript (JS) is another key language for web page design and inserts dynamic text into HTML client-side.

It’s a scripting language rather than a markup language, and was first released two years after HTML in 1995, developed by Brendan Eich of Netscape, a now-defunct web browser. JavaScript is maintained by the ECMA and as of 2021, the 12th version of ECMA is active.

The main three languages used in web page development are HTML, CSS, and JavaScript. In general:

HTML provides the structure, CSS provides the presentation and formatting, and JavaScript makes the elements dynamic and controls their behavior.

HTML, CSS & JavaScript: What do they do? ��

HTML gives structure to web pages using each different element, and can also affect font, color, hyperlinks, and images. HTML files have either .html or .htm extensions when stored.

You would use HTML to tell the browser which of the content on your site is the title, which is your H2 and H3 headings, and any images or tables you have on your web page.

CSS is inserted into HTML using the <style> element, and affects how the HTML looks and where it is positioned. Some other examples of CSS are:

Changing the sizes, colors and shading in tables
Changing the styles, size or color of bullet pointed lists (like this one)
Changing link color and style (our buttons are #c08f54 to match our brand color)
Switching to italics or bold text to really makeyour point

CSS doesn’t make web pages interactive or dynamic, however, but better styles HTML for aesthetics and presentation, giving it a better structure.

JavaScript can be added to these pages to more them more dynamic and interactive. For example, JavaScript can make buttons clickable to take you to your chosen destination, and lets you design on-page calculators and other widgets. It doesn’t replace HTML, it complements it to create dynamic and interactive content.

HTML elements include <p> paragraph tags, <h1> and other heading tags, and many other elements for structuring web pages. JavaScript doesn’t use tags, instead it uses functions and data structures to manipulate the code. However, you need to use the <script> element to insert JavaScript into HTML.

An example of HTML, CSS & JavaScript uses

HTML is used to create the static structure of a page. For example, if I wanted the H3 heading of a new boot.dev page to say “Boot.dev is the best computer science education site”, with a paragraph underneath reinforcing this by saying “And if you disagree, try out our courses and be convinced!”, you could easily implement this structure with the following HTML code:

And it would render the following on a web page:

However, this content is the boring HTML default, and you may want to style it differently. You can make the content look better by adding styling via CSS, and by adding JavaScript you can make the content interactive.

CSS can then be added to format and style the content (and any other elements on the page).

A very basic simplistic example would be to change the color of the H3 heading title text to white on a black background, change the paragraph text to blue, and the background color to grey, by writing the following CSS:

So that your original HTML changes to:

This obviously doesn’t look great yet, but shows how CSS changes the style of your content.

CSS does far more than just changing text and background colors, with new features being released all the time and now even supporting animations — you can do almost anything with CSS for web design.

JavaScript can then be added to bring these styled pages (via the CSS) pages to life. This could be as simple as making a button clickable, taking a customer to the checkout page, or for clicking to read another news article, or inputting a math sum into an online calculator that returns the answer to any numbers you select.

You can create more complex calculators fairly easily by adding more elements within a JavaScript function, such as developing an interest rate calculator based on inputs of the original starting amount invested, based on a certain interest rate, and based on a certain amount of time.

HTML vs CSS vs JavaScript: Which is easier to learn? ��

HTML is much easier to learn than JavaScript and is considered the easiest language to learn. You can learn most of HTML from a complete beginner level to coding your own (basic) HTML in just a day or two, but just knowing HTML won’t land you a coding job.

You can’t learn CSS without already understanding HTML — the two are an inseparable married couple. They’re nothing without each other — CSS needs HTML to give it structure, HTML needs CSS to make it look pretty.

CSS is more complex, with far more options and factors at play. You could easily spend a few months getting to grips with some of CSS’ wide range of uses and code a few of your own basic web design projects.

For web design work you’ll need strong HTML and CSS skills, as well as good command of JavaScript, and potentially extras such as JavaScript libraries (like Node.js, React, and Vue.js), and perhaps skills in languages like PHP, Python, Ruby, or SQL.

JavaScript is a true programming language that follows programming logic, and is, therefore, more complex. CSS might be hard to master, but without logic, errors are less troublesome. JavaScript will likely take longer to grasp than CSS, but both are notably more difficult than HTML.

Despite this, JavaScript and Python are still considered two of the easiest programming languages to learn and are recommended for beginners. Compared to languages like C++ and Java, both Python and JavaScript have far shallower learning curves.

HTML: Is it a programming language? The debate ��

HTML’s lack of executable logic has led to intense debates around whether it is a programming language or not.

HTML isn’t executable; it marks up pages with tags for the browser to infer the purpose for the viewer. As a markup language, you can’t carry out executable tasks in HTML, for example, you couldn’t add two numbers together.

A quote from this article on the Syracuse University School of Information Studies elaborates:

“Programming languages have functional purposes. HTML, as a markup language doesn’t really “do” anything in the sense that a programming language does. HTML contains no programming logic.”

Therefore, without programming logic, some do not consider it a programming language. Nevertheless, when you write in HTML you are still coding, and HTML5 brings a wealth of new extras like geolocation and multimedia to web page design, so HTML’s importance shouldn’t be questioned, whether you agree or disagree with it being a programming language.

Differences between HTML, CSS and JavaScript, and how they work together ��

HTML can combine JavaScript within scripts that convert HTML’s static form into dynamic content by modifying the web page contents without reloading the page. However, the reverse cannot occur. JavaScript doesn’t really embed HTML.

HTML tells the web page what it should display rather than how it should display it, whereas JavaScript instructs the web page on how exactly the data and content should be displayed.

HTML vs JavaScript: Browser compatibility ��

HTML is compatible with all browsers, whereas JavaScript can occasionally run into compatibility issues due to different versions of the language being supported by different browsers. Additionally, some browsers (or their users), turn off JavaScript completely, which unsurprisingly breaks most websites.

However, all major browsers support dynamic JavaScript content and unless you use an outdated or extremely niche browser, you’ll never run into any JS compatibility issues.

HTML vs JavaScript: server-side or client-side ��

HTML is typically rendered from the server-side as it is static and therefore doesn’t need anything client-side. It’s usually processed by the server before it’s ever sent to the user. That said, new front-end frameworks like React and Vue actually render the HTML in the JavaScript code on the front-end, which is still a relatively new idea.

JavaScript is a client-side scripting language where it is internally compiled and then interpreted before the scripts or functions are executed client-side. Because JavaScript is run on the user’s machine, it’s not secure – you should never process passwords or any other sensitive data in JavaScript.

HTML vs CSS vs JavaScript: Add-ons and libraries ��

What you see is what you get with HTML — it has no supporting libraries.

With JavaScript, however, you have a wide variety of libraries and frameworks for different uses, such as React, Ember, Vue, Svelte, and Angular.

Even CSS has a number of great supporting frameworks — Tailwind, Bootstrap, Foundation, and CSS Wand, for example — aiding front-end development.

Почему JavaScript пожирает HTML: примеры кода

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

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

В последние годы JavaScript-разработчики стали определять структуру страницы в JavaScript, а не в HTML (например, используя js-фреймворк React), что помогает упростить создание и сопровождение кода взаимодействия с пользователем. Без js-фреймворков разрабатывать современные веб-сайты гораздо сложнее. Конечно, когда вы говорите кому-то, что написанный им HTML-код необходимо разбить на части и смешать с JavaScript, с которым он знаком очень плохо, это (по понятным причинам) может быть воспринято в штыки. Как минимум собеседник спросит, зачем нам этого вообще надо, и как мы выиграем от этого.

Как JavaScript-разработчику в межфункциональной команде, мне иногда задают этот вопрос, и часто мне трудно ответить на него. Все материалы, которые я нашел по этой теме, написаны для аудитории, которая уже знакома с JavaScript. А это не очень хорошо для тех, кто специализируется исключительно на HTML и CSS. Но паттерн HTML-in-JS (или что-то еще, что обеспечивает те же преимущества), вероятно, будет еще некоторое время востребован, поэтому я думаю, это важная вещь, которую должны понимать все, кто занимается веб-разработкой.

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

Ликбез: HTML, CSS и JavaScript

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

HTML: для структуры и семантики

Код на HTML (HyperText Markup Language) задает структуру и семантику контента, который будет размещен на странице. Например, HTML-код этой статьи содержит текст, который вы сейчас читаете, и в соответствии с заданной структурой, этот текст размещен в отдельном абзаце, после заголовка и перед вставкой CodePen.

Создадим, к примеру, простую веб-страницу со списком покупок:

Мы можем сохранить этот код в файле, открыть его в веб-браузере, и браузер отобразит полученный результат. Как видите, код HTML в этом примере представляет собой страницу, которая содержит заголовок «Список покупок» (Shopping List (2 items)), текстовое поле ввода, кнопку «Добавить товар» (Add Item) и список из двух пунктов («Яйца» и «Масло»). Пользователь введет адрес в своем веб-браузере, затем браузер запросит этот HTML-код с сервера, загрузит его и отобразит. Если в списке уже есть элементы, сервер может прислать HTML с уже готовыми элементами, как в этом примере.

Попробуйте набрать что-нибудь в поле ввода и нажать кнопку «Добавить элемент». Вы увидите, что ничего не происходит. Кнопка не связана ни с каким кодом, который мог бы изменить HTML, а HTML не может ничего изменить сам. Мы вернемся к этому через минуту.

CSS: для изменения внешнего вида

Код CSS (Cascading Style Sheets, Каскадные Таблицы Стилей) определяет внешний вид страницы. Например, CSS этой статьи задает шрифт, интервал и цвет текста, который вы читаете.

Возможно, вы заметили, что наш пример списка покупок выглядит очень просто. HTML не позволяет задать такие вещи, как интервалы, размеры шрифтов и цвета. Поэтому мы и используем CSS. Мы могли бы добавить CSS-код для этой страницы, чтобы немного украсить ее:

Как видите, этот CSS-код изменил размер и толщину символов текста, а также цвет фона. Разработчик может по аналогии написать правила для собственного стиля, и они будут последовательно применяться к любой структуре HTML: если мы добавим на эту страницу элементы section, button или ul, для них будут действовать те же изменения шрифта.
Но кнопка Add Item по-прежнему ничего не делает: здесь нам как раз и понадобится JavaScript.

JavaScript: для реализации поведения

Код JavaScript определяет поведение интерактивных, или динамических, элементов на странице. Например, CodePen написан с использованием JavaScript.

Чтобы кнопка Add Item в нашем примере работала без JavaScript, нам потребовалось бы использовать специальный HTML-код, чтобы заставить его отправлять данные обратно на сервер (<form action \u003d ‘. ‘>, если вам вдруг интересно). Более того, браузер перезагрузит обновленную версию всего HTML-файла без сохранения текущего состояния страницы. Если бы этот список покупок был частью большой веб-страницы, все, что делал пользователь, было бы потеряно. Не важно на сколько пикселей вниз вы продвинулись, читая текст — при перезагрузке сервер вернет вас в начало, не важно сколько минут видео вы просмотрели — при перезагрузке оно начнется заново.

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

Если мы хотим что-то менять на странице без полной перезагрузки этой страницы, нам нужно использовать JavaScript:

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

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

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

Как только мы заметили ошибку, мы исправили ее, добавив ту же строку totalText.innerHTML из нашего кода для Add Item в код для Remove Item. Теперь у нас одинаковый код, который дублируется в нескольких местах. Позже, скажем, мы захотим изменить этот код так, чтобы вместо «(2 items)» вверху страницы он выводил «Items: 2». Мы должны убедиться, что не забудем обновить этот код во всех трех местах: в HTML, в JavaScript-коде для кнопки Add Item и в JavaScript-коде для кнопки Remove Item. Если мы этого не сделаем, у нас будет другая ошибка, из-за которой этот текст будет резко меняться после взаимодействия с пользователем.

Уже в этом простом примере мы видим, как легко запутаться в коде. Конечно. существуют подходы и практики, позволяющие упорядочить JavaScript-код, чтобы облегчить решение этой проблемы. Однако, по мере того, как все будет становиться сложнее, нам придется продолжать реструктуризацию и постоянно переписывать проект, чтобы его можно было спокойно развивать и сопровождать. Пока HTML и JavaScript хранятся отдельно, может потребоваться много усилий, чтобы обеспечить синхронизацию между ними. Это одна из причин, по которой стали популярны новые JavaScript-фреймворки, такие как React: они предназначены для обеспечения более формализованных и эффективных взаимоотношений между HTML и JavaScript. Чтобы понять, как это работает, нам сначала нужно немного углубиться в компьютерную науку.

Императивное vs декларативное программирование

Ключевая вещь, которую необходимо понять, — это разница в мышлении. Большинство языков программирования позволяют следовать только одной парадигме, хотя некоторые из них поддерживают сразу две. Важно понимать обе парадигмы, чтобы оценить по достоинству основное преимущество HTML-in-JS с точки зрения разработчика JavaScript.

«Делай X, потом делай Y, потом делай Z».
Пример: когда пользователь выберет этот элемент, добавь к нему класс .selected; и когда пользователь уберет свой выбор с элемента, удали класс .selected.

«Результат должен быть XYZ. Делай все, что тебе нужно, чтобы это произошло.
Пример: этот элемент имеет класс .selected, если пользователь его выбрал.

HTML — декларативный язык

Забудьте о JavaScript на мгновение. Вот важный факт: HTML является декларативным языком. В HTML-файле вы можете объявить что-то вроде:

Когда веб-браузер прочитает этот HTML-код, он самостоятельно определит необходимые шаги и выполнит их:

Создай элемент section.
Создай элемент-заголовок уровня 1 (h1).
Установи для текста элемента-заголовка значение «Hello».
Помести заголовочный элемент в элемент section.
Создай элемент абзаца (p).
Установи текст элемента абзаца на «My name is Mike».
Помести элемент абзаца в элемент section.
Помести элемент section в HTML-документ.
Выведи документ на экран.

JavaScript — императивный язык

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

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

список помеченных флажков, каждая строка которых меняется на свой цвет при выборе;
текст внизу, например «1 из 4 выбран», который должен обновляться при изменении флажков;
кнопка Select All («Выбрать все»), которую следует отключить, если все флажки уже установлены;
кнопка Select None («Не выбирать ничего»), которую следует отключить, если флажки не установлены.

Головная боль как она есть

Есть четыре элемента row (ряд таблицы, она же список), каждый из которых содержит флажок. Третий флажок помечен.

Есть текст «1 из 4 выбранных».

Есть кнопка Select All («Выбрать все»), которая включена.

Есть кнопка Select None («Не выбирать ничего»), которая отключена.

Найди ряд, содержащий флажок, и добавь в него CSS класс .selected.

Найди все флажки в списке и посчитай, сколько из них помечено, а сколько нет.

Найди текст и обнови его, указав верное число выбранных покупок и их общее количество.

Найди кнопку Select None и включи ее, если она была отключена.

Если все флажки теперь установлены, найди кнопку Select All и отключи ее.

Найди ряд, содержащий флажок, и удали из него класс .selected.

Найди все флажки в списке и посчитай, сколько из них помечено, а сколько не помечено.

Найди элемент текста резюме и обновите его, указав проверенное число и общее количество.

Найди кнопку Select All и включи ее, если она была отключена.

Если все флажки сняты, найди кнопку Select None и отключи ее.

Найди все флажки в списке и пометь их.

Найди все ряды в списке и добавь к ним класс .selected.

Найди текст и обновите его.

Найди кнопку Select All и отключи ее.

Найди кнопку Select None и включи ее.

Найди все флажки в списке и снимите все флажки.

Найди все ряды в списке и удалите класс .selected из них.

Найди текстовый элемент резюме и обновите его.

Найди кнопку Select All и включи ее.

Найди кнопку Select None и отключи ее.

У нас тут большая проблема на самом деле: нет сущности, которая бы содержала полную информацию о состоянии нашего приложения (в данном случае это ответ на вопрос «какие флажки помечены?») и несла бы ответственность за обновление этой информации. Флажки, конечно же знают, помечены ли они, но об этом также должны знать CSS-код для рядов таблицы, текст и каждая кнопка. Пять копий этой информации хранятся отдельно по всему HTML, и когда она изменяется в любом из этих мест, JavaScript-разработчик должен отловить это и написать императивный код для синхронизации с изменениями в других местах.

И это все еще простой пример одного небольшого компонента страницы. Если даже этот набор инструкций выглядит как головная боль, представьте, насколько сложным и хрупким становится более крупное веб-приложение, когда вам нужно реализовать все это на императивном JavaScript. Для многих сложных современных веб-приложений такое решение не масштабируется от слова «совсем».

Ищем источник правды

Такие инструменты, как React, позволяют декларативно использовать JavaScript. Так же как HTML является декларативной абстракцией над инструкциями по отображению в веб-браузере, так и React является декларативной абстракцией над JavaScript.

Помните, как HTML позволяет нам сосредоточиться на структуре страницы, а не на деталях реализации, и как браузер отображает эту структуру? Точно так же, когда мы используем React, мы можем сосредоточиться на структуре, определив ее на основе данных, хранящихся в одном месте. Такой процесс называется односторонним связыванием, а место хранения данных о состоянии приложения называется «единым источником правды». Когда источник правды изменится, React автоматически обновит для нас структуру страницы. Он позаботится об обязательных шагах за кулисами, как это делает веб-браузер для HTML. Хотя в качестве примера здесь используется React, этот подход работает и для других фреймворков, например Vue.

Давайте вернемся к нашему списку флажков из примера выше. В этом случае «правда», которую мы хотим знать, довольно лаконична: какие флажки помечены? Другие детали (например, текст, цвет строк, какие кнопки включены) — это уже информация, полученная на основе источника правды. И почему же они должны иметь свою собственную копию этой информации? Они должны просто использовать единый источник правды только для чтения, и все элементы страницы должны «просто знать», какие флажки помечены, и вести себя соответственно. Вы можете сказать, что ряды таблицы, текст и кнопки должны иметь возможность автоматически реагировать на флажок в зависимости от того, помечен он или не помечен (“видите, что там происходит?”)

Скажи мне, чего ты хочешь (чего ты хочешь на самом деле)

Чтобы реализовать эту страницу с помощью React, мы можем заменить список несколькими простыми описаниями фактов:

Существует список значений true / false, называемый checkboxValues, который показывает, какие поля помечены.
- Пример: checkboxValues \u003d [false, false, true, false]
- Этот список показывает, что у нас есть четыре флажка, установлен только третий.
- Для каждого значения в checkboxValues в таблице есть ряд, который:
  - имеет CSS-класс с именем .selected, если значение равно true, и
  - содержит флажок, который проверяется, если значение истинно.
  - Существует текстовый элемент, который содержит текст « of selected», где — это число истинных значений в checkboxValues, а — общее количество значений в checkboxValues.
  - Есть кнопка Select All, которая включена, если в checkboxValues есть значения false.
  - Есть кнопка Select None, которая включена, если в checkboxValues есть значения true.
  - Когда флажок помечен, соответствующее значение изменяется в checkboxValues.
  - Когда кнопка Select All нажата, она устанавливает все значения checkboxValues в true.
  - При нажатии кнопки Select None все значения в checkboxValues устанавливаются в false.
  Остальное — это декларативные высказывания («есть . »), которые теперь встроены прямо в определение структуры страницы. Для этого мы пишем код для наших элементов с использованием специального синтаксического расширения JavaScript — JavaScript XML (JSX). Он напоминает HTML: JSX позволяет использовать похожий на HTML синтаксис для описания структуры интерфейса, а также обычный JavaScript. Это дает нам возможность смешивать логику JS со структурой HTML, поэтому структура может быть в любой момент времени разной. Все зависит от содержимого checkboxValues.
  
  Перепишем наш пример на React:
  
  JSX выглядит своеобразно. Когда я впервые столкнулся с этим, мне показалось, что так делать просто нельзя. Моей первоначальной реакцией было: «Чтоааа? HTML не может находится внутри JavaScript-кода!». И я был не один такой. Тем не менее, это не HTML, а JavaScript, одетый как HTML. На самом деле, это мощное решение.
  
  Помните те 20 императивных инструкций выше? Теперь у нас их три. Остальные (внутренние) императивные инструкции React сам выполняет для нас за кулисами — каждый раз, когда изменяется checkboxValues.
  
  С этим кодом теперь не может произойти ситуация, когда текст или цвет строки не соответствует флажкам, или когда кнопка включена, хотя она должна быть отключена. Существует целая категория ошибок, которые сейчас просто не могут возникнуть в нашем веб-приложении. Вся работа выполняется на основе единого источника правды, и мы, разработчики, можем писать меньше кода и лучше спать по ночам. Ну, JavaScript-разработчики, по крайней мере…
  
  JavaScript победил HTML: взял измором
  
  По мере усложнения веб-приложений поддержание классического разделения задач между HTML и JavaScript становится все более болезненным. Первоначально HTML был разработан для статических веб-страниц. Чтобы добавить туда более сложные интерактивные функции, необходимо реализовать на императивном JavaScript соответствующую логику, которая с каждой строчкой кода становится все более запутанной и хрупкой.
  
  Преимущества современного подхода: предсказуемость, возможность повторного использования и комбинирования
  
  Возможность использовать единый источник правды является наиболее важным преимуществом этой модели, но у нее есть и другие преимущества. Определение элементов нашей страницы в коде JavaScript означает, что мы можем повторно использовать компоненты (отдельные блоки веб-страницы), не позволяя нам копировать и вставлять один и тот же HTML-код в нескольких местах. Если нам нужно изменить компонент, достаточно изменить его код только в одном месте. При этом изменения произойдут во всех копиях компонента (внутри одного или даже во многих веб-приложениях, если мы применяем в них повторно используемые компоненты).
  
  Мы можем взять простые компоненты и составить их вместе, как кубики LEGO, создавая более сложные и полезные компоненты, не делая их логику слишком запутанной. А если мы используем компоненты, созданные другими разработчиками, мы можем легко накатить обновления или баг-фиксы без необходимости переписывать наш код.
  
  Тот же JavaScript, только в профиль
  
  Эти преимущества имеют свою обратную сторону. Есть веские причины, по которым люди ценят разделение HTML и JavaScript. Как я уже упоминал ранее, отказ от обычных HTML-файлов усложняет рабочий процесс для того, кто раньше не работал с JavaScript. Тот, кто ранее мог самостоятельно вносить изменения в веб-приложение, теперь должен приобрести дополнительные сложные навыки, чтобы сохранить свою автономию, или даже место в команде.
  
  Также есть и технические недостатки. Например, некоторые инструменты, такие как линтеры и парсеры, принимают на вход только обычный HTML, а работать вместо них со сторонними плагинами JavaScript может оказаться сложнее. Кроме того, JavaScript не самый лучший язык, но это единый стандарт, принятый для веб-браузеров. Новые инструменты и функции делают его лучше, но в нем все же есть некоторые подводные камни, о которых вам необходимо узнать, прежде чем вы будете работать с ним.
  
  Другая потенциальная проблема: когда семантическая структура страницы разбивается на абстрактные компоненты, разработчик может перестать думать о том, какие элементы HTML будут сгенерированы в результате. Специфические HTML-теги, такие как section и aside, имеют свою семантику, которая теряется при использовании тегов общего назначения, таких как div и span — даже если они визуально выглядят одинаково на странице. Это особенно важно для обеспечения доступности веб-приложения для разных категорий пользователей.
  
  Например, это повлияет на поведение программы чтения с экрана для пользователей с нарушениями зрения. Возможно, это не самые интересные для разработчика задачи, но JavaScript-разработчики всегда должны помнить, что сохранение семантики HTML в данном случае является наиболее важной задачей.
  
  Осознанная необходимость vs неосознанный тренд
  
  В последнее время использование фреймворков в каждом проекте стало трендом. Некоторые считают, что разделение HTML и JavaScript устарело, но это не так. Для простого статического веб-сайта, который не требует сложного взаимодействия с пользователем, это как раз подойдет. Более ярые поклонники React могут не согласиться со мной здесь, но если все, что делает ваш JavaScript, — это создание неинтерактивной веб-страницы, вам не следует использовать его. JavaScript загружается не так быстро, как обычный HTML. Поэтому, если вы не ставите задачу получить новый опыт разработки или повысить надежность кода, JavaScript тут принесет больше вреда, чем пользы.
  
  Кроме того, нет никакой необходимости писать весь свой веб-сайт на React. Или Vue! Или что там еще есть… Многие люди не знают этого, потому что все учебники в основном показывают, как использовать React для разработки сайта с нуля. Если у вас есть только один маленький сложный виджет на простом веб-сайте, вы можете использовать React для одного компонента. Вам не всегда нужно беспокоиться о webpack, Redux, Gatsby или еще о чем-то, что кто-то там рекомендует как «лучшие практики».
  
  Но если приложение достаточно сложное, использование современного декларативного подхода абсолютно стоит того. Является ли React наилучшим решением? Нет. У него уже сейчас есть сильные конкуренты. А потом появятся еще и еще… Но декларативное программирование никуда не денется, и в каком-нибудь новом фреймворке, вероятно, этот подход будет переосмыслен и реализован еще лучше.
  
  HTML, CSS и JavaScript в вебе (поймут даже чайники)
  
  Вы время от времени задумываетесь, как работает программирование, но не делали ничего сложнее в Интернете, чем загрузка фотографии в Facebook? Тогда вы в нужном месте.
  
  Для тех, кто никогда «кодил» раньше, концепция создания веб-сайта с нуля, макет, дизайн и иже с ними — могут показаться действительно пугающими. Вы представляете студентов Гарварда из фильма «Социальная сеть», сидя за своими компьютерами с гигантскими наушниками и набирающими код, и думаете: «Я никогда не смогу этого сделать».
  
  Собственно, вы можете.
  
  Любой может научиться программировать, точно так же, как любой может изучить новый язык. На самом деле, программирование вроде как говорит на иностранном языке — именно поэтому они называются языками программирования. Каждый из них имеет свои собственные правила и синтаксис, которые необходимо изучать шаг за шагом. Эти правила — способы сообщить компьютеру, что делать, точнее, они — способ сообщать вашим браузерам, что делать.
  
  Цель этого поста – познакомить Вас с основами HTML, CSS и одного из самых распространенных языков программирования — JavaScript. Но прежде чем мы начнем, давайте дадим представление о том, какие языки программирования действительно существуют.
  
  Что такое язык программирования?
  
  Программировать или «кодить» — это как решать головоломку. Как изучать иностранный язык, например английский или французский. Мы используем эти языки, чтобы превращать мысли и идеи в действия и поведение. В программировании цель точно такая же — вы просто управляете разными видами поведения, а источник этого поведения не человек, а компьютер.
  
  Язык программирования — это наш способ общения с программным обеспечением.
  
  Программирование в веб-разработке
  
  Сотруднику ставится задача «создать веб-страницу с таким-то заголовком, таким-то шрифтом, такими-то цветами, изображениями и анимированными единорогами, бегущими по экрану, когда пользователи нажимают на эту кнопку», главная цель — принять эту большую идею и разбить ее на маленькие части.
  
  Каждая страница в Интернете, которую вы посещаете, строится на выполнении отдельных инструкций шаг за шагом. Ваш браузер (Chrome, Firefox, Safari и т.д…. если используете Internet Exploler, не читайте дальше, выключите компьютер и идите гулять) играет колоссальную роль в отображении кода и тем, что мы можем видеть на наших экранах и даже взаимодействовать. Помните, что код без браузера — это просто текстовый файл — это когда вы помещаете этот текстовый файл в браузер, что происходит волшебство. Когда вы открываете веб-страницу, браузер отображает HTML и другие языки программирования в максимально понятном для вас формате.
  
  HTML и CSS на самом деле всего лишь структура страницы и информация о стиле. Прежде чем перейти к JavaScript и другим языкам программирования, необходимо знать основы HTML и CSS, поскольку они находятся на передней части каждой веб-страницы и приложения.
  
  В самом начале 1990-х годов HTML был единственным языком, доступным в Интернете. С тех пор многое изменилось и теперь одним из самых распространенных языков программирования является JavaScript.
  
  В первую очередь, необходимо понять, что HTML — основа каждой веб-страницы, независимо от сложности сайта или количества задействованных технологий. Это важный навык для любого веб-профессионала и отправная точка для всех, кто имеет отношение к созданию или редактированию контента в Интернете. И, к счастью для нас, ему удивительно легко учиться.
  
  Как работает HTML?
  
  HTML отображает язык разметки гипертекста. «Язык разметки» означает, что HTML использует теги для идентификации различных типов контента и целей, которые каждый преследует на веб-странице.
  
  Взгляните на статью ниже. Если бы мы попросили вас структурировать текст, вы, вероятно, легко бы справились: наверху находится заголовок, затем подзаголовок, основной текст и изображения внизу.
  
  Для разметки разметки используются HTML-теги, также известные как «элементы». Они имеют довольно интуитивные типы: заголовки, теги абзацев, теги изображений и т. д.
  
  Каждая веб-страница состоит из нескольких тегов HTML, обозначающих определенный тип контента на странице. Каждый тип содержимого на странице «обернут», т. е. окружен тегами.
  
  Например, слова, которые вы сейчас читаете, являются частью абзаца. Если кодировать эту страницу с нуля, этот абзац начался бы с тега абзаца открытия: <p>. Часть «тега» обозначается открытыми скобками, а буква «p» сообщает компьютеру, что мы открываем абзац вместо какого-либо другого типа содержимого.
  
  После того, как тег был открыт, все следующее содержимое считается частью этого тега, пока вы не закроете его. Когда абзац заканчивается, нужно ставить тег заключительного абзаца: </ p>. Обратите внимание, что закрывающие теги выглядят точно так же, как открывающие теги, за исключением того, что после левой угловой скобки есть косая черта. Вот пример:
  
  Используя HTML, вы можете добавлять заголовки, форматировать абзацы, разрывы строк, создавать списки, выделять текст, создавать специальные символы, вставлять изображения, создавать ссылки, создавать таблицы, управлять некоторым стилем и многое другое.
  
  Чтобы узнать больше о HTML, можно ознакомиться с руководством по базовому HTML или использовать бесплатные классы и ресурсы на codecademy, но пока перейдем к CSS.
  
  CSS — это каскадные таблицы стилей. Этот язык разметки определяет, как HTML-элементы веб-сайта должны отображаться на интерфейсе страницы.
  
  Если HTML — это гипсокартон, CSS — это краска.
  
  В то время как HTML является основной структурой вашего сайта, CSS — это то, что дает всему вашему сайту стиль. Цвета, интересные шрифты и фоновые изображения – все это заслуга CSS. Этот язык влияет на все настроение веб-страницы, что делает его невероятно мощным инструментом и важным навыком для веб-разработчиков. Он также позволяет веб-сайтам адаптироваться к различным размерам экрана и типам устройств.
  
  Чтобы показать вам, что CSS делает для веб-сайта, просмотрите следующие два снимка экрана. Первый снимок экрана — это сообщение моего коллеги, но показано в основном HTML, а второй снимок экрана — это тот же пост в блоге с HTML и CSS.
  Похожие публикации: