1. Метод встраивания Javascript в HTML заключается в непосредственном размещении кода Javascript между парой тегов <script> и </script>. Используйте атрибут src тега <script /> для создания внешнего js-файла и размещения его в нем. обработчик событий, например: <p onclick="alert('Я — Javascript, выполняемый событием onclick')">Нажмите меня</p>
В качестве тела URL-адреса этот URL-адрес использует специальный протокол Javascript:, например: <a href="javascript:alert('Я javascript, выполняемый протоколом javascript:')">Нажмите меня</a>
Используйте метод document.write() самого javascript для написания нового кода javascript. Используйте Ajax для асинхронного получения кода javascript, а затем выполните
третий и четвертый методы. Перед выполнением написанный Javascript должен быть запущен. оно специально задано, страница загружаться не будет.
2. Порядок выполнения Javascript на странице. Код Javascript на странице является частью HTML-документа, поэтому порядок выполнения Javascript при загрузке страницы соответствует порядку появления вводного тега <script />. . В теге <script /> или через src Импортированный внешний JS выполняется в том порядке, в котором появляются его операторы, и процесс выполнения является частью загрузки документа.
Глобальные переменные и функции, определенные каждым скриптом, могут вызываться скриптами, выполняемыми позже.
Вызов переменной должен быть объявлен заранее, иначе полученное значение переменной будет неопределенным.
<script type="text/javscrpt">//<![CDATA[
оповещение (tmp); // вывод не определен
вар ТМП = 1;
оповещение(tmp); //выход 1
//]]></script>
В том же сценарии определение функции может появиться после вызова функции. Однако, если оно находится в двух фрагментах кода, а вызов функции находится в первом фрагменте кода, будет сообщено о неопределенной ошибке функции.
<script type="text/javscrpt">//<![CDATA[
аа(); //Ошибка браузера
//]]></script>
<script type="text/javscrpt">//<![CDATA[
аа(); //Выход 1
функция аа(){оповещение(1);}
//]]></script>
document.write() запишет выходные данные в местоположение документа сценария. После того, как браузер проанализирует содержимое документа, в котором находится documemt.write(), он продолжит анализировать выходные данные document.write(). а затем продолжите анализ HTML-документа.
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("Я" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
предупреждение(3);
//]]></script>
Содержимое test.js:
var tmpStr = 1;
оповещение (tmpStr);
Порядок значений всплывающих окон в Firefox и Opera: 1, 2, я 1, 3.
Порядок всплывающих значений в IE: 2, 1, 3. При этом браузер сообщает об ошибке: tmpStr не определен. Причина может быть в том, что IE не ждет выполнения Javascript-кода в SRC. загружаться перед выполнением следующей строки при document.write. Поэтому сначала появляется 2, а когда document.write('document.write("I am" + tmpStr)') выполняется и вызывается tmpStr, tmpStr не определен. , что приводит к ошибке.
Чтобы решить эту проблему, вы можете использовать принцип анализа HTML, чтобы проанализировать один тег HTML, а затем выполнить следующий, и для этого разделить код:
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("Я" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
предупреждение(3);
//]]></script>
Таким образом, порядок вывода значений в IE и других браузерах одинаков: 1, 2, я 1, 3.
3. Как изменить порядок выполнения Javascript на странице с помощью onload
<script type="text/javascript">//<![CDATA[
окно.онлоад = е;
функция f(){предупреждение(1);}
предупреждение(2);
//]]></script>
Порядок выходных значений — 2, 1.
Следует отметить, что если имеется несколько файлов winodws.onload, вступит в силу только самый эффективный. Решение:
window.onload = function(){f();f1();f2();.... . }
Использование типов событий DOM уровня 2
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}еще{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}
Defer можно использовать в IE. Функция defer предназначена для загрузки кода, а не его немедленного выполнения. Он будет выполнен после загрузки документа. Он чем-то похож на window.onload, но не имеет ограничений window. .onload Его можно использовать повторно, но только в IE, поэтому приведенный выше пример можно изменить на.
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('alert(2);')
document.write('alert("Я" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
предупреждение(3);
//]]></script>
Таким образом, IE не будет сообщать об ошибке, а порядок выходных значений станет: 1, 3, 2, я 1.
Когда парсер HTML встречает скрипт, он должен прекратить анализ документа как обычно и дождитесь выполнения скрипта. Чтобы решить эту проблему, стандарт HTML4 определяет defer. Используйте defer, чтобы предложить браузеру продолжить анализ HTML-документа и задержать выполнение скрипта. Эта задержка очень полезна, когда скрипт загружается из внешнего файла, так что браузеру не приходится ждать загрузки всех внешних файлов перед продолжением выполнения, что может эффективно повысить производительность. IE в настоящее время является единственным браузером, поддерживающим атрибут defer, но IE не реализует атрибут defer правильно, поскольку отложенные сценарии всегда задерживаются до конца документа, а не только до следующего сценария без задержки. Это означает, что порядок выполнения отложенных сценариев в IE довольно запутан, и любые функции и переменные, которые не требуются последующим неотложенным сценариям, не могут быть определены. Время выполнения всех отложенных сценариев в IE должно наступать после создания дерева HTML-документа и до window.onload.
Воспользуйтесь преимуществами Аякса.
Поскольку xmlhttpRequest может определять состояние загрузки внешних документов, он может изменять порядок загрузки кода.