Лекция 11 по РСОИ для специальности 230401 Информационные системы (по отраслям)
план-конспект занятия на тему
Предварительный просмотр:
Лекция № 11
Тема: «Основные элементы идеологии скриптового программирования»
Вопросы темы:
1. Основные принципы работы со скриптами.
2. Объектная модель браузера.
3. Доступ к значениям параметров (свойств) объекта.
4. Объекты и события.
5. Методы и функции
6. Переменные-макроподстановки
1. Основные принципы работы со скриптами.
Скрипт представляет собой исходный текст (листинг) программы на языке JavaScript или VBScript, размещенный в HTML-тексте. При открытии htm-файла находящиеся в нем листинги скриптов обнаруживаются браузером и транслируются им в исполняемый код, соответствующий данному типу компьютера и операционной системы. Скрипты представляют собой программные модули, определяющие, какие действия должен совершить компьютер в ответ на указанное разработчиком Web-страницы действие пользователя (например, щелчок мышью на той или иной кнопке).
Исходный текст программы скрипта заключается в контейнер
, размещаемый в нутрии контейнера …. Листинг Java-скрипта также может содержаться в отдельном файле (это удобно, например, когда один и тот же скрипт используется на нескольких страницах: можно не повторять весь листинг на каждой из них, а лишь разместить обращение к требуемому «скриптовому файлу»).
.
Таких контейнеров, ссылающихся на разные скриптовые файлы, в одном и том же html-документе может быть и несколько, в том числе, когда каждый из них «отвечает» за какую-то конкретную ситуацию, происходящую для конкретного объекта Web-страницы. Для этого предназначены дополнительные параметры тэга
Не все браузеры (особенно это касается старых версий) способны корректно распознавать Скрипты и выделять их из html-текста, поэтому текст скриптов, как правило прячут в комментарии ( .
2. Объектная модель браузера.
Идеология работы со скриптами построена на нескольких основополагающих принципах:
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.
3. Доступ к значениям параметров (свойств) объекта
Большинство параметров, указываемых в составе соответствующего тому или иному объекту тэга, в скриптовом программировании получает статус cвойств этого объекта (практически полная аналогия с Visual Basic). Эти свойства носят собственные имена (часто совпадающие с названиями соответствующих параметров тэга), а их значения могут переприсваиваться, приводя таким образом к изменению вида соответствующего объекта Например, следующая строка заменяет содержимое текстового поля ввода TxtName, включенного в состав расположенной на текущей странице формы FormName, на заданную строку:
document.FormName.TxtName.value = "Новый текст"
Здесь переприсваивается значение свойства (параметра) VALUE, которое, как мы помним, в тэге «ответственно» за содержимое поля ввода.
Точно так же можно, наоборот, получить набранную пользователем в этом поле текстовую строку, поместив ее в некую переменную для последующей обработки в скрипте:
TxtMessage = document.FormName.TxtName.value
Аналогично, правая часть вышеприведенного равенства может использоваться в качестве аргумента другого обращения (скажем, чтобы вывести в окне сообщение, включающее ранее введенные пользователем в соответствующем текстовом поле имя и фамилию) или в составе логического условия в операторе if:
if (document.FormName.TxtName.value == "Иванов")
// проходи
else {
// стой!
}
4. Объекты и события
Язык 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-странице при помощи данного тэга . Заметим, что при необходимости можно присвоить одному и тому же событию несколько скриптовых строк, например, записав несколько операторов присваивания внутри кавычек через точку с запятой:
onClick ="<первый оператор присваиваниям <второй оператор присваивания>”
При этом нужно отметить использование в подобных строках кавычек и апострофов: вставляемая фраза (новое значе¬ние параметра VALUE) должна быть заключена в кавычки, но и вся строка, присвоенная событию onClick, также должна быть заключена в кавычки. Чтобы избавиться от путаницы, JavaScript позволяет использовать в качестве кавычек как простые («двойные»), так и «одинарные» (апострофы).
Нужно также отметить и следующую специфику HTML и JavaScript: здесь событие, совершившееся над неким объектом, являющимся составной частью иерархической структуры, обычно как бы передается по всей «цепочке вложенности» (если только речь не идет о событии, специфичном для данного объекта и невозможном для других объектов более «высокого» уровня). Например, если наша страница содержит в себе форму, а в ней — кнопку, и мы присвоим отдельные функций обработки события «щелчок мышью» и для кнопки, и для формы, и для всего HTML-документа в целом, то щелчок мышью на кнопке вначале вызовет запуск на исполнение функции, «привязанной» к данному, событию для кнопки, затем — функции для формы и после этого — функций для документа в целом. При этом в распоряжении разработчика скрипта имеется возможность «разорвать» эту цепочку, запретив распространение события на объекты более высокого уровня вложенности.
Другая специфика связана с тем, что некоторые события предполагают реакции, запускаемые по умолчанию, например переход по ссылке при щелчке мышью на ней или же вызов встроенного Help-файла для данного браузера при нажатии клавиши F1. В этом случае, если мы перехватываем эти события (т. е. хотим присвоить им собственные подпрограммы обработки, выполняющие какие-то другие действия взамен предусмотренных по умолчанию для таких объектов), то сразу же после исполнения назначенной нами для них функции последует и действие, выполняемое по умолчанию, если только мы в своей функции не запретим исполнение действия по умолчанию, воспользо¬вавшись соответствующей возможностью JavaScript.
Описанная здесь «объектно-событийная» идеология опре¬деляет главную особенность практической работы с JavaScript: для успешного написания скриптов требуется прежде, всего знать наперечет все имена существующих типовых объектов, событий и свойств, а также правила их записи в скрипте).
5. Методы и функции
Действия компьютера в ответ на произошедшее событие (более сложные, чем простое переприсваивание значения какого-либо свойства объекта) обычно реализуются вызовом тех или иных стандартных подпрограмм, которые в Java называются методами. Примерами методов являются open (), close (), .write () и пр.
Обращение к методам в JavaScript производится аналогично обращению к свойствам объектов, например:
WinName.document.write("Текст") — выводит в окно с именем WinName в качестве содержимого заданное слово;
WinName = window.open () —открывает (создает) новое окно с именем WinName.
В отличие от методов, функции в JavaScript представляют собой «классические» подпрограммы, созданные (объявлен¬ные) самим пользователем, разрабатывающим Java-cкрипт. В плане же функционирования и функции, и методы аналогичны друг другу (для них используется, по сути, один и тот же механизм передачи в скобках аргументов — формальных и фактических).
6. Переменные-макроподстановки
В отличие от обычных языков программирования, в 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");
По теме: методические разработки, презентации и конспекты
![](/sites/default/files/pictures/2014/09/02/picture-475548-1409650812.jpg)
РАБОЧАЯ ПРОГРАММА УЧЕБНОЙ ДИСЦИПЛИНЫ "ПРАВОВОЕ ОБЕСПЕЧЕНИЕ ПРОФЕССИОНАЛЬНОЙ ДЕЯТЕЛЬНОСТИ" для специальности 230401 «Информационные системы (по отраслям)».
Рабочая программа учебной дисциплины ПРАВОВОЕ ОБЕСПЕЧЕНИЕ ПРОФЕССИОНАЛЬНОЙ ДЕЯТЕЛЬНОСТИ разработана на основе Федерального государственного стандарта среднего профессионального образовани...
![](/sites/default/files/pictures/2014/05/07/picture-445679-1399469872.jpg)
Рабочая программа учебной дисциплины ОДБ.06 ХИМИЯ название учебной дисциплины ТЕХНИЧЕСКИЙ ПРОФИЛЬ название профиля 190631 «ТЕХНИЧЕСКОЕ ОБСЛУЖИВАНИЕ И РЕМОНТ АВТОМОБИЛЬНОГО ТРАНСПОРТА» 230401 «ИНФОРМАЦИОННЫЕ СИСТЕМЫ» (ПО ОТРАСЛЯМ) коды и названия сп
Настоящая программа учебной дисциплины ориентирована на реализацию федерального компонента государственного образовательного стандарта (далее -ФГОС) среднего (полного) общего образования Химия н...
![](/sites/default/files/pictures/2014/10/15/picture-498855-1413339104.jpg)
Лекция 10 по РСОИ для специальности 230401 Информационные системы (по отраслям)
Лекция № 10 из Электронного учебника...
![](/sites/default/files/pictures/2014/10/15/picture-498855-1413339104.jpg)
Лекция 1 по РСОИ для специальности 230401 Информационные системы (по отраслям)
Лекция №1 из Электронного учебника...
![](/sites/default/files/pictures/2014/10/15/picture-498855-1413339104.jpg)
Лекция 9 по РСОИ для специальности 230401 Информационные системы (по отраслям)
Лекция №9 из электронного учебника...
![](/sites/default/files/pictures/2014/12/09/picture-547407-1418117175.gif)
Тест по дисциплине «Основы алгоритмизации и программирования» Раздел: «Программирование на языке СИ/СИ++» специальности 230401 "Информационные системы (по отраслям)"
Тест по дисциплине «Основы алгоритмизации и программирования» Раздел: «Программирование на языке СИ/СИ++» специальности 230401 "Информационные системы (по отраслям)"...
Комплект контрольно-оценочных средств по учебной дисциплине Объектно-ориентированное программирование основной профессиональной образовательной программы по специальности СПО 230401 Информационные системы (по отраслям)
Комплект контрольно-оценочных средств разработан на основе Федерального государственного образовательного стандарта среднего профессионального образования по специальности СПО 230401 Инфор...