Categories: JavaScriptУроки программирования

JavaScript и DOM

В этой статье мы поговорим об основных аспектах языка программирования JavaScript и DOM (объектная модель документов).

Использование фреймворков, таких как jQuery или Prototype – это отличный способ быстрой разработки приложений на JavaScript, но также важно знать и понимать базовые аспекты этого языка. Даже если вы используете только какую-то конкретную библиотеку, сегодняшняя информация все равно принесет вам пользу – понимание того, как что-то работает под «капотом», — это очень важно.

JavaScript – введение

JavaScript – это динамический, свободно типизированный язык программирования на основе прототипов, который используется во многих средах WEB-разработки. Помимо того, что он является очень распространенным языком веб-программирования на стороне клиента, он также используется для написания плагинов для IDE и является основой для других платформ.

JavaScript основан на стандарте ECMAScript (ECMA-262) и был создан Бренданом Айхом из компании Netscape. Первоначально он назывался LiveScript, но позже был переименован в JavaScript.

Некоторые особенности JavaScript:

Динамические языки программирования выполняются во время выполнения; они не компилируются. Из-за этого JavaScript иногда считается языком сценариев, а не настоящим языком программирования. Когда у вас есть JavaScript в HTML-документе, он будет анализироваться при загрузке страницы в браузере, следовательно, во время выполнения.
Свободно типизированные языки не требуют какой-либо строгой системы типологии. Если вы программировали на C или Java, вы знаете, что при объявлении переменной вы должны указать ее тип, например, ‘int‘ (целое число). JavaScript отличается тем, что вам не нужно указывать тип переменной.
Для выполнения наследования в JavaScript вы должны использовать нечто, что называется прототипами. В JavaScript нет поддержки классов. Он рассматривает функции как первоклассные объекты.

Объектная модель документа (DOM)

Объектная модель документа (DOM) – это API, через который JavaScript взаимодействует с контентом на сайте. JavaScript и DOM обычно рассматриваются как единое целое, поскольку для взаимодействия с контентом в Интернете чаще всего используется именно JavaScript. DOM API используется для доступа, просмотра и манипулирования HTML и XML документами.

Небольшие замечания о DOM:

Объект window является глобальным объектом, доступ к нему можно получить, просто набрав «window». Именно внутри этого объекта выполняется весь код JavaScript. Как и у всех объектов, у него есть свойства и методы:
- Свойство – это переменная, хранящаяся в объекте. Все переменные, созданные на веб-странице, автоматически становятся свойствами объекта window.
- Метод – это функция, хранящаяся в объекте. Поскольку все функции хранятся в объекте window, все они могут называться «методами».
DOM создает иерархию, соответствующую структуре каждого веб-документа. Эта иерархия состоит из узлов. Существует несколько различных типов DOM-узлов, наиболее важными из которых являются «Элемент», «Текст» и «Документ»:
- Узел «Элемент» представляет элемент на странице. Таким образом, если у вас есть элемент абзаца (‘<p>‘), то к нему можно получить доступ через DOM как к узлу.
- Узел «Текст» представляет собой весь текст (внутри элементов) на странице. Поэтому, если в вашем абзаце есть немного текста, к нему можно напрямую обратиться через DOM.
- Узел «Документ» представляет собой весь документ (корневой узел иерархии/дерева DOM).
- Также обратите внимание, что атрибуты элемента тоже являются узлами DOM.
Учтите, что в разных браузерах по-разному происходит механизм компоновки DOM. Это является причиной многих головных болей веб-разработчиков.

Использование JavaScript на сайте

Если вы хотите использовать JavaScript на веб-сайте, он должен быть включен в элемент script:

<!DOCTYPE html>
<html lang="ru-RU">
 <head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
 </head>
 <body>
  <script type="text/javascript">
    // <![CDATA[
      ...
    // ]]>
  </script>
 </body>
</html>

Выше мы внедрили элемент script в наш документ (страницу). Атрибут type имеет значение «text/javascript» (вы также можете не использовать этот атрибут).

Если вы используете XHTML, то лучше добавьте строки (// <![CDATA[ … // ]]>), чтобы обозначить, что содержимое является символьными данными и не должно интерпретироваться как разметка XHTML. Это действительно необходимо, если вы планируете использовать символы «<» или «>» в своем коде JavaScript. Не забудьте закомментировать эти строки (//) для браузеров, которые не поддерживают XHTML.

Если вы используете простой HTML, очевидно, что вам не нужно использовать строки CDATA.

Ссылки на внешние скрипты

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

<script type="text/javascript" src="scripts.js"></script>

Атрибут отложенного действия (defer)

Любой JavaScript, который мы помещаем в элемент script, будет запускаться при загрузке страницы. Единственное исключение – когда элемент script имеет атрибут ‘defer‘ или ‘async‘. По умолчанию, когда браузер встречает элемент script, он останавливается и запускает его код, а затем продолжает анализ документа. Атрибут defer сообщает браузеру, что код не содержит кода, изменяющего документ, и поэтому может быть запущен позже.

На сегодня все. В следующих уроках мы продолжим изучение основ JavaScript.