2020-04-07
103
Первое, что нужно рассмотреть, это встраивание сценариев языка JavaScript непосредственно в структуру документа HTML. Допустим имеется в наличии небольшая страница «index.html» со следующим кодом:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<link rel=”stylesheet” href=”css/style.css” />
<title>JavaScript</title>
</head>
<body>
<div class=”wrap”>
<div class=”karkas”>
<h1>JavaScript</h1>
</div>
</div>
</body>
</html>
Встраивание сценариев. Первый способ.
Добавить код языка JavaScript в код документа HTML можно четырьмя различными способами. Первый способ заключается в создании встроенного сценария между парой тегов: «<script>» и «</script>». Внутри этого блока можно кодировать на языке JavaScript. К примеру, вызовем на исполнение метод alert() и отобразим на экране строку «Hello world»:
<script>
alert(“Hello world”);
</script>
Сохраним изменения и обновим страницу. В окне браузера видна отработка кода.
Данный файл «index.html», в котором осуществляется работа и в который внесены изменения, можно открыть в браузере и работоспособность кода не изменится. Такой простой способ для быстрого встраивания неких скриптов внутрь HTML-страницы. Имеется один существенный недостаток. К примеру, если страница HTML очень сложная, со сложным дизайном, сложным форматированием и в данную страницу добавляется огромный код языка JavaScript, то данный файл документа HTML будет очень сложен для разбора, дальнейшего редактирования и т.д, потому как помимо тегов языка будет присутствовать код языка JavaScript.
|
|
|
Встраивание сценариев. Второй способ.
Перейдем ко второму способу встраивания сценариев языка JavaScript непосредственно в документ HTML. Это встраивание сценариев из внешнего файла, путь к которому задается в значении атрибута «src» тега «<script>». Используя данный тег можно добавить атрибут «src» и в значении данного атрибута прописать путь к некоему внешнему файлу, где хранится код программы языка JavaScript. К примеру, укажем в значении атрибута название папки «js» и название некоего файла «script.js».
<script src=”js/script.js”>
alert(“Hello world”);
</script>
Данный файл не определен, перейдем в папку сайта, т.е. в каталог «js» и создадим новый файл «script.js». Обычно эти файлы сохраняют в кодировке «utf-8» и соответственно проделаем это. Открываем упомянутый выше файл и проверяем, чтобы кодировка этого файла была «utf-8» для того, чтобы не возникало никаких проблем с кодировкой. Соответственно, внутри данного файла можно написать текст скрипта, т.е. код на языке JavaScript. К примеру следующую строчку кода:
alert(“hello”);
В данном файле уже нет надобности прописывать теги «<script>» и «</script>», т.к. если файл создается с расширением «.js», то в данном файле должен располагаться только код языка JavaScript и ничего больше. Сохраним изменения, перейдем в браузер, обновим страницу и видим появление сообщения со строкой «hello». При этом внутри блока кода между тегами «<script>» и «</script>» располагается предыдущий текст программы (в файле «index.html»).
|
|
|
<script src=”js/script.js”>
alert(“Hello world”);
</script>
Если подключается код скрипта из внешнего файла при использовании атрибута «src», то код, расположенный внутри блока между тегами «<script>» и «</script>», не берется во внимание, т.е. игнорируется. Это нужно понимать. Можно добавить некое пояснение к рассматриваемому скрипту. В рассмотренном случае ничего не располагают внутри блока «<script></script>».
Если в блоке кода не указывать закрывающий тег «</script>», то ничего не будет работать. Данный документ HTML будет работать неверно, т.к. блок «script>» представляет собой парный тег. Поэтому обязательно должен присутствовать закрывающий тег.
Сохраним изменения и увидим, что программа успешно отработала.
Встраивание сценариев. Третий способ.
Третий способ встраивания кода языка JavaScript в структуру документа HTML заключается в использовании обработчиков событий, которые задаются в значении специальных атрибутов. К примеру, создадим следующий тег. Укажем в теге атрибуты «type» и «value» со значениями «button» и «OK».
<input type=”button” value=”OK”>
При создании данного тега можно указать один из обработчиков событий. К примеру «onClick». Когда будет выполняться клик мышью по данному тегу, выполнится скрипт, который прописан в значении атрибута «onClick». Соответственно, можно указать в значении атрибута вызов метода alert() с передачей одного параметра со значением «Click»:
<input type=”button” value=”OK” onClick=”alert(‘Click’)”>
Сохраняем изменения, переходим в документ, обновляем информацию и видим появившуюся на странице кнопку. Кликаем мышью по кнопке и видим отработку метода alert(). Метод alert() отображает сообщение в виде небольшого всплывающего окна. В окне присутствует кнопка «OK» при нажатии которой это сообщение удаляется.
Следует обратить внимание, что если код, который подключается с помощью первого и второго способов, отрабатывает один раз, то при использовании обработчиков событий, используемый код можно использовать многократно. Повторно кликнем мышью по кнопке «OK» и еще раз увидим отработку кода языка JavaScript, который добавлен в значении данного атрибута. До бесконечности, сколько бы ни пришлось нажимать на кнопку «OK», будет отрабатывать некий код.
По сути, добавлена небольшая конструкция. Но, можно обратиться к некой функции, которая будет описана во внешнем файле. Во внешнем файле можно описать достаточно сложный код, некую сложную функцию и обращаться к ней непосредственно из атрибута HTML-тега, потому как во значении данного атрибута нельзя прописать сложный текст программы. Но можно обратиться к функции. О функциях будет еще разговор, а пока что, идет речь о том, как встраивать код языка JavaScript непосредственно в документ HTML.
