Отправляет email-рассылки с помощью сервиса Sendsay

JavaScript для начинающих. Изучаем с нуля.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
ImHoster.net

Статистика

2.443 подписчиков
-1 за неделю
←   Все выпуски   →

JavaScript для начинающих. Изучаем с нуля.


Спонсор Рассылки: Клуб Желающих Создать И Развивать Свой Сайт



Здравствуйте.

С Вами вновь "Javascript для начинающих". И сегодня вас ждёт очередная порция полезной информации. Встречайте.

.JS, когда грузиться думаешь?



Источник: http://docs.com.ru/js_6.php

Абстракт. В статье рассматривается проблема очередности загрузки внутренних и внешних JS-скриптов в динамически создаваемых HTML-страницах. Все, о чем идет речь, касается только Internet Explorer v5 и выше (IE4 не пробовал).

Интродюкшн.Как-то однажды делал я такую вот штучку: на открытой в браузере HTML-странице в поле TEXTAREA ввожу команды, нажимаю кнопку - JS-скрипт обрабатывает эти команды, формирует по ним код и создает новое окно, в которое этот код записывает. В новый документ в обязательном порядке записывалась строка, подключающая внешний скрипт - <script src="tools.js"> - для доступа к сервисным функциям.

Когда я стал это дело отлаживать, обнаружилась одна неожиданная неприятность: что-то было не так со скриптом, загружаемым из файла tools.js. Как оказалось впоследствии, дело было не в коде скрипта, а в том, что он являлся внешним.

Суть проблемы. Итак, вот что я обнаружил. Пусть имеется код:

<html>
 <head>
  <script id="S1">
   --- script code ---
  </script>
  <script id="S2" src="tools.js"></script>
  <script id="S3">
   --- script code ---
  </script>
 </head>
 <body>
  <script id="S4">
   --- script code ---
  </script>
 </body>
</html>

Если этот HTML-код загружается из файла, то порядок загрузки скриптов естественный: S1 - S2 - S3 - S4. Если же его записать с помощью newWin.document.write в созданное окно newWin, то порядок загрузки скриптов уже другой: S1 - S3 - S4 - S2(!) Т.е. порядок сохранился, если забыть о внешнем скрипте. В данном примере этот скрипт помещен внутрь <head>, но это не существенно, т.к. в <body> ничего не меняется.

Следующий пример призван продемонстрировать описанное изменение порядка загрузки скриптов.
Внешний скрипт example.js:

function demo() {
 alert("example.js:demo() - Я доступна");
}
Тестовая страница: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Пример 1.</title>
<script language='JavaScript' src='example.js' charset='windows-1251'></script>
<script language="JavaScript">
 code = "<html>\n\
<head>\n\
<meta http-equiv=\"Content-Type\" content=\"text/html;charset=windows-1251\">\n\
<title>Пример 1. Динамически созданный документ.</title>\n\
<script language='JavaScript' src='example.js' charset='windows-1251'><"+"/script>\n\
<script language='JavaScript'>\n\
 window.onerror = myerror;\n\
 \n\
 function myerror(msg,url,line) {\n\
  alert('Генерится ошибка \\n\"'+msg+'\"\\nв строке '+line+'\\nЛегко убедиться,\\n\
что в этой строке стоит вызов demo()');\n\
  return true;\n\
 }\n\
<"+"/script>\n\
</head>\n\
<body>\n\
<span id=\"ilnb\">Проверяем доступность</span><br>\n\
<script language=\"JavaScript\">\n\
 demo();\n\
<"+"/script>\n\
<script language=\"JavaScript\">\n\
 document.all.ilnb.innerHTML += ' - выполнено';\n\
<"+"/script>\n\
Нажмите кнопку \"Обновить\", и ошибка не появится, т.к. документ уже статичен\n\
</body>\n\
</html>";

 function test() {
  w = window.open();
  w.document.write(code);
 }
</script>
</head>
<body>
<span
id="ilnb">Проверяем доступность</span><br>
<script language="JavaScript">
 demo();
 document.all.ilnb.innerHTML += ' - выполнено';
</script>
<a href="#" onclick="test(); return false;">Создать динамический документ</a>
</body>
</html>

Метод устранения.Все делается предельно просто. Пусть нужно подключить файл tools.js. Добавим в его конец инструкцию is_load = 1. В динамически создаваемую страницу выше тега <script src="tools.js"> запишем скрипт, в котором также объявим переменную is_load = 0. Тогда is_load будет равна 0, пока не загрузится tools.js, когда она станет равной 1. Когда загрузка tools.js подтвердится указанным образом, можно будет вызвать код, использующий содержимое этого файла. Этот код указан под собирательным именем tool(). Осталось только отловить момент окончания загрузки. Для этого используем таймер.
Запишем то, что проговорено словами, в виде кода:

<script language='JavaScript'>
 is_load = 0;
 time_ = 100;
 
 function if_load() {
  if ( is_load==0 )
   setTimeout('if_load();',time_);
  else
   tool();
 }
 
 setTimeout('if_load();',time_);
</script>
<script language='JavaScript' src='tool.js'></script>

Обращаю особое внимание на размещение вспомогательного скрипта перед внешним. Порядок следования оказывается существенным, если динамически созданная страница обновляется. Тогда она уже является статической, и скрипты грузятся в порядке появления в коде. Перестановка вспомогательного и внешнего скриптов привела бы к тому, что сначала загрузился бы внешний скрипт - при этом было бы is_load = 1 - после чего загрузилась бы инструкция is_load = 0, что привело бы к непрекращающимся вызовам функции if_load().

Пример реализации.
Внешний скрипт tools.js:

function tool() {
 alert("tools.js:tool() - Я уже загрузилась");
}

is_load = 1;
Тестовая страница: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Пример 2.</title>
<script language='JavaScript'>
 is_load = 0;
 time_ = 100;
  
 function if_load() {
  if ( is_load==0 )
   setTimeout('if_load();',time_);
  else {
   tool();
   document.all.ilnb.innerHTML += ' - выполнено';
  }
 }
  
 setTimeout('if_load();',time_);
</script>
<script language='JavaScript' src='tools.js' charset='windows-1251'></script>
<script language="JavaScript">
 code = "<html>\n\
<head>\n\
<meta http-equiv=\"Content-Type\" content=\"text/html;charset=windows-1251\">\n\
<title>Пример 2. Динамически созданный документ</title>\n\
<script language='JavaScript'>\n\
 is_load = 0;\n\
 time_ = 100;\n\
\n\
 function if_load() {\n\
  if ( is_load==0 )\n\

  setTimeout('if_load();',time_);\n\
  else {\n\
   tool();\n\
   document.all.ilnb.innerHTML += ' - выполнено';\n\
  }\n\
 }\n\
\n\
 setTimeout('if_load();',time_);\n\
<"+"/script>\n\
<script language='JavaScript' src='tools.js' charset='windows-1251'><"+"/script>\n\
</head>\n\
<body>\n\
<span id=\"ilnb\">Проверяем доступность</span><br>\n\
Нажмите кнопку \"Обновить\", и загрузка определится правильно,
т.к. порядок \n\
следования вспомогательного и внешнего скриптов - правильный\n\
</body>\n\
</html>";

 function test() {
  w = window.open();
  w.document.write(code);
 }
</script>
</head>
<body>
<span id="ilnb">Проверяем доступность</span><br>
<a href="#" onclick="test(); return false;">Создать динамический документ</a>
</body>
</html>

Как видим, все улажено, и в динамически создаваемой странице функция tool() вызывается только тогда, когда она становится доступной.
Благодарю всех за внимание и желаю творческих успехов!


Хотите Изучить Javascript?

Профессионалы с Радостью Вам ПОМОГУТ!



HTML JavaScript, PHP и MySQL. Джентельменский набор Web-мастера

Рассмотрены вопросы создания интерактивных Web-сайтов с помощью HTML, JavaScript, PHP и MySQL без использования специализированных редакторов. Представлен материал о применении каскадных таблиц стилей (CSS) для форматирования Web-страниц. Даны основные конструкции языка РНР, на примерах показаны приемы написания сценариев, наиболее часто используемых при разработке Web-сайтов. Описаны приемы работы с базами данных MySQL при помощи РНР, а также администрирования баз данных с помощью программы phpMyAdmin. Особое внимание уделено созданию программной среды на компьютере разработчика и настройке Web-сервера Apache. На прилагаемом компакт-диске содержатся листинги более чем двухсот примеров, описанных в книге. Для Web-разработчиков

Получить в своё распоряжение

Полный справочник по HTML, CSS и JavaScript

Издание представляет собой современный полный справочник с перекрестными ссылками по HTML, CSS и JavaScript. В первых главах рассматриваются основы HTML, CSS и JavaScript. Далее приводятся сведения обо всех элементах и атрибутах HTML, событиях, стилях CSS, поведениях, фильтрах, свойствах, методах и объектах JavaScript. Элементы языков программирования в каждой из глав перечислены в алфавитном порядке. Для каждого элемента приводится краткое описание, полный синтаксис, пример использования, список совместимых версий браузеров Netscape и Internet Explorer, список элементов, с которыми элемент используется. Веб-дизайнер, веб-мастер, веб-программист - вся нужная вам информация собрана под этой обложкой!

Получить в своё распоряжение

JavaScript. Просто как дважды два

Если вы почувствовали, что вашим Web-страницам недостает динамичности, гибкости и собственного характера, обратитесь к сценариям. С помощью сценариев вы сможете сделать документ таким же умным, как вы сами, вдохнуть в него жизнь и собственный характер. Сценарии - это небольшие программы, вписанные в HTML-код Web-страницы, a JavaScript - пожалуй, наиболее популярный язык написания сценариев для Web-страниц. Этот язык создавался для широкого круга разработчиков Web-страниц, не являющихся профессиональными программистами. Желательно, чтобы читатель имел представление о коде HTML Web-страниц. Впрочем, сведений об HTML, представленных в этой книге, будет достаточно для создания новичками небольших персональных Web-страниц. Если вам до сих пор не приходилось заниматься программированием, написание сценариев станет для вас первым шагом на этом увлекательном пути.

Получить в своё распоряжение

Сценарии для Web-сайта: PHP и JavaScript

Книга посвящена использованию языков JavaScript и РНР для разработки Web-приложений. Приведены основные понятия, связанные с разработкой Web-сайта, а также сведения о языке HTML и каскадных таблицах стилей (CSS). Рассмотрены основы программирования на JavaScript и РНР 5. Приведены практические примеры различных клиентских и серверных сценариев. Описаны особенности и даны рекомендации по применению этих языков. В приложениях содержатся сведения по объектам документа и браузера, с которыми работают клиентские сценарии, а также рассказывается о том. как установить и настроить РНР и Web-сервер IIS в системе Windows. Во втором издании добавлены новые примеры. Для начинающих Web-разработчиков

Получить в своё распоряжение

JavaScript. Освой на примерах

На наглядных примерах даны практические приемы программирования клиентских сценариев для Web-браузеров. Кратко изложены основы создания Web-страниц и скриптов: язык JavaScript, каскадные таблицы стилей (CSS) и объектная модель документа (DOM). Рассмотрено решение типовых задач программирования скриптов: работа с датой и временем, cookies, регулярными выражениями и протоколами. Даны примеры создания динамических эффектов: управление окном браузера, разработка динамических форм, средства и способы работы с изображениями, анимационные эффекты, реализация перетаскивания (Drag and Drop), эмуляция элементов управления пользовательского интерфейса. Рассмотрено написание функционально законченных приложений: реализация визуального редактора HTML и нескольких известных игр на JavaScript. Исходные тексты всех примеров находятся на прилагаемом компакт-диске. Для широкого круга Web-программистов

Получить в своё распоряжение

Основы JavaScript для начинающих

Предлагаемая вашему вниманию книга содержит вводный курс по одному из самых популярных языков программирования, который применяется в Web-дизайне на стороне клиента, - JavaScript. Книга достаточно подробно знакомит читателя с основными особенностями языка, его разновидностями и версиями, используемыми в различных браузерах. Рассмотрены наиболее распространенные типы браузеров и применение JavaScript для них - Internet Explorer, Netscape, Mozilla и некоторые другие. В книге приводятся простые пошаговые инструкции для выполнения сценариев, каждый из них предлагается в нескольких вариантах - для разных браузеров и с учетом требований к Web-странице. Вкратце рассматриваются общие темы Web-программирования, такие как модель документа DOM и таблицы стилей CSS. Все тексты сценариев, приведенных в книге, можно скачать с сайта авторов. Книга будет полезна начинающим осваивать Web-дизайн, а также тем, кто хочет расширить свой кругозор в области программирования.

Получить в своё распоряжение

Раскрытие тайн JavaScript

Книга посвящена одному из самых распространенных в Internet языков сценариев - JavaScript. В ней излагаются основы языка JavaScript. Здесь описаны все необходимые для подготовки сценариев методы и технические приемы, начиная с азов и заканчивая такими передовыми технологиями, как динамический HTML. Опыта работы с JavaScript не требуется, хотя предполагается знание языка HTML. Книга является самоучителем с многочисленными примерами и пошаговыми инструкциями. В конце каждой главы имеется небольшой тест, который поможет закрепить пройденный материал. Книга будет полезна начинающим изучение JavaScript, которые хотят быстро и легко освоить методы использования этого языка для создания насыщенных и динамичных Web-страниц. Опытные дизайнеры найдут здесь свежие идеи и откроют для себя новые способы воплощения своих замыслов.

Получить в своё распоряжение

WMI: программирование на JavaScript и VBScript

Настоящее издание представляет собой авторизированный перевод оригинального немецкого издания "Audi A4, Audi A4 Avant". Книга является руководством по эксплуатации, техническому обслуживанию и ремонту автомобилей Audi A4, Audi A4 Avant с бензиновыми двигателями, выпускаемых с октября 2000 года. Руководство предназначено для работников автосервиса и автомобилистов, вне зависимости от степени подготовленности. В руководстве приведены технические характеристики основных агрегатов и систем автомобиля. Пооперационно изложена последовательность разборки и сборки узлов и агрегатов с уточнением особенностей работ, мер безопасности, замеров необходимых параметров и советов автолюбителям предпочитающим самостоятельный ремонт. В конце каждой главы приведены списки возможных неисправностей, причины их возникновения и методы их устранения. Описания неисправностей сопровождаются советами, которые помогут избежать поломок автомобиля и продлить срок его безаварийной эксплуатации. Последняя глава содержит карту поиска неисправностей и график регулярного технического обслуживания.

Получить в своё распоряжение

JavaScript: подробное руководство

Пятое издание бестселлера «JavaScript. Подробное руководство» полностью обновлено. Рассматриваются взаимодействие с протоколом HTTP и применение технологии Ajax, обработка XML-документов, создание графики на стороне клиента с помощью тега <canvas>, пространства имен в JavaScript, необходимые для разработки сложных программ, классы, замыкания, Flash и встраивание сценариев JavaScript в Java-приложения. Часть I знакомит с основами JavaScript. В части II описывается среда разработки сценариев, предоставляемая веб-броузерами. Многочисленные примеры демонстрируют, как генерировать оглавление HTML-документа, отображать анимированные изображения DHTML, автоматизировать проверку правильности заполнения форм, создавать всплывающие подсказки с использованием Ajax, как применять XPath и XSLT для обработки XML-документов, загруженных с помощью Ajax. Часть III - обширный справочник по базовому JavaScript (классы, объекты, конструкторы, методы, функции, свойства и константы, определенные в JavaScript 1.5 и ECMAScript v3). Часть IV - справочник по клиентскому JavaScript (API веб-броузеров, стандарт DOM API Level 2 и недавно появившиеся стандарты: объект XMLHttpRequest и тег <canvas>).

Получить в своё распоряжение

JavaScript. Библия пользователя

Эта книга адресована широкому кругу читателей Web-дизайнеров, которые решили детально изучить язык JavaScript. Она имеет все шансы завоевать титул полного справочного руководства по JavaScript не только в глазах его разработчиков, но и в сердцах пользователей. В издании подробно описаны практически все средства разработки сценариев JavaScript, используемые в современных и уже устаревших браузерах. Изложение материала начинается с истории и особенностей языка JavaScript и заканчивается описанием сложных приложений, используемых для решения таких задач, как создание формы заказа, обработка XML-данных и др. Особое внимание в книге уделено созданию межбраузерных сценариев, которые максимально эффективно выполняются в подавляющем большинстве используемых в настоящее время браузеров. На прилагаемом к книге компакт-диске предоставлены дополнительные 22 главы на русском языке, все листинги, описанные в книге, некоторые вспомогательные материалы и программы, которые помогут читателю изучить сложные темы и практические примеры.

Получить в своё распоряжение

В избранное