8. Размещение скриптов на html-странице.
Скрипты могут содержать определения переменных и функций, а также инструкции, находящиеся вне функций (т.е. на глобальном уровне документа). Код каждого фрагмента программы на JavaScript размещается в тексте HTML-страницы. Чтобы интерпретатор смог понять, что некоторый фрагмент кода страницы нужно рассматривать как вставку на Javascript, для каждого фрагмента программного кода создается блок (есть некоторые варианты синтаксиса):
<script type="text/javascript">
… код …
</script>
Такой блок может появиться в любом месте документа (в заголовке или теле документа). Однако отдельные фрагменты кода могут выполнять разную роль.
Если в процессе загрузки страницы скрипт обращается к еще не загруженной функции, то возникает ошибка. Это связано с тем, что считывание HTML-страницы браузером осуществляется последовательно. Браузер последовательно интерпретирует строки загружаемого документа и, естественно, не может пользоваться тем, что еще не было просмотрено. Исключение составляет случай, когда вызов функции происходит в том же блоке, где она определена:
<script type="text/javascript">
f(); // функция еще не определена!
function f(){
alert(6);
}
</script>
Поэтому чаще всего, определения функций и глобальных переменных документа собирают в конце его заголовка, т.е. перед закрывающим тегом </head>. В этом случае все функции будут определены прежде, чем будет формироваться содержание документа.
Здесь же может содержаться код общего назначения, например, определение типа браузера, от чего может зависеть работа остальной части кода.
С другой стороны, те части кода, где непосредственно формируется динамическое содержание страницы, естественно размещаются в теле документа. Таким образом, файлы со скриптами обычно имеют приблизительно следующую структуру:
<html>
<head>
<title> ... </title>
<script type="text/javascript">
определения переменных и функций
</script>
</head>
<body>
обычный HTML-код
<script type="text/javascript">
код, формирующий текст страницы
</script>
обычный HTML-код и т.д.
</body>
</html>
9. Динамическое формирование содержания html-страницы из скрипта.
Идея динамического формирования страниц состоит в том, что часть HTML-кода страницы не задается непосредственно, а "вычисляется" скриптом и затем добавляется к остальному тексту страницы (замещает собой скрипт).
Для того, чтобы вставить в HTML-документ текст, сформированный скриптом, используется метод write объекта document. Текст, формируемый скриптом, может содержать HTML-теги, которые будут интерпретироваться браузером наравне с обычными.
Пример.
<html>
<head>
<title> Программа 1 </title>
<script type="text/javascript">
var x=1;
</script>
</head>
<body>
<script type="text/javascript">
document.write("<font size='3' face='arial'>");
document.write("Переменная <b><i>x</i></b> имеет значение "+
"<b>"+x+"</b>");
document.write("</font>");
</script>
</body>
</html>
Примечание
Обратите внимание, как организован перенос на новую строку длинного текста, формируемого с помощью конкатенации. Метод допускает также использовать вместо конкатенации список выводимых элементов (через запятую).
Поэтому приведенная выше инструкция может выглядеть, например, так:
document.write("Переменная <b><i>x</i></b> имеет значение ",
"<b>"+x+"</b>");
При загрузке файла будет выведена страница с отформатированным текстом:
Замечание.
В принципе, скриптом может быть сгенерирован даже весь HTML-текст документа.
ЗАДАНИЕ 1 (формирование текста HTML-страницы из скрипта и изучение правил преобразования типов данных).
Проверить работу сценария страницы из предыдущего примера.
Проверить правила преобразования типов данных в смешанных выражениях, используя примеры, приведенные в пункте "Преобразования типов". Для этого значения выражений присваивать новым переменным, и с помощью скрипта выводить результаты в форме:
ЗАДАНИЕ 2
Необходимо создать страницу, на которую выводится таблица квадратов чисел от 1 до некоторого заданного переменного N:
Для этого нужно выполнить следующие действия.
1. Написать функцию sqrtTable(N), в которой полностью генерируется HTML-код для вывода таблицы квадратов. N — задаваемое максимальное число. Функция должна возвращать этот код в виде символьной строки.
Примечание.
Генерируемый HTML-код должен содержать
а) заголовочную часть таблицы,
б) строки таблицы, выводимые в цикле
в) тег закрытия таблицы.
Текст имеет смысл последовательно накапливать в одной переменной (для конкатенации использовать синтаксис txt+=…).
Необходимо выдержать форматирование, приведенное на рисунке.
2. Для создания таблицы
а) в скрипте, помещенном в тело документа, вызвать функцию sqrtTable с конкретным значением аргумента,
б) возвращаемое функцией значение добавляется в текст страницы (как это сделать?).