Как добавить JavaScript без ожирения сайта

JavaScript — основной инструмент оживления страниц. Но, думая, как вставить Javascript в HTML, важно держать в уме еще одну мысль: как не переборщить.

Как добавить JavaScript в HTML

Тег , между ними пишем код программы. Затем сохраняем файл (например, skillbox.htm).

Результат

Внешний файл .js

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

Для подключения внешнего файла мы опять используем открывающий и закрывающий теги , но между ними указываем не код программы, а путь к файлу с расширением .js, где записан этот код программы.

В нашем примере программу alert(«Привет, Skillbox») мы сохраняем в отдельный файл skill.js, а относительный или абсолютный путь к нему прописываем между тегами с атрибутом src=»».

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

На странице можно указать любое количество файлов .js, которые будут скачаны и запущены на выполнение. Теги вставляются в произвольные места страницы или перечисляются друг за другом:

+7 (499) 444-90-36 Отдел заботы о пользователях

Москва, Ленинский проспект, дом 6, строение 20

• 
• 
• 
• 
• 

• Участник Skolkovo
• Премии Рунета 2018, 2019, 2020

• Все направления
• Программирование
• Дизайн
• Маркетинг
• Управление
• Игры
• Мультимедиа
• Для бизнеса

• О Skillbox
• О Платформе
• Центр карьеры
• Отзывы
• Контакты
• Вакансии
• Школа кураторов

• Вебинары
• Все вебинары
• Плейлисты
• Расписание

• Журнал
• Партнерская программа
• Лицензия
• Корпоративным клиентам
• Для работодателей

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Источник

Как и где подключить скрипт?

Доброго времени суток. 🙂

Данная статья не столько материал о котором хочется поговорить, а универсальная инструкция для многих статей на моем сайте. Хочу один раз расписать подробно, как подключать скрипт на сайте, где это можно сделать и как лучше. Если вы на моем сайте бываете часто и используете материалы из статей, то замечали, что в каждой статье где идет упоминание о добавлении скриптов, я постоянно пишу о том где их вставить. Мне надоело повторять одно и то же, легче будет добавлять ссылку на эту статью. У меня уже была схожая статья Как подключить скрипты и где лучше это сделать. Тогда я не полностью раскрыл данный вопрос. Удалять старую статью или переписывать не хочу, поэтому создам новую. Не будем затягивать и приступим.

Где подключать скрипты?

Если у вас имеется элемент для сайта, который использует javascript, jQuery и его библиотеки, то их нужно будет подключить. Обычно все подключается в шапке сайта перед закрывающимся head или в подвал перед закрывающимсяbody. Тут стоит выбирать вам и опираться на задачу и обстоятельства.

Есть скрипты, которые попросту не работают в шапке или наоборот в подвале. Возможно на вашем сайте все вызовы скриптов уже размещены в подвале для улучшения скорости загрузки или вы следовали указанием сервисов на подобии PageSpeed Insights. Если это так, то естественно и новые скрипты тоже размещаете в подвале.

Хочу отдельно упомянуть про WordPress. В шапке подключайте свои скрипты после wp_head();. В подвале имеется функция wp_footer();, все подключения после нее. В зависимости от настроек эти функции выводят библиотеку jQuery и другие скрипты WordPress, после которых и следует подключать свои. хотя если у вас простенький javascript код, то можно и не придерживаться этого правила.

Как подключать скрипт?

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

Как видите, наш скрипт заключен в теги — , как раз они и отделяют наш скрипт от основного HTML кода. Такой вариант в принципе не плох, если код небольшой.

По этому принципу подключается и библиотека jQuery. Обычно это выглядит так:

Следует учесть, что нельзя подключать несколько библиотеки jQuery. Если это сделано уже ранее, то не следует повторять. Внимательно просматривайте код на наличие такого подключения. Чаще всего, в системах управления сайтами, типа WordPress, библиотека подключена по умолчанию. Не всегда можно найти в файлах такую строку, нужно смотреть через браузер. Опять, в том же WordPress библиотека выводится в wp_head(); или wp_footer();, о которых я упомянул выше, в зависимости от настроек.

Библиотека jQuery по коду должна быть первой, а скрипты что нуждаются в ней должны быть размещены после нее. Простые java скрипты этому правилу не подчиняются, только jQuery. Запомните это правило. Оно поможет избежать вам в будущем множества проблем.

Но если он занимает большой объем, занимать им место на странице, как по мне не разумно и не удобно.

Для этого существует второй способ, с вложением кода в отдельный файл и дальнейшим его подключением к странице. Суть способа в том, чтобы создать файл, например — script.js. Далее внутрь файла добавляем нужный скрипт. Добавлять скрипт нужно БЕЗ ТЕГОВ. — .

В один файл можно размещать множество скриптов. Лично я часто пользуюсь таким методом. Причем одновременно можно добавлять как и обычный javascript, так и jQuery скрипты.

После того, как скрипт или скрипты в файл добавлены, его подключаем так же как и библиотеку. С помощью тегов указывая путь к файлу. Файл, естественно заливаете на сайт в папку с другими файлами сайта. В какую именно, решать вам, в зависимости от того какая система у вас или как вы захотите. Например, вы создали рядом с файлом где HTML код, папку с названием js и в нее поместили наш файл.

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

Если файл с скриптом вне папки, а рядом с файлом в котором он подключается, то просто указывается его название. Можно так же указывать полный путь, если теряетесь в правильности, у вас много папок и не сразу понятно как указать путь. Получится типа — site.com/papka/js/script.js.

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

Отдельно хочу рассказать о том как лучше подключать скрипты в Вордпрессе. Можно использовать и предыдущие способы, но как по мне лучше использовать чисто Вордпрессовский метод с помощью функции — wp_enqueue_script(). Для этого нужно использовать файл пользовательских функций WordPress — function.php. В нем уже может быть такое подключение и его можно дополнить. Если нет, то создавайте новое. Давайте рассмотрим как это работает.

По сути вы проворачиваете фокус с отдельным файлом. Так что как и в предыдущем пункте создаете файл помещаете в него скрипт или скрипты и кладете его в папку с текущей темой. Ну или в папке с темой создаете еще папку, в которой будут хранится скрипты, а уже в нее наш файл. Далее уже подключаем через функцию в function.php. Если подключать только этот один файл — script.js, функция будет такой:

Такой код добавляется в любое место function.php ,если вы разбираетесь в function.php. если же все что в нем вам не понятно, то добавлять нужно в конец файла функций. Если в конце файла есть закрывающий тег PHP — ?>, то добавлять нужно перед ним.

Разберем функцию по-порядку:

• my_scripts — название функции, в первой и последней строке. Название выдумываете, какое захотите.
• wp_enqueue_script — наша функция подключения нового скрипта.
• new_script — название для нашего скрипта. Еще его называют — рабочее название.
• get_template_directory_uri() . /js/custom_script.js — путь к файлу, где get_template_directory_uri() — функция указывающая путь к текущей папке с темой. далее уже вручную прописанный путь к папке JS и самому файлу. Если вы поймете суть по какому принципу указывается путь, то легко сможете указывать правильный.
• add_action — регистрируем наше событие в виде подключения скриптов. Где указываем функцию подключения и наше название.

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

• array(‘jquery’) — это параметр, который выводит название массива скриптов от которых зависит наш файл с скриптом. В данном примере наш файл будет подвязан к библиотеке jquery. Причем массив, должен быть загружен перед нашим скриптом. Как понимаете мы соблюдаем этим параметром условие загрузки библиотеки перед скриптами.
• далее идут пустые кавычки. В них можно написать версию скрипта, если она есть. чаще всего нет никакой версии, поэтому просто пустота.
• true — тот самый параметр, который и выведет скрипт в подвале. По умолчанию — FALSE. В нашем же случаи указано true, то есть размещение в подвале — ПРАВДА.

Если Вы захотите подключить 2 файла то функция будет такой:

Как видите, мы подключили еще и скрипт — newscript.js. Ему задали новое имя — new_script_two. Это обязательно. Если у обоих файлов будет одинаковое имя, хорошего будет мало. Таким образом можно подключать множество скриптов.

Так же, с помощью такой функции можно подключать и библиотеку jQuery. Но есть один момент. По умолчанию WordPress уже использует библиотеку, поэтому вторую так просто нельзя подключать, нужно отключить старую.

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

• wp_deregister_script — отключаем скрипт с названием — jquery. То есть нашу библиотеку по-умолчанию.
• 2-я строка — подключаем новую библиотеку по тому же принципу, но указываем полный путь, ссылку на сайт google, где лежит библиотека.
• Далее идет уже обговоренное и описанное выше подключение скрипта.

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

Сжатие скриптов

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

Согласитесь, читать такой скрипт легко и удобно, понятно и не напряжно. Но если такой понятный скрипт занимает 100 строк. В нем тысячи пробелов, комментариев и прочего ненужного хлама, что не влияет на скрипт. Но браузеру нужно немного больше времени чтобы его загрузить. А если таких скриптов больше десятка? Нагрузка на сайт увеличивается и время его загрузки тоже. А если скрипт станет таким?

Не плохо правда? Всего одна длинная строка, но намного меньше по объему. Читать такой скрипт сложнее, но если вам не нужно его постоянно править, вы настроили его один раз и все, то такое сжатие принесет только плюсы. Чтобы сделать это, можно помучатся вручную или воспользоваться любым сервисом по сжатию java скриптов.

После сжатия и правильного подключения ваши скрипты будут отлично работать и минимально нагружать сайт.

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂

Источник

Блог о Frontend-разработке, ботоводстве, iMacros + Javascript

Исследование различных веб-технологий, математических алгоритмов и проектирование веб-приложений.

Рубрики

Комменты

• Сергей к записи [Урок 11] . Формат JSON, как хранилище любых данных в iMacros.
• Сергей к записи [Урок 11] . Формат JSON, как хранилище любых данных в iMacros.
• Тру-ля-ля к записи [Урок 9] . Чтение и запись txt-файлов в iMacros. Разбираем говнокод и смотрим «Best Practice».
• Mirex к записи [Урок 14] . 100%-распознавание капчи reCaptcha v.2 в iMacros+JS через сервис rucaptcha.com
• Никита к записи Как отключить Safe Mode(Безопасный режим) в Firefox

[Урок 3] . Получение любой информации со страницы при помощи Javascript

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

Исходный код страницы

Для начала, я хочу очень кратко рассказать про то, из чего состоит веб-страница. Вы можете открыть любой сайт, например мой блог и нажать Ctrl+U (или правой кнопкой на странице и выбрать «Исходный код»). Вы увидите код, это обычный текст в формате HTML, который браузер преобразует в веб-страницу. Ключевые слова, заключенные в «<>» — называются тегами, свойства внутри них — атрибутами и значениями атрибута. Все это нам пригодится, чтобы отыскивать необходимые теги с нужной информацией.

Пример:

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

DOM (Document Object Model) – объектная модель страницы

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов. Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».

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

При чтении неверного HTML браузер автоматически корректирует его для показа и при построении DOM. В частности, всегда будет верхний тег . Даже если в тексте нет – в DOM он будет, браузер создаст его самостоятельно. То же самое касается и тега . Например, если файл состоит из одного слова «Test» , то браузер автоматически обернёт его в и .

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

Методы извлечения информации из тегов средствами iMacros

У iMacros есть возможности для извлечения текста и даже html-кода из тегов. Для начала я рекомендую вам установить расширение FireBug, если вы этого еще не сделали. Открывается он по нажатию клавиши F12, либо вы можете нажать в любом месте страницы правой кнопкой и тыкнуть «Инспектировать элемент при помощи Firebug».

Чтобы потренироваться и как следует разобраться, я создал для вас специальную страничку
http://polygon.nagibaka.ru/lessons/lesson3/index.htm

Давайте приступим, я рекомендую вам сразу открыть эту ссылку в Firefox. Поскольку вам предстоит писать много кода, рекомендую первым делом поставить себе какой-нибудь редактор, например весьма распространенный Notepad++ или же мой любимый и в сто раз более удобный Sublime Text 3, я писал о плагинах для него и режиме Vim для быстрого и мощного редактирования.

Давайте нажмем на «Запись» в iMacros, тыкнем по первому заголовку и остановим запись.

Мы получим вот такой скрипт(Current.iim):

Давайте переделаем его в JS.
Создайте новый файл, например test.js. Допустим, нам необходимо получить содержимое тега «

» . Переделаем макрос на js и извлечем из него содержимое тега «

Результат(test.js):

Обратите внимание — я заменил «Тестовая страница» на «*» — поскольку текст заголовка может быть любым, а звездочка нам говорит, что текст может быть произвольным
TYPE=H1 — указывает что мы ищем тег «

«, можно указать любой другой
POS=1 — указывает, что мы выбираем первый попавшийся тег

, ведь на странице их может оказаться несколько
ATTR=TXT:* — указывает значение атрибута, в данном случае служебный атрибут, который ищет совпадение в тексте внутри тега
EXTRACT=TXT — указывает, что мы извлекаем текст, также можно указать «EXTRACT=HTM» , чтобы извлечь текст вместе со всеми тегами

Методы извлечения информации из тегов средствами Javascript

Теперь давайте перепишем код полностью на JS без использования iim-команд. Еще, вместо iimDisplay мы будем использовать window.console.log(‘any text and vars’); Данные, которые мы будем выводить этой командой — будут отображаться в консоли firebug. Такой вариант удобнее по многим причинам, например, можно выводить js-объекты и удобно просматривать их содержимое. А самое главное, при помощи iimDisplay единовременно можно смотреть только последнее выведенное сообщение, а c этой командой мы увидим полный лог. Небольшое примечание, в некоторых старых версиях FF(например 27), window.console.log не всегда работало, и обратите внимание, нужно писать именно window.console.log , несмотря на то, что при создании обычных сайтов, чаще пишут просто console.log , весь наш код выполняется в контексте расширения iMacros, поэтому необходимо добавлять window .

Код на JS(test.js):

Здесь мы использовали поиск элемента по тегу. На самом деле, метод querySelector принимает в качестве параметра любое выражение в формате css-правила. Еще важно знать, что querySelector возвращает только первый элемент из DOM-дерева, который совпал. Чтобы получить все элементы, подходящие под указанное правило, используйте querySelectorAll .

Источник