Подключение JavaScript к HTML. Подключение внешнего файла JavaScript
Перед тем как использовать JavaScript, его необходимо добавить в HTML документ . Сделать это можно с помощью элемента двумя способами:
Примечание: элемент может быть расположен в любом месте внутри элемента и/или внутри элемента и использоваться любое количество раз.
Встроенный сценарийJavaScript код можно вставить непосредственно внутри элемента . Сценарий, расположенный непосредственно внутри элемента, называется встроенным .
Название документа // JavaScript-код // JavaScript-код
Внешний сценарийВ HTML документ можно также добавить JavaScript код, расположенный во внешнем файле. Сценарий, расположенный внутри внешнего файла, называется внешним . Подключение внешнего файла выполняется с помощью атрибута src тега следующим образом:
- Создадим папку и назовём её к примеру example , внутри этой папки создаём текстовый файл с расширением.js , например myscript.js (имя файла может быть любым), открываем его и добавляем строку JavaScript-кода:
Примечание: если вы не знаете как менять расширение у файлов, то можете прочитать об этом в разделе: смена расширения файла .
Обратите внимание, что внутри внешнего файла JavaScript-код не нужно располагать между тегами и . Сохраняем изменения в файле и закрываем его.
- Теперь создадим ещё один файл и назовём его myscript2.js , открываем его и добавляем следующую строку JavaScript кода:
Сохраняем изменения в файле и закрываем его.
- И последнее, что нам осталось сделать, это создать HTML-документ, к которому будут подключены наши созданные два файла с внешними сценариями. В той же папке, где хранятся наши два сценария (example), создаём HTML-документ и называем его к примеру test.html . Теперь c помощью элемента подключаем два внешних файла c JavaScript-кодом:
Вот и всё! Сохраняем изменения в HTML-документе, открываем его в браузере и смотрим результат. У вас должно получиться нечто подобное:
Будьте внимательны, так как мы указали с помощью тега кодировку utf-8 в HTML-документе, кодировка самих файлов (test.html, myscript.js и myscript2.js) также должна быть utf-8 .
Примечание: если подключается внешний сценарий, то внутри того же самого элемента нельзя одновременно располагать встроенный сценарий.
Сравнение внешних и встроенных сценариевИспользование внешних сценариев даёт ряд преимуществ перед встроенными:
- HTML-документы становятся проще для редактирования, так как из них можно убрать большие блоки JavaScript-кода и отделить структуру от поведения страницы.
- Если один и тот же JavaScript-код, используется в нескольких HTML-документах, его лучше подключать в качестве внешнего сценария. Это намного облегчает поддержку и редактирование кода, так как при внесении изменений отпадает необходимость редактировать каждый HTML-документ в отдельности.
- Внешний сценарий загружается браузером всего один раз, при первом посещении страницы. Переходя на другие страницы, использующие тот же сценарий, он будет извлекаться из кэша браузера, что в свою очередь ускорит загрузку и обработку содержимого страницы.
Примечание: располагать сценарий (как внешний так и встроенный) лучше всего в конце HTML-документа, перед закрывающим тегом . Такое расположение сценария позволяет браузеру загружать страницу быстрее, так как сначала загрузится контент страницы, а потом будет загружаться код сценария.
А сегодня мы начнем новый раздел, посвященный использованию скриптов в HTML. Раздел состоит только из одного видео урока, в котором мы познакомимся со скриптами, узнаем, что такое скрипт, как использовать скрипты, как подключить скрипт в HTML и т.д. Что касается тегов, которые мы будем использовать. Их будет два, это тег и тег .
Кроме того, в этом видео уроке мы вспомним разговор о картах изображений . Об этом мы говорили довольно давно, однако визуальное оформление объектов изображения я переносил на раздел скрипты, чтобы у нас в головах не возникло никакой путаницы и недопонимания. Так вот. Сегодня вопрос о добавлении интерактивных карт изображений в HTML-документ мы закроем полностью и подключим скрипты, которые помогут выделять объекты на изображении.
Что такое script?Я не буду расписывать каких-то технических и умных понятий. Все мы уже давно знаем, что такое HTML и что нужен он для создания каркаса сайта . Но кроме каркаса, для создания сайта, его необходимо настроить и оформить подобающим образом. В этом нам сможет помочь CSS . А скрипты нужны для расширения функционала сайтов. В общем и целом для добавления динамики на нашем сайте.
Скрипты, о которых мы будем говорить, относятся только к сайтам и используют языки типа JavaScript и JQuery . Это я отметил, потому что понятие скриптов довольно широкое и используется в разных направлениях, в нашем случае это сайты.
Скрипты в HTML.В нашем случае мы будем использовать два HTML-тега , которые помогут нам подключать скрипты.
HTML-тег предназначен для подключения скрипта к HTML-странице. При этом мы можем использовать различные способы подключения, так как код скрипта может быть как в отдельном файле, который может находиться где-нибудь на стороннем сервере или на нашем сервере, так, и внедрен непосредственно в HTML-код документа.
HTML-тег предназначен для оповещения посетителя страницы о том, что у него в браузере отключена поддержка скриптов, или ее вовсе нет. И значит, он не сможет использовать полный функционал страницы, на которой находится.
Подключение скрипта. Как вставить скрипт в HTML? (Все варианты подключения)Начнем с тега и разберемся, как его использовать в HTML. Ведь для того, чтобы мы смогли сделать станицу более динамичной мы должны уметь подключать или внедрять скрипты в HTML. Как я упоминал чуть выше, мы имеем несколько вариантов подключения скриптов в HTML.
Подключения скрипта с другого сервера.При использовании скриптов нам не всегда необходимо писать их самостоятельно или качать файлы и располагать их на нашем сервере для подключения. Файл со сценарием скрипта может находиться и на стороннем сервере, например, таком как google .
В этом примере мы подключим поддержку JQuery в наш документ. Файл со сценариями находится на сервере google и для его подключениям нам достаточно указать правильный адрес расположения файла. Здесь также стоит отметить, что при использовании тега мы в обязательном порядке должны использовать HTML-атрибут type , который поможет указать веб-браузеру, к какому типу документа относится подключаемый файл.
Итак, для подключения переходим на страницу разработчиков google. Чтобы облегчить Вам поиск, вот ссылка: https://developers.google.com/speed/libraries/devguide#jquery . Затем мы просто копируем в наш HTML-документ код примерно такого вида:
Версия библиотеки может отличаться.
После того, как код скопирован, мы вставляем его в HTML-документ перед закрывающим тегом . После чего мы можем проверить, подключилась библиотека или нет. Как это сделать смотрите в видео уроке.
Это, пожалуй, самый простой способ, так как здесь кроме копирования и вставки готового кода не нужно больше ничего делать. Единственное, что следует добавить это то, что мы обязаны указать атрибут type со значением. То есть конечный вид кода будет примерно таким:
Подключения скрипта с нашего сервера.Этот способ подключения похож на первый, только при подключении скрипта с нашего сервера, то есть файл со сценариями должен находиться на хостинге, который использует сам сайт, мы должны указать правильный путь к файлу. Также для более удобной организации ориентирования в файлах сайта мы можем создать отдельную папку для скриптов и назвать ее, например js . Затем в эту папку мы должны положить файл формата.js , который содержит необходимый для подключения функционал. И указать путь к этому файлу в HTML-документе перед закрывающим тегом head .
В примере, который я приведу ниже, мы попробуем подключить скрипт, который поможет сделать подсветку для карт изображений. При этом при подключении скрипта я использую относительный путь к файлу .
Сам файла скрипта Вы сможете скачать на странице дополнительных материалов к ВидеоКурсу на этой странице .
Как проверить работу скрипта смотрим в видео ролике.
Внедрение сценария скрипта в HTML-документ. Как вставить скрипт в HTML?Последний способ не рассматривает подключение отдельных файлов, а предлагает внедрять сценарий скрипта непосредственно внутри HTML-документа. Но здесь стоит отметить, что если сценарий не большой, то мы вполне можем его внедрить в документ. Если же это огромный функционал или целая библиотека следует использовать один из перечисленных способов выше.
Итак, предположим, что у нас есть некий сценарий, который необходимо внедрить. В нашем случае это будет относиться к подсветке объектов карты изображения. Функцию Вы сможете найти в дополнительных материалах в папке js . Там же где находится файл скрипта находится обычный текстовый файл, в котором написан необходимый код. Также код сценария можно скопировать на этой странице:
$(function() { $(".map").maphilight(); $("#squidheadlink").mouseover(function(e) { $("#squidhead").mouseover(); }).mouseout(function(e) { $("#squidhead").mouseout(); }).click(function(e) { e.preventDefault(); }); });
После чего его необходимо вставить между тегами . То есть какие-то отдельные функции, мы можем добавлять непосредственно в HTML-документ перед тегом :
Здесь также стоит отметить, чтобы работала подсветка карты изображения необходимо добавить все предложенные скрипты. То есть библиотеку JQuery , подключить файл, который находится в дополнительных материалах и добавить функцию в HTML-документ. Если не будет выполнен хотя бы один из пунктов, подсветка работать не будет.
HTML-тег .Что касается тега , то здесь все просто. Данный тег будет включаться в работу в том случае, если веб-браузер пользователя не имеет поддержку скриптов или она отключена. Это парный тег. Между открывающим тегом и закрывающим мы должны указать информацию, которая будет выводиться пользователю в случае, когда его браузер не поддерживает работу скриптов. Например, так:
У Вас не работает скрипт....
Этот тег необходимо указать после открывающего тега .
Видео урок: Подключение скриптов в HTML. Включение подсветки карты изображения.HTML-справочник и другие материалы можно и нужно скачать !
В следующем видео мы продолжим знакомство со скриптами в HTML и начнем знакомиться с еще одним понятием, это объекты в HTML, такие как видео, аудио и flash-баннеры. Для начала разберемся, как вставить видео в HTML и познакомимся с HTML-тегами и
Сегодня я расскажу вам, как осуществляется подключение разных типов скриптов к вашему сайту. Это своего рода основа основ, и написать эту статью я должен был одной из первых. Потому – начнем.
Подключение JS-скриптов (файлы с расширением *.js) к сайтуJavaScript помогает нам во многих моментах повысить функциональность сайта. Будь то или, например, какая-нибудь техническая сторона вопроса.
Подключение JavaScript"а осуществляется двумя способами:
1. Первый – это непосредственно вставка кода в ваш сайт с помощью тегов:
Код
2. Второй – с помощью файла:
Где «https://www..js » – путь до файла скрипта. Такой вариант рекомендуется писать для файлов на удаленном (внешнем) сервере. Если же файл находится на вашем сайте, то можно просто указать относительный путь:
Это удобно, если вы вдруг захотите сменить домен или перевести сайт на другой протокол.
Что касается места подключения, то все скрипты рекомендуется подключать в секции HEAD , перед закрывающим ее тегом. Например:
Все для начинающего веб-мастера
Их также можно подключить в секции BODY . Например, все библиотеки рекомендуется подключать в секции HEAD , тогда как все счетчики, слайдеры, галереи и прочие скрипты – в секции BODY , также перед закрывающим тегом.
Подключение PHP-скриптов (файлы с расширением *.php) к сайтуПодключение PHP-скриптов осуществляется уже тремя способами:
1. Первый – это та же вставка кода в саму страницу сайта (обратите внимание, что если вы имеете страницу с расширением *.html – вам необходимо сменить расширение на *.php ) с помощью тегов:
2. С помощью файла (в таком случае подключение можно осуществлять и на странице с *.html расширением):
Но для работы этого способа в файл .htaccess , который находится в корне вашего сайта, в самый верх, необходимо добавить эти строки:
RemoveHandler .html .htm AddType application/x-httpd-php .php .htm .html .phtml
Если такого файла нет на хостинге - создайте его через любой текстовый редактор.
3. Третье – с помощью JS-скрипта. В этом случае вы также можете получить результат выполненного PHP-скрипта на сервере.
Реализация будет следующая:
$(document).ready(function() { $(".result").load("/main.php"); });
Где «.result » – это класс, куда будут грузиться данные, а «/main.php », соответственно, адрес до PHP-скрипта.
Если вы грузите данные с другого сервера, то поддержка PHP на вашем сервере не обязательна. Не забывайте подключить к вашему сайту библиотеку jQuery.
Здесь правила абсолютно те же: полный адрес к файлу, если он находится на внешнем сервере, относительный – если на вашем.
Обратите внимание! Если вы хотите подключить PHP-скрипт к вашему сайту, то на сервере должна быть поддержка PHP. О том, есть ли у вас такая возможность – узнайте у своего хостинг-провайдера.
Если вы осуществляете подключение скриптов первый раз – попробуйте подключить скрипты из архива, который прикреплен в конце статьи. Если в обоих случаях вы получили сообщение «Hello World! » – значит, вы все сделали правильно.
В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент .
Первая программаЧтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ различными стандартными способами:
- поместить код непосредственно в атрибут события HTML-элемента;
- поместить код между открывающим и закрывающим тегами ;
- поместить все ваши скрипты во внешний файл (с расширением.js), а затем связать его с документом HTML.
Самый простой способ внедрения JavaScript в HTML-документ – использование тега . Теги часто помещают в элемент , и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги используются как в элементе , так и в теле веб-страниц.
Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег , рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе .
Это обычный HTML документ
Выходим обратно в HTML
Обратите внимание: мы указали атрибут language тега , указывающий язык программирования, на котором написан сценарий. Значение атрибута language по умолчанию – JavaScript, поэтому, если вы используете скрипты на языке JavaScript, то вы можете не указывать атрибут language .
JavaScript в атрибутах событий HTML-элементовВышеприведенный сценарий был выполнен при открытии страницы и вывел строку: «Привет, мир!». Однако не всегда нужно, чтобы выполнение сценария начиналось сразу при открытии страницы. Чаще всего требуется, чтобы программа запускалась при определенном событии, например при нажатии какой-то кнопки.
В следующем примере функция JavaScript помещается в раздел HTML-документа. Вот пример HTML-элемента с атрибутом события, обеспечивающим реакцию на щелчки мышью. При нажатии кнопки генерируется событие onclick.
Привет, мир!
Кликни меня
Внешний JavaScriptЕсли JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение.js .
Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:
В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами и .
По аналогии с элементом атрибуту src элемента можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:
Чтобы подключить несколько скриптов, используйте несколько тегов:
...
Примечание: Элемент с атрибутом src не может содержать дополнительный JаvаSсriрt-код между тегами и , хотя внешний сценарий выполняется, встроенный код игнорируется.
При наличии атрибута src внутренняя часть тега script игнорируется!
Независимо от того, как JS-код включается в НТМL-документ, элементы интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента , затем браузер приступает ко второму элементу и т. д.
Внешние скрипты практичны, когда один и тот же код используется во многих разных веб-страницах. Браузер скачает js-файл один раз и в дальнейшем будет брать его из своего кеша, благодаря чему один и тот же скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера. Кроме этого, благодаря внешним скриптам, упрощается сопровождение кода, поскольку вносить изменения или исправлять ошибки приходится только в одном месте.
Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов и .
Расположение теговВы уже знаете, что браузер читает HTML-документ сверху вниз и, начинает отображать страницу, показывая часть документа до тега . Встретив тег , переключается в JavaScript-режим и выполняет сценарий. Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.
Это наглядно демонстрирует следующий пример. Метод alert() выводит на экран модальное окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК»:
Начало контента...
Продолжение контента
Если на странице используется много скриптов JavaScript, то могут возникнуть длительные задержки при загрузке, в течение которых пользователь видит пустое окно браузера. Поэтому считается хорошей практикой все ссылки нa javaScript-cцeнapии указывать после контента страницы перед закрывающим тегом :
Такое расположение сценариев позволяет браузеру загружать страницу быстрее, так как сначала загрузится контент страницы, а потом будет загружаться код сценария.
Для пользователей это предпочтительнее, потому что страница полностью визуализируется в браузере до обработки JavaScript-кoдa.
Как отмечалось ранее, по умолчанию файлы JavaScript-кода прерывают синтаксический анализ (парсинг) HTML-документа до тех пор, пока скрипт не будет загружен и выполнен, тем самым увеличивая промежуток времени до первой отрисовки страницы.
Возьмём пример, в котором элемент расположен где-то в середине страницы:
какой-то текст... Этот текст не будет показан, пока браузер не выполнит script.js.
В этом примере, пока пока браузер не загрузит и не выполнит script.js, он не покажет часть страницы под ним. Такое поведение браузера называется «синхронным» и может доставить проблемы, если мы загружаем несколько JavaScript-файлов на странице, так как это увеличивает время её отрисовки.
А что, если HTML-документ на самом деле не зависит от этих JS-файлов, а разработчик желает контролировать то, как внешние файлы загружаются и выполняются?
Кардинально решить проблему загрузки скриптов помогут атрибуты async и defer элемента .
Атрибут asyncAsync используется для того, чтобы указать браузеру, что скрипт может быть выполнен «асинхронно».
При обнаружении тега браузер не останавливает обработку HTML-документа для загрузки и выполнения скрипта, выполнение может произойти после того, как скрипт будет получен параллельно с разбором документа. Когда скрипт будет загружен – он выполнится.
Для сценариев с атрибутом async не гарантируется выполнение скриптов в порядке их добавления, например:
В примере второй скрипт может быть выполнен перед первым, поэтому важно, чтобы между этими сценариями не было зависимостей.
Примечание: Атрибут async используется, если нужно разрешить браузеру продолжить загрузку страницы, не дожидаясь завершения загрузки и выполнения сценария.
Атрибут deferАтрибут defer откладывает выполнение скрипта до тех пор, пока вся HTML-страница не будет загружена полностью.
Как и при асинхронной загрузке скриптов - JS-файл может быть загружен, в то время как HTML-документ ещё грузится. Однако, даже если скрипт будет полностью загружен ещё до того, как браузер закончит обработку страницы, он не будет выполнен до тех пор, пока HTML-документ не обработается до конца.
Несмотря на то, что в приведенном примере теги включены в элемент HTML-документа, выполнение сценариев не начнется, пока браузер не дойдет до закрывающего тега .
Кроме того, в отличие от async , относительный порядок выполнения скриптов с атрибутом defer будет сохранён.
Применение атрибута defer бывает полезным, когда в коде скрипта предусматривается работа с HTML-документом, и разработчик должен быть уверен, что страница полностью получена.
Примечание: Атрибуты async и defer поддерживаются только для внешних файлов сценариев, т.е. работают только при наличии атрибута src .
Итоги- JavaScript можно добавить в HTML-документ с помощью элемента двумя способами:
- Определить встроенный сценарий, который располагается непосредственно между парой тегов и .
- Подключить внешний файл с JavaScript-кодом через .
- Если JavaScript-код используется в нескольких страницах, то его лучше подключать в качестве внешнего сценария. Это существенно облегчает сопровождение и редактирование кода, а также ускорит загрузку и обработку веб-страниц – внешний сценарий загружается браузером всего один раз (в дальнейшем он будет извлекаться из кэша браузера).
- Атрибут defer сигнализирует браузеру, что загрузку сценария можно начать немедленно, но его выполнение следует отложить до тех пор, пока весь HTML-документ будет загружен.
- В тех случаях, когда файл скрипта содержит функции, взаимодействующие с загружаемым HTML-документом или существует зависимость от другого файла на странице необходимо, чтобы HTML-документ был полностью загружен, прежде чем скрипт будет выполнен. Как правило, такая ссылка нa javaScript-cцeнapий помещается в низ страницы перед закрывающим тегом , чтобы убедиться, что для его работы весь документ был разобран. Однако, в ситуации, когда по каким-либо причинам JS-файл должен быть размещён в другом месте документа - атрибут defer может быть полезен.
- Атрибут defer сохраняет относительную последовательность выполнения скриптов, а async – нет.
- Скрипт с атрибутом async выполняется асинхронно с обработкой страницы, когда скрипт будет загружен – он выполнится, даже если HTML-документ ещё не полностью готов.
- Для JS-файлов, которые не зависят от других файлов, атрибут async будет наиболее полезен. Поскольку нам не важно, когда скрипт будет исполнен, асинхронная загрузка - наиболее подходящий вариант.
- Всплывающее окно
Перед вами простой HTML-документ. Разместите в теле НТМL-страницы сценарий, выводящий всплывающее окно с надписью: "Привет, javascript!"
JavaScript - это язык сценариев, который работает работает только в браузере пользователя, то есть на стороне клиента. Для вызова этого языка в HTML-код пишут теги и .
Вот пример простой программки, выводящей в окно браузера фразу "Привет, Мир!":
Пример JavaScript document.write("Привет, Мир!")
В этом скрипте команда document.write("Привет, Мир!") вывела на экран фразу "Привет, Мир!". В команде document.write("") внутри кавычек можно писать любой текст и теги. Теги будут интерпретироваться браузером.
Подробнее про эту команду мы поговорим позже, а сейчас вернёмся к теме этой статьи - вставка сценария JavaScript в код HTML.
На самом деле расширеная и более точная запись тега выглядит так: . В атрибуте type мы указывает тип языка, на котором написан скрипт. В нашем случае это JavaScript. В реальности у JavaScript сейчас нет заметных конкурентов, поэтому во всех современных браузерах по умолчанию будет использоваться JavaScript.
Но для достоверности давайте приведём пример расширенного использования тега:
Пример JavaScript
document.write("Привет, Мир!
Я рад тебя видеть!")
В этом примере также обратите внимание на пару тегов и . Этот тег будет выводить текст на экран только в том случае, если в браузере пользователя отключён JavaScript или он не поддерживается.
Сценарий можно вставлять не только в раздел , но и в раздел .
Пример JavaScript var i = "Привет, Мир!" document.write(i) Ваш браузер не поддерживает JavaScript или поддержка отключена в настройках.
К этому примеру требуется некоторое пояснение. В разделе мы командой var мы создали переменную i и присвоили ей текстовое значение Привет, Мир!. Потом, в разделе мы командой document.write(i) вывели значение этой переменной на экран. Подробнее про переменные написано в статье переменные JavaScript , тут же вы узнали что код JavaScript можно вставить в оба раздела HTML-документа: и .
Второй способ - включение файлаВ статье что такое CSS был описан способ присоединения файла с кодом стилей CSS в документ, называемый связывание . Также можно связывать документ с файлом, в котором записан код JavaScript. Для этого в раздел вставляем тег, как в примере:
Пример JavaScript
Как видете, к документу можно прикрепить два и более файлов с JavaScript сценариями. Можно использовать файлы сценариев, расположенные на стороннем домене, для этого в атрибуте src тега нужно указать URL файла со скриптом. Также можно игнорировать атрибут type , если есть желание.
Файлы с кодом JavaScript должны иметь расширение .js .
В самом файле.js с кодом JavaScript теги использовать не нужно. Это приведёт к ошибке.
Устаревшие и нестандартные браузерыЧтобы поддерживать весьма устаревшие браузеры, которые не понимают код JavaScript, его нужно взять в комментарии используя теги комментариев HTML . Если не сделать этого, то браузер не понимающий JavaScript-код выведет его на экран как обычный текст. Но таких браузеров уже не осталось. Хотя такой код вы можете встретить, и, чтобы понимать его, - давайте разберёмся в этом.
Пример JavaScript
В данном примере открывающий HTML тег комментария , непосредственно перед тегом завершающим код нашего сценария.
Двойной прямой слэш // - это уже комментарий JavaScript, он показывает что вся строка, идущая после него - это комментарий с точки зрения JavaScript. Подробнее про комментарии JavaScript читайте тут.