От нуля до героя веб-разработки.

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

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

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

Что такое HTML

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

Элементы HTML сообщают веб-браузеру, чего ожидать. Например: «Это абзац. Это стол, а это образ». Мы делаем это с помощью тегов и атрибутов.

Теги

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

В этом примере <p> и </p> — это теги, а This is a paragraph — это контент. Обратите внимание, что содержимое между тегами может быть и самим новым элементом. Мы называем это вложением.

Очень простой HTML-документ содержит шаблонный код. Давайте посмотрим на пример и проверим, что все это такое и на что обращать внимание.

Первая строка является одним из таких исключений. <!DOCTYPE html> сообщает браузеру, что он просматривает документ HTML5. У него нет конечного тега.

если вы внимательно посмотрите на документ, в нашем теге <html>, который определяет начало нашей страницы, вы можете увидеть, что у нас есть <head> и <body>.

<head> документа HTML определяет метаданные нашей веб-страницы. Большая часть кода внутри <head> не видна пользователю. Однако <title> виден пользователю. Google Chrome, Microsoft Edge, Firefox и все другие браузеры используют этот заголовок на вкладках.

Затем элемент <body> определяет каждый визуальный элемент нашей страницы. В нем мы определяем большой заголовок с <h1> вместе с простым абзацем с использованием <p> .

Примечание: все элементы от начального до конечного тега и все, что находится между ними, является элементом.

Запуск веб-страницы

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

Хорошими вариантами для веб-разработки являются Visual Studio Code и Notepad++. На данный момент я использую WebStorm со студенческой лицензией, но это может быть слишком для простых проектов, подобных этому.

Установите один из них и создайте новый файл с именем index.html.

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

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

Атрибуты

Как я упоминал ранее, элементы могут содержать теги и атрибуты. Но что такое атрибуты и как их добавить?

Атрибуты — это дополнительные свойства, которыми может обладать элемент. Это могут быть style, href, alt и многие другие в зависимости от элемента. Одним из наиболее распространенных примеров атрибутов является тег привязки.

Тег <a> используется для гиперссылок. При нажатии на нее вы будете перемещены на другую веб-страницу, например https://google.com . Мы можем добавить эту информацию, используя атрибут href.

Добавьте эту строку кода в свой элемент body и перезагрузите страницу. Теперь вы должны увидеть ссылку, которая переместит вас в Google.

Вы также можете добавить стиль к элементам. Здесь используется атрибут style с некоторым кодом CSS между кавычками.

Это все основы HTML-разработки. Вы можете прочитать больше на этом сайте. Вы также можете продолжить чтение этой статьи, так как мы собираемся перейти к более сложным темам, таким как основы CSS и JavaScript, а также HTML.

Проверка элементов

Во всех основных веб-браузерах есть инструменты, которые разработчики могут использовать, когда сталкиваются с неожиданным поведением или ошибками. Эти инструменты называются инструментами разработчика, и к ним можно получить доступ, щелкнув правой кнопкой мыши веб-страницу и выбрав «Проверить элемент» или просто «Проверить». Распространенным ярлыком является нажатие F12 на клавиатуре.

Первая вкладка «Элементы» полезна для разработки внешнего интерфейса веб-страницы. Вкладка «Консоль» в основном используется для разработки JavaScript и бэкэнда. Остальные вкладки нам пока не нужны и связаны с сетями и производительностью.

На вкладке элементов мы видим представление нашей HTML-структуры. Это называется DOM или объектная модель документа. Эта тема будет чаще всплывать при разговоре о JavaScript.

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

Вы не можете вносить постоянные изменения с помощью инструментов разработчика, но можете вносить временные изменения. Попробуйте изменить некоторые значения CSS или удалить/изменить элемент в DOM. Если вы перезагрузите страницу, она снова станет нормальной.

Контейнеры

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

Слева у нас есть простой макет веб-страницы.

Верхняя панель, боковая панель и основной квадрат содержимого.

Все они находятся на одной веб-странице, в нашем элементе <body>. Но они разные. Итак, мы размещаем несколько элементов в <body>, но какой элемент мы должны добавить, чтобы разделить эти части контента?

Элемент <div> предназначен для этой работы. Элемент div — это невидимый элемент, стиль которого можно использовать для создания контейнеров.Элемент div определяет раздел или раздел веб-страницы.

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

div имеет значение для своего display , мы можем проверить это, используя элемент проверки. Значение по умолчанию — block, что означает, что создается блок, охватывающий всю ширину родительского элемента. Наша верхняя панель должна иметь это, но наша боковая панель и контент могут быть лучше, если они будут inline или inline-block.

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

Как вы могли заметить, элементы не очень точно выровнены. Они оставляют пробелы. Это связано со значениями по умолчанию margin и padding наших элементов <p>, которые находятся внутри наших элементов <div>. Это означает, что нам, возможно, потребуется немного углубиться в стилизацию наших элементов с помощью CSS.

Стилизация веб-страницы с помощью CSS

Мы уже использовали CSS в нашем коде, используя атрибут style. Но, как вы можете видеть, очень скоро это может стать очень уродливым, если вы будете писать весь свой стиль «встроенным», используя атрибут style. Вот почему мы можем захотеть перейти к файлам CSS.

Если вы используете IDE, например Visual Studio Code, вы можете добавить файл в ту же папку, что и ваш HTML-файл, с именем style.css. В этом файле мы можем определить стили, которые применяются ко всем элементам одного и того же типа, или мы можем применить их к определенным элементам, используя classes и id.

В head HTML-файла добавьте следующую строку.

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

Примечание. Вместо отдельного файла CSS можно использовать элемент style в head . Точно так же вы пишете CSS в элементе style и в отдельном файле.

Базовый синтаксис CSS

Синтаксис CSS очень прост и не имеет большого разнообразия, хотя есть некоторые вещи, которые вам нужно помнить.

## CSS 
.h1 {...} /* This is applied to a class called "h1" */
h1 {...}  /* This is applied to the h1 element */
#h1 {...} /* This is applied to an element with "h1" as id */
## HTML ##
<h1 class="h1">This is with a class</h1>
<h1>This is without a class or id</h1>
<h1 id="h1">This is with an id</h1>
## CSS syntax
element {
    key: value;
    key: value;
}

CSS использует сокращение с использованием точки или хэштега для обозначения классов или идентификаторов. Вместо тегов мы используем скобки {}, чтобы открывать и закрывать то, что мы хотим между ними.

/* Sample styled class */
.large-red-text {
    font-size: 32px;
    font-weight: bold;
    color: red;
}

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

Даже мне и другим веб-разработчикам по-прежнему нужно проверять, не пишут ли они бессмысленные записи и действителен ли ключ. Может быть трудно различить стили на основе font и text, такие как размер, вес и цвет. Но со временем ситуация улучшится.

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

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

Отступы, поля и границы

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

Квадрат в центре — это элемент, в данном случае это один из тегов <p>, на котором я удалил margin и padding. Если есть значения, они будут отображаться здесь.

  • Отступ находится в элементе.
  • Поля находятся за пределами элемента.
  • Граница находится между отступом и полем.

Вы можете проверить различные свойства отступов, полей и границ, используя border-color, background-color, padding, margin вместе с border-width, чтобы увидеть, как они реагируют на другие элементы и на самих себя.

Позиционирование

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

Для позиционирования нам нужно знать атрибут CSS position. Может иметь одно из 5 значений: static relative fixed absolute sticky, где static — значение по умолчанию.

  • Относительно располагается относительно своего нормального положения.
  • Fixed позиционируется относительно области просмотра, что означает, что он всегда остается на одном и том же месте, даже если страница прокручивается. Свойства top, right, bottom и left используются для позиционирования элемента.
  • Абсолютный позиционируется относительно ближайшего позиционированного предка (а не позиционируется относительно окна просмотра, как фиксированный).
  • Sticky позиционируется в зависимости от положения прокрутки пользователя. Липкий элемент переключается между relative и fixed в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в окне просмотра не встретится заданное положение смещения, после чего он «застревает» на месте (например, position: fixed).

Взято из W3Schools.

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

Это создаст div в правом нижнем углу веб-страницы. Попробуйте изменить размер страницы, она останется в углу. Он остается там из-за position: fixed . Мы также используем bottom и right, чтобы было немного места от угла. Мы могли бы также использовать margin для этого.

Если вы измените position на absolute , произойдет то же самое, но почему? Это связано с прокруткой. Элемент fixed останется на экране, если вы прокрутите его вниз, элемент absolute исчезнет с экрана. Вы можете проверить это, если добавите height: 1000px; к другому элементу, чтобы можно было прокручивать.

Цвета

Цвета являются важной частью каждого веб-сайта. Кто бы узнал банки Coca-Cola, если бы они не были такими яркими и красными? Наверное, любой, но все же цвета — огромная часть создания сайтов.

До сих пор мы использовали такие цвета, как red , blue и так далее, но есть целый список, который вы можете найти здесь. Но где специфический красный цвет голландского флага? Его нет. Вот почему у нас есть больше способов добавить наши собственные цвета, используя HEX-коды и другие значения.

Самый простой способ добавить другой цвет — использовать шестнадцатеричные коды. Шестнадцатеричные «числа» идут от 0 до F, 16 различных значений. если мы добавим два рядом друг с другом, например FF, у нас будет 255. Это именно то, из чего состоят цвета в классическом шестнадцатеричном формате RGB. Три значения от 0 до 255 в шестнадцатеричном формате.

Помните: поместите код CSS в head или таблицу стилей!

Мы также используем несколько классов для стилизации этих элементов! Просто добавьте больше слов в атрибут class и добавьте их в свою таблицу стилей. Это отличный способ разделить стили на более мелкие повторно используемые части.

Но это не единственный способ добавить цвет на веб-страницу. Мы также можем использовать HSL и полные значения RGBA. Об этом можно прочитать на этой странице. За время работы разработчиком я чаще всех остальных сталкивался с шестнадцатеричной системой счисления. При необходимости его также очень легко преобразовать в шестнадцатеричный формат.

Добавление интерактивности на вашу веб-страницу с помощью JavaScript

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

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

Это также послужит очень хорошим шагом к мастерству веб-разработки, если вы планируете использовать NodeJS для разработки на стороне сервера. Или любую внешнюю библиотеку, такую ​​как React. Но это сейчас не важно.

Пишем свой первый код

JavaScript, как и CSS, может выполняться в самом файле HTML или в другом файле, файле .js. В HTML у нас есть тег <script>. Между тегами <script> вы можете написать код JS.

Эта строка кода будет «печатать» или записывать текст в консоль в инструментах разработчика, которые мы видели раньше. Вы можете «логировать» что угодно, от определенных типов данных, таких как объекты и массивы, до простых строк, таких как эта, или чисел.

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

object.subObject.subSubObject.func()

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

Если вы хотите запускать код из внешнего файла, а не внутри HTML, вам нужно создать файл JS и импортировать его в HTML с помощью тега script.

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

Переменные

Мы уже рассмотрели console.log, теперь приступим к реальному программированию. Мы знаем, что можем регистрировать что угодно с помощью функции log, и что это будет отображаться в консоли нашего браузера, к которой мы можем получить доступ, используя «Проверить элемент».

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

Переменная может быть любым допустимым типом данных. В JS самыми основными типами данных являются числа и строки. Строки — это фрагменты текста, заключенные в кавычки. Числа не должны быть окружены чем-либо.

Есть и более продвинутые типы данных, но мы рассмотрим их позже.

Переменные создаются с помощью let, var или const. Разница между let и var невелика, поэтому рекомендуется использовать let. Отличие от const в том, что это значение нельзя изменить. Это константа. Но с этого момента мы будем использовать только let.

Приведенный выше код будет регистрировать приветствие для любого значения yourName. Если мы изменим значение yourName, изменится и приветствие.

Мы используем нечто, называемое объединением строк между скобками функции console.log . По сути, это означает объединение двух строк текста в одну строку.

"Hello " + "Steven" = "Hello Steven"

Условные операторы

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

Мы объявляем возраст в переменной с именем age. Мы проверяем, является ли возраст больше или равен 18, используя >= . Если оно не больше или равно 18, мы используем else, чтобы перехватить все возможности, которые еще не перехвачены.

Условные операторы состоят из трех частей. Требуется только первая часть, оператор if. Если вам нужны более конкретные тесты, вы можете объединить несколько операторов, используя else if . Операторы Else if выполняют определенную проверку, например if . Операторы Else просто перехватывают все другие возможности.

Вы можете посмотреть this Gist для более подробного объяснения ловушек условных операторов и того, на что следует обратить внимание. Все, от порядка проверок до использования нескольких проверок с использованием else if .

Мы не говорили о что заключать в скобки оператора if. Нам нужно поместить в него оператор, который разрешается в логическое значение, поэтому либо true, либо false.

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

Петли

Теперь, когда мы немного освоились с условными операторами и булевой логикой, мы можем перейти к циклу. Цикл будет многократно выполнять часть кода, пока не будет выполнено условие.

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

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

Типичным примером является простой счетчик. Если вы хотите, вы можете добавить console.log в тело цикла, чтобы увидеть его в действии. Мы определяем две переменные вне цикла и меняем их внутри него. Логическое значение loop останется прежним, пока мы его не изменим.

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

Синтаксис выглядит более продвинутым, но его нетрудно понять. Мы устанавливаем переменную, добавляем условие и добавляем наше значение приращения. В этом случае условие должно быть true, когда цикл должен работать. Мы используем «индекс меньше, чем длина нашей строки».

for (
    let i = 0; // set initial number using a variable name
    i < str.length; // Set our condition.
    i++ // Set our incrementer.
)

Вот еще несколько допустимых примеров циклов for и while.

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

Функции

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

function funcName(parameters) {
    // Function body
}
// Calling the function
funcName(6)

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

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

Больше типов переменных

Мы уже рассмотрели много кода. И может показаться, что это уже тяжело. Будет еще веселее. Я чуть не забыл включить это, но это очень важно знать, когда вы становитесь разработчиком JavaScript. Массивы, объекты, null и undefined.

Иногда JavaScript работает загадочным образом. Но есть некоторые типы переменных, с которыми мы можем столкнуться случайно. Возможно, вы уже видели один из них. Null и undefined — это типы переменных, которые кажутся похожими. Одно — это отсутствие значения, а другое — полное отсутствие переменной. вот простое изображение, чтобы показать вам.

Вот небольшой фрагмент кода, чтобы показать вам.

Значение undefined — это то, что вы вряд ли захотите обнаружить. Это может означать, что ваш код находится не в том месте и что переменная еще не создана, или это может означать, что у вас опечатка. Мы не будем углубляться в это, но было бы полезно узнать разницу между null и undefined .

Далее идут массивы. Массивы — это, по сути, списки, которые могут содержать значения. Эти значения можно запросить с помощью индекса. Индекс — это число от 0 до конца списка. Давайте покажем вам код

Массив создается с помощью квадратных скобок [ ... ] . Внутри него у нас есть значения, разделенные запятыми. Значения могут быть любыми: функциями, числами, логическими значениями, строками, объектами и другими массивами (так называемыми вложенными массивами).

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

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

Однако мы могли бы захотеть иметь лучший способ получения дней вместо чисел от 0 до 6. Для этого мы могли бы использовать объекты.

Объекты в некотором роде являются более продвинутыми списками. Они написаны в JSON, нотации объектов JavaScript. Я написал статью о JSON, которую вы можете найти здесь, но мы все же рассмотрим основы в этой статье.

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

Вот наша повестка дня в форме объекта вместо вложенного массива. Использование массивов на каждый день.

Вы также можете использовать вложенные объекты для частей каждого дня.

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

Это все для этих продвинутых типов, давайте продолжим.

Соединение HTML и JavaScript

Соединение HTML и JavaScript можно осуществить несколькими способами. Мы уже рассмотрели, как подключить файлы, но пока не знаем, как использовать функции JavaScript на нашей веб-странице.

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

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

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

В JavaScript у нас есть функция document.getElementById. Эта функция вернет элемент HTML, если он имеет идентификатор, который вы передаете в качестве параметра. Это одна из причин, по которой атрибут ID всегда должен быть уникальным.

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

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

Во-первых, мы определяем наши элементы в HTML и присваиваем им уникальные идентификаторы, используя атрибут id. Мы создаем два поля ввода с type="number" , таким образом можно вводить только числа. Мы также добавляем кнопку и элемент абзаца, чтобы показать ответ суммы обоих значений.

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

В созданной нами функции add мы получаем элемент абзаца и получаем ответ. Поскольку value возвращает строку, нам нужно привести значения к числам.

Наконец, мы устанавливаем innerHTML абзаца на ответ. Поскольку ответ является числом, нам нужно снова преобразовать его в строку.

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

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

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

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

Вывод

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

Хотя еще многому предстоит научиться. Существуют фреймворки для изучения стилей, адаптивного веб-дизайна, бэкэнд-разработки и многого другого.

Я за полтора года работы на Medium написал более сотни статей, связанных с веб-разработкой. Статьи для начинающих и статьи для более продвинутых программистов. Вы можете ознакомиться с ними в моем профиле или в моей публикации: Быстрое программирование.

Если вы хотите поддержать меня, вы можете стать участником Medium, используя эту ссылку, и подписаться на меня в Twitter, чтобы получать новости о моей жизни и моих статьях.

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

Большое спасибо за чтение, если вы зашли так далеко. Удачного путешествия по изучению программирования и прекрасного дня.