Связь между HTML и javascript. Основы разработки интерфейса

В основном я работал на серверном уровне корпоративных приложений (Java EE, Spring framework).

Теперь я пытаюсь понять (просто понять, а не освоить) технологии на стороне клиента. Немногие из технологий, которые я читал (книги, онлайн-материалы): HTML, CSS; следующий - javascript.

Мне сложно объединить все эти технологии и сделать "страницу", например, если я создаю somepage.html, она может иметь HTML, CSS, JavaScript (и расширение по-прежнему .html). Это похоже на "смешивание" различных технологий, как это возможно?

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

Может ли кто-нибудь помочь мне простыми словами, разъясняющими эти сомнения?

6 ответов

Немного теории

Это помогает думать о HTML-странице, которую вы видите в браузере, состоящей из трех компонентов:

  • DOM (фактические элементы HTML)
  • CSS (Браузеры используют эти правила и решают, как сделать # 1)
  • JavaScript (язык программирования, который понимает браузер. Может манипулировать # 1 и # 2, также создавать множество других динамических вещей)

Что касается вашего вопроса № 1 о том, почему возможно смешивание, вы правы, потому что все три в конечном итоге отображаются в браузере, чтобы сделать то, что вы назвали "страницей".

Это помогает думать, что по мере перехода от # 1 > # 2 > # 3 вы постепенно улучшаете страницу.

HTML и CSS - это языки НЕ. Поэтому вы ничего не объединяете.

  • HTML - это набор спецификаций для описания элементов вашей страницы.

  • CSS - это набор правил, чтобы сообщить браузеру, как отображать эти элементы.

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

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

Итак, как браузер использует эти три

Когда URL-адрес вводится/отображается в браузере, браузер запрашивает "контент" на сервере. Серверы отправляют обратно исходную HTML-страницу, которая обычно включает в себя DOM, CSS (как теги ссылок) и JavaScript как (script) теги.

  • Браузер начинает с чтения HTML для создания так называемого content tree.

  • Затем он "смотрит" на CSS и "применяет" CSS к content tree и создает то, что называется render tree. Это добавляет информацию о стиле.

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

  • Наконец, все "окрашено", и вы видите стилизованную HTML-страницу.

  • JavaScript анализируется браузером отдельно, поскольку он встречается в теге


HTML может ссылаться на внешние ресурсы с помощью тегов

Hello World!

JavaScript (myjavascript.js)

document.getElementById("foo").addEventListener('click', function () {
 alert('Hey, you clicked the div!');
});

CSS (mycss.css)

#foo {
 color: red;
}


В браузере есть HTML-парсер, который читает html-текст и преобразует его в DOM TREE

браузер также имеет CSS-празер, который читает стили внутри тегов


Чтобы объяснить вам минимальным и простым способом:

HTML используется для добавления элементов, таких как кнопки, формы, абзацы, divs, содержащие материал, но с html не так много вариантов стилизации.

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

Javascript используется для добавления взаимодействия с элементами, например, если вы нажмете на какую-либо кнопку удаления, вы хотите, чтобы пользователь получил подтверждение модального (наложения) для подтверждения удаления данных, Javascript используется для взаимодействия с элементами DOM (Document Object Model) (то есть элементами html на странице) или динамически изменяет свойства элементов css/html.

Html записывается внутри

CSS можно выполнить следующим образом:

  • Inline: внутри самого тега html. например:

  • Использование внешнего файла

Javascript может быть включен внутри тегов в html или может быть загружен, указав путь к вашему js файлу в свойстве src

Пример


Веб-страница, которую вы видите в своем браузере, может быть комбинацией структуры (HTML), стиля (CSS) и интерактивности (JAVASCRIPT). Эти задания выполняются тремя различными технологиями: HTML, Javascript и CSS, которые ваш браузер знает, как интерпретировать.

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

В разных браузерах используются разные механизмы рендеринга По умолчанию механизм визуализации может отображать документы и изображения HTML и XML. Он может отображать другие типы данных через плагины или расширение; например, отображение PDF-документов с использованием подключаемого модуля просмотра PDF. Механизм рендеринга начнет синтаксический анализ документа HTML и преобразование элементов в узлы DOM в дереве, называемом "деревом контента". Двигатель будет анализировать данные стиля, как в внешних файлах CSS, так и в элементах стиля. Информация о стилизации вместе с визуальными инструкциями в HTML будет использоваться для создания другого дерева: дерева рендеринга.

Подробнее здесь http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/


Страница HTML является центральным компонентом. Это то, что браузер будет обрабатывать.

В HTML вы можете иметь блок и/или . Эти блоки сообщают обозревателю, все внутри меня - Javascript ( или

licensed under cc by-sa 3.0 with attribution.