Как подключать скрипты для сайта

innerHTML: содержимое элемента

Свойство позволяет получить HTML-содержимое элемента в виде строки.

Мы также можем изменять его. Это один из самых мощных способов менять содержимое на странице.

Пример ниже показывает содержимое , а затем полностью заменяет его:

Мы можем попробовать вставить некорректный HTML, браузер исправит наши ошибки:

Скрипты не выполнятся

Если вставляет в документ тег – он становится частью HTML, но не запускается.

Мы можем добавить HTML к элементу, используя .

Вот так:

На практике этим следует пользоваться с большой осторожностью, так как фактически происходит не добавление, а перезапись. Технически эти две строки делают одно и то же:

Технически эти две строки делают одно и то же:

Другими словами, делает следующее:

1. Старое содержимое удаляется.
2. На его место становится новое значение (с добавленной строкой).

Так как содержимое «обнуляется» и переписывается заново, все изображения и другие ресурсы будут перезагружены.

В примере выше строка заново создаёт содержимое HTML и перезагружает (надеемся, картинка закеширована). Если в много текста и изображений, то эта перезагрузка будет очень заметна.

Есть и другие побочные эффекты. Например, если существующий текст выделен мышкой, то при переписывании большинство браузеров снимут выделение. А если это поле ввода с текстом, введённым пользователем, то текст будет удалён. И т.д.

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

С помощью файла functions.php

И ещё один альтернативный способ подключения jQuery предложен Kama, который считает, что его вариант наиболее правильный. Суть заключается в том, что в WordPress уже есть программный метод добавления скриптов на страницу при помощи функций, например:

wp_register_script()
wp_enqueue_script()
wp_deregister_script()

Такой метод предотвращает конфликты, когда один и тот же скрипт подключается разными плагинами. Это облегчает работу при оптимизации загрузки js файлов, что уменьшает время загрузки страниц сайта. В этом случае, скрипты можно объединить в один файл. А браузер получит их в сжатом виде.

Для правильного подключения jQuery надо воспользоваться функцией wp_enqueue_script(). Скрипт в данном случае подключается один раз. Файл functions.php необходимо дополнить такими строками:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
	wp_enqueue_script( 'jquery' );
}

Теперь, если посмотреть исходный код страницы, то в head появится следующая запись:

<script src='https://your-super-site.ru/wp-includes/js/jquery/jquery.js?ver=3.5.1'></script>

Можно ли подключить jQuery по этому способу с CDN Google? Отличная новость — да! Вот этот код от Kama совершит чудо:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	// отменяем зарегистрированный jQuery
	// чтобы отменить jquery-migrate, вместо "jquery-core" вписать "jquery"
	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}

Его снова вписываем в файл functions.php. Результат работы кода:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

Когда jquery-migrate.js не требуется, но нужен только jQuery, то следует дополнить functions.php таким кодом:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	// отменяем зарегистрированный jQuery
	wp_deregister_script('jquery-core');
	wp_deregister_script('jquery');

	// регистрируем
	wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', false, null, true );
	wp_register_script( 'jquery', false, array('jquery-core'), null, true );

	// подключаем
	wp_enqueue_script( 'jquery' );
}    

В этом случае увидим лишь такую строку в head:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

В строке 9 «true» означает что скрипт подключится, по возможности, в футер сайта.

И ещё один вариант подключения той версии jQuery, которую использует WordPress. Вот код:

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
function my_scripts_method() {
	// получаем версию jQuery
	wp_enqueue_script( 'jquery' );
	// для версий WP меньше 3.6 'jquery' нужно поменять на 'jquery-core'
	$wp_jquery_ver = $GLOBALS->registered->ver;
	$jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;

	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js' );
	wp_enqueue_script( 'jquery' );
}

Импорт чужого CSS

Из предыдущего раздела понятно, как использовать чужой стиль в своем документе: просто укажите URL соответствующего файла в своих HTML-документах.

<link href=»https://example.com/styles.css» rel=»stylesheet«>

Вот и все. Но имейте в виду: если владелец сайта изменит свой стиль — у вас тоже поменяются все страницы! Может быть, проще скопировать его файл .css к себе на сервер.

Как подключить CSS — это лишь начало большой и интересной дороги по изучению веб-программирования. Курс «Профессия — веб-разработчик» познакомит вас с основными инструментами веб-разработчика: HTML, CSS, JavaScript и PHP. Годовая программа обучения идеально подходит людям, которые хотят с чистого листа освоить навыки профессионального веб-разработчика, а также начинающим программистам.

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

Курс «Профессия Веб-разработчик»

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

• Живая обратная связь с преподавателями
• Неограниченный доступ к материалам курса
• Стажировка в компаниях-партнёрах
• Дипломный проект от реального заказчика
• Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Как подключить скрипт jQuery в html

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

Подключение последней версии jQuery:

<script src="/assets/js/jquery-3.5.1.min.js"></script>

При этом разместить можно как секции в , так и в . Но где же лучше?

Раньше (до появления режимов и ) это рекомендовалось делать перед закрывающим тегом :

  ...
  <script src="/assets/js/jquery-3.5.1.min.js"></script>
</body>
</html>

При таком размещении скрипт не будет блокировать парсинг веб-страницы, т.к. его загрузка и выполнение будет осуществляться в самом конце. В результате, это приведёт к тому, что пользователь увидит содержимое страницы быстрее и сможет раньше с ней начать взаимодействовать.

Если бы мы сделали это по-другому, например, поместили в раздел , то создали бы «задержку» при обработке страницы в самом её начале. А это привело бы к тому, что пользователю пришлось бы дольше ждать отображения контента страницы.

Но сейчас так делать не рекомендуется. Лучше размещать скрипты как можно выше (в разделе ) с добавлением к ним атрибута или . Эти атрибуты будут «говорить» браузеру, что скрипт нужно загрузить в фоне, не останавливая при этом основной поток обработки страницы. Это позволит сделать сайт более производительным.

  ...
  <!-- отложенная загрузка библиотеки jQuery -->
  <script defer src="/assets/js/jquery-3.5.1.min.js"></script>
  ...
</head>
...

Использовать атрибут применительно к jQuery не имеет смысла, т.к. эту библиотеку мы в основном используем для изменения DOM. Но перед тем, как править DOM, он должен быть построен. Это сделать нам поможет использование атрибута . Атрибут гарантирует что скрипт выполниться только после того, как дерево DOM будет построено, но до события .

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

Пример отложенного подключения jQuery и своего внешнего скрипта, зависящего от этой библиотеки:

<!-- сначала выполнится jQuery -->
<script defer src="/assets/js/jquery-3.5.1.min.js"></script>
<!-- после jQuery свой скрипт, зависящий от jQuery -->
<script defer src="/assets/js/main.min.js"></script>

При непосредственном размещении JavaScript кода в HTML документе его необходимо поместить в обработчик события DOMContentLoaded (в этом случае его код выполнится после загрузки библиотеки jQuery):

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // код, зависящий от jQuery
    ...
  });
</script>
<!-- отложенная загрузка jQuery -->
<script defer src="/assets/js/jquery-3.5.1.min.js"></script>

Советы по эфективному изучению JavaScript

Изучение JavaScript, как и других языков программирования – непростое дело, но оно безусловно стоит потраченных сил и времени. Обучение эффективно, когда дается не просто так, а с усилием. Вы должны прилагать сознательные усилия для того, чтобы усваивать новые навыки и умения. Знания, полученные без усилий, подобны кругам на воде – очень скоро от них не останется и следа.

Электронные книги, бесплатные онлайн-курсы и интернет-платформы для обучения с помощью задач – выбор вариантов источников качественных знаний сегодня почти безграничен. Но как мотивировать себя к самостоятельному обучению, как научиться учиться самостоятельно?

Попробуйте следовать нескольким простым, но проверенным на практике советам.

Учиться нужно понемногу, но регулярно. Регулярность – залог успеха в обучении. Спланируйте свои будни так, чтобы вы могли каждый день уделять на изучение JavaScript не менее одного часа. Не пытайтесь за короткий промежуток времени выучить всё и сразу. Разбивка процесса самообразования на небольшие учебные сессии создает ощущение быстрых успехов и мотивирует вернуться к обучению уже на следующий день.

Наихудшее время для обучения – когда вы чувствуете усталость. В такие моменты, главное не заставлять себя – вы не получите ожидаемого результата. Человеческий мозг не может учить что-то бесконечно долго – ему нужно давать перерывы. Занимайтесь по принципу 25\5. Попробуйте на себе практику учить 25 минут и отдыхать 5 минут. Ваш мозг привыкнет к таким равномерным нагрузкам и будет работать максимально продуктивно.

Применяйте практики вспоминания – основу обучения. Чем чаще мы вспоминаем информацию, тем дольше она будет храниться в нашей памяти.

Эффективная техника вспоминания – это отложенное вспоминание: на карточке с одной стороны напишите вопрос, который относится к изученному материалу, а с другой – ответ на него. Выучите содержание карточки, а затем, через день, попытайтесь вспомнить ответ. Если вы дали правильный ответ – карточку можно отложить на неделю до следующего повторения. Если ошиблись – необходимо повторить вопрос уже на следующий день. Чем длиннее у вас будет цепочка успешных оветов, тем больший интервал должен быть перед следующим повторением.

Параллельно с теоретическими занятиями постоянно практикуйтесь. Для приобретения практического опыта достаточно просто много писать и разбирать примеры хорошего кода. Работая с примерами внимательно пройдите по всем строчкам кода – вы должны убедиться, что понимаете, как работает каждая строчка. Не бойтесь экспериментировать. Учитесь выводить в окне браузера какие-то данные и анализировать их. Например, что и после чего выводится на экран, получили ли вы то, что хотели, и если нет – то почему.

Какой бы способ обучения вы не выбрали, не забывайте, что он должен быть интересным для вас и подкрепляться практическими занятиями – примеры лучше тысячи слов. Примеры часто легче понять, чем многостраничную теорию. Поэтому будьте смелее! Надеюсь, что этот учебник станет хорошим подспорьем в ваших начинаниях.

← предыдущая
следующая →

Подключение с внешнего ресурса

Альтернативный вариант добавления библиотеки в исходный код на странице — использование CDN. В переводе это значит сеть доставки контента. При таком варианте ядро фреймворка находится на стороннем ресурсе. Это может быть Гугл, Майкрософт, Яндекс.

Преимущество такого способа в том, что файлы загружаются через ссылку с ближайшего к вам сервера. Это увеличит скорость работы. Если человек был раньше на вашем блоге, то библиотека добавляется в кэш браузера и не будет загружаться еще раз.  Использование такого способа актуально, если имеется несколько небольших интернет-проектов. Для подключения CDN от Гугла используйте такой код:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Набор символов

При написании программ на JavaScript используется набор символов Unicode. В отличие от 7-разрядной кодировки ASCII, подходящей только для английского языка, и 8-разрядной кодировки ISO Latin-1, подходящей только для английского и основных западноевропейских языков, 16-разрядная кодировка Unicode поддерживает практически все письменные языки, имеющиеся на планете. Стандарт ECMAScript v3 требует, чтобы реализации JavaScript обеспечивали поддержку стандарта Unicode версии 2.1 или выше, а стандарт ECMAScript v5 требует, чтобы реализации обеспечивали поддержку стандарта Unicode версии 3 или выше.

Внешние файлы и серверное управление

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

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

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

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

JavaScript – не Java

Прежде чем вы приступите к изучению JavaScript, вам следует понимать, что
JavaScript – это не Java. Это два совершенно разных языка программирования. JavaScript не имеет ничего общего с языком Java, кроме похожего синтак­
сиса.

Java – объектно-ориентированный язык программирования, разрабатываемый компанией Sun Microsystems с 1991 года и официально выпущенный 23 мая 1995 года. Java – это мощный и гораздо более сложный язык программирования, на нём можно писать самые разные программы. Для интернет-страниц есть особая возможность – написание апплетов.

Апплет – это программа на языке Java, которую можно подключить к HTML при помощи тега <applet>. Jаvа­апплеты запускаются с помощью компилятора. Апплеты Java встраиваются в веб-страницу, но хранятся на диске как отдельные файлы. Это двоичные файлы, и если вы их откроете, то не увидите исходный код апплета.

Сценарии JavaScript размещаются внутри веб-страницы и не могут существовать отдельно от нее. Для выполнения JS-сценариев не нужен компилятор, они выполняются браузером на стороне пользователя. JS-скрипт – это обычный текст, и вы можете просмотреть код невооруженным взглядом – без какого-либо специального программного обеспечения.

Java — это язык, который основан на классах и отличается быстротой, высоким уровнем защиты и надежностью. Ориентированная на классы модель Java означает, что программы состоят исключительно из классов и их методов. Наследование классов и строгая типизация в языке Java обычно требуют тесно связанные иерархии объектов. Эти требования делают программирование на Java более комплексным, чем программирование на JavaScript.

JavaScript — это легкий язык программирования, который обладает простым синтаксисом, специализированной встроенной функциональностью и минимальными требованиями для создания объектов. Вам не нужно объявлять переменные, классы и методы. Не нужно беспокоиться о том, являются ли методы публичными (public), приватными (private) или защищенными (protected), а также вам не нужно реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы JS-скриптов не являются явно типизированными.

Задача

Необходимо на страницу index.html подключить HTML-разметку из файла text.html, но так чтобы файл text.html содержал только HTML-элементы <h1> и <p>. То есть мы хотим подгрузить только уникальную информацию на страницу без «лишних» мета-данных.

Также мы хотим сделать эту загрузку в фоне, без перезагрузки страницы index.html. То есть пользователь не увидит в адресной строке браузера другого адреса. Перезагрузки страницы не будет.

Файл text.html имеет разметку:

<h1>Содержимое файла «text.html»</h1>
<p>Меня зовут ТЕКСТ АБЗАЦЕВИЧ. Я пришёл из файла «text.html». Я живу в HTML-элементе «p».</p>

Содержимое файла text.html

ВНИМАНИЕ! Запросы к серверу мы будем делать ТОЛЬКО через работающий локально веб-сервер. Ознакомьтесь с протоколом CORS и стандартом Fetch

Локальный запуск файла index.html в браузере не приведёт к работающему результату. Используйте бесплатный продукт «OpenServer» для своих тестов.

Функциональность элементов страницы

JavaScript ориентирован на обслуживание событий на элементах страницы и дерева объектов DOM (Document Object Model). С такой точки зрения вопрос «Как подключить JavaScript к HTML-элементам?» решается изначально.

Например, все поля формы для ввода данных могут сразу получить JS-обработчики для валидации (проверки) данных на корректность. Дата должна быть датой, число — числом, а строка символов должна содержать только корректные символы.

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

Иная ситуация будет на элементах при решении задачи передачи данных посредством механизмов Drag and Drop. В большинстве случаев придется динамично менять обработчики. Захват элемента для перемещения — это одно событие, собственно перемещение через границы других элементов — другое событие.

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

Точка с запятой

Программа (сценарий) на языке JavaScript представляет собой перечень «инструкций», которые выполняются веб-браузером.
В JavaScript инструкции, как правило, разделяются точкой с запятой (;).

Если несколько инструкций располагаются на одной строке, то между ними следует поставить знак «точка с запятой» (;).

Выполнить код »
Скрыть результаты

Во многих случаях JavaScript интерпретирует переход на новую строчку как разделитель команд для автоматического ввода точек с запятой (ASI) для завершения инструкций.
Если каждая инструкция размещается на отдельной строке, то разделитель можно не писать:

Выполнить код »
Скрыть результаты

Одна инструкция может располагаться на нескольких строчках:

Выполнить код »
Скрыть результаты

В этом случае JavaScript ждёт завершение выражения и поэтому автоматически не вставляет «виртуальную» точку с запятой между строчками.

Тем не менее, рекомендуется всегда добавлять точки с запятой – это позволит избежать побочных эффектов:

Выполнить код »
Скрыть результаты

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

Это правило предотвращает некоторые ошибки, например незавершенный ввод, а также позволяет сжимать кoд за счет удаления пустых мест. Сжатие кода без точек с запятой приводит к синтаксическим ошибкам. Кроме того, наличие точек с запятой препятствует снижению быстродействия, потому что синтаксические анализаторы пытаются исправлять предполагаемые ошибки, добавляя недостающие точки с запятой.

Пробельные символы

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

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

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

Следующие символы распознаются интерпретаторами JavaScript как символы конца строки:

Подключение JS-скриптов (файлы с расширением *.js) к сайту

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

Подключение JavaScript’а осуществляется двумя способами:

1. Первый – это непосредственно вставка кода в ваш сайт с помощью тегов:

2. Второй – с помощью файла:

Где «https://www.pandoge.com/main.js» – путь до файла скрипта. Такой вариант рекомендуется писать для файлов на удаленном (внешнем) сервере. Если же файл находится на вашем сайте, то можно просто указать относительный путь:

Это удобно, если вы вдруг захотите сменить домен или перевести сайт на другой протокол.

Что касается места подключения, то все скрипты рекомендуется подключать в секции HEAD, перед закрывающим ее тегом. Например:

Их также можно подключить в секции BODY. Например, все библиотеки рекомендуется подключать в секции HEAD, тогда как все счетчики, слайдеры, галереи и прочие скрипты – в секции BODY, также перед закрывающим тегом.

Что такое JavaScript

JavaScript (или сокращённо JS) – это язык программирования, который изначально был придуман для браузера, чтобы придать веб-страницам интерактивность и динамичность.

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

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

Данный язык изначально был создан Бренданом Айком в 1995 году для браузера Netscape и назывался он Mocha. Но после ряда переименований он обрёл окончательное имя – JavaScript. По началу он имел очень маленькую функциональность и в основном использовался для добавления на страницу интерактивности. Но со временем язык стал развиваться и позволять делать всё больше и больше.

В 1996 году язык JavaScript был стандартизован компанией Ecma, которая занимается стандартизацией информационных и коммуникационных технологий. Сама спецификация была названа ECMAScript или сокращённо ES. По сути, JavaScript является реализацией спецификации ECMAScript. Новые версии ECMAScript выходят ежегодно и добавляют в язык новые возможности.

Версии:

• ECMAScript 1 – июнь 1997 г.;
• ECMAScript 2 – июнь 1998 г.;
• ECMAScript 3 – декабрь 1999 г.;
• ECMAScript 5 – декабрь 2009 г.;
• ECMAScript 5.1 – июнь 2011 г.;
• ECMAScript 2015 (ES2015, ECMAScript 6, ES6) – июнь 2015 г.;
• ECMAScript 2016 (ES2016, ECMAScript 7, ES7) – июнь 2016 г.;
• ECMAScript 2017 (ES2017, ECMAScript 8, ES8) – июнь 2017 г.;
• ECMAScript 2018 (ES2018, ECMAScript 9, ES9) – июнь 2018 г.;
• ECMAScript 2019 (ES2019, ECMAScript 10, ES10) – июнь 2019 г.;
• ECMAScript 2020 (ES2020, ECMAScript 11, ES11) – июнь 2020 г.

Начиная с версии ES6 язык значительно преобразился, в нём появился новый синтаксис для написания сложных приложений (классы, модули, итераторы, циклы, генераторы в стиле Python, стрелочные функции, ключевые слова let, const и многое другое). С выходом версии ES6 весь код JavaScript принято делить на modern (современный) и классический (до ES6).

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

Языка JavaScript, как и другие языки программирования, имеет некоторые особенности. Среди основных – это слабая типизация и динамическое приведение типов.

Программы на языке JavaScript, которые разрабатываются для выполнения на стороне клиента, т.е. в браузере, называют ещё сценариями.

JavaScript — это не Java, хоть он и унаследовал некоторые синтаксические конструкции этого языка. Такое название данный язык получил в силу некоторых исторических причин. Одной из них является то, что изначально в качестве языка, который должен был быть доступным в браузере, хотели сделать Java. Но впоследствии компания Netscape отказалась от этой мысли, из-за того, что Java был слишком большим и сложным.

Подключение JavaScript в HTML код

Есть два способа вызова JavaScript в HTML-коде страницы:

1. <script type=’text/javascript’ src=’путь_к_скрипту’></script>

2. <script type=’text/javascript’>код_скрипта</script>

Первый способ подключает js-файл, который может быть расположен как в одной из директорий сайта, так и на другом ресурсе. Второй способ встраивает код js-файла в HTML-код страницы. Тут стоит разобраться в том, что использование того или другого метода должно зависеть от объема js-скрипта. Если объем скрипта достаточно большой, то лучше будет вызвать его из файла. Кроме этого, большие по объему скрипты можно оптимизировать, ознакомившись со статьей как сжать JS-скрипты. Но если же весь код скрипта заключен в несколько строчек, то встраивание JavaScript в HTML код страницы будет более правильным. Встраивание небольшого по размеру js-кода лишает сервер необходимости запрашивать этот самый файл, что в свою очередь уменьшит задержки при загрузке других ресурсов и сократит время обработки страницы.

Какие по объему JS-скрипты необходимо встраивать в HTML код?

Хорошей подсказкой для встраивания JavaScript может послужить Page Speed от Google. Данный инструмент подскажет вебмастеру какие .js и .css-файлы должны быть встроены в HTML код страницы.

Что делать с JS-скриптами, которые вызываются с других сайтов?

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

1. Находите их и копируете их код.
2. Создаете в текстовом редакторе аналогичный js-скрипт.
3. Заливаете его в корневую(или в любую другую) директорию своего сайта.
4. Изменяете путь вызова js-скрипта на адрес, по которому расположился Ваш скрипт.

В основном проблемы могут возникнуть с 4-ым пунктом. В статье «Как встроить небольшой css-файл в HTML-код страницы» я описал алгоритм, с помощью которого в CMS WordPress можно найти место вызова стиля и изменить его, встроив вместо него небольшой css-файл. Данный алгоритм вполне подойдет и для js-файлов.

Где лучше подключить JavaScript?

JavaScript лучше всего подключить в футере(footer) страницы. Разместив js-скрипт в начале(head) или середине(body) страницы, Вы приостановите загрузку страницы на время выполнения данного скрипта. Если же скрипт будет размещен в конце страницы и будет выполняться только после загрузки основного содержимого страницы, пользователи смогут быстрее начать изучать материал. Ну, а скрипты подтянуться позднее. К тому же, желательно скрипты загружать после css-файлов. Почему после, а не до стилей, читайте в статье Оптимизация порядка загрузки стилей и скриптов, в которой этот момент подробно рассмотрен.

Подключение для скриптов аналитики

Тут я говорю в контексте подключения Analitycs от Google , Метрика.Яндекс, ROIstat и т.д. Поместите свои скрипты в файл в папку js в папку с темой (допустим metrika.js). Далее чтобы определить что вошёл на сайт человек зарегистрированный, например администратор, нужно использовать функцию is_user_logged_in(). Она возвращает true если пользователь вошел под паролем на сайт. Нам нужно обратное значение нужно использовать отрицание. Ваш код для подключения скрипта примет следующий вид: 

* в файле functions.php
*/
function your_preffix_scripts(){
   wp_enqueue_style( 'style', get_stylesheet_uri() );

    // Metrika Yandex and others
    if( !is_user_logged_in() ){
        wp_enqueue_script('yandex-metrika', get_template_directory_uri() . '/js/metrika.js', array(), null, false);
    }
}
add_action( 'wp_enqueue_scripts', 'your_preffix_scripts' );

Таким образом вы исключите из метрики авторизированных пользователей. Если вам нужны авторизированные пользователи, но не нужны администраторы то вы можете is_user_logged_in() заменить на is_admin(). Если вам нужно более точные настройки по типам пользователей то вы, например, можете проверять права на действия.

Как добавить библиотеку в html

Работать с фреймворком можно добавив ссылку в исходный код вашего блога с официального интернет-проекта Jquery, или же скачав библиотеку к себе на сервер.

Используем первый способ

Откроется страница, где нажимаем правой кнопкой мыши по «Download the compressed» и выбираем в открывшемся окне строку «Копировать адрес ссылки».

Далее осталось в исходном коде перед закрывающимся тегом head написать следующее:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

В кавычках и будет адрес скопированной ссылки.

Атрибут «src» указывает путь к внешнему файлу. Хотелось бы отметить, что не обязательно подключать данный скрипт в тег «head». На момент написания статьи последняя версия была 3.2.1. Когда вы будете читать данный пост, она может измениться. Выйдет новая.

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

На начальных этапах обучения рекомендую почитать статью «Первые шаги в коддинге».

Как подключить, скачав файл на свой сервер

На официальном сайте, так же, как и в первом способе, жмем на кнопку «Загрузить».

В новом окне нажимаем ссылку «Download the compressed» левой кнопкой мыши и прописываем путь, куда нужно скачать файл библиотеки.

На сервере создайте папку, например, «JS» и скопируйте в него этот файл.

Теперь его нужно подключить для этого в теге «head» пишем такой код:

<script type="text/javascript" src="js/ jquery-3.2.1.min.js"></script>

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

Они отличаются размером. Сжатая версия, та что использовалась в примере, имеет размер 85 килобайт, а полная — 260. В первом варианте были убраны все пробелы и переводы строк. Также сократили имена переменных. Больше между ними разницы нет. Я советую использовать способ, описанный выше, так как в нем размер подключаемого файла меньше и поэтому загружаться он будет быстрее. Полная версия используется разработчиками, и вебмастерами, которые захотят изучить работу библиотеки подробнее.

Метод alert()

Метод позволяет выводить диалоговое окно с заданным сообщением и кнопкой OK. Синтаксис соответствующего выражения имеет следующий вид:

Диалоговые окна оповещений обычно применяют, если нужно уведомить пользователя о чем-то, что он не контролирует, например об ошибке. В простейшем случае текст предупреждения, заключенный в двойные или одинарные кавычки, вводится внутри круглых скобок. Диалоговое окно, выведенное на экран методом , можно убрать, щелкнув на кнопке OK. До тех пор пока вы не сделаете этого, переход к ранее открытым окнам невозможен. Методу передается только одна строка — отображаемая. Чтобы отобразить многострочное сообщение, разделяйте строки символом :

Это обычный HTML документ

Выходим обратно в HTML

Выполнить код »
Скрыть результаты

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

Примечание: Окна, обладающие свойством останавливать все последующие действия пользователя и программ, называются модальными.

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

Отдельные файлы JavaScript

Большие скрипты JavaScript помещают в специальные файлы js, а затем ссылаются на них внутри HTML-документа. Подобный механизм используется в CSS.

Преимущества такого подхода:

• Разметку HTML и скрипты JavaScript проще читать по отдельности.
• Такой код проще поддерживать.
• Если JavaScript кэшируется, страницы будут быстрее загружаться.

Чтобы научиться связывать файлы JavaScript с HTML, создайте небольшой тестовый проект. Он будет состоять из таких файлов:

• script.js в каталоге js/,
• style.css в каталоге css/,
• главный файл index.html в корневом каталоге проекта.

Начать можно с файла index.html и шаблона, который мы рассмотрели в предыдущем разделе.

Затем перейдите к файлу script.js, в котором хранится скрипт JavaScript. Он будет отображать заголовок <h1>.

Добавьте ссылку на этот скрипт в раздел <body> или под ним:

Тег <script> указывает на скрипт script.js в каталоге js/.

Теперь главный документ index.html будет выглядеть так:

Теперь отредактируйте файл style.css и укажите в нем цвет фона и стиль заголовка <h1>.

После этого нужно сослаться на файл CSS в разделе <head> HTML-документа index.html:

Попробуйте загрузить эту страницу в браузере. Она будет выглядеть так:

На этот файл JavaScript могут ссылаться и другие HTML-документы.