Открытие новых окон в браузере – мощная возможность языка JavaScript. Вы можете либо загружать в новое окно новые документы (например, те же документы HTML), либо (динамически) создавать новые материалы. Посмотрим сначала, как можно открыть новое окно, потом как загрузить в это окно HTML-страницу и, наконец, как его закрыть. Приводимый далее скрипт открывает новое окно браузера и загружает в него некую web-страницу (пример 12.4.1.1): <html><head><script language="JavaScript"><!-- hide function openWin() { myWin= open("bla.htm");} // --></script></head><body> <form><input type="button" value="Открыть новое окно" onClick="openWin()"></form> </body></html> Заметим, что вы имеете возможность управлять самим процессом создания окна. Например, вы можете указать, должно ли новое окно иметь строку статуса, панель инструментов или меню. Кроме того вы можете задать размер окна. Например, в следующем скрипте открывается новое окно размером 400x300 пикселов. Оно не имеет ни строки статуса, ни панели инструментов, ни меню (пример 12.4.1.2): <html><head><script language="JavaScript"><!-- hide function openWin2() { myWin= open("bla.htm", "displayWindow", "width=400,height=300,status=no,toolbar=no,menubar=no");} // --></script></head><body> <form><input type="button" value=" Открыть новое окно" onClick="openWin2()"></form> </body></html> Как видите, свойства окна мы формулируем в строке "width=400,height=300,status=no,toolbar=no,menubar=no". Обратите внимание также и на то, что в этой строке недопустимы пробелы! Список свойств окна, которыми вы можете управлять:· directories – yes|no· height – количество пикселов · location – yes|no· menubar – yes|no· resizable – yes|no· scrollbars – yes|no· status – yes|no· toolbar – yes|no· width – количество пикселов В версии 1.2 языка JavaScript были добавлены некоторые новые свойства: · alwaysLowered – yes|no· alwaysRaised – yes|no· dependent – yes|no· hotkeys – yes|no· innerWidth – количество пикселов (заменяет width)· innerHeight – количество пикселов (заменяет height)· outerWidth – количество пикселов· outerHeight – количество пикселов· screenX – количество пикселов· screenY – количество пикселов· titlebar – yes|no· z-lock – yes|no Вы можете найти описание этих свойств в описании языка JavaScript 1.2. Открывая окна, мы должны использовать три аргумента: myWin= open("bla.htm", "displayWindow", "width=400,height=300,status=no,toolbar=no,menubar=no"); Второй аргумент – это имя окна. Ранее мы видели, как оно использовалось в параметре target. Так, если вы знаете имя окна, то можете загрузить туда новую страницу с помощью записи <a href="bla.html" target="displayWindow"> При этом вам необходимо указать имя соответствующего окна (если же такого окна не существует, то с этим именем будет создано новое). Вы можете также закрывать окна с помощью языка JavaScript. Чтобы сделать это, понадобится метод close(). Давайте, как было показано ранее, откроем новое окно и загрузим туда очередную страницу (пример 12.4.1.3): <html><script language="JavaScript"><!-- hide function closeIt() { close();} // --></script> <center><form><input type=button value="Close it" onClick="closeIt()"></form></center> </html> Если теперь в новом окне вы нажмете кнопку, то оно будет закрыто.
Для начала мы создадим простой HTML-документ, который покажем в новом окне. Рассмотрим следующий скрипт (пример 12.5.1): <html><head><script language="JavaScript"><!-- hide function openWin3() { myWin= open("", "displayWindow", "width=500,height=400,status=yes,toolbar=yes,menubar=yes"); // открыть объект document для последующей печати myWin.document.open(); // генерировать новый документ myWin.document.write("<html><head><title>On-the-fly"); myWin.document.write("</title></head><body>"); myWin.document.write("<center><font size=+3>"); myWin.document.write("Данный документ HTML был создан "); myWin.document.write("с помощью JavaScript!"); myWin.document.write("</font></center>"); myWin.document.write("</body></html>"); // закрыть документ - (но не окно!) myWin.document.close(); } // --></script></head><body> <form><input type=button value="On-the-fly" onClick="openWin3()"></form> </body></html> Давайте рассмотрим функцию winOpen3(). Сначала мы открываем новое окно браузера. Поскольку первый аргумент функции open() - пустая строка (""), то это значит, что мы не желаем в данном случае указывать конкретный адрес URL. В скрипте мы определяем переменную myWin и с её помощью можем получать доступ к новому окну. В данном случае мы не можем воспользоваться для этой цели именем окна (displayWindow). После того, как мы открыли окно, наступает очередь открыть для записи объект document. Делается это с помощью команды: // открыть объект document для последующей печати myWin.document.open(); Здесь мы обращаемся к open() - методу объекта document. Однако это совсем не то же самое, что метод open() объекта window! Эта команда не открывает нового окна - она лишь готовит document к предстоящей печати. Кроме того, мы должны поставить перед document.open() приставку myWin, чтобы получить возможность писать в новом окне.В последующих строках скрипта с помощью вызова document.write() формируется текст нового документа: // генерировать новый документ myWin.document.write("<html><head><title>On-the-fly"); myWin.document.write("</title></head><body>"); myWin.document.write("<center><font size=+3>"); myWin.document.write("This HTML-document has been created "); myWin.document.write("with the help of JavaScript!"); myWin.document.write("</font></center>"); myWin.document.write("</body></html>"); Как видно, здесь мы записываем в документ обычные тэги языка HTML. То есть мы фактически генерируем разметку HTML. По завершении этого мы обязаны вновь закрыть документ. Это делается следующей командой: // закрыть документ - (но не окно!) myWin.document.close(); Например, если вы получили два фрейма с именами frame1 и frame2, а теперь во frame2 хотите сгенерировать новый документ, то для этого в frame1 вам достаточно будет написать следующее: parent.frame2.document.open(); parent.frame2.document.write("Here goes your HTML-code"); parent.frame2.document.close();
Рассмотрим теперь, как создаются навигационные панели. В одном фрейме мы создаем несколько ссылок. Однако, если посетитель активирует какую-либо из них, соответствующая страница будет помещена не в тот же самый фрейм, а в соседний. Нам необходимо написать скрипт, создающий указанные фреймы. Такой документ выглядит точно так же, как и тот, что мы рассматирвали ранее в этой части описания (пример 12.3.3.1): frames3.htm <html><frameset rows="80%,20%"> <frame src="start.htm" name="main"> <frame src="menu.htm" name="menu"> </frameset> </html> Здесь start.htm – это страница, которая первоначально будет показана в главном фрейме (main). У нас нет никаких специальных требований к содержимому этой страницы. Следующая web-страница будет загружена во фрейм "menu" (пример 12.3.3.2): menu.htm <html><head><script language="JavaScript"><!-- hide function load(url) { parent.main.location.href= url;} // --></script></head><body> <a href="javascript:load('first.htm')">first</a><a href="second.htm" target="main">second</a><a href="third.htm" target="_top">third</a> </body></html> Здесь вы можете увидеть несколько способов загрузки новой страницы во фрейм main. В первой ссылке для этой цели используется функция load(). Давайте посмотрим, как это делается: <a href="javascript:load('first.htm')">first</a> Вместо явной загрузки новой страницы мы предлагаем браузеру выполнить некую команду на языка JavaScript. Сама же функция load() определяется следующим образом: function load(url) { parent.main.location.href= url;} Во второй ссылке присутствует параметр target. На самом деле это уже не относится к JavaScript, это одна из конструкций языка HTML. Как видно, мы всего лишь указываем имя необходимого фрейма. И на примере третьей ссылки вы можете видеть, как с помощью target можно избавиться от фреймов.А если вы хотите избавиться от фреймов с помощью функции load(), то вам необходимо написать в ней лишь parent.location.href= url. Одна из наиболее часто возникающих проблем состоит в том, чтобы разом загрузить две страницы в два различных фрейма. Предположим, мы имеем три фрейма с именами frame1, frame2 и frame3. Допустим, посетитель активирует ссылку в frame1. И мы хотим, чтобы при этом в два других фрейма загружались две различные web-страницы. В качестве решения этой задачи вы можете, например, воспользоваться функцией: function loadtwo() { parent.frame1.location.href= "first.htm"; parent.frame2.location.href= "second.htm";}
А теперь посмотрим, как JavaScript “видит” фреймы, присутствующие в окне браузера. Для этой цели мы создадим два фрейма, как было показано в примере 12.3.1.1 этой части описания. Как мы уже видели, JavaScript организует все элементы, представленные на web-странице, в виде некой иерархической структуры. То же самое относится и к фреймам. На следующем рисунке показана иерархия объектов, представленных в примере 12.3.1.1 (рис. 12.3.2.1): Рисунок 12.3.2.1 – фреймы В вершине иерархии находится окно браузера (browser window). В данном случае он разбито на два фрейма. Таким образом, окно, как объект, является родоначальником, родителем данной иерархии (parent), а два фрейма – соответственно, его потомки (children). Мы присвоили этим двум фреймам уникальные имена - frame1 и frame2. И с помощью этих имён мы можем обмениваться информацией с двумя указанными фреймами. С помощью скрипта можно решить следующую задачу: допустим посетитель активирует некую ссылку в первом фрейме, однако соответствующая страница должна загружаться не в этот же фрейм, а в другой. Примером такой задачи может служить составление меню (или навигационных панелей), где один фрейм всегда остается неизменным, но предлагает посетителю несколько различных ссылок для дальнейшего изучения данного сайта. Чтобы решить эту задачу, мы должны рассмотреть на три случая:· главное окно/фрейм получает доступ к фрейму-потомку;· фрейм-потомок получает доступ к родительскому окну/фрейму;· фрейм-потомок получает доступ к другому фрейму-потомку. С точки зрения объекта “окно” (window) два указанных фрейма называются frame1 и frame2. Как можно видеть на предыдущем рисунке, существует прямая взаимосвязь между родительским окном и каждым фреймом. Так образом, если вы пишете скрипт для родительского окна – то есть для страницы, создающей эти фреймы – то можете обращаться к этим фреймам, просто называя их по имени. Например, можно написать: frame2.document.write("Это сообщение передано от родительского окна."); В некоторых случаях вам понадобится, находясь во фрейме, получать доступу к родительскому окну. Например, это бывает необходимо, если вы хотите при следующем переходе избавиться от фреймов. В таком случае удаление фреймов означает лишь загрузку новой страницы вместо содержавшей фреймы. В нашем случае это загрузка страницы в родительское окно. Сделать это нам поможет доступ к родительскому окну (или родительскому фрейму) из фреймов, являющихся его потомками. Чтобы загрузить новый документ, мы должны внести в location.href новый адрес URL. Поскольку мы хотим избавиться от фреймов, следует использовать объект location из родительского окна. (Напомним, что в каждый фрейм можно загрузить собственную страницу, то мы имеем для каждого фрейма собственный объект location). Итак, мы можем загрузить новую страницу в родительское окно с помощью команды: parent.location.href= "http://..."; Аналогичного эффекта можно достичь и средствами HTML, используя свойство target тега a: <a href="mypage.html" target="_top"> (_new – загрузить в новое окно, имя_фрейма – загркзить в указанный фрейм) И наконец, очень часто вам придётся решать задачу обеспечения доступа с одного фрейма-потомка к другому такому же фрейму-потомку. Итак, как можно, находясь в первом фрейме, записать что-либо во второй? Как можно увидеть на нашем рисунке, между двумя этими фреймами нет никакой прямой связи. И потому мы не можем просто так вызвать frame2, находясь в фрейме frame1, который просто ничего не знает о существовании второго фрейма. С точки же зрения родительского окна второй фрейм действительно существует и называется frame2, а к самому родительскому окну можно обратиться из первого фрейма по имени parent. Таким образом, чтобы получить доступ к объекту document, разместившемуся во втором фрейме, мы должны написать следующее,: parent.frame2.document.write("Привет, это вызов из первого фрейма.");
Один из часто задаваемых вопросов – как фреймы и JavaScript могут работать вместе. В общем случае окно браузера может быть разбито в несколько отдельных фреймов. Это означает, что фрейм определяется как некое выделенное в окне браузера поле в форме прямоугольника. Каждый из фреймов выдает на экран содержимое собственного документа. Для создания фреймов необходимо два тэга: <frameset> и <frame>. HTML-страница, создающая два фрейма, в общем случае может выглядеть следующим образом (пример 12.3.1.1): <html><frameset rows="50%,50%"> <frame src="page1.htm" name="frame1"> <frame src="page2.htm" name="frame2"> </frameset> </html> Свойство rows позволяет расположить фреймы над другом. В верхний фрейм будет загружена HTML-страница page1.htm, а в нижнем фрейме разместится документ page2.htm. Если нужно, чтобы документы располагались не друг над другом, а рядом то, следует использовать свойство cols. Фрагмент "50%,50%" определяет относительные размеры фреймов (в процентах или пикселах). Любому фрейму можно присвоить уникальное имя, воспользовавшись в тэге <frame> атрибутом name. Такая возможность пригодится нам в языке JavaScript для доступа к фреймам. При создании web-страниц вы можете использовать несколько вложенных тэгов <frameset> (пример 12.3.1.2): <frameset cols="50%,50%"> <frameset rows="50%,50%"> <frame src="cell.htm"> <frame src="cell.htm"> </frameset> <frameset rows="33%,33%,33%"> <frame src="cell.htm"> <frame src="cell.htm"> <frame src="cell.htm"> </frameset> </frameset> Вы можете задать толщину границы между фреймами, воспользовавшись параметром border. Запись border=0 означает, что вы не хотите, чтобы между фреймами имелась какая-либо граница.
В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстаёт в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволяет легко управлять объектами web-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML. Рассмотрим простую HTML-страницу (пример 12.2.1): <html> <head> </head><body bgcolor=#ffffff> <center><img src="home.gif" name="pic1" width=200 height=100></center> <p> <form name="myForm">Name: <input type="text" name="name" value=""><br>e-Mail:<input type="text" name="email" value=""><br><br><input type="button" value="Push me" name="myButton" onClick="alert('Yo')"></form> <p><center><img src="ruler.gif" name="pic4" width=300 height=15><p> <a href="http://rummelplatz.uni-mannheim.de/~skoch/">My homepage</a></center> </body></html> А вот как выглядит эта страница на экране (с комментариями) (рис. 12.2.1): Рисунок 12.2.1 – внешний вид страницы Итак, мы имеем два рисунка, одну ссылку и некую форму с двумя полями для ввода текста и одной кнопкой. С точки зрения языка JavaScript окно браузера – это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления. Внутри окна мы можем разместить документ HTML (или файл какого-либо другого типа – однако пока мы все же ограничимся файлами HTML). Такая страница является ни чем иным, как объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. К свойствам объекта document относятся, например, цвет фона для web-страницы. Однако для нас гораздо важнее то, что все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма. На следующем рисунке иллюстрируется иерархия объектов, создаемая HTML-страницей из нашего примера (рис 12.2.2): Рисунок 12.2.2 – иерархия объектов Разумеется, мы должны иметь возможность получать информацию о различных объектах в этой иерархии и управлять ею. Как видно, каждый объект иерархической структуры имеет своё имя. Первый объект такой структуры называется document. Первый рисунок на странице представлен как объект images[0]. Это означает, что отныне мы можем получать доступ к этому объекту, записав в JavaScript document.images[0]. Если же, например, вы хотите знать, какой текст ввел читатель в первый элемент формы, то сначала должны выяснить, как получить доступ к этому объекту. Мы снова начинаем с вершины иерархии объектов, затем прослеживаем путь к объекту с именем elements[0] и последовательно записываем названия всех объектов, которые минуем. В итоге выясняется, что доступ к первому полю для ввода текста можно получить, записав: document.forms[0].elements[0] А теперь как узнать текст, введенный читателем? Чтобы выяснять, которое из свойств и методов объекта позволят получить доступ к этой информации, необходимо обратиться к какому-либо справочнику по JavaScript (например, это может быть документация, предоставляемая фирмой Netscape). Там вы найдёте, что элемент, соответствующий полю для ввода текста, имеет свойство value, которое как раз и соответствует введенному тексту. Итак, теперь мы имеем все необходимое, чтобы прочитать искомое значение. Для этого нужно написать на языке JavaScript строку: name= document.forms[0].elements[0].value; Полученная строка заносится в переменную name. Следовательно, теперь мы можем работать с этой переменной, как нам необходимо. Например, мы можем создать выпадающее окно, воспользовавшись командой alert("Hi " + name). В результате, если читатель введет в это поле слово 'Stefan', то по команде alert("Hi " + name) будет открыто выпадающее окно с приветствием ' Hi Stefan '.Если вы имеете дело с большими страницами, то процедура адресации к различным объектам по номеру может стать весьма запутанной. Например, придется решать, как следует обратиться к объекту document.forms[3].elements[17] document.forms[2].elements[18]? Во избежание подобной проблемы, вы можете сами присваивать различным объектам уникальные имена. Как это делается, вы можете увидеть опять же в нашем примере: <form name="myForm">Name: <input type="text" name="name" value=""><br>... Эта запись означает, что объект forms[0] получает теперь еще и второе имя - myForm. Точно так же вместо elements[0] вы можете писать name (последнее было указано в атрибуте name тэга <input>). Таким образом, вместо name= document.forms[0].elements[0].value; вы можете записать name= document.myForm.name.value; Это значительно упрощает программирование на JavaScript, особенно в случае с большими web-страницами, содержащими множество объектов. В JavaScript многие свойства объектов доступны не только для чтения. Вы также имеете возможность записывать в них новые значения. Например, посредством JavaScript вы можете записать в упоминавшееся поле новую строку. Пример кода на JavaScript, иллюстрирующего такую возможность – интересующий нас фрагмент записан как свойство onClick второго тэга <input> (пример 12.2.2): <form name="myForm"><input type="text" name="input" value="bla bla bla"><input type="button" value="Write" onClick="document.myForm.input.value= 'Yo!'; "> В заключение этого раздела приведём небольшой пример. В нем вы увидите, как используются различные объекты. Попытайтесь разобрать его, обращаясь за помощью к документации). Исходный код скрипта (пример 12.2.3): <html><head><title>Objects</title> <script language="JavaScript"><!-- hide function first() { // создает выпадающее окно, где размещается // текст, введенный в поле формы alert("The value of the textelement is: " + document.myForm.myText.value);} function second() { // данна\я функци\я провер\яет состо\яние переключателей var myString= "The checkbox is "; // переключатель включен, или нет? if (document.myForm.myCheckbox.checked) myString+= "checked" else myString+= "not checked"; // вывод строки на экран alert(myString);} // --></script></head><body bgcolor=lightblue> <form name="myForm"><input type="text" name="myText" value="bla bla bla"><input type="button" name="button1" value="Button 1" onClick="first()"><br><input type="checkbox" name="myCheckbox" CHECKED><input type="button" name="button2" value="Button 2" onClick="second()"></form> <p><br><br> <script language="JavaScript"><!-- hide document.write("The background color is: ");document.write(document.bgColor + "<br>"); document.write("The text on the second button is: ");document.write(document.myForm.button2.value); // --></script> </body></html> Кроме объектов window и document в JavaScript имеется еще один важный объект – location. В этом объекте представлен адрес загруженного HTML-документа. Например, если вы загрузили страницу http://www.xyz.com/page.html, то значение location.href как раз и будет соответствовать этому адресу. Впрочем, для нас гораздо более важно, что вы имеете возможность записывать в location.href свои новые значения. Например, в данном примере кнопка загружает в текущее окно новую страницу (пример 12.2.4): <form><input type=button value="Yahoo" onClick="location.href='http://www.yahoo.com'; "></form>
. . .
В большинстве программ на языке JavaScript мы будем пользоваться функциями. В большинстве случаев функции JavaScript аналогичны функциям PHP, C и иных языков программирования. Описание функции: function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>");} Вызов функции: myFunction(); Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим следующий пример (пример 12.1.4.1): <html><head> <script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result);} // --></script> </head><body> <form><input type="button" value="Calculate" onClick="calculation()"></form> </body></html> Здесь при нажатии на кнопку осуществляется вызов функции calculation(). Эта функция выполняет некие вычисления, пользуясь переменными x, y и result. Переменную мы можем определить с помощью ключевого слова var. Переменные могут использоваться для хранения различных величин – чисел, строк текста и т.д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result и поместить туда результат выполнения арифметической операции x + y (т.е. 5 + 12). После этого в переменный result будет размещено число 17.
События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щёлкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста – происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, например, в результате щелчка по кнопке может создаваться выпадающее окно. Обработчик событий, который мы должны использовать в данном случае, называется onClick. Приведенный ниже код представляет простой пример программы обработки события onClick (пример 12.1.3.1): <form><input type="button" value="Click me" onClick="alert('Warning!')"></form> Мы создаем некую форму с кнопкой, для которой указываем обработчик события onClick="alert('Warning!')" в тэге <input>. Как мы уже говорили, этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие Click, произойдёт вызов функции alert('Warning!'). Функция alert() позволяет создавать выпадающие окна.Некоторое замешательство может вызвать еще одна особенность данного примера: в команде document.write () мы использовали двойные кавычки ("), а в конструкции alert() – только одинарные. Почему? В большинстве случаев вы можете использовать оба типа кавычек. Однако в последнем примере мы написали onClick="alert('Warning!')" – то есть мы использовали и двойные, и одинарные кавычки. Если бы мы написали onClick="alert("Yo")", то браузер не смог бы разобраться в нашем скрипте, поскольку становится неясно, к которой из частей конструкции имеет отношение функция обработки событий onClick. Поэтому вы и вынуждены в данном случае использовать оба типа кавычек. Не имеет значения, в каком порядке вы использовали кавычки, т.е. есть вы можете точно так же написать и onClick='alert("Warning!")'.Вы можете использовать в скрипте множество различных типов функций обработки событий (обращайтесь пожалуйста к соответствующему справочнику, если вы хотите узнать, какие существуют обработчики событий).
А как будет выглядеть эта страница, если браузер не воспринимает JavaScript? Браузеры, не имеющие поддержки JavaScript, "не знают" и тэга <script>. Они игнорируют его и печатают все стоящие вслед за ним коды как обычный текст. Иными словами, посетитель сайта увидит, как код JavaScript, приведенный в нашей программе, окажется вписан открытым текстом прямо посреди HTML-документа. На этот случай имеется специальный способ скрыть исходный код скрипта от старых версий браузеров – комментарии HTML – <!-- --> В результате новый вариант нашего исходного кода будет выглядеть как (пример 12.1.2.1): <html><body><br>Это обычный HTML документ.<br> <script language="JavaScript"> <!-- скрывает код от старых браузеров document.write("А это JavaScript!") // --> </script><br>Вновь документ HTML.</body></html>
Код скрипта JavaScript размещается непосредственно на HTML-странице. Чтобы увидеть, как это делается, давайте рассмотрим следующий простой пример (пример 12.1.1.1): <html><body><br>Это обычный HTML документ.<br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Вновь документ HTML.</body></html> С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь – конструкция: <script language="JavaScript"> document.write("А это JavaScript!") </script> Это – код JavaScript. Чтобы видеть, как этот скрипт работает, запишите данный пример как обычный файл HTML и загрузите его в браузер, имеющий поддержку языка JavaScript. В результате вы получите 3 строки текста: Это обычный HTML документ.А это JavaScript!Вновь документ HTML. Всё, что стоит между тэгами <script> и </script>, интерпретируется как код на языке JavaScript. Здесь вы также видите пример использования инструкции document.write() одной из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document.write() используется, когда необходимо что-либо написать в текущем документе (в данном случае таком является наш HTML-документ). Так наша небольшая программа на JavaScript в HTML-документе пишет фразу "А это JavaScript!".
JavaScript – это язык для составления скриптов, разработанный фирмой Netscape, призванный увеличить степень интерактивности веб-приложений.Что необходимо сделать, чтобы запускать скрипты, написанные на языке JavaScript? Необходим браузер, способный работать с JavaScript - например Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0).
Использовании JavaScript
array preg_grep (string pattern, array input) Действие этой функции похоже на действие команды grep в Unix. Она ищет текст по регулярному выражению pattern, в массиве input и возвращает новый массив, содержащий только элементы, в которых были найдены совпадения с заданным регулярным выражением. К примеру у нас есть файл, содержащий в каждой строке числовую и текстовую информацию. Нам необходимо получить из этого файла только строки, содержащие числа (пример 11.4.7.1): Файл data.txt: 123abcphp4 Код: <?// Считываем содержимое файла в массив$data = file('data.txt');// Получаем массив, содержащий цифровую информацию$numbers = preg_grep("/\d+/",$data);// Выводим результат работы print_r($numbers);?> Результат: Array( [0] => 123 [2] => php4) Как видите – мы получили все строки, содержащие цифры. Если же нам, например нужно получить только цифры - то выражение необходимо немного изменить: /^\s*\d+\s*$/
string preg_quote (string str [, string delimiter]) Эта функция – единственная, не относящаяся непосредственно к механизму регулярных выражений. Её назначение – "квотинг" символов, имеющих специальное значение в синтаксисе регулярных выражений. Обычно это символы: . \ + * ? [ ^ ] $ ( ) { } = ! < > | : Все эти символы, встречающиеся в строке будут "отквочены" путем добавления символа '\' непосредственно перед каждым из них. Модифицированная таким образом строка будет возвращены в качестве результата.Эта фцнкция также имеет необязательный параметр delimiter. Если этот параметр задан, то символ, переданный в качестве этого параметра тоже будет "отквочен" данной функцией.
array preg_split (string pattern, string subject [, int limit [, int flags]]) Данная функция выполняет действие, аналогичное функциям split() и explode() – разбивает строку на части по какому-либо признаку и возвращает массив, содержащий части строки. Однако её возможности по заданию правил разбиения больше, чем у этих функций, потому что в её основе лежит механизм регулярных выражений. Если говорить более конкретно, то строка subject разбивается на части по разделителю, заданному регулярным выражением pattern. При этом количество фрагментов может быть ограничего необязятельным параметром limit. Кроме того эта функция поддерживает необязательный параметр flags, который позволяет в некоторой степени контролировать процесс разбиения строки. Параметр flags может принимать следующие значения (или их комбинации с использованием знака '|'):· PREG_SPLIT_NO_EMPTY – возвращать только непустые части строк, полученные в результате разбиения.· PREG_SPLIT_DELIM_CAPTURE – возвращать также результаты поиска по внутренним регулярным выражениям. Рассмотрим пару примеров. Для начала – выражение, которое разбивает произвольный текст на отдельные слова (пример 11.4.5.1): <?$text = join('',file('my_text.txt'));$words = preg_split("/\s+/s",$text);print_r($words);?> Как видите – мы получаем содержимое файла 'my_text.txt' в виде строки, разбиваем его на отдельные слова и выводим содержимое массива слов, чтобы убедиться, что все работает правильно.Ещё один пример производит разбиение заданного слова на буквы (он описан в PHP Manual) (пример 11.4.5.2): <?$str = 'string';$chars = preg_split('//',$str,-1,PREG_SPLIT_NO_EMPTY);print_r($chars);// Значение -1 для параметра limit означает отсутствие лимита.?>
mixed preg_replace_callback (mixed pattern, mixed callback, mixed subject [, int limit]) Эта функция является расширенной версией функции preg_replace(). Единственным отличием её от preg_replace() является то, что в качестве текста для замены в ней задается не сам текст, а имя функции, которая будет производить обработку найденного текста и возвращать замещающий текст. Т.е. с использованием этой функции мощь инструментария PHP по обработке текста становится поистине безграничной. В качестве примера приведём фрагмент кода, который выполняет работу, аналогичную той, что производится механизмом сессий в PHP: добавление дополнительного аргумента (идентификатора сессии) к каждой ссылке внутри HTML документа (пример 11.4.7.1). <?// Список тегов и аттрибутов, к котроым необходимо// добавить дополнительный параметр.// Формат строки:// <имя тега>[ <имя аттрибута>]+// Т.е. сначала идет имя тега, а затем, через пробел,// имена одного или нескольких аттрибутов.$tagsList = array( 'a href', 'area href', 'frame src', 'input src', 'img src', 'form action');// Идентификатор сессии$sid = 12345;// HTML документ для обработки. Здесь, в качестве примера// мы берем его из внешнего файла, но вообще-то метод// получения исходного документа может быть различным.$document = join('',file('document.html'));// Начинаем обработку всех тегов, указанных в массиве $tagsListforeach($tagsList as $tag){// Разделяем список аттрибутов на составляющие $attrs = explode(' ',$tag);// Получаем имя тега (в массиве $attrs остается лишь список аттрибутов) $tag = array_shift($attrs);// Выполняем "патч" всех имеющихся в документе ссылок, содержащихся// в каждом из аттрибутов текущего тега foreach($attrs as $attr) $document = preg_replace_callback("/<".$tag.".+?".$attr."=[\'\"](.+?)[\'\"]/si", 'callback',$document);};// Выводим документ и выходимecho $document;exit();// Эта функция будет вызываться для каждой найденной// ссылки в тексте HTML документа.// На входе она получает результат поиска (массив,// аналогичный возвращаемому функцией preg_match()).// На выходе из функции должна быть строка с текстом замены.function callback($data){// Регулярное выражение, использованное для поиска находит полные// HTML теги, содержащие аттрибуты, в которых могут находиться// URL адреса. Поскольку текст, возвращаемый данной функцией будет// использован для замещения всего найденного фрагмента текста -// нам необходимо взять полный текст, чтобы не потерять его при// дальнейшей обработке. Он будет возвращен без изменений, если// окажется, что аттрибут не содержит URL адреса. $href = $data[0];// Используем функцию PHP для разбора URL адреса на составляющие.// В качестве "исходного материала" передаем содержимое интересующего// нас аттрибута, найденного внутренним регулярным выражением.// Подробнее о том, что возвращает эта функция см. PHP Manual. $parts = parse_url($data[1]);// Мы должны добвлять идентификатор сессии только к ссылкам, которые// являются "локальными" для данного сайта. Т.е. мы не должны обрабатывать:// - полные URL адреса (<a href="http://www.php.net/">)// - указатели на "якоря" внутри страницы (<a href="#part2">) if ((!isset($parts['scheme'])) && // Если URL содержит идентификатор (!isset($parts['host'])) && // протокола или имя домена - это // полный URL адрес. (substr($data[1],0,1)!='#')) // Если URL начинается с символа '#' // то это ссылка на "якорь" внутри страницы {// Берем путь к странице, указанный в URL и добавляем разделитель для параметров// потому что нам необходимо будет добавить по крайней мере 1 параметр $href = $parts['path'].'?';// Если в этом URL уже были какие-либо параметры - добавляем их и добавляем// разделитель. Заметьте, что в качестве разделителя используется &, а не &,// это позволяет нам добиться совместимости с XHTML. if (isset($parts['query'])) $href .= $parts['query'].'&';// Добавляем наш собственный параметр - идентификатор сессии $href .= 'sid='.$GLOBALS['sid'];// Если в оригинальном URL была ссылка на фрагмент документа - возвращаем ее// на место. if (isset($parts['fragment'])) $href .= '#'.$parts['fragment'];// "Вставляем" новый URL на место того, который был там раньше $href = str_replace($data[1],$href,$data[0]); };// Возвращаем результат return($href);};?> Пример может показаться немного громоздким, но это исключительно из-за обилия комментариев.
mixed preg_replace (mixed pattern, mixed replacement, mixed subject [, int limit]) Эта функция позволяет произвести замену текста по регулярному выражению. Как и в предыдущих функциях, здесь производится поиск по регулярному выражению pattern в тексте subject, и каждый найденный фрагмент текста заменяется на текст, заданный в replacement. Задание необязятельного параметра limit позволит ограничить количество заменяемых фрагментов в тексте.Например, нам необходимо "сжать" текст, убрав из него все лишние пробелы и символы перевода строки (пример 11.4.3.1): <?$text = "there is\t\n\t\t some text \n \t just \n\n\n for test";echo "<b>Перед заменой:</b>\n$text\n\n";$text = preg_replace("/(\n \s{2,})/"," ",$text);echo "<b>После замены:</b>\n$text";?> Результат:Перед заменой: there is some text just for test После замены: there is some text just for test Однако основная прелесть этой функции, которая и придает ей всю её мощь – это тот факт, что вы можете ссылаться на результаты поиска при генерации замещающего текста. В качесте примера покажем, как можно очень быстро и элегантно решить задачу, которая возникает достаточно часто – конвертация дат из одного формата в другой. Как вы знаете, на западе обычно используется формат mm/dd/yyyy, тогда как у нас обычно - dd.mm.yyyy. Следующий пример осуществляет конвертацию дат между этими форматами в заданном тексте (пример 11.4.3.2):<?$text = 'Today is 11/16/2001';$text=preg_replace("/(\d{2})\/(\d{2})\/(\d{4})/","\\2.\\1.\\3",$text);echo $text;?> Результат: Today is 16.11.2001 Обратите внимание на текст, используемый для замены. В нём использованы т.н. backreferences, т.е. ссылки на найденный ранее текст. Всего таких ссылок может быть не более 100 с номерами от 0 до 99 (соответственно в тексте они выглядят как , \1, \2 ... \99). Backreference с номером 0 будет заменена на весь найденный текст, \1 - на текст, найденный первым внутренним регулярным выражением, \2 - вторым и т.д. Номера внутренним регулярным выражениям присваиваются по мере их находжения в тексте, т.е. слева-направо. В нашем случае \1 - это месяц, \2 - день, \3 - год.Помимо стандартного синтаксиса регулярных выражений, в PHP, совместно с функцией preg_replace() используется еще один дополнительный модификатор – 'e'. Его использование заставляет PHP рассматривать текст замены не как текст, а как PHP код, что дает возможность еще больше расширить сферу применения этой функции в вашем коде. Следующий пример демонстрирует использование этого модификатора – он производит замену всех целых десятичных чисел в тексте на их шестнадцатиричные эквиваленты (пример 11.4.3.3): <?$text = "123 234 345 456 567";$text = preg_replace("/\d+/e","'0x'.dechex('\')",$text);print_r($text);?> Результат: 0x7b 0xea 0x159 0x1c8 0x237 Функция preg_replace() также умеет работать с массивами регулярных выражений. Т.е. это позволит вам осуществить поиск и замену сразу по множеству условий. В качестве примера приведём фрагмент кода, описанный в PHP Manual и осуществляющий конвертацию HTML документа в текст при помощи всего лишь одного вызова preg_replace() (пример 11.4.3.4): // $document should contain an HTML document.// This will remove HTML tags, javascript sections// and white space. It will also convert some// common HTML entities to their text equivalent. $search = array ("'<script[^>]*?>.*?</script>'si", // Strip out javascript "'<[\/\!]*?[^<>]*?>'si", // Strip out html tags "'([\r\n])[\s]+'", // Strip out white space "'&(quot #34);'i", // Replace html entities "'&(amp #38);'i", "'&(lt #60);'i", "'&(gt #62);'i", "'&(nbsp #160);'i", "'&(iexcl #161);'i", "'&(cent #162);'i", "'&(pound #163);'i", "'&(copy #169);'i", "'&#(\d+);'e"); // evaluate as php $replace = array ("", "", "\\1", "\"", "&", "<", ">", " ", chr(161), chr(162), chr(163), chr(169), "chr(\\1)"); $text = preg_replace ($search, $replace, $document);
int preg_match_all (string pattern, string subject, array matches [, int order]) Эта функция очень похожа на предыдущую и предназначена для тех же самых целей. Единственное её отличие от preg_match() состоит в том, что она осуществляет "глобальный" поиск в заданном тексте по заданному регулярному выражению и, соответственно, находит и возвращает все имеющиеся совпадения. Посмотрим, как отличается работа этой функции на том же самом примере (пример 11.4.2.1): <?$str = "123 234 345 456 567";$result = preg_match_all('/\d{3}/',$str,$found);echo "Matches: $result<br>";print_r($found);?> Результат работы: Matches: 5 Array ( [0] => Array ( [0] => 123 [1] => 234 [2] => 345 [3] => 456 [4] => 567 )) Как видите – здесь мы получили все найденные совпадения и их количество в качестве результата. Необходимо обратить ваше внимание на дополнительный параметр, появившийся в этой функции по сравнению с preg_match(): order. Значение этого параметра определяет структуру выходного массива с найденными совпадениями. Его значение может быть одним из перечисленных ниже:· PREG_PATTERN_ORDER – результаты поиска будут сгруппированы по номеру регулярного выражения, которое возвратило этот результат (это значение используется по умолчанию).· PREG_SET_ORDER – результаты поиска будут сгруппированы по месту их нахождения в тексте Для того, чтобы лучше понять разницу между этими значениями, посмотрим на результат работы одного и того же скрипта при использовании каждого из них:Сначала посмотрим на то, как выглядит результат при использовании PREG_PATTERN_ORDER (пример 11.4.2.2): <?$str = "123 234 345 456 567";$order = PREG_PATTERN_ORDER;$result = preg_match_all('/\d(\d)\d/',$str,$found,$order);print_r($found);?> Результат: Array ( [0] => Array ( [0] => 123 [1] => 234 [2] => 345 [3] => 456 [4] => 567 ) [1] => Array ( [0] => 2 [1] => 3 [2] => 4 [3] => 5 [4] => 6 )) Как видите – массив результатов содержит внешние индексы, соответствующие номерам регулярных выражений, от которых получен результат (индекс 0 имеет основное регулярное выражение). По этим индексам в массиве расположены массивы, содержащие непосредственно найденную информацию, причем индекс в этом внутреннем массиве соответствует "порядковому номеру" данного фрагмента в исходном тексте.Теперь попробуем то же самое, но с PREG_SET_ORDER (пример 11.4.2.3): <?$str = "123 234 345 456 567";$order = PREG_SET_ORDER;$result = preg_match_all('/\d(\d)\d/',$str,$found,$order);print_r($found);?> Результат: Array ( [0] => Array ( [0] => 123 [1] => 2 ) [1] => Array ( [0] => 234 [1] => 3 ) [2] => Array ( [0] => 345 [1] => 4 ) [3] => Array ( [0] => 456 [1] => 5 ) [4] => Array ( [0] => 567 [1] => 6 )) Как видите – здесь основной массив содержит результаты поиска, сгруппированные по порядку их нахождения в тексте, причём каждый результат представляет собой массив с результатами поиска по этому найденному фрагменту для всех имеющихся регулярных выражений.