язык javascript как средство создания интерактивных ресурсов

  • Научно-исследовательская работа
  • Образовательные программы
  • Повышение квалификации
  • Подготовка к тестированию
  • docx
  • 14.02.2017
Публикация на сайте для учителей

Публикация педагогических разработок

Бесплатное участие. Свидетельство автора сразу.
Мгновенные 10 документов в портфолио.

Использование JavaScript для создания интерактивных Web-страниц Обобщенно гипертекстовая информационная система состоит из множества информационных узлов, множества гипертекстовых связей, определенных на этих узлах, и инструмента манипулирования узлами и связями. Технология World Wide Web - это технология ведения гипертекстовых распределенных систем в Internet, и, следовательно, она должна удовлетворять общему определению таких систем. Это значит, что все вышеперечисленные компоненты гипертекстовой системы должны быть и в Web
Иконка файла материала язык javascript как средство создания интерактивных ресурсов.docx
язык javascript как средство создания интерактивных ресурсов Использование JavaScript для создания интерактивных Web­страниц Обобщенно гипертекстовая информационная система состоит из множества  информационных узлов, множества гипертекстовых связей, определенных на этих  узлах, и инструмента манипулирования узлами и связями. Технология World Wide  Web ­ это технология ведения гипертекстовых распределенных систем в Internet, и,  следовательно, она должна удовлетворять общему определению таких систем. Это  значит, что все вышеперечисленные компоненты гипертекстовой системы должны  быть и в Web Internet как гипертекстовую систему можно рассматривать с двух точек зрения. Во­первых, как совокупность отображаемых страниц, связанных гипертекстовыми переходами. Во­ вторых, как множество элементарных информационных объектов, составляющих  отображаемые страницы (текст, графика, мобильный код и т.п.). В последнем случае  множество гипертекстовых переходов страницы ­ это такой же информационный фрагмент, как и встроенная в текст картинка. При втором подходе гипертекстовая сеть определяется на множестве элементарных  информационных объектов самими HTML­страницами, которые и выступают в роли  гипертекстовых связей. Этот подход более продуктивен с точки зрения построения  отображаемых страниц "на лету" из готовых компонентов. При генерации страниц в Web  возникает дилемма, связанная с архитектурой "клиент­сервер". Страницы можно  генерировать как на стороне клиента, так и на стороне сервера. Последнее может быть  реализовано, в частности, через механизм подстановок на стороне сервера (Server Site  Includes). Компания Netscape распространила в 1995 году механизм управления  страницами и на стороне клиента, разработав язык программирования JavaScript. Таким образом, JavaScript ­ это язык управления сценариями просмотра гипертекстовых  страниц Web на стороне клиента. Если быть более точным, то JavaScript ­ это не только  язык программирования на стороне клиента. Liveware, прародитель JavaScript, является  средством подстановок на стороне сервера Netscape. Однако наибольшую популярность  JavaScript обеспечило именно программирование на стороне клиента. Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML­ объектов и свойств среды отображения в процессе просмотра HTML­страницы  пользователем. При этом не происходит перезагрузки страницы. На практике этовыражается в том, что можно, например, изменить цвет фона страницы или  интегрированное в документ изображение, открыть новое окно или выдать окно сообщения. Для реализации этой идеи была предложена объектная модель документа. Суть модели в  том, что каждый HTML­контейнер ­ это объект, который характеризуется тройкой:  {свойства, методы, события}. Объекты с одинаковым набором свойств, методов и событий  объединяются в классы однотипных объектов. Классы ­ это описания возможных объектов. Сами объекты появляются только после загрузки документа браузером или как результат  работы программы. Об этом нужно всегда помнить, чтобы не обратиться к объекту,  которого нет. Многие HTML­контейнеры имеют атрибуты. Например, контейнер якоря имеет атрибут  href, который превращает его в гипертекстовую ссылку: someref Если рассматривать контейнер якоря ... как объект, то атрибут href будет  задавать свойство объекта типа "якорь". Программист может изменить значение атрибута  и, следовательно, свойство объекта: document.links[0].href="someref.html" Для общности картины свойствами в JavaScript наделены объекты, которые не имеют  аналогов в HTML­разметке. Например, среда исполнения, которая называется объектом  navigator, или окно браузера, которое является вообще объектом самого высокого уровня  JavaScript. В терминологии JavaScript методы объекта определяют функции изменения его свойств.  Например, с объектом документ связаны методы open(), write(), close(). Эти методы  позволяют сгенерировать или изменить содержание документа. Рассмотрим следующий  пример: function helloAll() { id=window.open("","example","width=400, height=150"); id.focus();  id.document.open(); id.document.write("

Hello all from JavaScript!

");  id.document.write("
"); id.document.write("");  id.document.close(); } В этом примере метод open() открывает поток записи в документ, метод write()  осуществляет ее, а close() закрывает поток. Все происходит так же, как и при записи в  обычный файл. Если у окна есть поле статуса (обычно в нем отображается процентзагрузки документа), то при незакрытом потоке записи в документ в нем будет "метаться"  прямоугольник продолжения записи, как это происходит при загрузке документа. Кроме методов и свойств объекты характеризуются событиями, которые с ними могут  происходить. Собственно, суть программирования на JavaScript заключена в написании  обработчиков этих событий. Например, с объектом типа button (контейнер INPUT типа  button ­ "кнопка") может происходить событие "Click", т.е. на кнопку можно нажать. Для  этого атрибуты контейнера INPUT расширены атрибутом обработки события Click ­  onClick. В качестве значения этого атрибута указывается программа обработки события,  которую должен написать автор HTML­документа на JavaScript. Обработчики событий указываются в тех контейнерах, с которыми эти события связаны.  Например, контейнер BODY определяет свойства всего документа, поэтому обработчик  события завершения загрузки всего документа указывается в этом контейнере как значение атрибута onLoad. Главный вопрос любого начинающего программиста: "Как оформить программу и  выполнить ее?". Попробую на него ответить как можно проще, но при этом не теряя  полноты способов применения JavaScript­кода. Во­первых, JavaScript­код исполняет  браузер. В него встроен интерпретатор JavaScript. Следовательно, выполнение программы  зависит от того, когда и как этот интерпретатор получает управление. Это, в свою очередь, зависит от функционального применения кода. В общем случае можно выделить четыре  способа функционального применения JavaScript:∙ гипертекстовая ссылка (схема URL); ∙ обработчик события (handler); ∙ подстановка (entity); ∙ вставка (контейнер SCRIPT). В большинстве учебников по JavaScript обычно начинают описание применения JavaScript с контейнера SCRIPT. Но с точки зрения самого программирования это не совсем правильно, т.к. такой порядок не дает ответа на ключевой вопрос: как JavaScript­код получает  управление? Т.е., каким образом вызывается и исполняется программа, написанная на  JavaScript и размещенная в HTML­документе. В зависимости от специализации автора  HTML­страницы и уровня его знакомства с основами программирования возможны  несколько вариантов начала освоения JavaScript. Если вы программист классического  толка (С, Fortran, Pascal и т.п.), то проще всего начинать с программирования внутри тела  документа; если вы привыкли программировать под Windows, то в этом случае начинайте с программирования обработчиков событий; если вы имеете только опыт HTML­разметки  или давно не писали программ, то тогда лучше начать с программирования гипертекстовых переходов. URL­схема JavaScript Схема URL(Uniform Resource Locator) ­ это один из ключевых элементов Web­технологии.  Каждый информационный ресурс в Web имеет свой уникальный URL. URL указывают в  атрибуте href контейнера A, в атрибуте src контейнера IMG, в атрибуте action контейнера  FORM и т.п. Все URL подразделяются на схемы доступа, которые зависят от протокола  доступа к ресурсу, например, для доступа к FTP­архиву применяется схема ftp, для  доступа к Gopher­архиву ­ схема gopher, для отправки электронной почты ­ схема smtp.  Тип схемы определяется по первому компоненту URL: http://koegde.ru/dir/address.html В данном случае URL начинается с http ­ это и есть определение схемы доступа (схема  http). Основной задачей языка программирования гипертекстовой системы является  программирование гипертекстовых переходов. Это означает, что при выборе той или иной  гипертекстовой ссылки вызывается программа реализации гипертекстового перехода. В  Web­технологии стандартной программой является программа загрузки страницы.  JavaScript позволяет заменить стандартную программу на программу пользователя. Для  того чтобы отличить стандартный переход по протоколу http от программируемого наJavaScript перехода, разработчики языка ввели в употребление новую схему URL ­  javascript: ...  В данном случае текст "JavaScript­код" обозначает программы­обработчики, реализованные на JavaScript, которые вызываются при выборе гипертекстовой ссылки в первом случае и  при загрузке картинки во втором. Например, при нажатии на гипертекстовую ссылку "Внимание!!!" можно получить окно  предупреждения:  Внимание!!! или при нажатии на кнопку типа Submit в форме можно заполнить текстовое поле этой же  формы:        В URL можно помещать сложные программы и вызовы функций. Следует только помнить,  что схема JavaScript работает не во всех браузерах, а только в версиях Navigator'а и  Explorer'а, начиная с четвертой. Таким образом, при программировании гипертекстового перехода интерпретатор получает  управление после того, как пользователь "кликнул" по гипертекстовой ссылке. Обработчики событий Код обработчика события указывается в атрибутах контейнеров, с которыми связано то  или иное событие. Например, при нажатии на кнопку происходит событие "Click":
   В данном примере атрибут onClick определяет программу обработки события Click.  Аналогично можно обработать изменение данных в поле меню: