Подключение скриптов в HTML. Включение подсветки карты изображения.

ВИДЕОКУРС HTML. УРОК 48.

Рубрикатор статьи

Итак, Друзья. В прошлом видео уроке мы завершили раздел таблицы в HTML и поговорили о последних двух тегах из раздела. Это HTML-теги <colgroup> и <col>.

А сегодня мы начнем новый раздел, посвященный использованию скриптов в HTML. Раздел состоит только из одного видео урока, в котором мы познакомимся со скриптами, узнаем, что такое скрипт, как использовать скрипты, как подключить скрипт в HTML и т.д. Что касается тегов, которые мы будем использовать. Их будет два, это тег <script> и тег <noscript>.

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

Подключение скриптов в HTML. Включение подсветки карты изображения.

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

Что такое script?

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

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

Скрипты в HTML.

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

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

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

Подключение скрипта. Как вставить скрипт в HTML? (Все варианты подключения)

Начнем с тега <script> и разберемся, как его использовать в HTML. Ведь для того, чтобы мы смогли сделать станицу более динамичной мы должны уметь подключать или внедрять скрипты в HTML. Как я упоминал чуть выше, мы имеем несколько вариантов подключения скриптов в HTML.

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

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

В этом примере мы подключим поддержку JQuery в наш документ. Файл со сценариями находится на сервере google и для его подключениям нам достаточно указать правильный адрес расположения файла. Здесь также стоит отметить, что при использовании тега <script> мы в обязательном порядке должны использовать HTML-атрибут type, который поможет указать веб-браузеру, к какому типу документа относится подключаемый файл.

Итак, для подключения переходим на страницу разработчиков google. Чтобы облегчить Вам поиск, вот ссылка: https://developers.google.com/speed/libraries/devguide#jquery. Затем мы просто копируем в наш HTML-документ код примерно такого вида:

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

Версия библиотеки может отличаться.

После того, как код скопирован, мы вставляем его в HTML-документ перед закрывающим тегом <head>. После чего мы можем проверить, подключилась библиотека или нет. Как это сделать смотрите в видео уроке.

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

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

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

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

<script type="text/javascript" src="js/jquery.maphilight.js"></script>

Сам файла скрипта Вы сможете скачать на странице дополнительных материалов к ВидеоКурсу на этой странице.

Как проверить работу скрипта смотрим в видео ролике.

Внедрение сценария скрипта в HTML-документ. Как вставить скрипт в HTML?

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

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

$(function() {
        $('.map').maphilight();
        $('#squidheadlink').mouseover(function(e) {
            $('#squidhead').mouseover();
        }).mouseout(function(e) {
            $('#squidhead').mouseout();
        }).click(function(e) { e.preventDefault(); });
    });

После чего его необходимо вставить между тегами <script>. То есть какие-то отдельные функции, мы можем добавлять непосредственно в HTML-документ перед тегом <head>:

<script type="text/javascript">
		$(function() {
        $('.map').maphilight();
        $('#squidheadlink').mouseover(function(e) {
            $('#squidhead').mouseover();
        }).mouseout(function(e) {
            $('#squidhead').mouseout();
        }).click(function(e) { e.preventDefault(); });
    });
	</script>

Здесь также стоит отметить, чтобы работала подсветка карты изображения необходимо добавить все предложенные скрипты. То есть библиотеку JQuery, подключить файл, который находится в дополнительных материалах и добавить функцию в HTML-документ. Если не будет выполнен хотя бы один из пунктов, подсветка работать не будет.

HTML-тег <noscript>.

Что касается тега <noscript>, то здесь все просто. Данный тег будет включаться в работу в том случае, если веб-браузер пользователя не имеет поддержку скриптов или она отключена. Это парный тег. Между открывающим тегом и закрывающим мы должны указать информацию, которая будет выводиться пользователю в случае, когда его браузер не поддерживает работу скриптов. Например, так:

<noscript><p>У Вас не работает скрипт....</p></noscript>

Этот тег необходимо указать после открывающего тега <body>.

Видео урок: Подключение скриптов в HTML. Включение подсветки карты изображения.

HTML-справочник и другие материалы можно и нужно скачать здесь!

В следующем видео мы продолжим знакомство со скриптами в HTML и начнем знакомиться с еще одним понятием, это объекты в HTML, такие как видео, аудио и flash-баннеры. Для начала разберемся, как вставить видео в HTML и познакомимся с HTML-тегами <object> и <param>.

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 0.0/10 (0 голосов)
Автор: Михаил Веб Дата публикации: 17.07.2014