Чтобы ваша первая пpoгpaммa JavaScript запустилась, ее нужно внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ стандартными способами:
- поместить все ваши скрипты во внешний файл (с расширением .js), следом подключить его в документе HTML;
- поместить код непосредственно в атрибут события HTML-элемента;
- поместить код между открывающим и закрывающим тегами
<script>.
Внешний JavaScript
В случаях когда JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .js.
Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src тега <script>.
Самый популярный способ подключения JS-кода:
<script src="script.js"></script>Чтобы подключить несколько скриптов, используйте несколько тегов:
<script src="script1.js"></script>
<script src="script2.js"></script>Кроме того можно подключать скрипты со сторонних сайтов.
<script src="https://www.google-analytics.com/analytics.js"></script>Прописывают тег как правило перед закрывающим тегом
</body>.
JavaScript в атрибутах событий HTML-элементов
Чаще всего требуется, чтобы скрипт исполнялся, например при нажатии какой-то кнопки.
Функция JavaScript помещается в раздел <head> HTML-документа. Пример HTML-элемента <button> с атрибутом события, обеспечивающим реакцию на щелчки мышью.
При нажатии кнопки генерируется событие onclick.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Привет, javascript!";
}
</script>
</head>
<body>
<p id="demo">Привет, мир!</p>
<button type="button" onclick="myFunction()">Кликни меня</button>
</body>
</html>JavaScript в элементе script
Самый простой способ внедрения JavaScript в HTML-документ – использование тега <script>. Теги <script> часто помещают в элемент <head>, и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги <script> используются как в элементе <head>, так и в теле веб-страниц.
Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки.
Браузер читает HTML-документ сверху вниз, следом слева направо. Когда он встречает тег
<script>, рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе<script>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>Это обычный HTML документ</p>
<script>
alert("Привет, мир!");
</script>
<p>Выходим обратно в HTML</p>
</body>
</html>
