Использование JavaScript на веб-страницах
Клиентский JavaScript-код может встраиваться в HTML-документы четырьмя способами:
- встроенные сценарии между парой тегов ;
- из внешнего файла, заданного атрибутом src тега :
В языке разметки XHTML содержимое тега обрабатывается наравне с содержимым любого другого тега. Если JavaScript-код содержит символы поддерживает атрибут src, который определяет URL-адрес файла, содержащего JavaScript-код. Используется он следующим образом:
Файл JavaScript-кода обычно имеет расширение .js и содержит JavaScript-код в «чистом виде» без тегов или любого другого HTML-кода.
Тег . Обратите внимание, что закрывающий тег обязателен, даже когда указан атрибут src и между тегами отсутствует JavaScript-код. В разметке XHTML в подобных случаях можно использовать единственный тег .
При использовании атрибута src любое содержимое между открывающим и закрывающим тегами будет находиться какой-либо текст, не являющийся пробельными символами или комментариями на языке JavaScript.
Использование тега с атрибутом src дает ряд преимуществ:
- HTML-файлы становятся проще, т.к. из них можно убрать большие блоки JavaScript-кода, что помогает отделить содержимое от поведения.
- JavaScript-функцию или другой JavaScript-код, используемый несколькими HTML-файлами, можно держать в одном файле и считывать при необходимости. Это уменьшает объем занимаемой дисковой памяти и намного облегчает поддержку программного кода, т.к. отпадает необходимость править каждый HTML-файл при изменении кода.
- Если сценарий на языке JavaScript используется сразу несколькими страницами, он будет загружаться браузером только один раз, при первом его использовании - последующие страницы будут извлекать его из кэша браузера.
- Атрибут src принимает в качестве значения произвольный URL-адрес, поэтому JavaScript-программа или веб-страница с одного веб-сервера может воспользоваться кодом (например, из библиотеки подпрограмм), предоставляемым другими веб-серверами. Многие рекламодатели в Интернете используют этот факт.
- Возможность загружать сценарии с других сайтов еще больше увеличивает выгоды, получаемые от кэширования: компания Google продвигает использование стандартных, хорошо известных URL-адресов для часто используемых клиентских библиотек, что позволяет браузерам хранить в кэше единственную копию, совместно используемую многими сайтами в Веб. Привязка сценариев JavaScript к серверам компании Google может существенно уменьшить время запуска веб-страниц, поскольку библиотека наверняка уже будет храниться в кэше браузера пользователя, но при этом вы должны доверять стороннему программному коду, который может оказаться критически важным для вашего сайта. За дополнительной информацией обращайтесь по адресу: code.google.com/apis/ajaxlibs/.
Возможность загрузки сценариев со сторонних серверов, отличных от тех, где находятся документы, использующие эти сценарии, влечет за собой важное следствие, имеющее отношение к обеспечению безопасности. Политика общего происхождения предотвращает возможность взаимодействия сценария на JavaScript в документе из одного домена с содержимым из другого домена. Однако следует отметить, что источник получения самого сценария не имеет значения, значение имеет источник получения документа, в который встраивается сценарий.
Таким образом, политика общего происхождения в данном случае неприменима: JavaScript-код может взаимодействовать с документами, в которые он встраивается, даже если этот код получен из другого источника, нежели сам документ. Включая сценарий в свою веб-страницу с помощью атрибута src, вы предоставляете автору сценария (или веб-мастеру домена, откуда загружается сценарий) полный контроль над своей веб-страницей.
Обработчики событий в HTML
JavaScript-код, расположенный в теге , исполняется один раз, когда содержащий его HTML-файл считывается в веб-браузер. Для обеспечения интерактивности программы на языке JavaScript должны определять обработчики событий - JavaScript-функции, которые регистрируются в веб-браузере и автоматически вызываются веб-браузером в ответ на определенные события (такие как ввод данных пользователем).
JavaScript-код может регистрировать обработчики событий, присваивая функции свойствам объектов Element (таким как onclick или onmouseover), представляющих HTML-элементы в документе.
Свойства обработчиков событий, такие как onclick, отражают HTML-атрибуты с теми же именами, что позволяет определять обработчики событий, помещая JavaScript-код в HTML-атрибуты. Например:
Обратите внимание на атрибут onClick. JavaScript-код, являющийся значением этого атрибута, будет выполняться всякий раз, когда пользователь будет щелкать на кнопке.
Атрибуты обработчиков событий, включенных в разметку HTML, могут содержать одну или несколько JavaScript-инструкций, отделяемых друг от друга точками с запятой. Эти инструкции будут преобразованы интерпретатором в тело функции, которая в свою очередь станет значением соответствующего свойства обработчика события.
Однако обычно в HTML-атрибуты обработчиков событий включаются простые инструкции присваивания или простые вызовы функций, объявленных где-то в другом месте. Это позволяет держать большую часть JavaScript-кода внутри сценариев и ограничивает степень взаимопроникновения JavaScript и HTML-кода. На практике многие веб-разработчики считают плохим стилем использование HTML-атрибутов обработчиков событий и предпочитают отделять содержимое от поведения.
JavaScript в URL
Еще один способ выполнения JavaScript-кода на стороне клиента - включение этого кода в URL-адресе вслед за спецификатором псевдопротокола javascript:. Этот специальный тип протокола обозначает, что тело URL-адреса представляет собою произвольный JavaScript-код, который должен быть выполнен интерпретатором JavaScript. Он интерпретируется как единственная строка, и потому инструкции в ней должны быть отделены друг от друга точками с запятой, а для комментариев следует использовать комбинации символов /* */, а не //.
«Ресурсом», который определяется URL-адресом javascript:, является значение, возвращаемое этим программным кодом, преобразованное в строку. Если программный код возвращает значение undefined, считается, что ресурс не имеет содержимого.
Некоторые браузеры (такие как Firefox) выполняют программный код в URL и используют возвращаемое значение в качестве содержимого нового отображаемого документа. Точно так же, как при переходе по ссылке http:, браузер стирает текущий документ и отображает новое содержимое. Значение, возвращаемое примером выше, не содержит HTML-теги, но если бы они имелись, браузер мог бы отобразить их точно так же, как любой другой HTML-документ, загруженный в браузер.
Другие браузеры (такие как Chrome и Safari) не позволяют URL-адресам, как в примере выше, затирать содержимое документа - они просто игнорируют возвращаемое значение. Однако они поддерживают URL-адреса вида:
Когда загружается такой URL-адрес, браузер выполняет JavaScript-код, но, т.к. он не имеет возвращаемого значения (метод alert() возвращает значение undefined), такие браузеры, как Firefox, не затирают текущий отображаемый документ. (В данном случае URL-адрес javascript: служит той же цели, что и обработчик события onclick. Ссылку выше лучше было бы выразить как обработчик события onclick элемента - элемент в целом должен использоваться только для гиперссылок, которые загружают новые документы.)
Если необходимо гарантировать, что URL-адрес javascript: не затрет документ, можно с помощью оператора void обеспечить принудительный возврат значения undefined:
Без оператора void в этом URL-адресе значение, возвращаемое методом Window.open(), было бы преобразовано в строку и (в некоторых браузерах) текущий документ был бы затерт новым документом.
Подобно HTML-атрибутам обработчиков событий, URL-адреса javascript: являются пережитком раннего периода развития Веб и не должны использоваться в современных HTML-страницах. URL-адреса javascript: могут сослужить полезную службу, если использовать их вне контекста HTML-документов. Если потребуется проверить работу небольшого фрагмента JavaScript-кода, можно ввести URL-адрес javascript: непосредственно в адресную строку браузера. Другое узаконенное применение URL-адресов javascript: - создание закладок в браузерах.
Для чего javascript применяется на сайте
JavaScript — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией языка ECMAScript.
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке
Возможности языка
JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам — функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания — что придаёт языку дополнительную гибкость.
Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:
- объекты с возможностью интроспекции;
- функции как объекты первого класса;
- автоматическое приведение типов;
- автоматическая сборка мусора;
- анонимные функции.
В языке отсутствуют такие полезные вещи, как:
- стандартная библиотека: в частности, отсутствует интерфейс программирования приложений по работе с файловой системой, управлению потоками ввода-вывода, базовых типов для бинарных данных;
- стандартные интерфейсы к веб-серверам и базам данных;
- система управления пакетами, которая бы отслеживала зависимости и автоматически устанавливала их.
Область применения
Веб-приложения
JavaScript используется в клиентской части веб-приложений: клиент-серверных программ, в котором клиентом является браузер, а сервером — веб-сервер, имеющих распределённую между сервером и клиентом логику. Обмен информацией в веб-приложениях происходит по сети. Одним из преимуществ такого подхода является тот факт, что клиенты не зависят от конкретной операционной системы пользователя, поэтому веб-приложения являются кроссплатформенными сервисами.
AJAX
JavaScript используется в AJAX, популярном подходе к построению интерактивных пользовательских интерфейсов веб-приложений, заключающемся в «фоновом» асинхронном обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью и интерфейс веб-приложения становится быстрее, чем это происходит при традиционном подходе (без применения AJAX).
Comet
Comet — широкое понятие, описывающее механизм работы веб-приложений, использующих постоянные HTTP-соединения, что позволяет веб-серверу отправлять данные браузеру без дополнительного запроса со стороны браузера. Для таких приложений используются технологии, непосредственно поддерживаемые браузерами. В частности, в них широко используется JavaScript.
Пользовательские скрипты в браузере
Пользовательские скрипты в браузере — это программы, написанные на JavaScript, выполняемые в браузере пользователя при загрузке страницы. Они позволяют автоматически заполнять формы, переформатировать страницы, скрывать нежелательное содержимое и встраивать желательное для отображения содержимое, изменять поведение клиентской части веб-приложений, добавлять элементы управления на страницу и т. д.
Для управления пользовательскими скриптами в Mozilla Firefox используется расширение Greasemonkey; Opera и Google Chrome предоставляют средства поддержки пользовательских скриптов и возможности для выполнения ряда скриптов Greasemonkey.
Библиотеки JavaScript
Для обеспечения высокого уровня абстракции и достижения приемлемой степени кросс-браузерности при разработке веб-приложений используются библиотеки JavaScript. Они представляют собой набор многократно используемых объектов и функций. Среди известных JavaScript библиотек можно отметить React.js, Vue.js, Ember.js, Adobe Spry, AngularJS, Dojo, Extjs, jQuery, Mootools, Prototype, Qooxdoo, Underscore и Node.js.
Разработка на javascript
JavaScript - язык программирования, уже несколько десятилетий активно применяемый веб-разработчиками для создания сайтов и веб-приложений. JS позволяет сделать статичный сайт на html интерактивным. С его помощью на веб-странице “оживают” иконки, всплывают диалоговые окна, обрабатываются пользовательские данные и происходят другие динамические действия.
Сейчас применение JavaScript не ограничено созданием браузерных приложений. Мультиплатформенная среда Node.js и фреймворк React Native превращают JS в полноценный инструмент для разработки десктопного и мобильного ПО.
Почему Java и JavaScript - не одно и то же
Изначально рассматриваемый нами язык программирования назвался LiveScript. Когда у разработчиков появились планы по объединению LS и самостоятельного языка Java, у проекта появилось новое название - JavaScript. Но объединения так и не случилось, а имя уже прижилось. Фактически же Java и JavaScript разные по структуре и по предназначению языки, хоть оба и являются объектно-ориентированными.
Принцип работы и сферы применения языка
- Через JavaScript программист сообщает браузеру, как нужно реагировать на то или иное действие пользователя. Например, клик мышкой по стрелке навигации или перевод курсора на кнопку “Купить”. Но это далеко не единственный сценарий использования джава скриптов. JS также может:
- проверять данные, вводимые пользователем, до отправки на сервер;
- обрабатывать cookies;
- оперировать переменными;
- выводить всплывающие окна;
- обеспечивать непрерывную связь с сервером посредством технологии AJAX;
- быстро изменять атрибуты html тегов.
Широкий функционал делает JavaScript универсальным инструментом для фронтенд-разработки. При этом знание JS будет полезно не только программистам. На базовом уровне этот язык стоит освоить интернет-маркетологам, бизнес-аналитикам и владельцем собственных сайтов.
Основные команды
Скрипты JS встраиваются в HTML основу сайта. Для добавления небольшого скрипта прямо внутрь страницы используется парный тег . Объемные модули подключаются из внешних файлов с помощью атрибута src. Пример:
Если скрипт находится в той же папке, путь можно не указывать.
Теперь добавим в скрипты несколько команд.
Alert
Оператор alert() выводит в окне браузера сообщение с заданным текстом и кнопкой ОК.
Запишем в Блокноте следующие строки и сохраним файл в формате html.
alert( 'Hello, World!');
Здесь будет основной текст на странице
При открытии файла получим следующий результат.
Обратите внимание на точку с запятой - это стандартный синтаксис разделения строки в JS.
Confirm
Команда Confirm используется для подтверждения действия на странице. В отличие от метода alert, к прописанному сообщению добавляется не только кнопка ОК, но и Отмена. Исходя из выбранной пользователем опции, на сервер уходит сообщение true или false. После этого выполняются дальнейшие инструкции. Пример простого вывода:
confirm( 'Разрешите нам присылать вам уведомления');
Так сообщение отобразится в браузере.
Prompt
Базовый оператор ввода данных. При запуске команды prompt() пользователю показывается окно с полем для написания текста, а также две кнопки - “ОК” и “Отмена”. Поле может быть предварительно заполнено примером, но не обязательно.
Переданные пользователем данные отправляются на сервер и используются при обработке других скриптов.
prompt("Как вас зовут?", "Введите имя");
Результат в браузере:
Объявление переменных
Переменные - основа любого языка программирования. В JavaScript работа с ними идет достаточно запутанным для новичка способом, поэтому поясним базовую логику кратко.
Раньше в JS переменные всегда объявлялись через оператор var. Например, мы можем ввести в оборот переменную икс и задать ей значение 1 через команду var x = 1. В рамках конкретной области (функции, блока) x будет считываться как единица. Но в таком подходе кроется проблема. В объемных программах разработчик может не заметить, что несколько переменных называются одинаково в объединенном участке кода. Либо переменным намеренно нужно присвоить одинаковое имя. При смене значения x в одном месте, p оно сменится и в других.
В 2016 году, для исключения потенциальных ошибок, в спецификацию новой версии JavaScript был добавлен оператор let. При его применении переменную нельзя переобъявить в рамках одного блока или функции.
Разберемся на примерах.
var greeter = "Hello new user";
var greeter = "Hi Friend";
Здесь значение приветственной переменной greater меняется исходя из значений переменной times. При time равном единице оператор console.log(greeter) выведет на экран надпись Hello new user, а в любом другом случае - Hi Friend.
Но если бы мы не хотели, чтобы функция if влияла на ранее заданную переменную, мы бы использовали команду let, как здесь:
let greeting = "Hi Friend";
let greeting = "Welcome back";
В этом случае первая фраза будет выводиться всегда, а вторая - при выполнении условия проверки.
Это самый простой случай, который, в теории, можно решить и без использования оператора let. Но представьте, что на сайт добавляются десятки различных скриптов на JS. Одна ошибка в преемственности переменных может нарушить всю логику работы.
Инструменты для разработки
Чаще всего код на JS пишется не с нуля, а с использованием готовых фреймворков. Разберем самые распространенные в 2022 году варианты.
Vue.js
В первую очередь этот фреймворк используется во фронтенде. Пожалуй, главные его “фишки” - настраиваемые переходы и прогрессивная анимация интерфейсов. На Vue можно сделать действительно красивые и запоминающиеся сайты и приложения. Еще один плюс платформы - простота интеграции с уже готовыми решениями. Важное преимущество Vue.js непосредственно для разработчиков - это удобная командная строка (CLI).
React.js
Фреймворк, основанный на компонентном принципе. Каждая часть страницы на React представляет собой определенный блок - то есть компонент, пригодный для многократного использования. За счет такого подхода React.js незаменим при верстке обширных, детализированных UI интерфейсов на многостраничных сайтах и приложениях. Вторая особенность рассматриваемого фреймворка - использование технологии JSX, или JavaScript XML. Если говорить упрощенно, JSX позволяет быстро объединять HTML и Java скрипты, встраивая их друг в друга.
Angular
Фреймворк от компании Google. Основан на TypeScript - усовершенствованном JavaScript, поддерживающим статическую типизацию. Как и React, работает с компонентами. В Angular хорошо реализован механизм взаимозависимости для модулей, компонентов и функций, что помогает поддерживать согласованность кода и избегать логических ошибок. Фреймворк хорошо подходит для создания масштабных корпоративных приложений.
Svelte
За счет особенностей компиляции кода разработка на Svelte происходит заметно быстрее, чем на других фреймворках. Разработчики также ценят Svelte за компактный синтаксис. Код на этой платформе требует меньше строк в сравнении с другими средствами разработки.
Aurelia
Фреймворк полностью соответствует действующим стандартам ECMAScript, поэтому легко интегрируется с большинством JS библиотек. Еще одна особенность Aurelia - оптимизированная работа с памятью.
Ember.js
Этот инструмент полезен в первую очередь своей функциональной командной строкой. С ее помощью можно проводить тестирование кода, быстро перестраивать компоненты, работать с внутренними данными. Кроме того, фреймворк позволяет настраивать безопасную аутентификацию приложений.
Backbone.js
Обширная JS библиотека, содержащая большое количество рабочих инструментов с максимально оптимизированным кодом. Приложения на Backbone получаются производительными и полностью кроссплатформенными.
Преимущества языка
- Универсальность. JavaScript поддерживается всеми современными браузерами. В связке с html, CSS и SQL этот язык представляет полный спектр возможностей для frontend и backend разработки.
- Логичность и рациональность. На JS большинство задач решается быстро и всего за несколько строчек кода, без бесконечного мусора и “костылей”.
- Скорость работы. Код на JavaScript частично обрабатывается на стороне клиента, а не сервера. Это значительно ускоряет скорость загрузки страниц.
- Доступные готовые решения. Сейчас для JS разработаны сотни фреймворков и модулей для решения типовых задач. Это удешевляет и ускоряет разработку сайтов и веб-платформ.
- Функциональность. JavaScript подходит для решения самых разных задач - от мелких внешних “украшательств” до оптимизации связи клиента с сервером.
Но есть у языка и ряд ограничений.
- Работа с вкладками. JS действует только в рамках текущей страницы. Взаимодействие с другими вкладками ограничено для обеспечения безопасности.
- Загрузка файлов. Работать с файлами в браузере напрямую через JavaScript не получится. Правда, в платформе Node.js есть “обходные пути” для чтения и записи сторонних объектов, что сглаживает недостаток.
Заключение
С помощью JavaScript статичные сайты становятся интерактивными. Но это не единственная функция JS. По факту JavaScript обладает всеми возможностями объектно-ориентированного языка. Он применяется не только во фронтенд, но и в бэкенд разработке. Специальные платформы, такие как Node.js, позволяют создавать на JavaScript как браузерные, так и мобильные и десктоп приложения.
Что такое HTML, CSS и JavaScript
HTML — это язык разметки, который используется для создания структуры веб-страниц. Он состоит из тегов, которые обозначают различные элементы страницы, такие как заголовки, абзацы, списки, ссылки и множество других элементов.
Пример кода на HTML:
Инженер-тестировщик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
CSS (Cascading Style Sheets)
CSS — это язык стилей, используемый для описания внешнего вида веб-страницы. Он позволяет задавать различные стили для HTML-элементов, такие как цвет, размер шрифта, отступы и многое другое. CSS-стили можно применять к HTML-элементам с помощью селекторов.
Пример кода на CSS:
body < font-family: Arial, sans-serif; background-color: #f0f0f0; >h1 < color: #333; font-size: 24px; >p < color: #666; font-size: 16px; >ul
JavaScript
JavaScript — это язык программирования, который используется для добавления интерактивности, анимации и обработки пользовательских действий на веб-страницах. JavaScript можно встраивать в HTML-документы или подключать как отдельные файлы.
Пример кода на JavaScript:
document.addEventListener('DOMContentLoaded', function() < var button = document.createElement('button'); button.textContent = 'Нажми меня!'; button.addEventListener('click', function() < alert('Вы нажали на кнопку!'); >); document.body.appendChild(button); >);Взаимодействие HTML, CSS и JavaScript
HTML, CSS и JavaScript работают вместе, чтобы создать динамичные и красивые веб-страницы. HTML определяет структуру и содержимое страницы, CSS задает стили и оформление, а JavaScript добавляет интерактивность и дополнительные функции.
Вот пример веб-страницы, в которой используются все три технологии:
В заключении, освоение HTML, CSS и JavaScript является важным шагом для начинающих веб-разработчиков. Удачи в изучении и практике этих технологий! ��