Лекция № Тема: «Основные элементы идеологии скриптового программирования»




Скачать 110,97 Kb.
НазваниеЛекция № Тема: «Основные элементы идеологии скриптового программирования»
Дата публикации10.04.2013
Размер110,97 Kb.
ТипЛекция
pochit.ru > Информатика > Лекция


Халелова Е.Н.


Лекция №

Тема: «Основные элементы идеологии скриптового программирования»

Вопросы темы:


  1. Основные принципы работы со скриптами.

  2. объектная модель браузера.

  3. доступ к значениям параметров (свойств) объекта.

  4. объекты и события.

  5. методы и функции

  6. переменные-макроподстановки




  1. Основные принципы работы со скриптами.

Скрипт представляет собой исходный текст (листинг) программы на языке JavaScript или VBScript, размещенный в HTML-тексте, на клиентской стороне или на языках разработки сценариев на серверной стороне (PHP, ASP, IDC/HTX), предназначенные для обработки данных, поступающих от клиентов.

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

Исходный текст программы скрипта заключается в контейнер

, размещаемый в нутрии контейнера …. Листинг Java-скрипта также может содержаться в отдельном файле (это удобно, например, когда один и тот же скрипт используется на нескольких страницах: можно не повторять весь листинг на каждой из них, а лишь разместить обращение к требуемому «скриптовому файлу»).

.

Таких контейнеров, ссылающихся на разные скриптовые файлы, в одном и том же html-документе может быть и несколько, в том числе, когда каждый из них «отвечает» за какую-то конкретную ситуацию, происходящую для конкретного объекта Web-страницы. Для этого предназначены дополнительные параметры тэга <^ SCRIPT>: FOR (указывает имя объекта) и EVENT (указывает событие).









Не все браузеры (особенно это касается старых версий) способны корректно распознавать Скрипты и выделять их из html-текста, поэтому текст скриптов, как правило прячут в комментарии ( .


  1. Объектная модель браузера.

Идеология работы со скриптами построена на нескольких основополагающих принципах:

  1. ^ Представление HTML-документа как совокупности вложенных друг в друга объектов («контейнеров»), образующих иерархическую структуру.

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

кнопка


При этом каждому компоненту HTML-документа с помощью параметра NAME присваивается собственное имя (идентификатор). Соответственно, для получения доступа к конкретному элементу необходимо указать в скрипте все его «уровни вложенности». Запись идентификаторов производится через десятичную точку, например:

Document.FormName.ButtonName.

Содержащаяся в окне браузера страница указывается здесь «общим» именем document, а для формы и кнопки указываются их индивидуальные имена (FormName и ButtonName). Это верно лишь при работе с текущим документом (т. е. в пределах htm-файла, содержащего данный скрипт либо его вызов из внешнего .js-файла). Если же с помощью скрипта открыть новое, дополнительное окно, присвоив ему собственное имя, то для обращения к элементу, содержащемуся в загруженной в это окно странице, требуется указать перед словом document идентификатор этого окна, например: WinName.document.FormName.ButtonName

Аналогично дело обстоит и при наличии фреймовой структуры. Здесь каждый создаваемый фрейм получает имя, используемое затем в тэге <А HREF. . . TARGET. . .>. Одновременно с этим существует и «безымянный» основной документ, определяющий вид фреймов, — в Java-скрипте ему соответствует «общее» имя parent («родительский», «порождающий»). Эти имена и указываются в цепочке «пути» к объекту

Например:

^ FrameName . document. FormName (обращение из «основного» окна к форме с именем FormName, содержащейся на странице, загруженной в фрейм с именем FrameName);

parent. FrameName. document. FormName (обращение к той же форме, но уже из скрипта, загруженного в другой фрейм; оно производится как бы «сквозь» фреймовую структуру и «сквозь» «родительский» документ);

parent.document (обращение из фрейма к «родительскому» документу и таким образом ко всему содержимому рабочего окна браузера, например, чтобы изменить количество и/или параметры фреймов либо загрузить в это окно другое содержимое).

Другой возможный способ обращения к фреймам, например, чтобы загрузить в них несколько файлов при одном щелчке мышью:

<А HREF="#" onClick="javascript:top.Frames[nl]. location='имя1'; top.frames[n2].location='имя2'; ...">ссылка

где nl, n2 и т.д. - порядковые номера требуемых фреймов (по порядку записи тэгов , считая с нуля!), а записываемые в апострофах имена файлов (а если нужно, то также пути и адреса URL) указывают, что нужно загружать в эти фреймы. Пример (замена содержимого первого и третьего фреймов на файлы New_logot. jpg и New_page . htm соответственно):

<А HREF="javascript:top.frames[0].location= ;

'New_logot.jpg';

top.frames[2].location='New_page.htm';">новые

логотип и страница

Здесь обращение к «родительской» структуре производится через «определение» всего окна браузера (top), т. е. данный «иерархический уровень» можно рассматривать как эквивалент parent.
^ 2. Доступ к значениям параметров (свойств) объекта

Большинство параметров, указываемых в составе соответствующего тому или иному объекту тэга, в скриптовом программировании получает статус cвойств этого объекта (практически полная аналогия с Visual Basic). Эти свойства носят собственные имена (часто совпадающие с названиями соответствующих параметров тэга), а их значения могут переприсваиваться, приводя таким образом к изменению вида соответствующего объекта Например, следующая строка заменяет содержимое текстового поля ввода TxtName, включенного в состав расположенной на текущей странице формы FormName, на заданную строку:

document.FormName.TxtName.value = "Новый текст"

Здесь переприсваивается значение свойства (параметра) VALUE, которое, как мы помним, в тэге «ответственно» за содержимое поля ввода.

Точно так же можно, наоборот, получить набранную пользователем в этом поле текстовую строку, поместив ее в некую переменную для последующей обработки в скрипте:

^ TxtMessage = document.FormName.TxtName.value

Аналогично, правая часть вышеприведенного равенства может использоваться в качестве аргумента другого обращения (скажем, чтобы вывести в окне сообщение, включающее ранее введенные пользователем в соответствующем текстовом поле имя и фамилию) или в составе логического условия в операторе if:

if (document.FormName.TxtName.value == "Иванов")

// проходи

else {

// стой!

}


  1. Объекты и события

Язык JavaScript, подобно большинству современных языков программирования (в частности, «визуальных», предназначенных для создания Windows-приложений), является по своей идеологии «объектно-событийным». Это означает, что создаваемое приложение (в нашем случае таковым является загруженная в окно браузера WWW-страница) рассматривается как иерархическая совокупность обособленных объектов, каждому из которых присвоено собственное имя и определенный набор параметров (свойств), значения которых можно считывать в назначенные для этого переменные для использования в программе, а во многих случаях — и программно изменять, меняя тем самым состояние самого объекта на экране. Типичным примером является страница, содержащая в себе форму с флажком: здесь главным является объект «окно браузера» (window); в нем в качестве вложенного объекта рассматривается его содержимое —
HTML-документ (document); в него вложена, среди прочих объектов
(абзацев, если они поименованы, гиперссылок, других форм и пр.) наша форма, в которую, в свою очередь, вложен флажок, который имеет среди прочих свойств значение (value). В этом случае для доступа к значению одного из пунктов списка потребуется записать всю иерархию вложений через десятичную точку, например:

х = window.document.MyForm.MyCheckbox.value

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

Имена объектов обычно указываются в составе определяющих их тэгов (параметр ^ NAME, например для форм и их элементов, фреймов и пр., или параметр ID, добавляемый, в частности, в состав тэга <Р>, чтобы выделить соответствующий абзац текста как отдельный объект). Объекты с именем, указанным в качестве значения параметра NAME, обычно считаются типичными для HTML и в строке достаточно указать их имена; если же имя указывается в каче­стве значения параметра ID, то обращение к таким объектам производится через запись all («все содержимое документа»). Например:

х = document.all. myparag <свойство>

для доступа к указанному свойству абзаца, в составе открывающего тэга <Р> которого включен параметр ^ ID="myparag". Аналогично, через document. all обращение производится и к поименованным (параметр NAME), но не заключенным в контейнер формы диалоговым элементам.

Над каждым из имеющихся на экране объектов могут совершаться те или иные действия — как автоматически (например, по истечении заданного промежутка времени, отсчитываемого встроенным в компьютер таймером), так и, в основном, по командам__пользователя: Такие действия пользователя (например нажатие или отпускание любой клавиши, одинарный или двойной щелчок мышью, нажатие или отпускание ее кнопки в то время как курсор мыши наведен на данный элемент интерфейса, да и сам факт наведения на него мышиного курсора), равно как и действия, совершающиеся автоматически, в Windows стандартизированы, а факт их совершения называется событием, произошедшим (совершившимся) для данного объекта. При этом события отслеживаются операционной системой автоматически, так что от программиста требуется лишь написать набор подпрограмм (в JavaScript — пользовательских функций), каж­дая из которых «привязана» к соответствующему событию для одного конкретного или нескольких объектов и определяет реакцию программы (а в нашем случае — Web-страницы) на это событие.

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

Вот, например, как для кнопки, являющейся элементом размещенной на Web-странице формы, программируется реакция ЭВМ на событие «щелчок мышью» — подстановка в имеющееся в этой же (или другой указанной в скрипте) фор­ме текстовое поле ввода требуемой строки:


VALUE="Автоввод" onClick="document.

^ FormName.TxtName.value = 'Вставляемый текст' ">
Здесь строка-обращение к параметру (свойству) value объекта «поле ввода» (с указанием его имени TxtName и всей иерархии доступа к нему), которая должна присвоить этому параметру взамен его старого значения фразу «Вставляемый текст», присвоена событию onClick, означающему однократный щелчок мышью на данном объекте, т. е. на кнопке, создаваемой на Web-странице при помощи данного тэга <INPUT>. Заметим, что при необходимости можно присвоить одному и тому же событию несколько скриптовых строк, например, записав несколько операторов присваивания внутри кавычек через точку с запятой:

onClick ="<первый оператор присваиваниям <второй оператор присваивания>”

При этом нужно отметить использование в подобных строках кавычек и апострофов: вставляемая фраза (новое значе­ние параметра VALUE) должна быть заключена в кавычки, но и вся строка, присвоенная событию onClick, также должна быть заключена в кавычки. Чтобы избавиться от путаницы, JavaScript позволяет использовать в качестве кавычек как простые («двойные»), так и «одинарные» (апострофы).

Нужно также отметить и следующую специфику HTML и JavaScript: здесь событие, совершившееся над неким объектом, являющимся составной частью иерархической структуры, обычно как бы передается по всей «цепочке вложенности» (если только речь не идет о событии, специфичном для данного объекта и невозможном для других объектов более «высокого» уровня). Например, если наша страница содержит в себе форму, а в ней — кнопку, и мы присвоим отдельные функций обработки события «щелчок мышью» и для кнопки, и для формы, и для всего HTML-документа в целом, то щелчок мышью на кнопке вначале вызовет запуск на исполнение функции, «привязанной» к данному, событию для кнопки, затем — функции для формы и после этого — функций для документа в целом. При этом в распоряжении разработчика скрипта имеется возможность «разорвать» эту цепочку, запретив распространение события на объекты более высокого уровня вложенности.

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

Описанная здесь «объектно-событийная» идеология опре­деляет главную особенность практической работы с JavaScript: для успешного написания скриптов требуется прежде, всего знать наперечет все имена существующих типовых объектов, событий и свойств, а также правила их записи в скрипте).


  1. ^ Методы и функции

Действия компьютера в ответ на произошедшее событие (более сложные, чем простое переприсваивание значения какого-либо свойства объекта) обычно реализуются вызовом тех или иных стандартных подпрограмм, которые в Java называются методами. Примерами методов являются open (), close (), .write () и пр.

Обращение к методам в JavaScript производится аналогично обращению к свойствам объектов, например:

WinName.document.write("Текст") — выводит в окно с именем WinName в качестве содержимого заданное слово;

^ WinName = window.open () —открывает (создает) новое окно с именем WinName.

В отличие от методов, функции в JavaScript представляют собой «классические» подпрограммы, созданные (объявлен­ные) самим пользователем, разрабатывающим Java-cкрипт. В плане же функционирования и функции, и методы аналогичны друг другу (для них используется, по сути, один и тот же механизм передачи в скобках аргументов — формальных и фактических).


  1. Переменные-макроподстановки

В отличие от обычных языков программирования, в JavaScript переменные служат не только для хранения значений (чисел и текстовых строк), используемых в вычислени­х, но в ряде случаев и в качестве «макроподставок» в самом листинге скрипта. Например, если в нем требуется многократное повторение обращений к одному и тому же объекту, то нет необходимости каждый раз записывать всю цепочку «пути» к нему. Достаточно один раз присвоить специально назначенной переменной повторяющийся участок записи и в каждой строке указывать имя этой переменной, например:
^ WinName.document.write("Текст 1"); WinName.document.write("Текст 2") ; WinName.document.write("Текст 3");

WinName.document.write("Текст n") ; заменяется на фрагмент

DocName = WinName.document; DocName.write("Текст 1"); DocName.write("Текст 2");

DocName.write("Текст n");
Вопросы для повторения:


  1. Назовите основные принципы работы со скриптами.

  2. Поясните на примере понятие объектной модели браузера.

  3. Как происходит доступ к значениям параметров (свойств) объекта?

  4. К какой категории языков программирования относится JavaScript?

  5. Что является событием в ООП? Приведите пример события.

  6. Какова специфика HTML и JavaScript ?

  7. Что такое метод? Приведите пример.

  8. Что является функцией в JavaScript?

  9. Для чего используют переменные-макроподстановки?

Похожие:

Лекция № Тема: «Основные элементы идеологии скриптового программирования» iconЛекция Языки и системы программирования
Понятие о системе программирования, ее основные функции и компоненты. Принципы работы сред программирования. "Операционные" и "модульные"...
Лекция № Тема: «Основные элементы идеологии скриптового программирования» iconСогласовано
Трансляторы языков программирования. Основные виды ошибок в программах. Основные элементы блок-схем
Лекция № Тема: «Основные элементы идеологии скриптового программирования» iconЛекция 3
Инструментальное по (или системы программирования, языки программирования) обеспечивают создание всех классов программ: системных,...
Лекция № Тема: «Основные элементы идеологии скриптового программирования» iconЛабораторная работа n 2 Тема : Графические возможности пакета инженерных...
Тема: Графические возможности пакета инженерных расчетов Mathcad. Анимация. Элементы программирования
Лекция № Тема: «Основные элементы идеологии скриптового программирования» iconЛекция. Язык программирования мп си лекция. Язык программирования мп си
В комментариях, строках и символьных константах могут использоваться русские буквы
Лекция № Тема: «Основные элементы идеологии скриптового программирования» icon2. Структура, функции и уровни политической идеологии
Причины и источники возникновения политической идеологии. Соотношение политики и идеологии. Эволюция политической идеологии. Этапы...
Лекция № Тема: «Основные элементы идеологии скриптового программирования» iconТема: Введение в язык программирования Basic
Цель: ввести понятие языка программирования, переменной, познакомить с операторами языка и арифметическими операциями
Лекция № Тема: «Основные элементы идеологии скриптового программирования» iconЛекция Предмет и метод экономической социологии Лекция Основные направления...
Зачет ставится в том случае, если студент набирает 4 и более баллов по 10-ти балльной системе
Лекция № Тема: «Основные элементы идеологии скриптового программирования» iconЛекция Предмет и метод экономической социологии Лекция Основные направления...
Зачет ставится в том случае, если студент набирает 4 и более баллов по 10-ти балльной системе
Лекция № Тема: «Основные элементы идеологии скриптового программирования» iconКривошеина Елена Юрьевна, аспирантка 2 курса Российской академии...
Ся категориальный аппарат, в том числе, современное понимание идеологии. Доказывается необходимость участия государства в формировании...
Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2019
контакты
pochit.ru
Главная страница