Скрипт счетчика для сайта html

Как начать писать на JavaScript с нуля

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

Рассмотрим, из чего состоят веб-странички. HTML (HyperText Markup Language) отвечает за придание странице структуры (показывает, где меню сайта, а где заголовок, логотип или статья) и контента (различные тесты, списки, изображения и т. д.). CSS (Cascading Style Sheets) отвечает за визуальную составляющую страницы: определяет, какого цвета и размера должен быть тот или иной блок, как его оформить и вывести пользователю.

Структура и оформление есть, но где же взаимодействие? Здесь на сцену выходит JavaScript. Виртуальный «диалог» с пользователем — от изменения части содержимого сайта в ответ на действия до современных игр в браузере — реализуется с помощью скриптов JavaScript. Этот язык программирования работает в браузере и позволяет взаимодействовать с веб-страницей в режиме реального времени, оживляя её и предоставляя пользователю обратную связь на все действия.

У JavaScript очень интересная история. Он — реализация стандарта ECMAScript, может работать не только в браузере. Но в статье мы рассмотрим только взаимодействие с браузером.

Преимущества JavaScript

JavaScript вначале назывался LiveScript. Но, так как на тот момент Java была у всех на устах (по всему миру), Netscape решил переименовать его в JavaScript. Дата его первого появления – 1995 как часть Netscape 2.0. Некоторые самые выдающиеся преимущества JavaScript опишем ниже.

Минимизация взаимодействия с сервером

Хорошо известный факт, что если вы хотите оптимизировать производительность своего сайта, лучший путь – это снизить взаимодействие с сервером. JavaScript тут помогает проверкой корректности ввода пользователем на стороне клиента. Запрос серверу отправляется только тогда, когда начальные проверки пройдены. Как результат, использование ресурсов и количество запросов к серверу значительно уменьшается.

Более богатый интерфейс, ориентированный на удобство пользователя

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

Молниеносный отклик пользователю

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

Лёгкая трассировка

JavaScript – это интерпретируемый язык, что значит, что написанный код выполняется построчно. Если возникла ошибка, вы будете точно знать номер строки, в которой возникла проблема.

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

• 2021-10-11
• • 29
  • Апрель
    2017

• 

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

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

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

Если у вас имеется элемент для сайта, который использует 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 минуты 🙂

Карта гугл на сайт

Вставить гугл карту на сайт по сложности так же как и вставить счётчик для сайта.

Для этого нужно:

• Включить API с названием Google Maps JavaScript API
• Взять готовый шаблон кода и вставить в него свои координаты и ключ API
• Вставить код в нужном месте на сайте.

Да, Google Maps работают на языке JavaScript. Но чтобы вставить простую карту на сайт не нужно знать JavaScript, но нужно хоть немного понимать разметку HTML.

Я не буду ставить куски простых примеров кода для вставки карты. Вы их можете найти в документации Google Maps, где есть множество решений и примеров простейшего кода с объяснениями.

Вот хочу поставить обучающее видео по работе с API гугл карт.

В видео очень хорошо показано как работать с API гугл карт и реализован пример как создать гугл-карту для группы адресов (меток).

Я надеюсь что вы поймёте и оцените видео.

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

Данный код — это готовый рабочий исходник для карты с несколькими метками. Остаётся только включить API, заменить для markers координаты и содержимое всплывающей инфо-подсказки, если нужно — по шаблону добавить новых, а так же прописать свой ключ в самом низу кода вместо YOUR_API_KEY

Параметры в картах

Масштаб для zoom:

• 1 — мир
• 5 — континент
• 10 — Город
• 15 — Улицы
• 20 — Здания

Перенос файлов на хостинг

Первым делом нужно скачать клиент FileZilla https://www.filezilla.ru/get/ . Сложностей со скачиванием быть не должно, просто выбираешь самую свежую версию под свою ОС.

Дальше стандартная процедура установки, можешь не вникать в подробности и просто жать «ОК». Далее нужно будет подключиться к хосту.

В поле «Хост:» вводишь адрес сервера из технической информации. В «Имя пользователя:» и «Пароль:» – данные, которые приходили на почту при регистрации:

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

Вывод

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

Кстати, если вы знаете, почему традиционно предупреждение о Cookie пишут с использованием самих же Cookie, а не Local Storage, сообщите мне, пожалуйста, об этом. Вдруг я делаю что-то не так. Хотя чисто технически код выполняет именно то, чего от него ждут.