Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17106 / 1587 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 11:

JavaScript. Общие сведения

< Лекция 10 || Лекция 11: 12 || Лекция 12 >

Возможности и ограничения JavaScript

Подведем итог всему вышесказанному и сформулируем список основных возможностей JavaScript. JavaScript позволяет:

  • добавлять различные эффекты анимации элементам веб–страницы;
  • реализовывать поведение веб–страницы в ответ на события (перемещение указателя мыши, нажатие клавиш с клавиатуры и т.д.);
  • осуществлять проверку ввода данных в поля формы до отправки на сервер, как следствие снижение нагрузки на сервер;
  • извлекать данные о компьютере посетителя (посредством cookie - файлов);
  • определять тип пользовательского браузера и, соответственно, загружать веб – страницу, ориентированную на данный браузер;
  • изменять содержимое html-элементов, добавлять новые теги, изменять стили.

Существуют также и ряд ограничений:

  • нельзя закрыть окна и вкладки открытые без использования JavaScript;
  • нет защиты исходного кода страницы;
  • нельзя запретить копирование текста или изображений со страницы;
  • нельзя получить доступ к веб-страницам, расположенным на другом домене;
  • нет доступа к файлам, расположенным на компьютере пользователя (вообще нет доступа куда – либо за пределами веб - страницы).

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

Связь с HTML – документом

Как и в случае с CSS, JavaScript – код может быть размещен как в рамке самой веб–страницы, так и за ее пределами, в качестве отдельного файла. Предпочтительнее с точки зрения Web 2.0, безусловно, является второй вариант. Для подключения JavaScript используется парный тег <script>.

Всего существует три способа подключения JavaScript:

Подключение в любом месте:

<html>
  <body>  
    <script type="text/javascript">
      for(var i=0; i<5; i++)
      {
        alert("Номер входа в цикл:"+i)
      }
    </script>
  </body>
</html>

Когда браузер открывает HTML-страничку, он первым делом читает и выполняет то, что находится в теге <script> ;</script>, потом продолжает читать страницу дальше.

Атрибут type говорит о том, что это javascript. Вообще говоря, атрибут может отсутствовать - разницы нет, но с точки зрения стандарта его следует указать.

Вынос скриптов в заголовок

<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>.

Внешние скрипты

Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом:

<script type="text/javascript"  src="/myscript.js"/>

При этом файл /myscript.js содержит javascript-код, который иначе мог бы находиться внутри тега <script>.

Для подключения более одного скрипта, используется несколько тегов::

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

При указании атрибута src содержимое тега игнорируется.

Одновременно подключить внешний файл и написать что-то внутри тега нельзя. Придется делать два разных тега <script>: первый с src, второй - с командами, которые будут выполнены после выполнения внешнего файла.

Ключевые термины и определения

Веб – сценарии – программный код на интерпретируемом языке, внедренный в веб – страницу.

Cookie файлы - текстовые файлы, хранящие информацию, которую передает веб – сайт браузеру пользователя.

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

Краткие итоги

Нами были рассмотрены основы использования веб – сценариев, их возможности и ограничения. Современная веб – разработка также не обходится без применения JavaScript, как и без CSS.

Тем не менее, использовать веб – сценарии следует аккуратно, нужно помнить, что они выполняются на стороне клиента, а значит, их корректное функционирование будет отчасти и зависеть от клиента. Более того есть программные способы ограничения активного содержимого веб – страниц, либо его блокировки.

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

Список материалов для самостоятельного изучения

  1. http://csstips.net/html-css-javascript/
  2. http://www.woodger.ca/js_orig.htm
  3. http://www.po4emu.ru/drugoe/history/index/tehnika/stat_tehnika/4.htm
  4. http://habrahabr.ru/post/106274/
  5. http://oooportal.ru/?cat=article&id=1043
< Лекция 10 || Лекция 11: 12 || Лекция 12 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Александра Акимова
Александра Акимова
Украина
Людмила Евсюкова
Людмила Евсюкова
Россия, Московская обл