Today’s Date

Use JavaScript within a webpage

Take your webpages to the next level by harnessing JavaScript. Learn in this article how to trigger JavaScript right from your HTML documents.

Prerequisites:	You need to be familiar with how to create a basic HTML document.
Objective:	Learn how to trigger JavaScript in your HTML file, and learn the most important best practices for keeping JavaScript accessible.

About JavaScript

JavaScript is a programming language mostly used client-side to make webpages interactive. You can create amazing webpages without JavaScript, but JavaScript opens up a whole new level of possibilities.

Note: In this article we’re going over the HTML code you need to make JavaScript take effect. If you want to learn JavaScript itself, you can start with our JavaScript basics article. If you already know something about JavaScript or if you have a background with other programming languages, we suggest you jump directly into our JavaScript Guide.

How to trigger JavaScript from HTML

Within a browser, JavaScript doesn’t do anything by itself. You run JavaScript from inside your HTML webpages. To call JavaScript code from within HTML, you need the element. There are two ways to use script , depending on whether you’re linking to an external script or embedding a script right in your webpage.

Linking an external script

Usually, you’ll be writing scripts in their own .js files. If you want to execute a .js script from your webpage, just use with an src attribute pointing to the script file, using its URL:

script src="path/to/my/script.js"> script> 

Writing JavaScript within HTML

You may also add JavaScript code between tags rather than providing an src attribute.

script> window.addEventListener("load", () =>  console.log("This function is executed once the page is fully loaded"); >); script> 

That’s convenient when you just need a small bit of JavaScript, but if you keep JavaScript in separate files you’ll find it easier to

• focus on your work
• write self-sufficient HTML
• write structured JavaScript applications

Use scripting accessibly

Accessibility is a major issue in any software development. JavaScript can make your website more accessible if you use it wisely, or it can become a disaster if you use scripting without care. To make JavaScript work in your favor, it’s worth knowing about certain best practices for adding JavaScript:

• Make all content available as (structured) text. Rely on HTML for your content as much as possible. For example, if you’ve implemented a nice JavaScript progress bar, make sure to supplement it with matching text percentages inside the HTML. Likewise, your drop-down menus should be structured as unordered lists of links.
• Make all functionality accessible from the keyboard.
  • Let users Tab through all controls (e.g., links and form input) in a logical order.
  • If you use pointer events (like mouse events or touch events), duplicate the functionality with keyboard events.
  • Test your site using a keyboard only.
  • At a minimum, leave a short message with like this:
  • Ideally, replicate the JavaScript functionality with HTML and server-side scripting when possible.
  • If you’re only looking for simple visual effects, CSS can often get the job done even more intuitively.
  • Since almost everybody does have JavaScript enabled,

  Learn more

  Found a content problem with this page?

  This page was last modified on Jun 30, 2023 by MDN contributors.

  Your blueprint for a better internet.

  Источник

  Подключение JavaScript к HTML

  

  Осваивайте профессию, начните зарабатывать, а платите через год!

  

  Курсы Python Ак­ция! Бес­плат­но!

  

  Станьте хакером на Python за 3 дня

  

  Веб-вёрстка. CSS, HTML и JavaScript

  

  

  

  Станьте веб-разработчиком с нуля

  

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

  Первая программа

  Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
  Сценарии внедряются в HTML-документ различными стандартными способами:

  • поместить код непосредственно в атрибут события HTML-элемента;
  • поместить код между открывающим и закрывающим тегами ;
  • поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.

  JavaScript в элементе script

  Самый простой способ внедрения JavaScript в 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-страницы:

  На заметку: Подробнее о путях файлов читайте в разделе «Абсолютные и относительные ссылки».

  Чтобы подключить несколько скриптов, используйте несколько тегов:

  Примечание: Элемент , хотя внешний сценарий выполняется, встроенный код игнорируется.

  Независимо от того, как JS-код включается в НТМL-документ, элементы интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента , затем браузер приступает ко второму элементу и т. д.

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

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

  Расположение тегов

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

  Это наглядно демонстрирует следующий пример. Метод alert() выводит на экран модальное окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК»:

  Источник

  Добавление кода JavaScript в HTML

  JavaScript (JS) – это язык программирования, используемый в веб-разработке. Наряду с HTML и CSS JavaScript является одной из основных технологий и используется для создания интерактивных веб-страниц и приложений. Современные веб-браузеры, которые придерживаются базовых стандартов отображения, поддерживают JavaScript через встроенные модули и не требуют дополнительных плагинов.

  Создавая файлы приложения, JavaScript необходимо загружать и запускать вместе с разметкой HTML. Это можно сделать либо внутри HTML-документа, либо в отдельном файле, который браузер загрузит вместе с HTML-документом.

  Данный манул научит внедрять JavaScript в HTML-документы и отдельные файлы программы.

  Добавление JavaScript в HTML-документ

  Чтобы вставить JavaScript в HTML-документ, используйте специальный тег , который охватывает код JavaScript.

  Тег можно вставить в раздел и в или после закрывающего тега в зависимости от того, когда нужно загрузить JavaScript.

  Как правило, код JavaScript размещается внутри раздела , что позволяет отделить его от основного содержимого документа HTML.

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

  Рассмотрим следующий HTML-документ с заголовком Today’s Date.

  На данный момент этот файл содержит только разметку HTML. Предположим, в документ нужно добавить следующий код JavaScript:

  let d = new Date();
  alert("Today's date is " + d);

  Этот код позволит веб-странице отображать сообщение с текущей датой независимо от того, когда пользователь загружает сайт.

  Для этого нужно добавить тег и поместить в него код JavaScript.

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

  Загрузите страницу. На ней появится следующее предупреждение:

  Today’s date is Thu Jun 29 2017 10:46:47 GMT-0400 (EDT)

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

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

  
  

  
  
  
  
  

  Загрузите эту страницу в браузере. Теперь дата будет указана прямо в теле страницы.

  Today’s date is Thu Jun 29 2017 14:04:45 GMT-0400 (EDT)

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

  Отдельные файлы JavaScript

  Большие скрипты JavaScript помещают в специальные файлы js, а затем ссылаются на них внутри HTML-документа. Подобный механизм используется в CSS.

  Преимущества такого подхода:

  • Разметку HTML и скрипты JavaScript проще читать по отдельности.
  • Такой код проще поддерживать.
  • Если JavaScript кэшируется, страницы будут быстрее загружаться.

  Чтобы научиться связывать файлы JavaScript с HTML, создайте небольшой тестовый проект. Он будет состоять из таких файлов:

  • script.js в каталоге js/,
  • style.css в каталоге css/,
  • главный файл index.html в корневом каталоге проекта.

  project/
  ├── css/
  | └── style.css
  ├── js/
  | └── script.js
  └── index.html

  Начать можно с файла index.html и шаблона, который мы рассмотрели в предыдущем разделе.

  Затем перейдите к файлу script.js, в котором хранится скрипт JavaScript. Он будет отображать заголовок .

  let d = new Date();
  document.body.innerHTML = "

  Today's date is " + d + "

  "

  Добавьте ссылку на этот скрипт в раздел или под ним:

  Тег указывает на скрипт script.js в каталоге js/.

  Теперь главный документ index.html будет выглядеть так:

  Теперь отредактируйте файл style.css и укажите в нем цвет фона и стиль заголовка .

  body background-color: #0080ff;
  >
  h1 color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  >

  После этого нужно сослаться на файл CSS в разделе HTML-документа index.html:

  Попробуйте загрузить эту страницу в браузере. Она будет выглядеть так:

  Today’s date is Thu Jun 29 2017 14:08:55 GMT-0400 (EDT)

  На этот файл JavaScript могут ссылаться и другие HTML-документы.

  Заключение

  Теперь вы умеете внедрять код JavaScript в HTML-документы, создавать специальные файлы для скриптов JavaScript и ссылаться на них.

  Читайте также:

  Источник