В чем разница между JavaScript и HTML?

Узнайте, почему для создания работающего веб-приложения необходимы и HTML, и JavaScript.

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

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

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

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

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

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

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

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

Создание HTML-страницы

HTML-страницу можно создать с помощью любого текстового редактора или редактора кода, установленного на вашем компьютере.

Вы можете использовать бесплатные программы, такие как TextPad, NotePad или VSCode. Вы даже можете использовать текстовые редакторы на базе терминала, такие как Vim или Nano.

Создайте новый документ с помощью программы-редактора и добавьте в документ следующий HTML-код:

<head>
  <title>HTML title</title>
</head>
<body>
  <h1>JavaScript vs HTML</h1>
  <p>This is a paragraph</p>
  <button>Click me!</button>
</body>

Сохраните файл как practice.htmlи откройте страницу в своем любимом веб-браузере.

Вы должны увидеть следующий вывод, сгенерированный в вашем браузере:

Вывод HTML-файла

Вы можете видеть части HTML-документа, отображаемые в браузере.

Все, что вы помещаете в <head>тег HTML-документа, используется для информирования браузера о HTML-документе.

Содержимое <head>тега также известно как метаданные документа.

Тег <body>— это место, где вы размещаете содержимое страницы. Все, что вы туда поместите, будет отображаться на главном экране браузера.

Когда <body>тег пуст, браузер отображает пустую страницу.

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

Добавление JavaScript на вашу HTML-страницу

Несмотря на то, что вы можете создать кнопку с помощью <button>тега HTML, щелчок по кнопке ничего не делает.

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

Чтобы заставить кнопку что-то делать, вам нужно добавить код JavaScript.

Добавьте в <button>тег следующий код:

<head>
  <title>HTML title</title>
</head>
<body>
  <h1>JavaScript vs HTML</h1>
  <p>This is a paragraph</p>
  <button onclick="alert('Hello!');">Click me!</button>
</body>

Сохраните HTML-документ, затем обновите браузер.

При нажатии на кнопку появится окно с предупреждением, как показано ниже:

Ответ на нажатие кнопки с использованием JavaScript

Атрибут onclickдобавляется к <button>элементу. Когда вы нажимаете кнопку, код, который вы определяете внутри onclickатрибута, будет выполняться как ответ на действие щелчка.

Это alert('Hello!');единственный код JavaScript, добавленный в документ HTML.

Вы также можете использовать <script>тег для добавления более сложного кода JavaScript, как показано ниже:

<head>
  <title>HTML title</title>
</head>
<body>
  <h1 id="header">JavaScript vs HTML</h1>
  <p>This is a paragraph</p>
  <button onclick="changeHeading()">Click me!</button>
  <script>
    function changeHeading() {
      let header = document.getElementById("header");
      header.innerHTML = "Hello World!";
    }
  </script>
</body>

Функция changeHeading()определена внутри <script>тега выше.

Атрибут onclickназначается при вызове changeHeading()функции.

Когда вы нажмете кнопку выше, будет выполнена функция JavaScript.

В приведенном выше коде показаны небольшие примеры того, как JavaScript может добавить интерактивности вашей веб-странице.

Вы также можете использовать JavaScript, чтобы показывать и скрывать div одним щелчком мыши или создавать игру «камень, ножницы, бумага» .

JavaScript добавляет функциональность к статической сборке веб-сайта с использованием HTML.

Он позволяет вам транслировать фильмы и общаться с друзьями с помощью веб-приложений, таких как Netflix, Amazon Prime, Facebook, Instagram и буквально любого веб-сайта, который вы посещаете в своем веб-браузере.

Обнаружение кода JavaScript на веб-страницах, которые вы посетили

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

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

Чтобы просмотреть код HTML, CSS и JavaScript, из которого состоит веб-страница, просто щелкните правой кнопкой мыши в любом месте страницы и выберите « Просмотреть исходный код страницы » .

Вот пример проверки источника целевой страницы Facebook:

Проверка источника страницы Facebook

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

Вывод

JavaScript и HTML необходимы для создания современного веб-приложения.

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

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

Вот таблица, в которой резюмируются различия между JavaScript и HTML:

Категория	JavaScript	HTML
Описание	Язык программирования, работающий в браузерах	Язык разметки, отображаемый браузерами
Цель	Добавляет динамическое взаимодействие на веб-страницу	Создать статическую структуру и содержимое веб-страницы
Встраивание	Встраивается внутрь HTML	Не может быть встроен в JavaScript
Поддерживать	Частичная поддержка в зависимости от версии браузера	Поддерживается всеми современными браузерами
Разработка	Стандарт JavaScript определен в ECMAScript .	Стандарт HTML определяется WHATWG

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

Ссылка: https://sebhastian.com/javascript-vs-html/

#javascript #html

What is GEEK

Buddha Community

Зинаида Владимировна Павлова

1659951600