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

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

< Лекция 10 || Лекция 11: 12 || Лекция 12 >
Аннотация: Веб – сценарии. JavaScript, история возникновения. Возможности и ограничения JavaScript. Связь с HTML – документом.

Структурно веб – страницу можно представить как совокупность трех составляющих: содержания, внешнего представления и поведения.

Инструментарий для наполнения веб–страницы содержанием и управления его структурой разработчику предоставляет HTML. В общем и целом, при управлении внешним видом веб–страницы можно также использовать гипертекстовый язык разметки, однако, предпочтительнее пользоваться каскадными таблицами стилей.

Таким образом, инструментарий работы с представлением веб – документа нам предоставляет CSS.

Осталось пояснить вопрос с поведением веб–страницы. Прежде всего необходимо понять, что скрывается за термином "поведение".

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

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

То есть никто изначально не закладывал в HTML поддержку интерактивного взаимодействия с пользователем. Попросту никто не мог и предположить, какое развитие получит глобальная паутина в дальнейшем.

При помощи HTML и CSS можно создавать прекрасно оформленные и грамотно структурированные, но не интерактивные сайты. Конечно, существует ряд сайтов, прекрасно обходящихся без какого – либо "сложного" взаимодействия с пользователем. Но следует помнить, что единственным неоспоримым на данный момент показателем успешности сайта является число его посетителей.

Поэтому хорошим тоном стало "обрастание" сайтов форумами, блогами, возможностями взаимодействия со сторонними сервисами и т.д. А в этом деле без интерактивности уже далеко не уйти.

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

Веб – сценарии

Итак, стандартизованный HTML, несмотря на все его достоинства, сдерживает разработчика, стремящегося к добавлению сложных сценариев поведения в ответ на действия пользователя.

Конечно, разнообразные попытки расширить возможности HTML предпринимались, чуть ли не с самого начала его существования, об этом мы уже говорили во вступительной части к теме о каскадных таблицах стилей. Разработчики различных браузеров закладывали в них возможность работы с нестандартизованными тегами. Легко можно догадаться, что это вело к возникновению проблем совместимости, а разработчик, раннее существовавший в рамках HTML, становился также зависимым и от определенного браузера.

Выходом из ситуации стали веб – сценарии – программы написанные на "обычных" языках программирования и внедренные непосредственно в HTML – код страницы.

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

С помощью Web-сценариев можно создать принципиально новый интерфейс пользователя для своей страницы. На многих страницах применяется иерархический список, в котором перечислены все разделы и подразделы сайта. Такие страницы напоминают окно Проводника Windows. Часто с помощью свободно позиционируемых элементов и сложных Web-сценариев создают принципиально новые элементы управления для ввода данных.

Для поддержки языка сценариев используется так называемый интерпретатор (или виртуальная машина) языка. Web-обозреватель выделяет сценарии из HTML-кода страницы и передает его на выполнение интерпретатору. Последний анализирует код сценариев, расшифровывает их и выполняет, передавая результат выполнения обратно Web-обозревателю.

Языки, на которых написаны веб – сценарии являются интерпретируемыми, это означает, что программа расшифровывается при каждом ее выполнении. В этом основное отличие интерпретируемых языков программирования от компилируемых. В компилируемых языках программа расшифровывается однократно, после чего преобразуется в выполнямый машинный код.

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

Существует еще один очень важный момент, который обязательно нужно понимать. Веб – сценарии выполняются на стороне клиента. Подобный подход имеет как ряд преимуществ, так и ряд недостатков, но об этом будет сказано позже.

JavaScript

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

Сам JavaScript был разработан Брендоном Айхом (на тот момент сотрудником компании Netscape). Собственно, о самом процессе работы над JavaScript ходят чуть ли не легенды, поскольку сроки были очень и очень сжатыми, нужен был результат. Это объясняет ряд все еще существующих в языке ошибок. Подробнее об этом можно прочитать в указанных материалах для самостоятельного изучения.

Предпосылкой появления JavaScript стало желание дать разработчикам HTML-документов возможность динамически управлять всеми объектами, описываемыми в веб-страницах. Изначально язык был включён в браузер Netscape Navigator, начиная с версии 2.0B3 в декабре 1995 года. Первоначально язык назывался Mocha, затем был переименован в LiveScript. На синтаксис JavaScript оказали влияние такие языки, как C и Java, и поскольку технология Java была в то время очень модной, LiveScript переименовали в JavaScript, получив соответствующую лицензию от Sun Microsystems, Inc.

Реализация компании Microsoft получила название JScript. Internet Explorer, начиная с версии 3.0, выпущенной в августе 1996 года, поддерживает JScript. Стандартизация языка ассоциацией ECMA иниицирована компанией Netscape. Стандартизированная версия имеет название ECMAScript, описывается стандартом ECMA-262.

Web-обозреватель, работающий на компьютере-клиенте, обеспечивает среду, в которой JavaScript имеет доступ к объектам, которые представляют собой окна, меню, диалоги, текстовые области, фреймы, cookies(куки) и ввод-вывод в Web-страницу. Кроме того, обозреватель позволяет присоединить сценарии на языке JavaScript к таким событиям, как загрузка и выгрузка страниц и графических образов, нажатие клавиш и движение мыши, выбор текста и пересылка форм. При этом программный код сценариев только реагирует на события и поэтому не нуждается в главной программе. Набор объектов, предоставляемых обозревателем, известен под названием Document Object Model (DOM).

Web-сервер обеспечивает иную среду, в которой объектами являются запросы к базам данных, клиенты, файлы и механизмы блокировки и совместного использования данных. Совместное использование сценариев и на стороне клиента, и на стороне сервера позволяет распределить вычисления между ними и обеспечить желаемый пользовательский интерфейс для Web-приложения.

JavaScript — это язык программирования, основанный на объектах: и языковые средства, и возможности среды представляются объектами, а сценарий (программа) на JavaScript — это набор взаимодействующих объектов.

Объект JavaScript — это неупорядоченный набор свойств, каждое из которых имеет нуль или более атрибутов, которые определяют, как это свойство может использоваться. Например, если атрибуту свойства ReadOnly (неизменяемый) присвоено значение true (истина), то все попытки программно изменить значение этого свойства будут безрезультатны. Свойства — это контейнеры, которые содержат другие объекты, примитивные значения и методы. Примитивное значение — это элемент любого из встроенных типов: Undefined, Null, Boolean, Number и String; объект — это элемент еще одного встроенного типа Object; методфункция, ассоциированная с объектом через свойство.

JavaScript содержит несколько встроенных объектов, таких, как Global, Object, Error, Function, Array, String, Boolean, Number, Math, Date, RegExp. Кроме того, JavaScript содержит набор встроенных операций, которые, строго говоря, не обязательно являются функциями или методами, а также набор встроенных операторов, управляющих логикой выполнения программ. Синтаксис JavaScript в основном соответствует синтаксису языка Java, но упрощен в сравнении с ним, чтобы сделать язык сценариев легким для изучения. Подробнее синтаксис языка будет рассмотрен в последующих лекциях.

Отметим, что в рамках настоящего курса мы будем говорить о JavaScript исключительно в контексте применения языка в веб – сценариях. Соответственно, все возможности, ограничения и прочее указывается только с точки зрения работы с вебом.
< Лекция 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 () "

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

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

Татьяна Бобошко
Татьяна Бобошко
Россия
Андрей Пшеничных
Андрей Пшеничных
Россия, Санкт-Петербург, НИУ ИТМО