Практика разработки Web-страниц
         

После копирования на мою страницу JavaScript работает неправильно


Сеть – это хорошее место для поиска примеров программ и советов. Там есть множество сайтов, которые бесплатно предлагают примеры и обучающие программы по JavaScript. Для начала попробуйте javascript.internet.com, hotwired.lycos.com/webmonkey и javascripts.earthweb.com или поищите JavaScript samples. Такие программы, как Fireworks, Dreamweaver или HomeSite, помогут вам включить JavaScript в ваши страницы.


увеличить изображение
Примеры сценариев весьма полезны. Что ваша страница будет делать сегодня?

Все, что вам нужно сделать – это скопировать и вставить найденные сценарии – по крайней мере теоретически. Проблема в том, что включение кода JavaScript в вашу страницу требует понимания сценария и того, как он будет работать с вашей страницей. Если вы не снабдите сценарий нужной информацией, или неверно поместите вашу страницу, или не включите элементы, которые сценарий ожидает, он не будет работать. За то время, пока вы будете разбираться во всех деталях, вы можете узнать достаточно о JavaScript, чтобы написать собственный сценарий.

Если вы скопировали сценарий на свою страницу и не можете заставить его работать, сделайте следующее.

  1. Сценарий не запускается, возможно, из-за того, что вы не очень старательно включили его в вашу страницу. Сценарий, который вы скопировали, может содержать инструкцию или примерный HTML; прочтите его внимательно, чтобы разобраться в проблеме. Посмотрите в инструкции, как вы должны разместить код, какие величины вам надо отредактировать, и какие тэги HTML предпочтительны на вашей странице.

  2. Некоторые сценарии предназначены для запуска в главной части вашей страницы. Если вы используете такой тип сценария, вы можете только вставить блок <SCRIPT> в ваш HTML там, где хотите его видеть. Например, приведенный ниже сценарий показывает число дней, прошедших с начала года:

    <script language="JavaScript"> <!-- // Вычисление дней после Нового Года var now = new Date(); var nextYear = now.getFullYear() + 1; var newYears = new Date(nextYear, 0, 1); var daysLeft = parseInt( (newYears - now) / 86400000 ); document.writeln(daysLeft + " days until New Years " + nextYear); //--> </script>




    Убедитесь, что вы заключили код в тэги <SCRIPT> и </SCRIPT> и включили тэги <!-- и //--> так, как показано, чтобы те броузеры, которые не понимают сценарий, пропускали его. Для получения верного результата вам также может понадобиться отредактировать сценарий. В этом сценарии, например, вы можете исправить выражение document.writeln, добавив в него форматирование HTML или изменив текст, который оно выдает.



  3. Не все сценарии подходят для работы с вашей страницей. Сценарии, подобные вышеприведенному, обычно написаны как функция, т.е. предназначенный для повторного использования блок кода, который запускается некоторым выражением в сценарии. В этом случае вы, вероятно, поместите функцию в раздел <HEAD> страницы, чтобы не портить свой HTML. Если вы действительно хотите не загромождать сценарий, вы можете сохранить функцию в отдельном файле. Например, если вы скопировали код, в которым изображение "проступает" из черного фона, вы можете сохранить этот код в файле с названием fade.js и включить его в свою страницу с помощью приведенного ниже тэга <SCRIPT> (не забудьте про закрывающий тэг </SCRIPT>, иначе ваша страница не будет работать):

    <script language="JavaScript" src="fade.js"> </script>



  4. После того, как вы поместили функцию в нужное место, надо заставить ее работать на странице. Сделать это можно одним из трех способов. Вы можете вызвать функцию в блоке <SCRIPT> вашего HTML. Например, если функция называется fadeFromBlack(), вы можете выполнить ее с помощью следующих строк:

    <script language="JavaScript"> <!-- // The big curtain raiser. fadeFromBlack(); // --> </script>



    Функции JavaScript обычно содержат аргументы – одну или более переменных, внесенных в скобки после имени функции. Когда вы используете функцию, вы должны указать их значение в соответствии с типом каждого аргумента. Например, если сценарий требует указать одну текстовую строку и одно число в качастве аргументов, включите их в скобки. Убедитесь, что вы заключили текстовую строку в кавычки:



    Display(‘Go away!’, 5);

    Вы также можете вызвать функцию с помощью гиперссылки. Если вы установили атрибут href для тэга <A> для строки, начинающейся с javascript:, она запустит код сценария вместо открытия другой страницы. Например, эта гиперссылка вызывает функцию changeColor():

    <a href="javascript:changeColor('periwinkle')"> Click to change the color to blue.</a>

    И наконец, вы можете "прикрепить" функцию к событию (event) броузера – одному из определенных моментов, например, когда посетитель нажимает на кнопку (то есть броузер позволяет вам реагировать на действия посетителя). Чтобы сообщить броузеру, что надо запустить функцию в ответ на событие, установите атрибут для события в тэге HTML. Например, если вы хотите, чтобы функция changeColor() запускалась при нажатии посетителем на кнопку, используйте следующий HTML:

    <form> <input type="button" onClick="changeColor('burnt sienna')" value="I cannot stand this color"> </form>

    Если вы хотите, чтобы функция запускалась, когда пользователь проводит мышкой над изображением или нажимает на него, используйте приведенный ниже HTML (тэг <A> нужен из-за того, что Netscape не поддерживает эти события в тэге <IMG>):

    <a href="javascript:void(0)" onMouseOver="newsFlash(66)" onMouseOut="noNews()" onClick="redAlert()"> <img src="redalert.gif" alt="Click for a special message."></a>

    И если вы хотите, чтобы функция запускалась, когда посетитель первый раз загружает страницу, установите атрибут onload в тэге <BODY>:

    <body onLoad="specialEffect();">

    Существует гораздо больше событий, которые могут послужить сигналом к выполнению кода – обращайтесь к справке по HTML. (Но если вы хотите поддерживать пользователей Netscape 4, всегда проверяйте, поддерживает ли Netscape событие в данном тэге.)

  5. Когда сценарий готов к работе, просмотрите вашу страницу в броузере. Если страница неверно работает после того, как вы добавили сценарий – или вообще не появляется – возможно, вы пропустили тэг </SCRIPT> или дезорганизовали структуру вашей страницы. Вернитесь к вашему HTML и убедитесь, что все находится на своем месте.




  6. Если сценарий вообще не работает, убедитесь, что вы включили код для запуска функции (как было показано на шаге 4). Чтобы увидеть, запустился ли сценарий вообще, можно включить выражение alert() в начале кода:

    alert('It is running.');

  7. Если вы видите ошибку типа "Object expected" или "[name] is not defined", убедитесь, что правильно написали имя функции. Сценарий, который вы скопировали, может зависеть от других сценариев, которые вы тоже должны будете включить в страницу. Обратитесь к инструкциям для вашего сценария.
  8. Если ваш сценарий по-прежнему не работает, значит какую-то ошибку вы все-таки пропустили. За идеями по решению возникших проблем обращайтесь к разделу "Сценарии не работают или выдают ошибку". Не забудьте убрать блок <SCRIPT> из вашего файла, если вы никак не можете заставить сценарий работать, тогда посетители не будут видеть ошибок. И попытайтесь скопировать или загрузить другой сценарий, может быть, с ним вам больше повезет.
Новые версии броузеров игнорируют ошибки в программных кодах, не сообщая о них посетителю. Сценарии на вашей странице могут иногда сталкиваться с ошибками, но не сообщать о них, не загружая страницу вообще. Для получения информации о том, как показать ошибки в сценарии, обратитесь к разделу "Сценарии не работают или выдают ошибку".


Содержание раздела