Учебники

HTML — JavaScript

Декабрь 15, 2018

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

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

В настоящее время большинством веб-разработчиков используется только JavaScript и связанные с ним фреймворки, VBScript даже не поддерживается различными основными браузерами.

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

Внешний JavaScript

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

пример

Предположим, мы определили небольшую функцию с использованием JavaScript в script.js, который имеет следующий код — 

function Hello() {
   alert("Hello, World");
}

Теперь давайте воспользуемся вышеуказанным внешним файлом JavaScript в нашем следующем HTML-документе —

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script</title>
      <script src = "/html/script.js" type = "text/javascript"/></script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

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

Внутренний скрипт

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

пример

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript Internal Script</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

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

Обработчики событий

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

Следующий пример объясняет, как написать обработчик события. Давайте напишем одну простую функцию EventHandler () в заголовке документа. Мы будем вызывать эту функцию, когда любой пользователь наводит указатель мыши на абзац.

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>Event Handlers Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function EventHandler() {
            alert("I'm event handler!!");
         }
      </script>
   </head>

   <body>
      <p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
   </body>

</html>

Теперь это даст следующий результат. Наведите указатель мыши на эту строку и посмотрите результат —

Скрыть скрипты от старых браузеров

Хотя большинство (если не все) браузеры в наши дни поддерживают JavaScript, но все же некоторые старые браузеры этого не делают. Если браузер не поддерживает JavaScript, вместо запуска вашего скрипта он отобразит код для пользователя. Чтобы предотвратить это, вы можете просто разместить HTML-комментарии вокруг скрипта, как показано ниже. 

JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

Элемент <noscript>

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

JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

<noscript>Your browser does not support JavaScript!</noscript>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

<noscript>Your browser does not support VBScript!</noscript>

Язык сценариев по умолчанию

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

<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />

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

43
Share: