| Россия, Ухта |
Инспектор
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 24.05.2010 | Уровень: специалист | Доступ: платный
Лекция 3:
JavaScript: история, семантика, область применения, версии и связь с другими языками
Подключение и выполнение javascript
- Подключение в любом месте
- Вынос скриптов в заголовок
- Внешние скрипты
В этом разделе мы понемногу рассмотрим все основные элементы javascript. Это позволит тут же писать и тестировать простейшие скрипты.
Javascript подключается напрямую в HTML-файл. Самый простой способ - это написать javascript-команды внутрь тега <script> где-нибудь в теле страницы.
Подключение в любом месте
<html>
<body>
<script type="text/javascript">
for(var i=0; i<5; i++)
{
alert("Номер входа в цикл:"+i)
}
</script>
</body>
</html>Когда браузер открывает HTML-страничку, он первым делом читает и выполняет то, что находится в теге <script></script>, потом продолжает читать страницу дальше.
Атрибут type говорит о том, что это javascript. Вообще говоря, атрибут может отсутствовать - разницы нет, но с точки зрения стандарта его следует указать.
Так, в этом примере будет показано начало страницы, затем четыре раза выполнится функция alert, которая выводит окошко с информацией, а только потом появится остальная часть страницы.
Вынос скриптов в заголовок
<html>
<head>
<script type="text/javascript">
function start_example()
{
for(var i=1; i<5; i++)
{
alert("Номер входа в цикл:"+i)
}
}
</script>
</head>
<body>
<input type="button" onclick="start_example()"
value="Запустить цикл"/>
</body>
</html>В данном примере, код javascript, размещен внутри тега <head></head>.
Функция start_example(), привязана к кнопке input. (атрибут onclick -событие которое возникает при нажатии на кнопку).
Внешние скрипты
Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом:
<script type="text/javascript" src="/mycript.js"/>
При этом файл /myscript.js содержит javascript-код, который иначе мог бы находиться внутри тега <script>.
Это очень удобно, потому что один и тот же файл со скриптами можно подключать на разных страницах. При правильных настройках сервера браузер закеширует его и не будет скачивать каждый раз заново.
Чтобы подключить несколько скриптов - используйте несколько таких тегов:
- <script type="text/javascript" src="/js/script1.js"/>
- <script type="text/javascript" src="/js/script2.js"/>
- ...
При указании атрибута src содержимое тега игнорируется.
То есть одновременно подключить внешний файл и написать что-то внутри тега нельзя. Придется делать два разных тега <script>: первый с src, второй - с командами, которые будут выполнены после выполнения внешнего файла.
Оформление тэга <script>.
На плохое оформление на сегодняшний день может ругаться только Validator (валидатор).
Атрибут <script type=...>
По стандарту этот атрибут нужен для указания языка скрипта. Параметр type не чувствителен к регистру и принимает следующие значения:
- text/javascript - язык программирования JavaScript.
- text/vbscript – язык программирования VBScript.
Иногда используют <script type="text/html"> как оригинальный способ добавить неотображаемые данные на страницу. Браузер не исполняет и не показывает <script> с неизвестным типом. В этом плане он ничем не отличается от обычного <div> с вечным style="display:none".
Атрибут <script language=...>
В старых скриптах можно встретить атрибут language. Этот атрибут на сегодняшний день больше не используется.
Комментарии до и после скрипта
Нередко в старых скриптах можно встретить код с такими символами <!-- ... -->, он предназначен для того что бы скрывать код javascript от старых браузеров. Современные браузеры комментарии игнорируют, можно их не ставить.
http://javascript.ru/tutorial/foundation/start
Отладка JavaScript.
В настоящее время средства отладки доступны для всех основных браузеров.
- Firefox имеет хорошо известное расширение Firebug (http://getfirebug.com/)
- IE8 выпускается со встроенными Developer Tools (http://www.microsoft.com/rus/windows/internet-explorer/)
- Опера 9.5+ поддердивает отладчик Dragonfly (http://www.opera.com/dragonfly/)
- У Safari есть JS-отладчик Drosera и DOM-вьювер WebInspector. В более новых версиях отладчик интегрирован в WebInspector.
Отладчик (Debugger) - это программа, позволяющая увидеть ход выполнения отлаживаемой программы, менять содержимое регистров, памяти и т.д в процессе выполнения. Используется для исследования алгоритма работы программ, обнаружения ошибок
Пример отладки с помощью IE8:
Окно отладки можно запустить, через Сервис-> Средства разработчика или с помощью горячей клавиши F12, либо если вы допустили ошибку javascript, IE 8 сам предложит запустить отладчик.
Само же окно отладчика изображено на рис. 3.2.
Более подробно об отладке JavaScript, можете узнать в "Отладка и профилирование JavaSсript с помощью инструментов разработчика в IE8" .
