Я прочитал, что вы должны определить свои функции JavaScript в теге <head>, но как расположение <script> (будь то в <head>, <body> или любом другом теге) влияет на функцию JavaScript,
В частности, как это влияет на область действия функции и где вы можете ее назвать?
Рассказывать людям добавлять <SCRIPT> только в голову звуки, как разумные вещи, но, как говорили другие, есть много причин, почему это не рекомендуется или даже практически - в основном скорость и способ создания динамических HTML-страниц.
Вот что говорит спецификация HTML 4:
Элемент SCRIPT помещает scriptв документе. Этот элемент может появляться любое количество раз в HEAD или BODY документа HTML.
И некоторый образец HTML. Не выглядит ли это полностью отформатированным здесь:)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>
И что с нетерпением ждем в HTML 5:
Новый атрибут async в <SCRIPT>:
Примечание. Существуют способы [sic]: SCRIPT может быть выполняется:
Асинхронный атрибут "true": SCRIPT будет выполняться асинхронно с остальной частью страницы, поэтому SCRIPT будет выполнен, пока страница продолжает разбор.
Асинхронный атрибут "false", но атрибут defer является "true": SCRIPT будет выполняться, когда страница заканчивается разбором.
Обычные правила игры по-прежнему стоят; не используйте материал до его определения.:)
Кроме того, обратите внимание, что совет "поставить все внизу" не является единственным правилом в книге - в некоторых случаях это может оказаться невозможным, и в других случаях может возникнуть больше смысла помещать script в другом месте.
Основная причина размещения script в нижней части документа - для производительности, скрипты, в отличие от других HTTP-запросов, не загружаются параллельно, то есть они замедляют загрузку остальной части вашей страницы. Еще одна причина для установки сценариев внизу, так что вам не нужно использовать какие-либо функции "DOM ready". Поскольку тег script находится ниже всех элементов, DOM будет готов к манипуляции!
EDIT: Прочтите это: http://developer.yahoo.com/performance/rules.html#js_bottom
Одним из аспектов размещения является производительность. См. эту прекрасную статью в обсуждении YSlow, почему иногда рекомендуется поместить ее в нижнюю часть документа.
Что касается вопросов области видимости, обычные правила видимости для Javascript (vars, определенные внутри или вне функций, локальных, глобальных, закрытий и т.д.), насколько я знаю, не затрагиваются.
Значение тега script имеет значение. Если вы привязываете функцию к элементу документа, элемент документа должен быть загружен первым, прежде чем мы начнем реализацию функции. предположим, что getTeachers() является функцией в файле getTeachers.js. Это даст вам сообщение об ошибке:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
<script type="text/javascript" src="getTeachers.js"></script>
<script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};
</script>
</head>
<body>
<form>
<input type = "button" id="buttonId" value = "Press for Results" /><br />
</form>
<span id="results" /></span>
</body>
</html>
Он дает ошибку перед первым загрузкой главы и не может найти элемент с указанным идентификатором. Код ниже:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
<script type="text/javascript" src="getTeachers.js"></script>
</head>
<body>
<form>
<input type = "button" id="buttonId" value = "Press for Results" /><br />
</form>
<script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};
</script>
<span id="results" /></span>
</body>
</html>
Это не так. Большинство программных скриптов разбросаны по всей странице. Из-за этого я редко видел проблемы (и только из старых браузеров).
Если вы вытащите Javascripts через XMLHttpRequest, как сказал Diodeus, это, вероятно, не сработает. В моем случае ошибки не было, браузер просто игнорирует новый script (s).
В итоге я использовал это, но не очень элегантно, но работает для меня до сих пор:
http://zeta-puppis.com/2006/03/07/javascript-script-execution-in-innerhtml-the-revenge/
Как использовать execJS: http://zeta-puppis.com/2006/02/23/javascript-script-execution-in-innerhtml/
Примечание. Следите за < в этой строке: for(var i=0;i<st.length; i++)
Если у вас есть встроенный script (внешние функции), который находится перед функциями, которые он может вызывать, вы можете получить сообщение об ошибке, потому что они могут быть недоступны. Не сказать, что это всегда произойдет, просто, что это может быть в зависимости от типа браузера или версии.
Если ваш script ссылается на ID на странице, и страница не была отображена (т.е. script перед HTML, или ваш script выполняется с onload, а не DOM готов), вы можете также получите сообщение об ошибке.
Правила определения области обзора Javascript аналогичны perl - вы можете вызывать любую функцию на текущем или любом более высоком уровне видимости. Единственное ограничение состоит в том, что функция должна быть определена во время ее вызова. Позиция в источнике не имеет значения - важно только положение во времени.
Вам следует избегать размещения сценариев в <head>, если это возможно, поскольку это замедляет отображение страницы (см. ссылку Alan).