Техника Web-дизайна для студента
Поиск информации на странице
Если страница имеет достаточно большие размеры, то в ней можно предусмотреть поиск группы слов, отдельного слова и даже части слова. Для этого на странице нужно расположить элементы формы — тестовую строку и кнопку. Программа - сценарий, которая будет выполняться после нажатия кнопки и осуществлять поиск информации, введенной в текстовую строку, создается на базе объекта тextRange и его методов. Текст документа приведен в листинге 8.19.
Листинг 8.19. Пример программы поиска информации на странице
<html>
<head>
< t i 11е>поиск</1 i tle>
<script> str_t="" function poisk()
{str=Tl. value if (str_t!=str)
{txt=document. body. createTextRange() str_t=str}
Rezalt=txt. findText(str) if (rezalt)
{txt. select()
Txt. scrollIntoView()
Txt. collapse(false)}
Else
{alert("Поиск завершен") str_t=""}
}
</script>
</head>
<body>
<p><input type="text" name="Tl" size="20">
<p><input type="button" value=" Найти" name="B3" on - click=poisk()>
Текст, в котором ведется поиск.
</body>
</html>
Переменной st г_ t уже на этапе загрузки документа присваива
Ется значение "пустая строка". Функция poisk() вызывается на выполнение после нажатия кнопки "Найти". Содержимое текстового поля Т1 присваивается переменной str. В операторе условного перехода сравниваются переменные str_t и str. Неравенство этих переменных означает, что поиск только начинается, и это требует выполнения операторов в фигурных скобках. В первом из них используется метод createTextRange () объекта TextRange, который создает экземпляр объекта TextRange из того объекта, к которому применяется метод. В нашем случае метод применяется к объекту body (телу документа), который является составной частью объекта document (всего документа). В результате переменной txt будет присвоено все текстовое содержимое метки <body>. Далее переменной str_t будет присвоено значение переменной str, что при повторном нажатии кнопки "Найти" для поиска того же текста, исключит выполнение этих двух операторов. Непосредственный поиск осуществляется методом findText () объекта TextRange в содержимом текстовой переменной txt, причем, если поиск будет успешным, переменной rezait будет присвоено значение true, в противном случае — false. Назначение следующего оператора условного перехода — выполнить группу из трех операторов только в случае успешного поиска. Во всех трех операторах используются методы объекта TextRange. В первом из них используется метод select (), который выделяет найденный фрагмент. Во втором — метод scroi 1 intoview (), который вызывает прокрутку документа в окне браузера таким образом, чтобы найденный фрагмент появился в окне. В третьем операторе используется метод collapse () с параметром false, который исключает из текстовой строки txt весь просмотренный текст, включая найденный фрагмент. С этого момента строка txt содержит только непросмотренную часть текста. Если после этого функция poisk() будет вызвана повторно для поиска того же фрагмента, то поиск продолжится только в непросмотренной части текста. В случае если фрагмент не был найден, будут выполняться операторы после else, т. е. появится диалоговое окно с текстом "Поиск завершен", и переменной str_t вновь будет присвоено значение "пустая строка". В случае повторного поиска он начнется с начала текста.
