Урок 4. Основы JavaScript
Дизайн или программирование?
Итак, веб-страница живёт. Вы нарисовали картинки, подготовили текст, сделали всё, что хотелось, и… заскучали. Почему? Да хотя бы потому, что выстраданная вами страничка никак не откликается на действия владельца, жадно шарящего по ней курсором. Тьфу, почти неприлично получилось… Тем не менее, будем лечить.
До того, как начать рассказ о всяких технических фокусах на потеху посетителям и себе, любимым, надо представить, что вообще мы собираемся делать.
Язык HTML статичен. Для того, чтобы научить страницу «жить», откликаться на действия пользователя, нужно найти способ ЗАПРОГРАММИРОВАТЬ то или иное её поведение. Умные люди — не чета нам с вами — решают эту проблему, вставляя в гипертекст куски программного кода, которые называют СКРИПТАМИ. Вообще говоря, скрипт — просто маленькая программка, срабатывающая тогда, когда ей скажут, и написана она может быть на одном из немалого количества скриптовых языков. Мы с вами будем говорить только об одном из них — JavaScript. Синтаксис JavaScript взят из большого и серьёзного языка Java, на котором программируют страшные бородатые дяди девелоперы, получая за это жуткие деньги.
Наше с вами дело маленькое, нам надо просто научиться пихать эти самые скрипты куда попало, чтобы всё мигало, крутилось, дёргалось и этак ме-едленно меняло цвет фона при загрузке. И тогда кого-нибудь плохого от нашей страницы точно хватит кондратий, а значит, мы с вами хорошие. А если кондратий хватит кого-нибудь хорошего? Нетушки! Этими задачами занимаются специалисты по маркетингу и рекламе, они знают, что такое ЦЕЛЕВАЯ ГРУППА, и отгонят всех хороших от этого мигания и верчения. Ну, что-то я опять запутался: для кого ж мы тогда вообще трудимся?
Снова контейнеры…
Чтобы вставить кусок кода на языке JavaScript в тело HTML-страницы, нам с вами опять понадобится контейнер. Вот такой:
<SCRIPT language="JavaScript">
<!--//
...
//-->
</SCRIPT>
Единственный параметр, который действительно стоит использовать, называется language. Он определяет, на каком языке написано всё то, что находится внутри контейнера. Две дополнительные строчки внутри говорят старому браузеру, который никаких скриптов не понимает, что всё, находящееся между <!--// и //--> — комментарий, который надо просто оставить в покое и ничего с ним не делать. Таким образом, если кто-то откроет страницу с помощью этого самого старого браузера, он получит только чистый HTML-код, а все скрипты будут проигнорированы. Если знаки комментария отсутствуют, а внутри скрипта находится что-то такое, чего браузер не понимает, посетитель получит сообщение об ошибке или вообще не увидит ничего. Оно нам с вами надо?
Теперь о том, где стоит помещать скрипты. В принципе, они могут находиться где угодно, но лучше помещать JavaScript-код в контейнере HEAD. Если разместить код в разделе <BODY>...<BODY>, он обязательно исполнится в тот момент, когда браузер дойдёт до него по мере загрузки страницы. В некоторых случаях это тоже необходимо, но хорошим тоном является оформление скриптов в виде ФУНКЦИЙ, которые можно при необходимости вызвать из любого места страницы и которые не будут выполняться до тех пор, пока мы с вами этого не захотим.
Roll-over
Техническое задание
Постановка задачи номер один.
На странице есть кнопка, выполненная в виде изображения в формате GIF. Нужно, чтобы она каким-то образом менялась при наведении на неё курсора.
Этот эффект по-английски называется roll-over и в рейтинге популярности эффектов занимает, наверное, первое место. Итак, приступим.
Реализация
Прежде всего нам понадобятся ДВЕ кнопки: исходный вариант плюс тот, который должен подставляться вместо него при движении курсора мыши поверх кнопки. Обе картинки должны иметь один и тот же размер. Смысл всех дальнейших манипуляций состоит в том, чтобы заменить одно изображение другим, а потом вернуть исходное на место.
Вставляем первую кнопку в HTML. Код будет выглядеть примерно так:
<IMG name="mybutton" src="button1a.gif" width="100" height="50">
Тег IMG используется для размещения графики на HTML-странице. Параметры name, src, width и height задают соответственно имя встроенного в HTML объекта для дальнейших ссылок на него, имя графического файла, ширину и высоту картинки в пикселях.
Теперь разместим в разделе HEAD следующий блок:
<SCRIPT language="JavaScript">
<!--//
function ImgPreload() {
pic2=new Image();
pic2.src=button1.gif;
}
function ImgOn() {
temp=mybutton.src;
mybutton.src=pic2.src;
}
function ImgOff() {
mybutton.src=temp;
}
//-->
</SCRIPT>
Теперь добавим ещё два параметра в тег IMG:
onmouseover="ImgOn();" onmouseout="ImgOff();"
Напомню, что язык JavaScript чувствителен к регистру, поэтому, если вы в одном месте напишете imgon, а в другом ImgOn, эти описания не будут иметь друг к другу никакого отношения.
Осталось сделать последнее: добавить один параметр в тег BODY:
onload="ImgPreload();"
С кодом покончено. Я намеренно не даю детальных инструкций: разумеется, из соображений лёгкого садизма. Но о том, как это всё работает, расскажу подробно.
Объяснения
В заголовке страницы — а именно в секции HEAD — мы создали скрипт, включающий в себя три функции: ImgPreload, ImgOn и ImgOff. Ключевое слово function в большинстве языков определяет кусок кода, который может быть многократно вызван из различных мест программы. Общий случай синтаксиса выглядит так:
...
function func_name(par1,par2,par3) {
...
}
Расшифровывается всё это следующим образом: функция с именем func_name, в которую передаются параметры с именами par1, par2 и par3, которых, вообще говоря, может и не быть. Фигурные скобки обрамляют ту часть, которая, собственно, и будет выполняться, если мы эту функцию вызовем, т. е. сошлёмся на неё по имени из какой-то другой части кода.
Зачем нужны параметры, тем более, что в тех трёх функциях, которые мы используем в нашей задаче, их нет? А вот зачем. Представьте себе, что на страничке есть НЕСКОЛЬКО кнопок, для каждой из которых мы хотим сделать свой собственный roll-over. Что же, писать отдельную функцию на каждую кнопку? А если их десяток? Глупости какие.
Мы напишем ЕДИНСТВЕННУЮ функцию для каждой операции, и с помощью параметров передадим ей ИМЯ той картинки, над которой в данный момент проходит курсор мыши и которая, соответственно, должна участвовать в создании нужного нам эффекта. Вот и всё.
Вернёмся к нашему коду.
Функция ImgPreload служит для предварительной загрузки в память компьютера того изображения, которое должно быть подставлено на место исходного. Она запускается тогда, когда вся страница загрузилась: запись onload="ImgPreload();" в теге BODY означает, что по событию onload (окончанию загрузки отображаемой части страницы браузером) будет выполнена функция ImgPreload.
Зачем нужна эта функция? Дело в том, что загрузка каждого изображения с сервера требует времени, особенно при не очень хорошей связи. Если мы будем тащить вторую картинку с сервера, то курсор уйдёт с кнопки раньше, чем мы увидим какой-то эффект, т. к. графический файл — каким бы маленьким он не был — просто не успеет загрузиться. Другое дело, когда требуемая картинка уже находится в памяти: загрузка произойдёт мгновенно.
Теперь о самой функции. Запись pic2=new Image(); создаёт новый объект типа Image, на который с этого момента мы можем ссылаться, а следующая строчка pic2.src=button1b.gif; говорит о том, какой графический файл соответствует этому объекту. Теперь, запросив из любого места кода значение pic2.src, мы тут же получим button1b.gif, что нам и требуется.
Обратите внимание на то, какие параметры мы добавили в тег IMG. Запись onmouseover="ImgOn();" означает, что по событию onmouseover (курсор въехал на картинку) должны быть вызвана функция ImgOn, а запись onmouseout="ImgOff;" означает, что курсор ушёл с кнопки, и теперь нужно запустить функцию ImgOff. Как понятно из названия, эти две функции отвечают за подмену картинки (ImgOn) и возврат её в исходное состояние (ImgOff). Теперь посмотрим, как эти функции работают.
В функции ImgOn первая строка (temp=mybutton.src;) передаёт переменной temp имя того графического файла, который соответствует исходному состоянию кнопки: это значение нужно сохранить. Вторая строка (mybutton.src=pic2.src;) передаёт кнопке имя второго файла, который мы подставляем. Как только это произошло, вместо первоначальной картинки на месте кнопки возникает картинка button1b.gif, и наша задача наполовину решена. Наполовину, потому что нам ещё предстоит вернуть кнопку в исходное состояние после того, как курсор мыши уберётся восвояси.
Этим и занимается функция ImgOff. Её единственная строчка (mybutton.src=temp;) возвращает кнопке тот файл, который соответствовал ей в самом начале. Всё!
Для примера посмотрите, как организованы roll-overs на главной (или любой другой) странице моего сайта. Это такие маленькие синие точки, возникающие внутри маленьких белых кружочков, когда вы возите мышкой по пунктам меню. Правда, там всё сделано чуть-чуть иначе. ;-)
OpenWin
Рассмотрим задачу номер два.
Техническое задание
Итак, нам нужно, чтобы
при щелчке мышью на ссылке открывалось дополнительное окно браузера, свойства которого можно было бы определить заранее. Неплохо, если это окно можно будет закрыть щелчком по расположенной в нём же ссылке.
Оговорка
Эту задачку можно решить и средствами самого HTML, правда, задать СВОЙСТВА нового окна всё-таки не удастся, да и закрыть его описанным выше способом будет нельзя. Вспомним сначала, что такое ссылка.
<P>
Вот тут у нас с вами <A href="http://www.ya.ru/">ссылка</A>.
</P>
Второй вариант:
<P>
<A href="http://www.ya.ru/">
<IMG src="picture22.jpg" width="13" height="26">
</A>
<P>
Не такая уж большая разница, какая часть контента выполнена в виде ссылки: тег <A> присутствует в любом случае, а он-то нам и нужен.
Так вот, задачу можно решить добавлением параметра target в тег <A> (target="zzz"). Вместо zzz можно подставлять одно из трёх зарезервированых значений:
_self
_top
_blank
Значение _self используется в том случае, если новый документ должен быть открыт в том же окне (фрейме), что и исходный; значение _top говорит о том, что новый документ будет открыт в текущем окне браузера, вытеснив из него все фреймы, если такие наличествуют, а значение _blank как раз определяет, что новый документ будет открыт в новом окне, которое откроется специально для этой цели. Но — как я уже говорил — управлять параметрами этого окна мы не сможем.
Кстати, список зарезервированных значений не исчерпывается тремя описанными здесь примерами, но за этим — к терапевту… т. е. к полному руководству.
Здесь нужно добавить, что, во-первых, кроме зарезервированных параметров в качестве target может быть подставлено имя уже существующего окна, а если такого нет — браузер в большинстве случаев постарается открыть новое окно и загрузить документ туда. Во-вторых, я упоминал фреймы, о которых нам с вами пока что ничего не известно. На данный момент обойдёмся тем, что фреймы — это окна независимых документов, которые в любом количестве могут находиться в общем для всех них окне браузера. Подробнее об этом мы поговорим несколько позже. В третьих, использование ссылок для открытия нового окна вызвано только тем, что Netscape не в состоянии понять событие onclick (щелчок мышью), если оно происходит не со ссылкой. Internet Explorer делает это с лёгкостью, но нам от этого не легче: скрипты должны работать в любом браузере.
Реализация
Подготовим файл newfile.htm, содержащий следующий код:
<HTML>
<BODY>
<P>
Чтобы закрыть окно, щёлкните <A href="#"
onclick="window.close();">здесь</A>.
</P>
<BODY>
</HTML>
Обратите внимание, что строка с тегом <P> разорвана: ничего страшного, HTML такие вещи переносит спокойно. Странное значение параметра href — "#" — нередко используется тогда, когда ссылка как таковая нужна, а переход по ней, даже при случайном щелчке, не нужен.
Далее. В том файле, из которого вы хотите открыть новое окно, нужно сделать две вставки. Первая — в секции HEAD.
<SCRIPT language="JavaScript">
<!--//
function OpenWin() {
window.open("newfile.htm",
"mywindow",
"width=300,height=250,toolbar=no");
}
//-->
</SCRIPT>
Вторая — где-нибудь в теле страницы:
<P>
Чтобы открыть новое окно, щёлкните <A href="#"
onclick="OpenWin();">здесь</A>.
</P>
Теперь посмотрим, что у нас с вами получилось. Кроме того, можно щёлкнуть вот здесь.
Кстати, имейте в виду: закрыть окно таким образом вы сможете только в том случае, если оно было открыто при помощи JavaScript.
О том, какие ещё параметры можно запихать во встроенную функцию window.open, вы прочитаете в руководстве по JavaScript от W3C. ;-)
Объяснения
Функция OpenWin содержит стандартный метод JavaScript window.open, использующийся для открытия нового окна. В качестве параметров мы передаём этому методу (или функции, что почти то же самое):
1. "newfile.htm" — имя документа, который должен открыться в новом окне.
2. "mywindow" — имя этого окна для дальнейших ссылок на него. Указывать не обязательно, но пару пустых кавычек ("") всё равно придётся поставить, т. к. стандартный синтаксис предполагает строго определённую последовательность параметров.
3. "width=300,height=250,toolbar=no" — набор стандартных параметров со значениями. В данном случае — линейные размеры окна и информацию о том, что оно не должно иметь панели инструментов. Заметьте, что значения параметров я пишу без кавычек.
Следующая часть кода (<A href="#" onclick="OpenWin();">здесь</A>) предписывает браузеру исполнить функцию (метод) OpenWin при щелчке на слове здесь, оформленном как пустая ссылка (href="#").
Точно такую же форму записи использует скрипт, размещённый в документе, который открывается в новом окне. Стандартный метод window.close закрывает текущее окно, если оно было открыто с помощью JavaScript. Если мы хотели бы закрыть другое окно, пришлось бы написать mywin.close(), где mywin -- имя окна, которое скрипту предстоит закрыть.
Вынос скриптов в отдельный файл
Есть ещё один вариант записи контейнера SCRIPT.
<SCRIPT language="JavaScript" src="myscripts.js"></SCRIPT>
Это означает, что все ваши скрипты могут храниться в отдельном файле с расширением .js. Естественно, в этом случае не нужно писать ключевое слово SCRIPT в самом файле: просто поместите приведённую выше строку в разделе HEAD, и любая функция будет доступна точно так же, как если бы её текст находился прямо на странице. Это удобно ещё и потому, что при возможном изменении скрипта вам не придётся изменять все HTML-файлы, которые на него ссылаются.
Заключение
Понятно, что пока ещё ничего не понятно. Собственно, я не давал обет учить вас языку в полном объёме: для этого есть масса умных и полезных книг. Проблема в том, что очень часто у людей, прочитавших такие книги, возникает масса вопросов именно во время первой попытки реализовать свои новые знания на практике. И вот тут, я надеюсь, моё маленькое руководство окажется полезным.
Я рассмотрел варианты решения двух задач, которые чаще всего встречаются при построении веб-страниц. Конечно же, вам нужно знать больше о JavaScript: возможно, именно углублением знаний мы и займёмся на следующем уроке. А сейчас — напоследок — несколько правил, которые необходимо помнить во время программирования на языке JavaScript.
1. Язык JavaScript чувствителен к регистру.
Как уже говорилось раньше, переменные temp и Temp для языка JavaScript не одно и то же: у них будут разные значения, поэтому будьте внимательны при написании кода.
2. Каждый оператор должен оканчиваться точкой с запятой.
Теоретически последний оператор блока {...} можно писать и без точки с запятой, но лучше её всё-таки ставить… кроме специально оговорённых случаев, которые мы рассмотрим попозже.
3. Не забывайте обрамлять скрипты символами комментария.
…и даже самые старые и негодные браузеры вас полюбят. ;-)
4. Не нужно использовать зарезервированные слова языка JavaScript, давая названия тем объектам, которые создали вы сами.
Иначе возникнет путаница: интерпретатор не будет знать, что вы имели в виду: то ли стандартный метод нужно выполнять, то ли это ваша картинка так называется…
5. Не забывайте о вложенных кавычках.
Во всех конструкциях JavaScript, использующих вложенные кавычки, поступайте так: внешняя пара кавычек двойная — значит, внутренняя должна состоять из одинарных кавычек. И наоборот. А вообще, если вложений нет, языку JavaScript всё равно, какие кавычки вы используете.
…
До встречи!
Урок 3. Простейшая веб-страница | Урок 5. Формы
наверх
| 
