Практический JavaScript - гармония теории и практики #1

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

История создания и развития

В 1995 г. компанией Netscape Communications создан язык JavaScript для придания динамики статичным веб-страницам в браузере Netscape Navigator. В 1999 г. язык был стандартизирован под номером ECMA-262. Быстро обрел популярность и остается таковым до настоящего времени. Тем более исторически сложилось так, что его инструкции (программы, скрипты или сценарии) выполняются интерпретатором встроенным во все современные браузеры.

Программный продукт постоянно развивается, последнее крупное обновление, не считая мелких, было осуществлено в 2015г. Он давно стал более чем просто язык программирования. На его базе создаются новые технологии, множество библиотек, фреймворков, подмножеств … .

А на Node.js рекомендуется обратить особое внимание. Эта среда позволяет обрабатывать множество запросов без потери производительности web-приложений, осуществляя асинхронные операции, при наличии доступа к данным на уровне сервера. Приведен некоторый список ПП: Express, REST, Postman, React, NestJS, Vue, … .

Общие понятия

Как правило инструкции на JS существуют в контакте с HTML/CSS, привлекаются и другие технологии. Их исходные тексты в реальных условиях могут находиться в разных файлах и даже в разных местах, но тексты примеров из данной методики для упрощения ситуации размещаются в общих файлах с расширением HTML. Представлено ниже и в других статьях этой серии.

Для работы с приведенными инструкциями практически требуется скопировать и разместить их исходные тексты себе на ПК в подходящее место под любым именем в файле с расширением HTML и запустить на исполнение в предпочитаемом бразере. Редактировать коды возможно в любом редакторе, например Notepad ++.

Работоспособность скриптов из методики «Практический JavaScript» проверялась в браузере Mozilla Firefox в средах Windows 7, Windows 11 и Ubuntu 20.4.5 LTS .

DOM - объектная модель документа

Фактически это программный интерфейс, позволяющий программам (инструкциям) разных языков получать доступ к исходной структуре документов HTML, XHTML и XML с целью изменения их содержания. Такой концептуальный подход применяется в разных технологиях программирования, включая JS.

Более того, факт создания DOM тесно связан с ходом развития JavaScript и других подобных разработок периода 90-х годов. Его стандартизация осуществлена консорциумом W3C в 1998г.

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

При этом JS не предназначен для создания самостоятельных приложений и доступа к файловой системе. Зато он легко встраивается в различные программные приложения.

Реализацию концепции объектной модели в JS удобнее всего наблюдать в браузере Mozilla Firefox (правая кнопка → Исследовать → Инспектор). Где браузер создаёт образ документа в виде древовидной структуры из узлов. Каждый узел это объект, который обладает определёнными свойствами и методами.

Диалог на web-странице

Начнем с рассмотрения исходного текста диалога на простейший интерактивной странице формируемой HTML и JavaScript:

Выводится кнопка элемента input type="button" и после ее нажатия вызывается диалоговое окно, созданное методом alert() объекта window. Это самый верхний уровень, в соответствии с упомянутой ранее объектной моделью DOM, представляющей браузер. Этот объект можно не указывать, поскольку подразумевается по умолчанию. В данном случае он присутствует лишь для более точного представления общей структуры.

Ниже отдельно выделен код с обработчиком событий и некоторая символика синтаксиса, позволяющая понять приведенный пример:

• onclick - атрибут обработчика событий, одиночный щелчок , существуют другие (ondblclick – двойной щелчок , onmouseup – отпускание кнопки , … );
• “.” - доступ к методам и свойствам объектов;
• “( … )” - внутри круглых скобок указываются параметры передаваемые методу объекта, располагаются после названия;
• строковые значения переменных указываются внутри кавычек, которые могут быть двойные " … " или одинарные ' … ';
• “;” - каждая инструкция заканчивается точкой с запятой, иногда знак можно не указывать, но рекомендуется придерживаться единого правила.

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

⚬ ⚬ ⚬

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

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

Отмечено, на базе JS создана современная и перспективная среда создания web-приложений, прежде всего это Node.js со своим окружением ПП.