Спонсор: Microsoft
Опубликован: 24.05.2010 | Уровень: специалист | Доступ: платный
Лекция 3:

JavaScript: история, семантика, область применения, версии и связь с другими языками

< Лекция 2 || Лекция 3: 1234 || Лекция 4 >

Подключение и выполнение javascript

  1. Подключение в любом месте
  2. Вынос скриптов в заголовок
  3. Внешние скрипты

В этом разделе мы понемногу рассмотрим все основные элементы 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>.

Это очень удобно, потому что один и тот же файл со скриптами можно подключать на разных страницах. При правильных настройках сервера браузер закеширует его и не будет скачивать каждый раз заново.

Чтобы подключить несколько скриптов - используйте несколько таких тегов:

  1. <script type="text/javascript" src="/js/script1.js"/>
  2. <script type="text/javascript" src="/js/script2.js"/>
  3. ...

При указании атрибута 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.

В настоящее время средства отладки доступны для всех основных браузеров.

  1. Firefox имеет хорошо известное расширение Firebug (http://getfirebug.com/)
  2. IE8 выпускается со встроенными Developer Tools (http://www.microsoft.com/rus/windows/internet-explorer/)
  3. Опера 9.5+ поддердивает отладчик Dragonfly (http://www.opera.com/dragonfly/)
  4. У Safari есть JS-отладчик Drosera и DOM-вьювер WebInspector. В более новых версиях отладчик интегрирован в WebInspector.

Отладчик (Debugger) - это программа, позволяющая увидеть ход выполнения отлаживаемой программы, менять содержимое регистров, памяти и т.д в процессе выполнения. Используется для исследования алгоритма работы программ, обнаружения ошибок

Пример отладки с помощью IE8:

Окно отладки можно запустить, через Сервис-> Средства разработчика или с помощью горячей клавиши F12, либо если вы допустили ошибку javascript, IE 8 сам предложит запустить отладчик.

Вызов окна отладки.

Рис. 3.1. Вызов окна отладки.

Само же окно отладчика изображено на рис. 3.2.

Пример использования отладки.

увеличить изображение
Рис. 3.2. Пример использования отладки.

Более подробно об отладке JavaScript, можете узнать в "Отладка и профилирование JavaSсript с помощью инструментов разработчика в IE8" .

< Лекция 2 || Лекция 3: 1234 || Лекция 4 >
Екатерина Соколова
Екатерина Соколова
Россия, Ухта
Никита Гекторов
Никита Гекторов
Украина, Донецк