Web-технологии. Ч. 1

Citation preview

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

МИНИCTEPCTBO НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ «СЕВЕРО-КАВКАЗСКИЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»

С. В. Говорова

WEB-ТЕХНОЛОГИИ УЧЕБНОЕ ПОСОБИЕ (КУРС ЛЕКЦИЙ) Часть 1 Направление подготовки 09.03.01 Информатика и вычислительная техника Направленность (профиль) «Автоматизированные системы обработки информации и управления» Квалификация выпускника – бакалавр

Ставрополь 2019

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

УДК 004.77 (075.8) ББК 32.973.202 я73 Г 57

Печатается по решению редакционно-издательского совета Северо-Кавказского федерального университета

Говорова С. В. Г 57 Web-технологии: учебное пособие (курс лекций). Часть 1. – Ставрополь: Изд-во СКФУ, 2019. – 149 с. Пособие представляет 1 часть курса лекций, подготовленного в соответствии с Федеральным государственным образовательным стандартом высшего образования. В нём рассматривается теория и практика реализации языка гипертекстовой разметки HTML и языка web-программирования JavaScript. Предназначено для бакалавров, обучающихся по направлению подготовки 09.03.01 Информатика и вычислительная техника. УДК 004.77 (075.8) ББК 32.973.202 я73

Рецензенты: д-р. техн. наук, доцент Г. И. Линец, канд. пед. наук, доцент Ж. В. Игнатенко (АНО ВО СКСИ)

© ФГАОУ ВО «Северо-Кавказский федеральный университет», 2019 2

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Пособие (курс лекций) по дисциплине «Web-технологии» подготовлено в соответствии с Федеральным государственным образовательным стандартом высшего образования. Дисциплина занимается вопросами формирования фундаментальных знаний и основополагающих принципов использования современных информационных технологий в области webтехнологий и web-программирования, привитие умений и навыков использования данных знаний при работе в различных областях применения информационных систем и технологий в современном обществе. Задачами дисциплины являются: − изучение технологий взаимодействия индивидуального и коллективного пользователя с мировыми информационными ресурсами; − изучение технологий создания web-сайта. Дисциплина «Web-технологии» обеспечивает изучение дисциплин: «Web-приложения баз данных», «Программирование мобильных устройств», «Программирование в компьютерных сетях», практика по получению первичных профессиональных умений и навыков, в том числе первичных умений и навыков научноисследовательской деятельности, «Технологии и методы программирования», «Программирование на языке высокого уровня, «Информационные войны в сети Интернет». Освоение изучаемой дисциплины позволит будущему бакалавру по направлению 09.03.01 Информатика и вычислительная техника полноценно осуществлять свою профессиональную деятельность, в частности, обладать следующими компетенциями: 1. Способность осваивать методики использования программных средств для решения практических задач (ОПК-2). 2. Способность разрабатывать модели компонентов информационных систем, включая модели баз данных и модели интерфейсов "человек – электронно-вычислительная машина" (ПК-1).

3

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

План 1. История возникновения и развития глобальной компьютерной сети Интернет. 2. Основные принципы работы Интернета. 3. Основные принципы доступа к сети Интернет.

История возникновения и развития глобальной компьютерной сети Интернет Internet – всемирная компьютерная сеть, составленная из разнообразных компьютерных сетей, объединенных стандартными соглашениями о способах обмена информацией (протоколами) и единой системой адресации. Всемирную сеть Internet можно представить как паутину взаимопересекающихся связей – спутниковых, оптоволоконных, телефонных и радиорелейных каналов, соединяющих компьютеры во всем мире. Множество базисных компьютеров (узлов сети или хостов), расположенных в академических институтах, государственных и коммерческих организациях, обеспечивают работоспособность сети. Имеются и другие мировые компьютерные сети, формально не входящие в Internet, но связанные с ним посредством так называемых шлюзов (gateway). Нередко под Internet понимают всю совокупность таких сетей – Сеть сетей. Сети Internet уже более 40 лет. Импульсом к ее рождению послужили нужды военных. Запуск в Советском Союзе первого искусственного спутника Земли в 1957 году ознаменовал начало технологического соревнования между СССР и США. В 1958 году для проведения и координации научноисследовательской деятельности в военной области при Министерстве обороны США было выделено специальное Агентство Передовых Исследовательских Проектов (Advanced Research Projects Agency – ARPA). В его ведении, в частности, находились и работы по обеспечению безопасности связи и коммуникации в случае начала ядерной войны. Такая система передачи данных 4

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

должна была обладать максимальной устойчивостью к повреждениям и быть способной функционировать даже при полном выведении из строя большинства своих звеньев. В основу проекта были положены три основные идеи: – каждый узел сети соединен с другими так, что существует несколько различных путей от узла к узлу; – все узлы и связи рассматриваются как ненадежные – существуют автоматически обновляемые таблицы перенаправления пакетов; – пакет, предназначенный для не соседнего узла, отправляется на ближайший к нему согласно таблице перенаправления пакетов, при недоступности этого узла – на следующий и т.д. Созданная по такому принципу система не имела централизованного узла управления, и, следовательно, безболезненно могла изменять свою конфигурацию. В 1967 году для создания сети передачи данных было решено использовать разбросанные по всей территории США компьютеры ARPA, соединив их обычными телефонными проводами. Работы по созданию первой глобальной компьютерной сети, получившей название ARPANet, велись быстрыми темпами и уже к 1968 году появились ее узлы, первый из которых был построен в Калифорнийском университете в Лос-Анджелесе (University of California in Los-Angeles, UCLA), второй – в Стенфордском исследовательском институте (Stanford Research Institute, SRI). В сентябре 1969 года состоялась передача первого компьютерного сообщения между этими центрами, что фактически ознаменовало рождение сети ARPANet. К декабрю 1969 г. ARPANet насчитывала 4 узла, в июле 1970 г. – восемь, а в сентябре 1971 г. – уже 15 узлов. В 1971 г. произошло событие, которое повлияло на всю последующую историю Internet. Американский инженер Рэй Томлинсон (Ray Tomlinson), работавший тогда в компании BBN Technologies в Массачусетсе, разработал маленькую программу, позволявшую посылать сообщение в "почтовый ящик", установленный на его компьютере. "Я понятия не имею, каким было первое сообщение. Я знаю только, что оно все было написано заглавными буквами" – сказал он в интервью корреспонденту Reuters. Тем не менее, факт этот трудно переоценить. Р.Томлинсона по 5

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

праву можно отнести к таким знаменитым изобретателям, коренным образом изменившим быт человека, как Эдисон или Попов – ведь он является "отцом-основателем" электронной почты, которая спустя три десятилетия фактически изменила мир. Потом Р.Томлинсон создал "почтовый ящик", который мог отправлять и посылать сообщения через компьютерную сеть. Ему же принадлежит идея использовать символ "@" ("коммерческая эт" – амперсант) в электронном адресе. Следует заметить, что, по словам Рэя Томлинсона, электронные сообщения могли передавать и принимать только компьютеры, подключённые к сети ARPANET. Таким образом, сеть, первоначально созданная американскими военными для военных нужд, начинала работать и на гражданскую науку. Уже с середины 1972 года среди пользователей сети стало распространяться мнение, что передать письмо по компьютерной сети намного быстрей и дешевле, чем традиционным методом. Так начал зарождаться первый сервис, без которого сегодня немыслим Интернет – это e-mail. А в 1973 г. сеть ARPANet стала международной – к ней подключились Англия и Норвегия. В 1974 году было открыто первое коммерческое приложение ARPANet – Telnet, обеспечивающее доступ к удаленным компьютерам в режиме терминала. В 1976 году появилась программа UUCP (Unix-to-Unix Copy Program), что привело к созданию следующего сервиса – Usenet (сетевые новости или телеконференции). К 1977 году Сеть объединяла уже десятки научных и военных организаций, как в США, так и в Европе, а для связи использовались уже не только телефонные, но также спутниковые и радиоканалы. Сеть ARPANet развивалась и становилась похожей на нынешний Интернет.

6

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Рис. 1. Схема узлов и каналов связи сети ARPANet в 1980 году

Рост числа компьютерных сетей вне ARPANet создал большие трудности, касающиеся соединения одной сети с другой, не из-за различий в аппаратной части, а в силу несовместимости протоколов коммуникации – "языка общения" одного устройства с другим. Для их преодоления был создан новый стандарт коммуникаций, названный TCP/IP (Transmission Control Protocol/Internet Protocol – протокол управления передачей /межсетевой протокол). Выдающееся значение этих протоколов, принятых 1 января 1983 года, заключалось в том, что с их помощью разнородные сети получили возможность производить обмен данными друг с другом. Именно этот день фактически является днем рождения Интернета, как сети, объединяющей глобальные компьютерные сети. В 1986 году Национальным Фондом Науки США (The National Science Foundation – NSF) была запущена в эксплуатацию NSFNet. NSFNet являлась высокоскоростной компьютерной сетью, базирующейся на суперкомпьютерах, соединенных оптоволоконными кабелями, радио- и спутниковой связью. До 1995 года она составляла основу Интернета в Соединенных Штатах – была "хребтом" (backbone) американской части глобальных компьютерных сетей (у других стран имелись собственные "хребты"). В 1996 году NSFNet была приватизирована, а научным организациям бы7

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

ло предписано договариваться о доступе к информационным магистралям с коммерческими Интернет-провайдерами. В академических кругах это решение признано ошибочным, и практически с того же года ведутся эксперименты по воссозданию некоммерческой сети научных и образовательных учреждений, под условным названием Интернет-2. Мощное сочетание спутниковых и оптоволоконных каналов позволило создать в США единое цифровое пространство. До середины 1990 года Интернет был доступен относительно узкому академическому сообществу, а его наполнение не отличалось богатством и разнообразием. Из сетевых сервисов тогда были доступны три: – Обмен электронными письмами – электронная почта (e-mail), – Получение файлов по FTP (Протокол передачи файлов) и – Общение в группах новостей по интересам с помощью текстовых сообщений Usenet – телеконференции, или сетевые новости. В 1991 появился Gopher – приложение, впервые позволившее свободно перемещаться по глобальным сетям без предварительного знания адресов необходимых серверов. Поначалу не привлекло особого внимания и объявление о разработке нового приложения – Всемирной паутины (World Wide Web – WWW), сделанного в 1991 году в Европейском центре ядерных исследований (European Center for Nuclear Research, CERN). Созданный специалистом CERN Тимом Бернерсом-Ли (Tim Berners-Lee) Протокол Передачи Гипертекста (HyperText Transmission Protocol – HTTP) предназначался для обмена информацией среди физиков, трудившихся в удаленных друг от друга лабораториях. Однако в 1992–93 годах WWW еще по-прежнему представлял собой черно-белый текстовой ресурс. Ситуация значительно изменилась в 1993 году, после того как в Национальном центре суперкомпьютерных приложений (National Center for Supercomputing Applications, NCSA) был создан первый графический интерфейс к World Wide Web – браузер Mosaic. Mosaic оказался настолько популярен, что один из разработчиков программы Марк Андриссен (Mark Andreessen) основал компанию Netscape, занявшуюся разработкой аналога Mosaic – браузера Netscape Navigator. 8

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Повсеместное использование сети Интернет широкими массами пользователей фактически началось в 1994 году с созданием нового браузера – Netscape Navigator. Его появление не только упростило доступ к информации Всемирной паутины, но, главное, позволило размещать в виртуальной вселенной практически все виды данных. На смену текстовым черно-белым приложениям пришла многокрасочная среда, наполненная графикой, анимацией, аудио- и видеоданными. Такая среда сразу же привлекла большее число пользователей, что в свою очередь стимулировало еще большее число организаций и частных граждан размещать в Сети свои данные. В 1997 году к Интернету подключается 100-миллионный пользователь, а 20 марта 1998 впервые проводится Всемирный День Интернет. WWW насчитывает уже 300 млн. страниц и более 2 млн. сайтов. К Сети подключено более 150 млн. пользователей. В 1999 году в Сети появляются первые музыкальные файлы в формате МРЗ. Женщины становятся не только прекрасной, но и большей половиной пользователей Интернета: в июне 2000 года их доля составила более 50,4 %! Этот год знаменит самой массовой вирусной атакой через Интернет – вирус "I Love You" поразил около 30 млн. компьютеров во всем мире. В этом же году объем сделок и торговых операций, совершенных в Интернете, достиг 1 триллиона долларов. Интернет является сетью виртуальных сетей. В 1991 году у нас (тогда еще в СССР) о нем знали несколько десятков человек, которые только что освоили электронную почту (через RELCOM) и попробовали, что такое FidoNet. Первое сообщение по электронной почте было послано президентом США Биллом Клинтоном 2 марта 1993 года. Первая новелла Стивена Кинга была опубликована по каналам Интернет 19 сентября 1993 года (до появления печатной копии), к тому же году относится начало синхронной передачи радиопрограмм по сетям Интернет. В конце 1993 года заработала первая очередь оптоволоконной опорной сети Москвы, полностью профинансированная Джорджем Соросом. В 1994 году НАТО организовало первую конференцию по Интернету в России (в Голицыно под Москвой). С помощью DFN (Deutsche Forschung Naetze), а затем Дж. Сороса и RELARN круг любителей Интернета расширился до сотен и тысяч, а после включения программ Мин9

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

вуза и Министерства науки РФ счет пошел на десятки тысяч. Это произошло прежде всего потому, что созрели условия – в различных учреждениях (сначала научных, а затем коммерческих и государственных) и у частных лиц оказались сотни тысяч персональных ЭВМ. К этому же времени (1992–93 годы) в мире стала формироваться сеть депозитариев, доступных через анонимный доступ (FTP), а несколько позднее и WWW-серверов. На рис. 1 показан рост числа ЭВМ, подключенных к сети Интернет по годам с 1989 по 1998 годы. Видно, что рост числа узлов сети имеет экспоненциальный характер. Можно смело утверждать, что протоколы Интернет, созданные для осуществления связи в случае нанесения десятков ядерных ударов по США со стороны СССР, явились одним из немногих (возможно единственным) положительным результатом холодной войны. Сегодня, когда Интернетом заинтересовались широкие массы трудящихся, и определенная часть их подключилась к расширению этой сети, стала актуальной проблема оптимального проектирования сетей и их подключения к общенациональной и международной сети Интернет. Современные сети Интернет объединяют в единое целое многие десятки (а может быть уже и сотни) тысяч локальных сетей по всему миру, построенных на базе самых разных физических и логических протоколов (ethernet, Token Ring, ISDN, X.25, Frame Relay, Arcnet и т.д.). Эти сети объединяются друг с другом с помощью последовательных каналов (протоколы SLIP, PPP), сетей типа FDDI (часто используется и в локальных сетях), ATM, SDH(Sonet) и многих других. В самих сетях используются протоколы TCP/IP (Интернет), IPX/SPX (Novell), Appletalk, Decnet, Netbios и бесконечное множество других, признанных международными, являющихся фирменными и т.д. Картина будет неполной, если не отметить многообразие сетевых программных продуктов. На следующем уровне представлены разнообразные внутренние (RIP, IGRP, OSPF) и внешние (BGP и т.д.) протоколы маршрутизации и маршрутной политики, конфигурация сети и задание огромного числа параметров, проблемы диагностики и сетевой безопасности. Немалую трудность может вызвать и выбор прикладных программных средств (Netscape, MS Internet Explorer и пр.). В последнее время сети внедряются в управление (CAN), 10

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

сферу развлечений, торговлю, происходит соединение Интернета и кабельного телевидения. Что явилось причиной стремительного роста сети Интернет? Создатели базовых протоколов (TCP/IP) заложили в них несколько простых и эффективных принципов: инкапсуляцию пакетов, фрагментацию / дефрагментацию сообщений и динамическую маршрутизацию путей доставки. Именно эти идеи позволили объединить сети, базирующиеся на самых разных операционных системах (Windows, Unix, Sunos и пр.), использующих различное оборудование (Ethernet, Token Ring, FDDI, ISDN, ATM, SDH и т.д.) и сделать сеть нечувствительной к локальным отказам аппаратуры. Огромный размер современной сети порождает ряд серьезных проблем. Любое усовершенствование протоколов должно проводиться так, чтобы это не приводило к замене оборудования или программ во всей или даже части сети. Достигается это за счет того, что при установлении связи стороны автоматически выясняют сначала, какие протоколы они поддерживают, и связь реализуется на общем для обеих сторон наиболее современном протоколе (примером может служить использование расширения протокола smtp – MIME). В кабельном сегменте современной локальной сети можно обнаружить пакеты TCP/IP, IPX/SPX (Novell), Appletalk, которые успешно сосуществуют. Проектировщикам и создателям сетей приходится учитывать многие десятки факторов при выборе того или иного типа сети, сетевого оборудования, операционной системы (UNIX, MS-DOS, IRIS, Windows-NT, SOLARIS или что-то еще), программного обеспечения, внешних каналов связи (выделенный канал, коммутируемая телефонная сеть, цифровая сеть, радио или спутниковый канал) и в конце концов сервис-провайдера. За всем этим стоят как технологические проблемы, так и финансовые трудности, тяжелый выбор между дешевой и хорошей сетью. Если вас интересуют оригинальные тексты протоколов Интернета, вы можете получить их, например, через анонимное FTP по адресу ds.internic.net (в каталоге RFC) или на нашем сервере store.in.ru/rfcs (зеркало). Эти документы можно найти и в других депозитариях. Документы RFC делятся на стандарты, проекты стандартов, временные (экспериментальные) регламентации и предложения. 11

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Чем больше номер RFC, тем более поздней дате этот документ соответствует. О статусе тех или иных RFCможно узнать из RFC1500 и -1780 (см. также файл std-inde.txt из того же депозитария, что и rfc-index.txt). Если вы хотите найти какой-то RFC-документ, начните с просмотра индексного файла (напр. rfc-index.txt). Первый документ RFC был выпущен в 1969 году. Далее темп публикаций варьировался в довольно широких пределах, в 1997–99 годах наблюдается заметный всплеск активности, связанный с потребностями мультимедиа (RTP, RSVP, PIM и т.д.), безопасностью и IPv6. Вариация публикаций документов RFC по годам представлена на рис 2.

Рис. 2. Распределение публикаций документов RFC по годам с 1969 по 2005

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

12

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Основные принципы работы Интернета Рассмотрим, как устроен Интернет. На рис. 3 показана общая схема, которая облегчит дальнейшее обсуждение данной проблематики (буквами R отмечены маршрутизаторы-порты локальных сетей). Каждая из сетей, составляющих Интернет, может быть реализована на разных принципах, это может быть Ethernet (наиболее популярное оборудование), Token Ring (вторая по популярности сеть), ISDN, X.25, FDDI или Arcnet. Все внешние связи локальной сети осуществляются через порты-маршрутизаторы (R). Если в локальной сети использованы сети с разными протоколами на физическом уровне, они объединяются через специальные шлюзы (например, Ethernet-Fast_Ethernet, Ethernet-Arcnet, Ethernet-FDDI и т.д.). Выбор топологии связей определяется многими факторами, не последнюю роль играет надежность. Использование современных динамических внешних протоколов маршрутизации, например BGP-4, позволяет автоматически переключаться на один из альтернативных маршрутов, если основной внешний канал отказал. Поэтому для обеспечения надежности желательно иметь не менее двух внешних связей. Сеть LAN-6 (см. рис. 3) при выходе из строя канала R2-R6 окажется изолированной, а узел LAN-7 останется в сети Интернет даже после отказа трех внешних каналов. Широкому распространению Интернет способствует возможность интегрировать самые разные сети, при построении которых использованы разные аппаратные и программные принципы. Достигается это за счет того, что для подключения к Интернету не требуется какого-либо специального оборудования (маршрутизаторы не в счет, ведь это ЭВМ, где программа маршрутизации реализована аппаратно). Некоторые протоколы из набора TCP/IP (ARP, SNMP) стали универсальными и используются в сетях, построенных по совершенно иным принципам. В некотором смысле Интернет возник эволюционно – в начале был Bitnet, fidonet, usenet и т.д. Со временем стало ясно, что конкуренция сетей должна быть заменена их объединением, так как от этого выигрывают все и пользователи и сервис-провайдеры. Ведь объединенная сеть имеет большие информационные ресурсы, может предложить более широкий список услуг и становится по этой причине привлекательной для еще большего числа клиентов. 13

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Рис. 3. Схема построения сети Интернет

Технология WWW-серверов сделала Интернет важной средой для целевой рекламы, приближенной к конечному потребителю. Стремительный рост числа узлов www продемонстрирован на рис. 4. Здесь также наблюдается экспоненциальный рост. Число активных узлов примерно в два раза меньше числа зарегистрированных (это же мы наблюдаем в нашей локальной сети). Сам факт использования Интернета для обливания грязью кандидатов во время предвыборной компании, говорит о том, что эта технология освоена и признана эффективной нашими политиками. Наше общество с удивительным упорством сначала осваивают все негативное, оставляя, очевидно, позитивное на десерт. В перспективе Интернет может стать и всемирной ярмаркой товаров и услуг. Ведь клиент может не только увидеть изображение товара и ознакомиться с условиями поставки, но и в диалоговом режиме получить ответы на интересующие его вопросы, а затем одним нажатием на клавишу мышки сделать заказ на понравившийся ему товар или услугу. В принципе для этого не нужен даже номер кредитной карточки, его заменит зашифрованный соответствующим образом идентификатор пользователя (сертификат) или его IP-адрес (если он работает на своей домашней машине). Таким образом, 14

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

можно заказывать билеты на самолет или в театр, планировать программу своего телевизора на неделю вперед и т. д.

Рис. 4. Рост числа узлов WWW в период 1994–2005 годы

Современные системы мультимедиа позволяют совместить телевизор, видеомагнитофон, факс и видеотелефон, причем это не фантазия на тему далекого будущего – это услуги доступные уже сегодня (при наличии широкополосного канала связи (64– 512 Кбит/с)). Если вы имеете доступ к Интернет, вам уже не нужно платить за международные телефонные переговоры, вы можете сделать это с помощью ip-phone или другого аналогичного продукта, при условии, что ваш партнер также имеет доступ к Интернет (данное требование в ближайшем будущем перестанет быть обязательным). Все более широкий круг услуг предлагает Интернет и в сфере развлечений. Здесь имеются игровые серверы, аренда обычных и сетевых компьютерных игр, различные конкурсы и соревнования. Основные принципы доступа к Интернету Рассмотрим, как строятся каналы связи (стрелки на рис. 5). В простейшем случае связь можно организовать через городскую коммутируемую телефонную сеть, для этого нужны модемы – по 15

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

одному на каждой из сторон канала (рис. 5a). Традиционные модемы могут обеспечить при хорошем качестве коммутируемой аналоговой телефонной сети пропускную способность до 56 Кбит/с (кабельные широкополосные модемы при длине соединения порядка 2км могут обеспечить 2 Мбит/с). Привлекательность такого решения заключается в возможности подключения к любому узлу, имеющему модемный вход. Наиболее широко указанный метод связи используется для подключения к узлам Интернет домашних ЭВМ. Недостатком такого решения является низкая надежность канала (особенно в России), малая пропускная способность и необходимость большого числа входных телефонных каналов и модемов. Использование выделенной 2- или 4-проводной линии (рис. 5Б) обеспечивает большую надежность и пропускную способность (до 256 кбит/с при длинах канала < 10 км). Но и здесь на каждый вход требуется отдельный модем, да и скоростные модемы, работающие на выделенную линию, относительно дороги. Выделенные линии чаще служат для межсетевого соединения (рис. 5В). Функциональным аналогом выделенных линий являются оптоволоконные, спутниковые и радио-релейные каналы. Этот вариант позволяет строить сети с пропускной способностью в несколько 1– 100 Мбит/с и более. Привлекательные возможности предлагают цифровые сети ISDN. Здесь можно использовать групповые телефонные номера, когда пара модемов обслуживает 10 и более пользователей (ведь они работают, как правило, не все одновременно). Кроме того, ISDN предлагает пользователям каналы с пропускной способностью не ниже 64кбит/c, а при необходимости возможно формирование и более широкополосных каналов. ISDN позволяет делить один и тот же канал между многими пользователями для передачи данных, факсов и телефонных переговоров. isdn органично стыкуется с внешними каналами X.25. К недостаткам системы следует отнести ограниченность ширины окна (число переданных пакетов без получения подтверждения приема), что делает неэффективным использование широкополосных и особенно спутниковых каналов. В области межсетевых связей свою нишу занимает Frame Relay. Этот протокол имеет контроль перегрузок, работающий на аппаратном уровне 16

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Рис. 5. Схемы каналов, использующих городскую телефонную сеть

На рис. 5 показана схема построения сети с использованием исключительно соединений типа точка-точка. Это наиболее часто встречающийся, но не единственный вариант. Дорога 'от околицы до околицы' прокладывается там, где она нужна и теми, кому она нужна непосредственно, но, согласитесь, построить так магистраль Москва Санкт-Петербург нельзя. При построении крупных общенациональных и интернациональных сетей применяются сверхширокополосные каналы и схемы типа опорной сети (backbone). Узлы такой сети могут располагаться в каких-то крупных организациях или быть самостоятельными (принадлежать государственным PTT). Такие сети обычно базируются на протоколах SDH (Sonet). Информация в этих сетях передается в виде больших блоков (виртуальных контейнеров). Использование опорной сети обычно оправдано при организации интернациональных связей, но бывают и исключения. Примером такого исключения является Московская опорная сеть, построенная на основе FDDI (100Мбит/с) и объединяющая более десяти научных организаций (длина первой очереди около 30 км). Московская сеть выполнена по схеме с 'прозрачными' IP-мостами, обычно же более мощные опорные сети маршру17

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

тизируемы, то есть блоки данных адресуются конкретным узлам, где они разбираются и сортируются. Контейнер может содержать сообщения, адресованные разным получателям, что несколько противоречит идеологии протоколов TCP/IP. IP-пакеты могут вкладываться в эти контейнеры и транспортироваться до заданного узла опорной сети. Классическим примером опорной сети является E-bone (Европейская опорная сеть). Эта сеть объединяет 27 стран (России в этом списке нет) и более 60 сервис-провайдеров, пропускная способность для различных участков лежит в пределах 2–34 Мбит/с. Опорная сеть подобна международной автомагистрали, по ней добираются до ближайшего к точке назначения узла, а далее по 'проселочным' каналам до конечного адресата. Резкое увеличение передаваемых объемов информации в локальных и региональных сетях привело к исчерпанию имеющихся ресурсов, а реальные прогнозы потребностей указывают на продолжение роста потоков в десятки и сотни раз. Единственной технологией, которая способна удовлетворить эти потребности, являются оптоволоконные сети (Sonet, SDH, ATM, FDDI, Fiber Channel). Каналы этих сетей уже сегодня способны обеспечить пропускную способность 155–622 Мбит/с, ведутся разработки и испытания каналов с пропускной способностью в 2–20 раз больше, например, гигабитного ethernet. Осваивается техника мультиплексирования частот в оптоволокне (WDM), что позволяет поднять его широкополосность в 32 раза и в перспективе довести быстродействие каналов до 80 Гбит/с и более. По мере роста пропускной способности возрастают проблемы управления, синхронизации и надежности. Практически все сети строятся сегодня с использованием последовательных каналов. Это связано прежде всего со стоимостью кабелей, хотя и здесь существуют исключения (например, HIPPI). Разные сетевые услуги предъявляют разные требования к широкополосности канала. На рис. 6 представлены частотные диапазоны для основных видов телекоммуникационных услуг. В Интернет практически все перечисленные услуги доступны уже сегодня (кроме ТВ высокого разрешения). Стремительно развиваются распределенные системы вычислений (например, проект GREED), управления и информационного обслуживания. Современная технология микропроцессоров предполагает достижение 18

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

быстродействия в 5 Гбит/с (технология с характеристическим размером объектов на кристалле 80–130 нм).

Рис. 6. Требования к пропускной способности канала для различных видов сервиса

Рассмотрев диаграмму, можно сделать определенные прогнозы на ближайшее будущее сетей. Через несколько лет можно ожидать слияния функций телевизора и ЭВМ, а это потребует пропускных способностей от магистральных каналов на уровне 0,1– 10 Гбит/с. Широкополосность каналов, приходящих в каждый семейный дом, составит 1–10 Мбит/с, что позволит реализовать видео-телефонию, цифровое телевидение высокого разрешения, доступ к централизованным информационным службам и многое другое. Уже существующие оптоволоконные системы обеспечивают и в 10 раз большую пропускную способность. Можно предположить и появление локальных сетей внутри жилища. Такие сети способны взять под контроль кондиционирование воздуха, безопасность дома в самом широком смысле этого слова, например, оповещение о нежелательном вторжении, пожаре или возможном землетрясении (в сейсмически опасных районах), появление вредных примесей в воздухе. Такая система разбудит хозяина в указанное время, подогреет завтрак, напомнит о предстоящих делах на день, запросит и предоставит хозяину свежий прогноз погоды и справку о состоянии дорог, своевременно сделает заказ на авиабилет и т.д. Все это технологически возможно уже сегодня, пока относительно дорого, но цены весьма быстро падают. Приме19

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

ром может служить сеть CAN, разработанная для сбора данных и управления автомобилем. Стремительное расширение сети Интернет не имеет аналогов в истории, так что любой самый фантастический прогноз в этой области может сбыться. Протоколы Интернет (TCP/IP) существуют уже около 40 лет. Требования к телекоммуникационным каналам и услугам выросли, и этот набор протоколов не удовлетворяет современным требованиям. Появляются новые протоколы Delta-t (для управления соединением), NetBLT (для передачи больших объемов данных), VMTP (для транзакций; RFC-1045) и XTP для повышения эффективности передачи данных (замена TCP), блоки протоколов для работы с мультимедиа (RTP, RSVP, PIM, ST-II и пр.), но, безусловно, наиболее революционные преобразования вызовет внедрение IPv6. Выводы. В результате изучения материала данной лекции получено представление о этапах развития глобальной компьютерной сети Интернет. Изучены основные принципы работы Интернета и принципы доступа к сети Интернет. Вопросы для самопроверки 1. Назовите основные этапы развития глобальной компьютерной сети Интернет? 2. Назовите принципы работы Интернета. 3. Назовите принципы доступа к Интернету. Литература1: 1, 2.

1

Литература ко всем лекциям находится на стр. 147.

20

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

План 1. История языка HTML. Суть и составные части Web технологии. 2. Основы языка разметки гипертекста – HTML (Тэг , Элемент , Заголовочные тэги, META – метаинформация, TITLE – "внешний" заголовок (титул), Комментарии). 3. Оформление текста. 4. Списки.

Немного истории Всемирная информационная сеть (World Wide Web далее Web) имеет недолгую, по людским меркам, историю. Годом рождения Web считается 1992 год, а отцом основателем был некто Tim Berners-Lee, который сумел, используя новые сетевые технологии и опыт своих предшественников, сделать Web приятным и удобным средством распространения информации во всемирной сети компьютерных сетей Internet (Internet существует с середины 60-х годов). Толчок для своего стремительного и победного шествия по планете Web получила в 1993 году, когда Mark Andressen с группой студентов университета Иллинойса, разработали бесплатно распространяемую (вот истинная причина бурного развития Web) программу Mosaic для просмотра Web-страниц. HTML был разработан на основе мощного языка разметки SGML, путем переноса некоторых его функций разметки данных в сетевую среду для разметки гипертекста. Одновременно с развитием Web технологий, насыщением Web новыми сервисами и возможностями, развивался и язык разметки гипертекста. С момента своего появления стандарт HTML претерпел множество изменений, последнее из которых это спецификация HTML 4.01, анонсированная консорциумом W3C 24 декабря 1999 г. Суть и составные части Web технологии Выделим базовые элементы технологии Web:  Internet это всемирная сеть разнородных компьютерных сетей, взаимодействующих по протоколу TCP/IP. 21

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

 Web является одним из приложений Internet (наряду с электронной почтой, новостями и прочими электронными сервисами), предназначенным для массового распространения разнообразной информации.  Носителями информации в Web служит Web-страницы, содержащие текст, графику, мультимедиа элементы и гиперссылки на другие ресурсы Web или Internet.  Для передачи гипертекста Web-страниц в Internet используется специально разработанный протокол HTTP (Hyper Text Transfer Protocol).  Для разработки Web-страниц используется специальный язык разметки гипертекста HTML (Hyper Text Markup Language).  Для просмотра Web-страниц используется специальная клиентская программа Web-броузер. В окне Web-броузера отображаются результаты интерпретации языка HTML с Web-страниц, полученных во время навигации по гиперссылкам. Основы языка разметки гипертекста – HTML Базовым элементом языка разметки гипертекста является – ТЕГ (дескриптор, маркер). Тег всегда заключен между скобками < > и имеет следующий вид: "); document.write("Hello, world!"); document.write(""); В параметре SRC вышеприведенного примера задано только имя файла, так как он находится в том же каталоге, что и ссылающийся на него файл документа HTML. Однако можно указать и относительный путь, и полный адрес URL, например:

JavaScript Test



88

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Рис. 53. Результат работы кода

Прежде всего, обратите внимание на область заголовка документа, выделенную операторами и . В этой области расположено определение переменной и функции, оформленное с применением операторов . Кроме того, в теле документа HTML есть еще один раздел сценариев, выделенный аналогичным образом. Переменная с именем szMsg определяется при помощи оператора var, причем ей сразу же присваивается начальное значение – текстовая строка "Hello, world!". Язык JavaScript не является типизированным. Это означает, что программист не может указать явным образом тип создаваемых им переменных. Этот тип определяется интерпретатором JavaScript автоматически, когда переменной в первый раз присваивается какое-либо значение. В дальнейшем можно легко изменить тип переменной, просто присвоив ей значение другого типа. Отсутствие строгой типизации упрощает создание сценариев, особенно для непрофессиональных программистов, однако может привести к ошибкам. Поэтому необходимо внимательно следить за тем, какие типы данных применяются. Этому способствует использование префиксов имен, по которым можно судить о типе переменной. Например, текстовые строки можно начинать с префикса sz, а численные значения – с префикса n. Помимо переменной szHelloMsg, в области заголовка документа HTML с помощью ключевого слова function определена функция с именем printHello. Эта функция вызывается из сценария, расположенного в теле документа и выводит в документ HTML значение переменной szHelloMsg. 89

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Интерпретация документа HTML и встроенных в него сценариев происходит по мере загрузки документа. Поэтому если в сценарии одни функции вызывает другие или используют определенные в документе переменные, то их определения (вызываемых функций и переменных) необходимо разместить выше вызывающих. Размещение определений переменных и функций в разделе заголовка документа гарантирует, что они будут загружены до момента загрузки тела документа. Язык JavaScript имеет встроенные средства для отображения простейших диалоговых панелей, таких как панель сообщений. В листинге 5 приведен исходный текст сценария JavaScript, в котором вызывается функция alert, предназначенная для отображения диалоговых панелей с сообщениями. Листинг 5

Hello, world!

JavaScript Test



90

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Рис. 54. Результат работы кода

Помимо представленной в этом примере диалоговой панели сценарии JavaScript могут выводить на экран и более сложные. В них пользователь может делать, например, выбор из двух альтернатив или даже вводить какую-либо информацию. Рассмотрим еще несколько простейших примеров использования JavaScript. Например, интересной возможностью Javascript является использование диалоговой панели ввода информации. Введенная в диалоговой панели текстовая строка выводится в окне браузера. Листинг 6

Hello, world!

JavaScript Test



Рис. 55. Результат работы кода

Диалоговая панель ввода информации вызывается с помощью функции prompt. В качестве параметров функции передается вводное сообщение для пользователя и начальное значение запрашиваемой текстовой строки (в приведенном примере – пустое). Еще один пример. В языке JavaScript есть удобные средства обработки событий. В следующем примере, когда пользователь пытается выбрать ссылку "Select me!", разместив над ней курсор мыши, на экране появляется диалоговая панель с сообщением "Hello, world!". Исходный текст соответствующего документа HTML с встроенным в него сценарием представлен в листинге 7.

92

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Листинг 7

Hello world!

JavaScript Test Select me!

Рис. 56. Результат работы кода

Здесь для нас интересна строка оператора . Напомним, что этот оператор обычно применяется для организации ссылок на другие документы HTML или файлы различных объектов. В данном случае поле ссылки параметра HREF пустое, однако дополнительно в оператор включена следующая конструкция: onMouseover="alert('Hello, world!');" Она указывает, что при возникновении события onMouseover (наведение мыши) должна выполняться следующая строка программы JavaScript: 93

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

alert('Hello, world!'); Обратите внимание, что строка задана не в двойных кавычках, а в одинарных. В сценариях JavaScript допустимо использовать и те, и другие кавычки, однако закрывающая кавычка должна быть такой же, что и открывающая. Внутренняя пара кавычек должна отличаться от внешней. Можно установливать обработчики самых разных событий, таких, как: загрузка страницы, щелчок по ссылке или кнопке формы, выбор ссылки или поля формы и др. Условные операторы В языке JavaScript предусмотрен условный оператор if-else, который позволяет выполнять разные программные строки в зависимости от условия. Общий вид оператора if-else представлен ниже: if(условие) строка 1 [else строка 2] Часть оператора, выделенная квадратными скобками, является необязательной. Существует также специальный тип условного оператора, который называется оператором ?:. Этот оператор в общем виде записывается так: выражение ? строка 1 : строка 2 При вычислении оператора ?: вначале оценивается логическое выражение, расположенное в левой части. Если оно равно true, выполняется строка 1, а если false – строка 2. Ниже приведен пример использования условного оператора ?: для присвоения значения переменной bAccessDenied в зависимости от содержимого переменной nYourAge: bAccessDenied = (nYourAge < 18 || nYourAge > 99) ? true : false; Операторы цикла В языке JavaScript есть несколько операторов, предназначенных для организации циклов. 94

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Оператор for Общий вид оператора for представлен ниже: for([инициализация;] [условие;] [итерация]) { ... строки тела цикла ... } В области инициализации обычно выполняется присваивание начальных значений переменным цикла. Здесь допустимо объявление новых переменных при помощи ключевого слова var. Вторая область задает условие выхода из цикла. Это условие оценивается каждый раз при прохождении цикла. Если в результате оценки получается логическое значение true, выполняются строки тела цикла. Область итерации применяется для изменения значений переменных цикла, например, для увеличения счетчика цикла. Оператор for-in Оператор for-in предназначен для просмотра всех свойств объекта и записывается в следующем виде: for(переменная in объект) { ... строки тела цикла ... } Оператор while Для организации итерационных циклов с предусловием используется оператор while: while(условие) { ... строки тела цикла ... } Если в результате оценки условия получается значение true, тогда итерация выполняется, если false – цикл прерывается.

95

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Оператор break С помощью оператора break можно прервать выполнение цикла, созданного операторами for или while, в любом месте. Например: var i = 0; while(true) { ... i++; if(i > 10) break; ... } Оператор continue Выполнение оператора continue внутри цикла for или while приводит к тому, что итерация прерывается, а затем возобновляется заново. Этот оператор не прерывает цикл. Ниже приведен пример использования оператора continue: var i = 0; while(i < 100) { i++; if(i < 10) continue; ... } Здесь фрагмент тела цикла, отмеченный многоточием, будет выполняться только после того, как значение переменной i станет равным 10. Когда же это значение достигнет 100, цикл будет завершен. Пример:

Hello, world!

JavaScript Test

Message:


Здесь сразу после загрузки документа вызывается функция printHello. В теле этой функции, в свою очередь, вызывается функция printNString, которой передаются два параметра. Через первый параметр этой функции передается текстовую строка szHelloMsg, а через второй – количество повторов этой строки при выводе. Вывод строки выполняется функцией printNString в цикле.

97

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Рис. 57. Результат работы кода

Выводы. В результате изучения материала данной лекции получено представление о способах использования JavaScript внутри HTML-документа. Изучен синтаксис условных операторов, операторов цикла, оператора break, оператора continue. Вопросы для самопроверки 1. Какие существуют способы использования JavaScript внутри HTML-документа. 2. Условные операторы. 3. Какие операторы цикла вы знаете? 4. Действие оператора break. 5. Действия оператора continue. Литература: 7, 8.

98

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

План 1. События JavaScript. 2. Классы и объекты JavaScript. 3. Объект Window. 4. Основные методы объекта document. 5. Методы объекта History.

События JavaScript События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие Click. Если указатель мыши пересекает какую-либо ссылку гипертекста – происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка – Click. Программа – обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный листинг представляет простой пример программы обработки события onClick:





99

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Рис. 58. Результат работы кода

В приведенном примере функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. Опишем синтаксис основных событий, использующихся в JavaScript:  onClick – Вызывается после щелчка левой кнопкой мыши на объекте.  onMouseOver – Событие происходит, когда указатель мыши помещается над гиперссылкой.linkText  onFocus – Событие происходит в тот момент, когда пользователь переходит к элементу формы select, text или textarea для ввода данных.  onBlur – Событие происходит в тот момент, когда элемент формы select, text или textarea теряет фокус.  onSelect – Обработчик события onSelect вызывается в тот момент, когда выделен текст внутри элемента формы.  onSubmit – Событие происходит в момент щелчка мышью на кнопке Submit для посылки данных формы на сервер. 100

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

 onLoad – Вызывается, когда загрузка документа в окно или в фрейм закончена.,  onUnload – Вызывается, когда пользователь выходит из документа.,

 onChange – Событие происходит в тот момент, когда значение элемента формы select, text или textarea изменилось и элемент потерял фокус.

Приведем некоторые примеры:

Ссылка









101

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Рис. 59. Результат работы кода

Классы и объекты JavaScript В языке JavaScript имеется три типа объектов: встроенные объекты, объекты браузера и объекты, которые программист создает самостоятельно С точки зрения сценария JavaScript браузер представляется иерархически организованным набором объектов. Обращаясь к свойствам и методам этих объектов можно выполнять различные операции над окном браузера, загруженным в это окно документом HTML, а также над отдельными объектами, размещенными в документе HTML. Например, можно создавать новые окна браузера, загружая в них документы HTML, динамически формировать текст документа HTML, обращаться к полям форм, определенных в документе HTML и так далее. Объекты браузера являются тем интерфейсом, с помощью которого сценарий JavaScript взаимодействует с пользователем и документом HTML, загруженным в окно браузера, а также с самим браузером. В сценариях JavaScript нельзя создавать новые классы на базе классов, соответствующих этим объектам, однако свойства и методы объектов браузера доступны. На рисунке схематически показана иерархия объектов браузера.

102

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Рис. 60. Иерархия объектов браузера

Объект Window обычно соответствует главному окну браузера и является объектом верхнего уровня в языке JavaScript, поскольку документы, собственно, и открываются в окне. Рассмотрим основные свойства Window:  defaultStatus – Выводимое по умолчанию сообщение в строке состояния в нижней части окна броузера – [windowName].defaultStatus  status – Устанавливает текст основного или временного сообщения в строке состояния – [windowName].status.  frames – Содержит массив фреймов, содержащихся в окне – [windowName.][parent.]frameName,[windowName.][parent.]frames[index]  name – Задает заголовок окна – windowRef.name  window – Синоним текущего окна – [windowName.] window  alert – Выводит на экран диалоговое окно JavaScript Alert с кнопкой OK и определенным сообщением – [window].alert(AlertMessage)  open – Создает новый экземпляр окна – [window.]open("URL","windowName" [,"windowFeatures"]);  close – Закрывает текущий экземпляр окна – [window.]close();  prompt – Отображает диалоговое окно ввода пользователя – [windowName.]prompt(message [inputDefault]) 103

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

 confirm – выводит на экран окна сообщения с кнопками Yes и No, и возвращает булевое значение true или false, в зависимости от нажатой кнопки – [window].confirm(ConfirmMessage)  setTimeout – Исполняет выражение по истечении указанного в миллисекундах промежутка времени – [window.]setTimeout(timerID) Пример:

Рис. 61. Результат работы скрипта

document – объект, создаваемый броузером во время загрузки страницы. Объект document является одним из основных в JavaScript и содержит информацию о текущем документе, такую как заголовок, цвет фона, имеющиеся в документе формы и т.п. Эти свойства определяются в теге. Рассмотрим основные свойства document: 104

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

 action – Отображение атрибута ACTION тега – document.formName.action; document.forms[index].action; action возвращает строку, состоящую из URL назначения для данных, введенных в форму. Это значение может быть установлено или изменено как до, так и после загрузки и форматирования документа.  alinkColor – Цвет активной гиперссылки – document.alinkColor  anchors – Массив всех якорей в документе – document.anchors(index)  bgColor – Фоновый цвет документа – document.bgColor  fgColor – Цвет текста, выводимого на странице – document.fgColor  forms – Массив объектов, соответствующих формам, созданных в тегах HTML в том же порядке – document.forms  lastModified – Строка только для чтения, хранящая дату последнего изменения текущего документа – document.lastModified  linkColor – Цвет гиперссылки в документе – document.linkColor  links – Массив гипертекстовых связей – document.links[index]  location – Возвращает строку с URL текущего документа – document.location  referrer – URL документа, который привел к текущему документу – document.referrer  title – Возвращает значение только для чтения, указанное внутри тега – document.title  vlinkColor – Возвращает или устанавливает цвет просмотренной гиперссылки – document.vlinkColor  images- Масив изображений, ссылки на которые заданы в текущем документе – document.images[index] Основные методы объекта document  open – Создает новый документ – document.open([MIMEtype]). Метод открывает поток вывода для методов write или writeln. Если тип MIME является версией text или image (например, text/html или image/gif), документ будет открыт для показа.

105

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

 write – Записывает строку или несколько строк в окно документа – document.write(string)  writeln – Записывает строку или несколько строк в окно документа и добавляет символ новой строки в конце вывода – document.writeln(string)  close – Закрывает документ, посылает браузеру информацию об изменениях в документе – document.close()  clear – Очистка текущего документа – document.clear() Пример:

Рис. 62. Результат работы скрипта

Объект location сохраняет местоположение текущего документа в виде адреса этого документа. При управлении объектом location существует возможность изменять URL документа. Объект location связан с текущим объектом window – окном, в которое загружен документ. Рассмотрим основные свойства объекта:  hash – Возвращает часть URL, начинающуюся с символа #, т.е. метку – document.linkName.hash; document.links[index].hash; document.location.hash 106

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

 hostname – Возвращает или изменяет строку с именем домена или IP-адресом URL – location.hostname; linkName.hostname; links[index].hostname  href – Возвращает строку, содержащую полный URL текущего документа – location.href; linkName.href; links[index].href  pathname – Извлекает из URL ту его часть, которая содержит путь – location.pathname; link.pathname; links[index].pathname  port – Извлекает из URL номер порта компьютера – location.port; link.port; links[index].port  protocol – Возвращает метод доступа к объекту(протокол передачи данных) – location.protocol; link.protocol; links[index].protocol  target – Строка, указывающая имя окна, в которое будет помещен ответ после посылки данных формы серверу – location.target; link.target; links[index].target Методов для объекта location не существует и с обработчиками событий он не связан Пример:



Рис. 63. Результат работы скрипта

Объект history содержит список адресов URL, посещенных в этом сеансе. Объект history связан с текущим документом. Единственным свойством объекта является свойство length, которое определяет количествоэлементов в списке history 107

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Методы объекта History:  back – Вызывает переход к предыдущему URL из списка просмотренных в текущей сессии работы с браузером документов – history.back()  forward – Загружает следующий документ из списка URL, просмотренных за текущий сеанс работы с браузером – history.forward()  go – Загружает документ из списка страниц, посещенных за текущий сеанс работы браузера – history.go(argumentOrURL) Пример:

Рис. 64. Результат работы скрипта

108

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Выводы. В результате изучения материала данной лекции получено представление о событиях, классах и объектах JavaScript. Изучены объекты window, document, history их методы и свойства. Вопросы для самопроверки 1. Назначение объекта Window. Какими методами и свойствами обладает? 2. Основные методы объекта document. 3. Методы объекта History. Литература: 7, 8.

109

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

План 1. Объект navigator. 2. Объект array. 3. Объект Date. 4. Объект Math. 5. Объект anchor и массив anchors. 6. Объект image и массив images. 7. Объект link и массив links.

Объект navigator содержит информацию о браузере на клиентском компьютере. Объект navigator возвращает информацию о браузере, такую как имя и версия браузера. Одно из основных применений этого объекта состоит в определении платформы, используемой на клиентском компьютере, для учета особенностей конкретного браузера, подобных обработке символа новой строки или генерации случайных чисел. Рассмотрим основные свойства объекта:  appCodeName – Возвращает строку (только для чтения) с кодовым именем броузера – navigator.appCodeName  appName – Возвращает строку (только для чтения) с именем броузера – navigator.appName  appVersion – Возвращает строку с информацией о версии броузера – navigator.appVersion  userAgent – Заголовок, посылаемый как часть протокола HTTP от клиента к серверу для идентификации типа клиента – navigator.userAgent Методы и события не определены для этого объекта. Пример:

Рис. 65. Результат работы скрипта

Внутренние объекты Внутренние объекты не относятся к браузеру или загруженному HTML-документу. Эти объекты могут создаваться и обрабатываться в любой JavaScript-программе. Они включают в себя простые типы, такие как строки, а также более сложные объекты, в частности даты. Объект array Примерами объектов-массивов в браузере служат гиперсвязи, метки, формы, фреймы. Массив можно создать одним из следующих способов:  используя определенную пользователем функцию для присвоения объекту многих значений;  используя конструктор Array();  используя конструктор Object(). Объекты-массивы не имеют ни методов, ни свойств. Пример:

111

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Рис. 66. Результат работы скрипта

Объект Date Объект содержит информацию о дате и времени. Этот объект имеет множество методов, предназначенных для получения такой информации. Кроме того, объекты Date можно создавать и изменять, например, путем сложения или вычитания значений дат получать новую дату. Для создания объекта Date применяется синтаксис: dateObj = new Date(parameters) где dateObj – переменная, в которую будет записан новый объект Date. Аргумент parameters может принимать следующие значения:  пустой параметр, например date() в данном случае дата и время – системные.  строку, представляющую дату и время в виде: "месяц, день, год, время", например "March 1, 2000, 17:00:00" Время представлено в 24-часовом формате; значения года, месяца, дня, часа, минут, секунд. Например, строка "00,4,1,12,30,0" означает 1 апреля 2000 года, 12:30.  целочисленные значения только для года, месяца и дня, например "00,5,1" означает 1 мая 2000 года, сразу после полночи, так, как значения времени равны нулю. Данный объект имеет множество методов, свойств объект Date не имеет.

112

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Методы Date  getDate() Возвращает день месяца из объекта в пределах от 1 до 31  getDay() Возвращает день недели из объекта: 0 – вс, 1 – пн, 2 – вт, 3 – ср, 4 – чт, 5 – пт, 6 – сб.  getHours() Возвращает время из объекта в пределах от 0 до 23  getMinutes() Возвращает значение минут из объекта в пределах от 0 до 59  getMonth() Возвращает значение месяца из объекта в пределах от 0 до 11  getSeconds() Возвращает значение секунд из объекта в пределах от 0 до 59  getTime() Возвращает количество миллисекунд, прошедшее с 00:00:00 1 января 1970 года.  getTimeZoneoffset() Возвращает значение, соответствующее разности во времени (в минутах)  getYear() Возвращает значение года из объекта  setDate(day) С помощью данного метода устанавливается день месяца в объекте от 1 до 31  setHours(hours) С помощью данного метода устанавливается часы в объекте от 0 до 23  setMinutes(minutes) С помощью данного метода устанавливаются минуты в объекте от 0 до 59  setMonth(month) С помощью данного метода устанавливается месяц в объекте от 1 до 12  setSeconds(seconds) С помощью данного метода устанавливаются секунды в объекте от 0 до 59  setTime(timestring) С помощью данного метода устанавливается значение времени в объекте.  setYear(year) С помощью данного метода устанавливается год в объекте year должно быть больше 1900.  toGMTString() Преобразует дату в строковый объект в формате GMT.  toString() Преобразует содержимое объекта Date в строковый объект.  toLocaleString() Преобразует содержимое объекта Date в строку в соответствии с местным временем. 113

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

 Date.UTC(year, month, day [,hours][,mins][,secs]) Возвращает количество миллисекунд в объекте Date, прошедших с с 00:00:00 1 января 1970 года по среднему гринвичскому времени. Разберем пару примеров: В 1-ом примере приведен HTML-документ, в заголовке которого выводится текущие дата и время.



Рис. 67. Результат работы скрипта

Разберем еще один пример. Пусть меняются графические бэкграунды в зависимости от времени суток.

hello!

Рис. 68. Результат работы скрипта

Вероятно, вы успели заметить, что тег создается в JavaScript-программе, а закрывается уже в статическом тексте HTML. Это вполне допустимо, так, как все теги расположены в правильном порядке. В данном примере предполагается, что файлы рисунков находятся в том же каталоге. Вы можете здесь задать полный адрес URL. Объект Math Math – встроенный в JavaScript объект, дающий доступ к константам и математическим функциям. Объект Math делится на две части – свойства, содержащие константы и методы для реализации функций. Свойствами объекта Math являются математические константы:  E – Константа Эйлера. Приближенное значение 2.718 . . .  LN2 – Значение натурального логарифма числа два. Приближенное значение 0.693 . . .  LN10 – Значение натурального логарифма числа десять. Приближенное значение 2.302 . . .  LOG2_E – Логарифм e по основанию 2 115

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

 LOG10_E – Десятичный логарифм e. Приближенное значение 0.434 . . .  PI – Число ПИ. Приближенное значение 3.1415 . . .  SQRT2 – Корень из двух Методы объекта Math представляют собой математические функции:  abs() Возвращает абсолютное значение аргумента.  acos() Возвращает арккосинус аргумента  asin() Возвращает арксинус аргумента  atan() Возвращает арктангенс аргумента  ceil() Возвращает большее целое число аргумента, округление в большую сторону. Math.ceil(3.14) вернет 4  cos() Возвращает косинус аргумента  exp() Возвращает экспоненту аргумента  floor() Возвращает наибольшее целое число аргумента, отбрасывает десятичную часть  log() Возвращает натуральный логарифм аргумента  max() Возвращает больший из 2-х числовых аргументов. Math.max(3,5) вернет число 5  min() Возвращает меньший из 2-х числовых аргументов.  pow() Возвращает результат возведения в степень перврго аргумента вторым. Math.pow(5,3) вернет 125  random() Возвращает псевдослучайное число между нулем и единицей.  round() Округление аргумента до ближайшего целого числа.  sin() Возвращает синус аргумента  sqrt() Возвращает квадратный корень аргумента  tan() Возвращает тангенс аргумента Объект String Объект string представляет собой последовательность символов, ограниченная одинарными или двойными кавычками. Обычно присваивают какой-то переменной строку и используют ее как объект для вызова свойств или методов. Например, s="internet", а свойство s.lenght (длина строки) вернет значение 8. Рассмотрим некоторые методы объекта:  Большинство методов соответствует тегам HTML: big(), fontcolor(arg), fontsize(arg), small(), strike(), sub(), sup()

116

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

 anchor – Выводит строку на экран и делает ее якорем – textString.anchor(anchorName)  blink – форматирует строковый объект в виде мигающей строки – stringname.blink()  bold – Форматирует строковый объект жирным шрифтом – stringName.bold()  charAt – Возвращает символ, находящийся в заданной позиции строки – stringName.charAt(arg)  eval – Вычисляет строку как числовое выражение – eval(string)  fixed – Выводит строку на экран шрифтом фиксированной ширины – stringName.fixed()  italics – Отображает текст курсивом аналогично тегу – stringName.italic()  lndexOf – Возвращает позицию символа или подстроки в строке, начиная поиск сначала – stringName.lndexOf()  lastlndexOf – Возвращает позицию символа или подстроки в строке, начиная поиск с конца – stringName.lastlndexOf()  link – Создает новую гиперссылку на другой URL – stringName.link(argument)  substring – Позволяет извлечь подстроку длиной arg2, начиная с позиции arg1 – stringName.substring(arg1, arg2)  toLowerCase – Преобразует все символы строки к нижнему регистру – stringName.toLowerCase()  toUpperCase – Преобразует все символы строки к верхнему регистру – stringName.toUpperCase() Потомки в JavaScript Некоторые объекты языка JavaScript имеют потомков. В частности, гиперсвязь является объектом, наследованным из объекта document. В языке JS наследованные объекты называются также свойствами. Например, множество гиперсвязей является свойством объекта document, а links – именем этого свойства. Таким образом, трудно провести четкую границу между объектами и свойствами. Гиперсвязь, являясь объектом, в то же время представляет собой свойство links объекта document. Рассмотрим пример. Напишем простенькую программку и посмотрим, как будут создаваться объекты HTML. То есть, при загрузке HTMLдокумента в браузер соответственно будут созданы HTML117

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

объекты на JavaScript. Теги HTML собственно служат исключительно для удобства написания документа:

Пример программы

Item 1



Рис. 69. Результат работы кода

Посмотрим эквивалентную запись на JavaScript document.title="Пример программы" document.bgColor="White" document.forms[0].chck1.defaultChecked=true Как видно из примера, тегу соответствует свойство document.title, а цвету фона документа, установленному в теге , – свойство document.bgColor. Переключателю checkbox с именем chck1, определенному в форме, соответствует выражение document.forms[0].chck1. Свойство defaultChecked принадлежит объекту checkbox и может принимать значения true или false в зависимости от того, указан ли в теге атрибут checked. Когда этот атрибут задан, переключатель отображается на экране как включенный по умолчанию. 118

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Поскольку документ может включать несколько таких объектов, как гиперсвязи, формы и другие объекты, многие из них являются массивами. Для обращения к определенному элементу массива нужно указать его индекс. Например, forms[0] – первая форма текущего документа. Ко второй форме можно обратиться соответственно forms[1]. Заметьте, что индексы массивов в JS программах всегда начинаются с нуля.В нашем примере объект верхнего уровня – window, потому, что любой документ загружается в окно. Например, выражения document.forms[0] и window.document.forms[0] обращаются к одному и тому же объекту, а именно к первой форме текущего документа. Однако если необходимо обратиться к форме в другом окне (фрейме), следует использовать выражение вида parent.frames[n].document.forms[n], где n является индексом нужного элемента массива. Перечислим объекты: anchor (anchors[]) Множество тегов в текущем документе button Кнопка, создаваемая при помощи тега checkbox Контрольный переключатель, создаваемый при помощи тега elements[] Все элементы тега form (forms[]) Множество объектов тега языка HTML frame (frames[]) Фреймосодержащий документ hidden Скрытое текстовое поле, создаваемое при помощи тега

images (images[]) Множество изображений (тегов ) в текущем документе link (links[]) Множество гиперсвязей в текущем документе navigator Объект, содержащий информацию о браузере, загрузившем документ password Поле ввода пароля, создаваемое при помощи тега

radio Селекторная кнопка (radio button), создаваемая при помощи тега 119

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

reset Кнопка перегрузки, создаваемая при помощи тега select (options[]) Элементы объекта submit Кнопка передачи данных, создаваемая при помощи тега text Поле ввода, сооздаваемое при помощи тега textarea Поле текста, создаваемое при помощи тега Объекты, которым соответствует массивы, являются многомерными объектами. В некоторых HTML-тегах можно определить несколько элементов, например множество элементов списка в теге . Рассмотрим тег , содержащий два элемента:

Опция1 Опция2

Рис. 70. Элементы списка в теге

Тег сам по себе является объектом, однако для обращения к отдельным элементам этого объекта (тегам ) используется массив option. Данный массив представляет собой множество значений, которые соответствует тегам , содержащимся в теге . В нашем примере создается два объекта: первый – объект select в целом (к нему обращаются, чтобы выяснить, сколько элементов он фактически соодержит), второй – 120

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

массив options (он позволяет обращаться к отдельным элементам, содержащимся в первом объекте). Таким образом, некоторые объекты могут использовать объекты-массивы для обращения к содержащимся в них элементам. Однако это не является правилом, все зависит от структуры рассматриваемых объектов и тех объектов, из которых они унаследованы. Например, HTML-тегам . . . соответствует объект anchor, являющийся элементом массива anchors, и в то же время эти теги встречаются сами по себе, а не в других тегах. Просто родительским объектом (parents) для объекта anchors является объект document, а в документе может быть определено множество меток. Окна тоже могут содержать множество документов, связанных с ними через фреймы. Объект anchor и массив anchors Anchor – это элемент текста, который является объектом назначения для тега гиперсвязи , а также свойством объекта document. Тегу в языке JavaScript соответствует объект anchor, а всем тегам , имеющимся в документе, – массив anchors. Являясь объектами назначения для гиперсвязей , метки в основном используются для индексирования содержимого гипертекстовых документов, обеспечивая быстрое перемещение к определенной части документа при щелчке мыши на гиперсвязи, которая обращается к данной метке. Тег , задающий метки и гиперсвязи, имеет синтаксис:

anchorText

Как вы успели заметить, обычная схема построения гиперсвязей. Значение location задает имя метки. Когда значение определено, данный тег задает гиперсвязь. Location может также включать и URL, например: href="http://wdstudio.al.ru/index.htm#netscape". Заметьте, что перед и после знака # пробелы не допустимы. Атрибут name="anchorName" определяет имя метки, которая будет объектом назначения для гипертекстовой связи в текущем HTMLдокументе: . В данном случае netscape – имя метки, которая будет объектом назначения для гипертексто121

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

вой связи. Атрибут target="windowName" – имя объекта-окна или его синонима: self, top и др., в которое загружается документ, запрашиваемый при активизации гиперсвязи. Значение anchorText задает текст, который будет отображаться на экране в том месте, где находится метка, и является необязательным. Например: . А вот с атрибутом href – текст в большинстве случаев должен быть виден на экране, иначе как активизировать гиперсвязь. Атрибут target также может существовать только с атрибутом href. . Массив anchors Посредством массива anchors программа на языке JavaScript может обращаться к метке текущего гипертекстового документа. Каждому тегу текущего документа соответствует элемент массива anchors. Для того чтобы программа выполнялась правильно, в соответствующих атрибутах name должны быть заданы имена всех меток. Если документ содержит именованную метку, определенную HTML-тегом < a name="s1">Selection1 то этой метке в JS-программе соответствует объект document.anchors[0]. Чтобы перейти к этой метке посредством гиперсвязи, пользователь должен щелкнуть мышью на тексте, определенном в контейнере . . . . К массиву anchors можно обращаться при помощи следующих операторов: document.anchors[i] document.anchors.length где i – индекс запрашиваемой метки. Свойство length позволяет определить количество меток в документе, хотя элементы, соответствующие отдельным меткам, будут содержать значение null. Это значит, что нельзя обращаться к именам отдельных меток через элементы массива. Свойства Массив anchors имеет только одно свойство length, которое возвращает значение, соответствующее количеству меток в документе. Массив anchors является структурой только для чтения.Методов и обработчиков событий объекты anchors не имеют.

122

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Объект image и массив images В браузере рисунки рассматриваются как объекты image, а все рисунки, содержащиеся в текущем документе, помещаются в массив images, который можно использовать для обращения к любому рисунку, определяемому тегом . В частности, можно динамически обновлять изображения, изменяя их свойство src. Для начала приведем тег , распишем полностью:

В атрибуте src содержится имя или адрес URL файла, который нужно вывести в документе. Рисунок должен храниться в формате GIF, JPEG, или PNG. С помощью атрибута alt задается альтернативный текст, появляющийся на экране: в момент загрузки текста, если пользователь заблокировал вывод изображений и поясняющая надпись под курсором мыши. Атрибут lowsrc позволяет предварительно выводить на экран изображение с низким разрешением. При этом рисунок загружается в два этапа. Атрибуты width (ширина) и height (высота) позволяют задать размеры рисунка в пикселах, атрибут border – ширину рамки в пикселах, а атрибуты vspace и hspace – размеры вертикального и горизонтального зазоров между границами изображения и другими элементами документа. Для обращения к свойствам объекта image используется следующий синтаксис: document.images[i].propertyName где i – индекс элемента массива, который соответствует нужному рисунку. Первым рисунком в документе будет document.images[0]. Массив images является свойством объекта document, поэтому при обращении к рисунку необходим префикс document к имени массива. Тег не имеет атрибута name, поэтому выражение вида "document.imgName" приведет к ошибке. 123

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Свойства Все свойства объектов image соответствуют атрибутам тега , за исключением свойства complete. Эти свойства, кроме свойств src и lowsrc, значения которых могут быть изменены динамически, имеют значения только для чтения: src – соответствует атрибуту src тега ; lowsrc – соответствует атрибуту lowsrc тега ; height – соответствует атрибуту height тега ; width – соответствует атрибуту width тега ; border – соответствует атрибуту border тега ; vspace – соответствует атрибуту vspace тега ; hspace – соответствует атрибуту hspace тега ; complete – содержит булево значение, которое указывает, загружен рисунок в браузер или нет (true – загружен, false – нет); type – для объектов image содержит значение "image". Перед загрузкой рисунка появляется его рамка, внутри которой отображается строка, заданная в атрибуте alt (в версии 5 и выше IE, пользователь при желании может отключить рамки с altтекстом отображаемые в момент загрузки рисунка). Рисунок можно изменять динамически, присваивая атрибуту src или lowsrc в качестве значения новый адрес URL Методы и обработчики событий Объект image не имеет методов. Обработчики событий: – onAbort – обработка события, возникающего при прерывании загрузки рисунка, т.е. при нажатии клавиши [Esc] или активизации новой гиперсвязи, в то время, когда рисунок загружается; – onError – обработка события, связанного с ошибкой загрузки рисунка, т.е. когда невозможно найти рисунок по указанному адресу URL; – onLoad – соответствующее событие, инициализируется в начале загрузки рисунка. При загрузке анимированного GIF-а это событие возникает несколько раз и зависит от числа кадров анимационной последовательности.

124

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Объект link и массив links Объект link (гиперсвязь) отображается как участок текста или графического объекта, щелчок мыши на котором позволяет перейти к другому Web-ресурсу. Тег языка HTML имеет следующий вид:

linkText

Атрибут href определяет имя файла, или адрес URL для объекта, который загружается при активизации гиперсвязи. Атрибут name задает имя гиперсвязи, превращая ее в объект anchor (метку). С помощью атрибута target в определенный фрейм текущего фреймосодержащего документа можно загрузить документ, URL которого указан в значении атрибута href. Атрибут linkText представляет собой текст, отображаемый в HTML-документе как гиперсвязь, которая активизируется щелчком мыши. Для обращения к свойству объекта link используются выражения типа: document.links[i].propertyName где i – индекс данной связи в массиве гиперсвязей links текущего документа. Масив links В программе на языке JavaScript к гиперсвязям можно обращаться как к элементам массива links. Например, если в документе определены два тега < a href>, то в JS-программе к этим гиперсвязям можно обращаться с помощью выражений document.links[0] и document.links[1]. Синтаксис выражений для обращений к массиву links следующий: document.links[i] document.links.length где переменная i – индекс гиперсвязи. Значением свойства length является количество гиперсвязей в текущем документе. Объекты link представляют собой объекты только для чтения, поэтому динамически изменять гиперсвязи в документе нельзя. 125

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Свойства Для объекта link определены следующие свойства: hash – задает имя метки в адресе URL, если она существует; host – задает часть hostname:port адреса URL, определенного в гиперсвязи; hostname – задает имя хоста и домена (или IP-адрес) в адресе URL, определенном в гиперсвязи; href – задает полный адрес URL, определенный в гиперсвязи; pathname – задает часть адреса URL, которая описывает путь к документу и находится после части hostname:port; port – задает коммуникационный порт, который использует сервер; protocol – задает начало адреса URL, включая двоеточие, например http:; target – соответствует атрибуту target тега . Массив links имеет всего одно свойство, length, значением которого является количество гиперсвязей в текущем документе. Методы и обработчики событий Для объекта link методы не определены. В тегах могут использоваться обработчики событий щелчка мыши и ее перемещения – onClick и onMouseOver. Пример:



Где href="#"- означает ссылка на эту же страницу. OnMouseOver – "обработчик" вызывается, когда курсор мыши на ссылке; onMouseOut – "обработчик" вызывается, когда курсор мыши вне ссылки. Выводы. В результате изучения материала данной лекции получено представление о событиях, классах и объектах JavaScript. 126

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Изучены объекты их методы и свойства. Кроме того, рассмотрено назначение объектов array, date, math, anchor, image, link. Вопросы для самопроверки 1. Назначение объекта navigator. 2. Назначение объекта array. 3. Назначение объекта Date. 4. Назначение объекта Math 5. Назначение объекта anchor и массив anchors 6. Назначение объекта image и массив images 7. Назначение объекта link и массив links Литература: 7, 8.

127

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

План 1. Массив elements. 2. Объект form и массив forms. 3. Использование массива forms. 4. Объекты image и массив images. 5. Загрузка новых изображений. Упреждающая загрузка изображения.

Массив elements Массив elements содержит все элементы HTML-формы – контрольные переключатели (checkbox), селекторные кнопки (radiobutton), текстовые объекты (text) и другие, – в том порядке, в котором они определены в форме. Этот массив можно использовать для доступа к элементам формы в JS-программе по их порядковому номеру, не используя свойства name этих элементов. Массив elements, в свою очередь, является свойством объекта forms, поэтому при обращении к нему следует указывать имя формы, к элементу которой вы хотите обратиться: formName.elements[i] formName.elements[i].length Здесь formName может быть либо именем объекта form, определенным при помощи атрибута name в теге , либо элементом массива forms, например forms[i], где i – переменная, которая индексирует элементы массива. Значением свойства length является количество элементов, содержащихся в форме. Массив elemments включает данные только для чтения, т.е. динамически записать в этот объект какие-либо значения невозможно. Свойства Объект elements имеет только одно свойство, length, значением которого является количество элементов объекта form. document.forms[0].elements.length возвратит значение, соответствующее количеству элементов в первой форме текущего документа.

128

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Пример Создадим пару элементов, например поля ввода для имени и адреса: Имя: Адрес: Нажав на эту кнопку, можно увидеть элементы формы, назовем ее "Форма для примера". Третьим элементом будет кнопка, вызывающая функцию на JavaScript. Она также находится в данной форме. Теперь рассмотрим текст этой программы:



Имя:

Адрес:






129

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Рис. 71. Результат работы кода

Здесь функция перебирает все элементы массива elements заданной формы, в данном примере их три, формирует строку formEl, содержащую информацию об элементах данного массива. IE покажет здесь в виде "n:[object]" то есть этот браузер не содержит в массиве elements строки с информацией об объекте формы. Созданная строка (для удобства читаемости разделена "переводом строки \n" ) выводится в окне предупреждения с помощью метода alert(). Функция showEl() вызывается с аргументом this.form, который обращается к текущей форме. Если оператор this опустить, то из функции showEl() к форме придется обращаться с помощью выражения document.forms[n], – это не очень удобно, так как мы обращаемся из текущей формы. Объект form и массив forms Форма – это область гипертекстового документа, которая создается при помощи контейнера . . . и содержит элементы, позволяющие пользователю вводить информацию. Многие HTML-теги, например теги, определяющие поля ввода (text field), области текста (textarea), контрольные переключатели (checkbox), селекторные кнопки (radio button) и списки (selection 130

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

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

Здесь атрибут name – строка, определяющая имя формы. Атрибут target задает имя окна, в котором должны обрабатываться события, связанные с изменением элементов формы. Для этого требуется наличие окна или фрейма с заданным именем. В качестве значений данного атрибута могут использоваться и зарезервированные имена _blank, _parent, _self и _top. Атрибут action задает адрес URL сервера, который будет получать данные из формы и запускать соответствующий CGIскрипт. Также можно послать данные из формы по электронной почте, указав при этом значения этого атрибута адрес URL типа mailto: . . . Формы, передаваемые на сервер, требуют задания метода передачи (submission), который указывается при помощи атрибута method. Метод GET присоединяет данные формы к строке адреса URL, заданного в атрибуте action. При использовании метода POST информация из формы посылается как отдельный поток данных. В последнем случае CGI-скрипт на сервере считывает эти данные из стандартного входного потока (standard input stream). Кроме того, на сервере устанавливается переменная среды с именем QUERY_STRING, что обеспечивает еще один способ получения этих данных. Атрибут enctype задает тип кодировки MIME (Multimedia Internet Mail Extensions) для посылаемых данных. Типом MIME по умолчанию является тип application/x-wwwform-urlencoded. 131

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

К свойствам и методам формы в JavaScript-прграмме можно обратиться одним из способов: formName.propertyName formName.methodName (parameters) forms[i].propertyName forms[i].methodName (parameters) Здесь formName соответствует атрибуту name объекта form, а i является целочисленной переменной, используемой для обращения к отдельному элементу массива forms, который соответствует определенному тегу текущего документа. Использование массива forms К любой форме текущего гипертекстового документа можно обращаться как к элементу массива forms. Для этого необходимо указать индекс запрашиваемой формы. Например, forms[0] – первый тег в текущем документе. document.forms[i] document.forms.length document.forms['name'] Переменная i – это индекс, соответствующий запрашиваемой форме. Выражение вида document.forms[i] можно также присвоить переменной var myForm = document.forms[i]; Теперь, если в форме имеется, к примеру, поле ввода, определенное в HTML-теге

...

то в JS-программе к этому полю позволяет обращаться переменная myForm. В частности, при помощи следующего оператора содержимое данного поля ввода присваивается новой переменной с именем result: var result = myForm.myField.value; Значение свойства length соответствует количеству форм в документе: 132

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

var numForms = document.forms.length Массив forms содержит данные, которые используют только для чтения. Свойства Объект form имеет шесть свойств, большинство из них соответствуют атрибутам тега : action – соответствует атрибуту action; elements – массив, содержащий все элементы формы; encoding – соответствует атрибуту enctype; length – количество элементов в форме; method – соответствует атрибуту method; target – соответствует атрибуту target. Массив forms имеет только одно свойство length – количество форм в документе. Методы Метод submit() применяется для передачи формы из JavaScript-программы. Его можно использовать вместо тега , имеющегося в большинстве форм, информация которых должна передаваться на сервер. Обработчики событий Обработчик события onSubmit() позволяет перехватывать события, связанные с передачей данных формы. Такие события возникают либо после нажатия кнопки передачи данных, определенной тегом в контейнере , либо при передаче данных формы с помощью метода submit(), вызванного из JS-прграммы. Пример В следующем примере при нажатии кнопки передачи данных содержимое текстового поля посылается адресату по электронной почте: Вот текст этой программы:



133

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Работа с изображениями В браузере рисунки рассматриваются как объекты image, а все рисунки, содержащиеся в текущем документе, помещаются в массив images, который можно использовать для обращения к любому рисунку, определяемому тегом . В частности, можно динамически обновлять изображения, изменяя их свойство src. Примеров тому в интернете очень много. Для начала приведем тег , распишем полностью:

В атрибуте src содержится имя или адрес URL файла, который нужно вывести в документе. Рисунок должен храниться в формате GIF, JPEG, или PNG. С помощью атрибута alt задается альтернативный текст, появляющийся на экране: в момент загрузки текста, если пользователь заблокировал вывод изображений и поясняющая надпись под курсором мыши. Атрибут lowsrc позволяет предварительно выводить на экран изображение с низким разрешением. При этом рисунок загружается в два этапа. Атрибуты width (ширина) и height (высота) позволяют задать размеры рисунка в пикселах, атрибут border – ширину рамки в пикселах, а атрибуты vspace и hspace – размеры вертикального и горизонтального зазоров между границами изображения и другими элементами документа. Для обращения к свойствам объекта image используется следующий синтаксис: document.images[i].propertyName 134

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

где i – индекс элемента массива, который соответствует нужному рисунку. Первым рисунком в документе будет document.images[0]. Массив images является свойством объекта document, поэтому при обращении к рисунку необходим префикс document к имени массива. Тег не имеет атрибута name, поэтому выражение вида "document.imgName" приведет к ошибке. Свойства Все свойства объектов image соответствуют атрибутам тега , за исключением свойства complete. Эти свойства, кроме свойств src и lowsrc, значения которых могут быть изменены динамически, имеют значения только для чтения: src – соответствует атрибуту src тега ; lowsrc – соответствует атрибуту lowsrc тега ; height – соответствует атрибуту height тега ; width – соответствует атрибуту width тега ; border – соответствует атрибуту border тега ; vspace – соответствует атрибуту vspace тега ; hspace – соответствует атрибуту hspace тега ; complete – содержит булево значение, которое указывает, загружен рисунок в браузер или нет (true – загружен, false – нет); type – для объектов image содержит значение "image". Перед загрузкой рисунка появляется его рамка, внутри которой отображается строка, заданная в атрибуте alt (в версии 5 и выше IE, пользователь при желании может отключить рамки с altтекстом отображаемые в момент загрузки рисунка). Рисунок можно изменять динамически, присваивая атрибуту src или lowsrc в качестве значения новый адрес URL. Методы и обработчики событий Объект image не имеет методов. Обработчики событий: onAbort – обработка события, возникающего при прерывании загрузки рисунка, т.е. при нажатии клавиши [Esc] или активизации новой гиперсвязи, в то время, когда рисунок загружается; onError – обработка события, связанного с ошибкой загрузки рисунка, т.е. когда невозможно найти рисунок по указанному адресу URL; 135

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

onLoad – соответствующее событие, инициализируется в начале загрузки рисунка. При загрузке анимированного GIF-а это событие возникает несколько раз и зависит от числа кадров анимационной последовательности. Рассмотрим, как из JavaScript можно адресоваться к изображениям, представленным на web-странице. В рассматриваемом языке все изображения предстают в виде массива. Массив этот называется images и является свойством объекта document. Каждое изображение на web-странице получает порядковый номер: первое изображение получает номер 0, второе – номер 1 и т.д. Таким образом, к первому изображению мы можем адресоваться, записав document.images[0]. Каждое изображение в HTML-документе рассматривается в качестве объекта Image. Объект Image имеет определенные свойства, к которым и можно обращаться из языка JavaScript. Например, можно определить, который размер имеет изображение, обратившись к его свойствам width и height. То есть по записи document.images[0].width Можно определить ширину первого изображения на webстранице (в пикселах). К сожалению, отслеживать индекс всех изображений может оказаться затруднительным, особенно если на одной странице их довольно много. Эта проблема решается назначением изображениям своих собственных имен. Так, если вводится изображение с помощью тэга

то можно обращаться к нему, написав document.myImage или document.images["myImage"]. Загрузка новых изображений Если необходимо осуществлять смену изображений на webстранице, то для этого нам понадобится атрибут src. Как и в случае тэга , атрибут src содержит адрес представленного изображения. в языке JavaScript имеется возможность назначать новый адрес изображению, уже загруженному в web-страницу, и в результате, изображение будет загружено с этого нового адреса, заменив на web-странице старое. Рассмотрим к примеру запись:

136

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Здесь загружается изображение img1.gif и получает имя myImage. В следующей строке прежнее изображение img1.gif заменяется уже на новое – img2.gif: document.myImage.src= "img2.src"; При этом новое изображение всегда получает тот же размер, что был у старого. И уже невозможно изменить размер поля, в котором это изображение размещается. Упреждающая загрузка изображения Один из недостатков такого подхода может заключаться в том, что после записи в src нового адреса начинает процесс загрузки соответствующего изображения. И поскольку этого не было сделано заранее, то еще пройдет некоторое время, прежде чем новое изображение будет передано через Интернет и встанет на свое место. В некоторых ситуациях это допустимо, однако часто подобные задержки неприемлемы. И что же мы можем сделать с этим? Конечно, решением проблемы была бы упреждающая загрузка изображения. Для этого мы должны создать новый объект Image. Рассмотрим следующие строки: hiddenImg= new Image(); hiddenImg.src= "img3.gif"; В первой строке создается новый объект Image. Во второй строке указывается адрес изображения, которое в дальнейшем будет представлено с помощью объекта hiddenImg. Как мы уже видели, запись нового адреса в атрибуте src заставляет браузер загружать изображение с указанного адреса. Поэтому, когда выполняется вторая строка нашего примера, начинает загружаться изображение img2.gif. Но как подразумевается самим названием hiddenImg ("скрытая картинка"), после того, как браузер закончит загрузку, изображение на экране не появится. Оно будет лишь будет сохранено в памяти компьютера (или точнее в кэше) для последующего использования. Чтобы вызвать изображение на экран, мы можем воспользоваться строкой: document.myImage.src= hiddenImg.src;

137

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Но теперь изображение уже немедленно извлекается из кэша и показывается на экране. Таким образом, сейчас мы управляли упреждающей загрузкой изображения. Конечно браузер должен был к моменту запроса закончить упреждающую загрузку, чтобы необходимое изображение было показано без задержки. Поэтому, если необходимо предварительно загрузить большое количество изображений, то может иметь место задержка, поскольку браузер будет занят загрузкой всех картинок. Необходимо учитывать скорость связи с Интернет – загрузка изображений не станет быстрее, если пользоваться только что показанными командами. Мы лишь пытаемся чуть раньше загрузить изображение – поэтому и пользователь может увидеть их раньше. В результате и весь процесс пройдет более гладко. Эффективное создание баннеров Реклама в баннерных сетях является, наверное, одним из популярнейших способов раскрутки интернет проектов. Баннер – это графический файл, который размещается на странице сайта и который имеет ссылку на другую web-страницу. Баннеры имеют разные размеры. Основной единицей измерения при этом являются пиксели. Вот наиболее известные размеры: 468x60, 120x60, 100x100, 88x31. Существуют и другие, но менее известные размеры баннеров. Как нетрудно догадаться, чем больше баннер, тем он эффективнее. Очень важным является размер (объем) самого файла баннера. Обычно, принято, чтобы размер баннера был не более 15Kb. Конечно, с введением новых форматов (flash) достичь этого будет уже невозможно. Существуют следующие способы баннерной рекламы:  Участие в баннерообменных системах.  Прямая договоренность между web-мастерами сайтов об обмене баннерами между собой.  Покупка показов баннеров на других сйтах или в баннерообменных системах. Остановимся подробнее на баннерообменых системах. Баннерообменные системы – это службы которые позволяют автоматизировать взаимообмен и показ баннеров между различными сайтами – участниками системами. Как происходит данный процесс. Зарегистрировавшись в системе баннерообмена, вы загружаете в 138

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

нее свой баннер и вставляете в свои страницы (в которых хотите показывать чужие баннеры) специальный код. Каждый раз, когда данные страницы загружаются, на них показываются баннеры чужих сайтов. Каждый показ баннера учитывается на вашем внутреннем счете (аккаунт) в системе. Но не все показы чужих баннеров засчитываются вам. Система оставляет себе комиссию за предоставленную вам услугу. Это примерно 10%-20%. Остальные показы вы можете тратить по своему усмотрению. Можете их накапливать, (некоторые системы выкупают свои показы). Можете тратить их на показы своих баннеров на чужих сайтах. В некоторых баннеророобменных системах предусмотрен таргетинг. Таргетинг – это возможность выбора условий показа вашего баннера на чужих сайтах – участниках системы. Это может быть выбор сайтов определенной тематики, определение времени показа, количества показов и многое другое. Но, к сожалению, не все баннерообменные системы принимают сайты с малым посещением. У многих таких систем существуют планки, при которых ваш сайт может быть принят в систему. Например, не менее 100 показов чужих баннеров в день. Ссылки на некоторые баннерообменные системы находятся на странице Баннерный обмен. Основным показателем в баннерной рекламе является отклик или эффективность баннера. Коротко отклик обозначается CTR (click/through ratio). Данное число высчитывается в процентах. Так если CTR = 2%, то это значит, что только на 2% из всего количества показанных баннеров кликнули. Сейчас, средним CTR считается 2%, но на самом деле, на практике получается еще меньше. Но есть, некоторые советы, следуя которым можно хоть как-то увеличить CTR баннеров. Сначала советы по созданию баннеров: Следует сразу определиться, чего необходимо добиться от показов данного баннера. Хотите ли вы просто увеличить посещаемость сайта или хотите привлечь целевого посетителя. Если же вам нужен целевой посетитель, то и баннер должен быть соответственно оформлен. Он должен давать точное представление, о чем идет речь. Как уже было сказано, чем больше размер баннера, тем выше его эффективность. На иностранных сайтах, например, сейчас популярны баннеры – небоскребы. Точного их размера сказать вам 139

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

не смогу, но примерно это 120x700. В некоторых российских баннерных системах также практикуется работа с данными банерами. Несмотря на кажущуюся эффективность большеформатных баннеров, у них есть и отрицательные стороны. Так чем больше баннер, тем больше его размер, тем дольше загружается страница с таким баннером. Возникает вероятность, что баннер не успеет загрузиться на страничку, а пользователь уже уйдет с нее. Особенно это касается, на мой взгляд, модных сейчас flash баннеров. Конечно, flash баннеры – это новое слово в баннеростроении, но их большой размер (объем) напрочь отбивает желание связываться с ними. Использование анимации увеличивает отклик баннеров. Использование в оформлении баннера стандартных элементов windows, таких как полосы прокрутки, кнопки и др. также увеличивают его эффективность. Теперь советы по размещению баннеров: Отклик баннера расположенного на самом верху выше, нежели отклик баннера расположенного в самом низу страницы. Баннер расположенный на 1/3 ниже от верха экрана дает CTR на 70% больше, чем баннер расположенный в само верху. Баннер не стандартного размера (125x125), расположенный в нижнем правом углу первого экрана страницы (пользователь не должен скроллировать страницу чтобы увидеть баннер) дает CTR на 228% больше, чем стандартный баннер (468x60), расположенный самом верху. Используйте ALT в теге IMG (если вы не пользуетесь баннерообменными сетями). Многие пользователи отключают графику. Текст размещенный над и под баннером, увеличивает его эффективность. Изменение изображений в связи с событиями, инициируемыми пользователем Можно создавать красивые эффекты, используя смену изображений в качестве реакции на определенные события. Например, можное изменять изображения в тот момент, когда курсор мыши попадает на определенную часть страницы. Проверьте, как работает следующий пример, просто поместив курсор мыши на картинку. 140

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Исходный код этого примера выглядит следующим образом:

При этом могут возникнуть следующие проблемы:  пользователь пользуется браузером, не имеющим поддержки JavaScript 1.1.  второе изображение не было загружено.  для этого мы должны писать новые команды для каждого изображения на web-странице.  мы хотели бы иметь такой скрипт, который можно было бы использовать во многих web-страницах вновь и вновь, и без больших переделок. Теперь мы рассмотрим полный вариант скрипта, который мог бы решить эти проблемы. Чтобы этот скрипт сохранял свою гибкость, следует соблюдать два условия:  не оговаривается количество изображений – не должно иметь значения, сколько их используется, 10 или 100  не оговоривается порядок следования изображений – должна существовать возможность изменять этот порядок без изменения самого кода Рассмотрим скрипт:









Данный скрипт помещает все изображения в массив pics. Создает этот массив функция preload(), которая вызвается в самом начале. Вызов функции preload() выглядит просто как: 143

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

preload("link1", "img1f.gif", "img1t.gif"); Это означает, что скрипт должен загрузить с сервера два изображения: img1f.gif и img1t.gif. Первое из них – это та картинка, которая будет представлена, пока курсор мыши не попадает в область изображение. Когда же пользователь помещает курсор мыши на изображение, то появляется вторая картинка. При вызове функции preload() в качестве первого аргумента мы указываем слово "link1" и тем самым задаем на web-странице объект Image, которому и будут принадлежать оба предварительно загруженных изображения. Если посмотретье в нашем примере в раздел , то обнаруживается изображение с тем же именем link1. Мы пользуем не порядковый номер, а именно имя изображения для того, чтобы иметь возможность переставлять изображения на webстранице, не переписывая при этом сам скрипт. Обе функции on() и off() вызываются посредством программ обработки событий onMouseOver и onMouseOut. Поскольку сам элемент image не может отслеживать события MouseOver и MouseOut, то мы обязаны сделать на этих изображениях еще и ссылки. Можно видеть, что функция on() возвращает все изображения, кроме указанного, в исходное состояние. Делать это необходимо потому, что в противном случае выделеными могут оказаться сразу несколько изображений (дело в том, что событие MouseOut не будет зарегистрировано, если пользователь переместит курсор с изображения сразу за пределы окна). Изображения – без сомнения могучее средство уличшения web-страницы. Объект Image дает возможность создавать действительно сложные эффекты. Однако заметим, что не всякое изображение или программа JavaScript способно улучшить страницу. Не количество изображений делает web-страницу привлекательной, а их качество. Выводы. В результате изучения материала данной лекции получены представления о назначении массива elements, объекта form, массива forms. Изучены объект image и массив images, а также способы загрузки новых изображений. Вопросы для самопроверки 1. Назначение массива elements? 144

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

2. 3. 4. 5. 6.

Назначение объекта form и массив forms? Использование массива forms. Назначение объекта image и массив images. Какие способы загрузки новых изображений существуют? Что такое упреждающая загрузка изображения.

Литература: 7, 8.

145

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

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

146

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

1. Web-технологии. Кемерово: КемГУКИ, 2014. 104 с. 2. Брокшмидт К. Введение в разработку приложений для Windows 8 с использованием HTML, CSS и JavaScript. 2-е изд., испр. М.: Национальный Открытый Университет «ИНТУИТ», 2016. 460 с. 3. Брокшмидт К. Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript. 2-е изд., исправ. М.: Национальный Открытый Университет «ИНТУИТ», 2016. 396 с. 4. Информационные Web-технологии / Ю. Ю. Громов, О. Г. Иванова, Н. Г. Шахов, В. Г. Однолько: учебное пособие Электронный ресурс: Тамбовский государственный технический университет, ЭБС АСВ. Тамбов, 2014. 96 c. 5. Крис Миллз. Введение в HTML5: учебное пособие. М.: Интернет-Университет Информационных Технологий (ИНТУИТ), 2016. 133 с. 6. Савельев А. О. HTML5. Основы клиентской разработки / А. О. Савельев; А. А. Алексеев. 2-е изд., испр. М.: Национальный Открытый Университет «ИНТУИТ», 2016. 272 с. 7. Бибо Б. JQUERY: подробное руководство по продвинутому JavaScript / Бер Бибо, Иегуда Кац; [пер. с англ. А. Киселева]. 2-е изд. СПб.: Символ-Плюс; М.: [б.и.], 2011. 612 с.: ил.; 24. 8. Вейнер П. Java и JavaScript / П. Вейнер; перев. М Кузьмин. М.: Лори, 2006. 242 с.: ил.

147

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

1. Основные сведения об Интернет . . . . . . . . . . . . . . . . . 2. Основные сведения о языке HTML. Основы создания web-страниц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3. HTML. Гиперссылки. Внедрение изображений . . . . . 4. HTML. Таблицы. Формы в HTML . . . . . . . . . . . . . . . . 5. Технология CSS. Проектирование структуры web-сайта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6. Внедрение объектов JavaScript в HTML-документ. Базовые конструкции языка JavaScript . . . . . . . . . . . . . . . . . . 7. Основы объектно-ориентированного программирования в JavaScript. Потомки объектов JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8. Основы объектно-ориентированного программирования в JavaScript. Потомки объектов JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9. Работа с формами в JavaScript. Работа с изображениями на web-странице . . . . . . . . . . . . . . . . . . . . .

4

Заключение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Литература . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

148

21 35 43 65 83

99

110 128 146 147

Copyright ООО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»

Учебное издание

Говорова Светлана Владимировна

WEB-ТЕХНОЛОГИИ УЧЕБНОЕ ПОСОБИЕ (КУРС ЛЕКЦИЙ) Часть 1

Издается в авторской редакции Компьютерная верстка Н. Неговора _________________________________________________________ Подписано в печать 12.07.2019 Формат 60х84 1/16 Усл. п. л. 8,66 Уч.-изд. л. 7,13 Бумага офсетная Заказ 50 Тираж 20 экз. _________________________________________________________ Отпечатано в издательско-полиграфическом комплексе ФГАОУ ВО «Северо-Кавказский федеральный университет» 355029 г. Ставрополь, пр-т Кулакова, 2

149