Javascript урок для начинающих. На уроке разберем как внедрить код javacript HTML-код.
Урок 1. Внедрение сценариев
Содержание:
Добавление сценариев Javascript в HTML
Программный код добавляется в html-документ двумя основными способами.
1. Встраивание блоков программного кода в веб-страницы
Встраиваемый код добавляется в html-разметку с помощью вставок, ограниченных тегами <script> и </script>.
- Устаревший вариант дескриптора с атрибутом
language
:
<sсript language="javascript">...</sсript> |
- Действующий вариант:
<sсript type="text/javascript">...</sсript> |
Задача этих элементов-контейнеров — проинформировать интерпретатор HTML, что следующая часть документа должна быть передана на обработку интерпретатору JS.
Формальных ограничений на количество и расположение блоков встраиваемого кода нет. Они могут быть помещены как в заголовочную (<head>), так и в основную (<body>) часть документа.
Когда в процессе разбора документа встречается блок js-кода, то он подлежит немедленной интерпретации и выполнению.
Если на странице встречается несколько вставок кода (скриптов), то они выполняются по мере того, как их встречает интерпретатор HTML.
Примечание. Ссылка на переменную, которая была определенна в сценарии и размещенная в конце документа, может привести к генерации ошибки интерпретатора при обращении к такой переменной из сценария в начале документа.
Если при выполнении вставки js-кода возникает ошибка, то дальнейшее её выполнение прекращается. Однако это не запрещает выполнять другие скрипты, которые встретятся интерпретатору позже.
2. Загрузка кода из внешнего файла.
JS-код может быть полностью или частично загружен из внешнего файла с помощью инструкции:
<sсript src="имя файла.js"></sсript> |
В предыдущих версиях HTML и XHTML в теге <script>
требовалось указывать атрибут type="text/javascript"
. В HTML5 это не нужно.
На одну страницу может быть любое количество js-файлов.
3. Код в атрибутах элементов
Это особый способ добавления кода. Для различных html-элементов определены специальные атрибуты, которые используются для описания поведение элементов в ответ на появление некоторых событий. Значением этих атрибутов является js-код. Использование этого кода будет обсуждаться при изучении событийной архитектуры.
Пример: Вывести сообщение «Привет, мир!», используя скрипт на языке JavaScript.
- Встраивание JavaScript непосредственно в HTML-страницу:
<body> <sсript type="text/javascript"> document.write("Привет, мир!"); // Вывод сообщения в наш файл </sсript> </body> |
2. Размещение сценария во внешнем файле:
<head> <sсript src="/js/script.js"></sсript> </head> |
При прикреплении внешнего файла следует размещать тег script
в области head
.
В файле с расширением js
(в данном конкретном примере — script.js) код выглядит так:
document.write("Привет, мир!"); // Вывод сообщения в наш файл |
В примере имеется в виду, что файл со скриптом находится в каталоге js
. При прикреплении в html-файле надо указывать относительный путь к файлу со скриптом.
Различия между методом alert()
и document.write()
Запомнить:
- Функция
document.write()
используется для вывода информации на экран; - Тогда как
document.writeln()
— используется для перевода на новую строку, если используется тег форматированияpre
; alert()
— это метод для вывода модального (диалогового) окна с сообщением.
Пример: Посмотрите как выполняется код и затем поменяйте местами строчки с alert()
и document.write()
.
<html> <head> <title>Название</title> </head> <body> <sсript> alert("Вывод сообщения в модальном окне"); document.write("Вывод текста на странице"); </sсript> </body> </html> |
Отличительной особенностью метода alert()
является появление окна сообщения, которое не скроется, пока пользователь не нажмет на клавишу «Enter» или в появившимся окне на «Закрыть» или «Ок».
Пример: Поместить скрипт в body
после тега H2
.
<html> <head> <title>Название</title> </head> <body> <H2> <sсript> alert("Вывод сообщения в модальном окне"); document.write("Вывод текста на странице"); </sсript> </H2> </body> </html> |
Пример: Поместить скрипт в body
после тега div
. Задать фон тексту.
<html> <head> <title>Название</title> <style> div { background: #ffff00; /* Цвет фона желтый */ } </style> </head> <body> <div> <sсript> alert("Вывод сообщения в модальном окне"); document.write("Вывод текста на странице"); </sсript> </div> </body> </html> |
Задать фон тексту можно через тег <style>
… </style>
. Более подробно о теге здесь.