Web-технологии

Citation preview

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

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

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

Ставрополь 2019

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

УДК 004.77 (075.8) ББК 22.18 я73 В 26

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

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

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

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

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

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

3

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

1. ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА HTML. ОСНОВНЫЕ ПОНЯТИЯ Цель работы: ознакомить студентов с основными понятиями языка HTML, структурой HTML-документа, обязательными метками, комментариями, способами форматирования текста, физическими и логическими стилями, приобретение навыков создания простейших статических Webдокументов. Знания, умения и владения, приобретаемые обучающимися в результате освоения темы, в рамках формируемых компетенций: знать: Обладает знаниями для использования программных средств для решения практических задач, знаниями для разработки модели компонентов информационных систем, включая модели баз данных и модели интерфейсов «человек – электронно-вычислительная машина»; уметь: Умеет осваивать методики использования программных средств для решения практических задач, умеет разрабатывать модели компонентов информационных систем, включая модели баз данных и модели интерфейсов «человек – электронно-вычислительная машина»; владеть: Владеет способностью осваивать методики использования программных средств для решения практических задач, разрабатывать модели компонентов информационных систем, включая модели баз данных и модели интерфейсов «человек – электронно-вычислительная машина».

Теоретическая часть Основы языка разметки гипертекста – HTML Базовым элементом языка разметки гипертекста является – ТЕГ (дескриптор, маркер). Тег всегда заключен между скобками < > и имеет следующий вид: "); document.write("Hello, world!"); document.write(""); В параметре SRC вышеприведенного примера задано только имя файла, так как он находится в том же каталоге, что и ссылающийся на него файл документа HTML. Однако можно указать и относительный путь, и полный адрес URL, например:

JavaScript Test

128

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

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

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

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

Hello, world!

JavaScript Test

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

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

Пример 6

Hello, world!

JavaScript Test

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

Hello world! 131

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

JavaScript Test Select me!

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

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

2. Компьютер рекомендуется подключать к отдельной розетке. Розетка, используемая для подключения компьютер должна быть трехполюсной. 3. Запрещается приступать к работе при: а) обнаружении неисправности оборудования; б) отсутствии защитного заземления устройств. 4. Пользователю ПК во время работы запрещается: а) касаться одновременно экрана монитора и клавиатуры (возможен разряд повышенного электростатического потенциала); б) прикасаться к задней панели системного блока; в) производить переключения интерфейсных кабелей периферийных устройств при включенном питании; г) производить отключение питания во время выполнения задачи. 5. Категорически запрещается работать с ПК при снятом корпусе; оставлять включенный ПК без присмотра; самостоятельно вскрывать корпус ПК. Задания 1. Измените последний пример так, чтобы диалоговая панель возникала не при наведении курсора мыши, а при выборе ссылки (событие onClick). 2. Измените пример так, чтобы при наведении курсора мыши на ссылку, выполнялась бы процедура, выводящая в окно браузера фразу "Hello, word!". 3. Напишите скрипт, который сначала выводит на экран диалоговое окно, а затем, после нажатия кнопки "ОК", в окне браузера пишет фразу "Hello, world!". 4. Напишите скрипт, который запрашивает у пользователя информацию, а затем выводит ее в диалоговом окне. 5. Составьте документ так, чтобы диалоговое окно для ввода информации предлагалось только после наведения курсора мыши на ссылку, и введенная пользователем текстовая строка выводилась бы в виде диалогового окна, или в окно браузера. 6. Написать скрипт, реализующий сложение двух чисел по щелчку на кнопке

133

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

Содержание отчета и его форма Отчет должен иметь форму согласно оформлению простого реферата. Титульный лист должен включать: название дисциплины, название лабораторной работы, фамилию и инициалы студента, номер группы, фамилию и инициалы преподавателя. Основная часть лабораторной работы должна содержать: – вариант вашего задания; – распечатку страниц выполненного задания; – выводы по проделанной работе. Защита работы Защита работы заключается: – в выполнении варианта своего задания и оформления отчета в соответствии с подпунктом «Содержание отчета и его форма»; – демонстрации преподавателю выполненного задания; – в ответах на контрольные вопросы по лабораторной работе; – в ответах на дополнительные вопросы по лабораторной работе и дисциплине «Основы работы в Web-среде». Контрольные вопросы 1. Расскажите способы использования JavaScript внутри HTML-документа. 2. Использование JavaScript внутри HTML-документа с помощью оператора

JavaScript Test

Message:


138

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

Здесь сразу после загрузки документа вызывается функция printHello. В теле этой функции, в свою очередь, вызывается функция printNString, которой передаются два параметра. Через первый параметр этой функции передается текстовую строка szHelloMsg, а через второй – количество повторов этой строки при выводе. Вывод строки выполняется функцией printNString в цикле. Оборудование и материалы 1. Компьютерный класс общего назначения с конфигурацией ПК не хуже рекомендованной для ОС Windows 7. Указания по технике безопасности 1. Перед началом работы пользователь ПК обязан проверить, чтобы все кабели питания находились как можно дальше в компактном положении с тыльной стороны рабочего места. 2. Компьютер рекомендуется подключать к отдельной розетке. Розетка, используемая для подключения компьютер должна быть трехполюсной. 3. Запрещается приступать к работе при: а) обнаружении неисправности оборудования; б) отсутствии защитного заземления устройств. 4. Пользователю ПК во время работы запрещается: а) касаться одновременно экрана монитора и клавиатуры (возможен разряд повышенного электростатического потенциала); б) прикасаться к задней панели системного блока; в) производить переключения интерфейсных кабелей периферийных устройств при включенном питании; г) производить отключение питания во время выполнения задачи. 5. Категорически запрещается работать с ПК при снятом корпусе; оставлять включенный ПК без присмотра; самостоятельно вскрывать корпус ПК. Задания 1. Напишите скрипт, который запрашивает два числа и выводит в окне браузера наибольшее из них. 2. Напишите скрипт, который запрашивает номер месяца и выводит название времени года. 3. Напишите скрипт, который отображает диалоговое окно с кнопками "Ок" и "Отмена" (функция confirm) и выводит в окно 139

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

браузера сообщение о том, какая из кнопок была нажата (используйте конструкцию if(confirm("Сообщение")) ... ) 4. Напишите скрипт, запрашивающий количество учащихся студенческой группы и в соответствии с этим количеством – их фамилии и имена. Фамилии и имена необходимо отобразить в окне браузера. 5. Напишите скрипт, который запрашивает фамилии и имена до тех пор, пока пользователь в окне ввода не нажмет кнопку "Отмена". Фамилии и имена необходимо отобразить в окне браузера. 6. Напишите скрипт, выводящий в окно браузера таблицу умножения 7. Создайте скрипт, который выводил бы на странице горизонтальные линии разной длины; 8. Создайте скрипт, который выводил бы на странице таблицу умножения; 9. Создайте скрипт, который выводил бы на странице таблицу перевода температуры из градусов по шкале цельсия (с) в градусы по шкале фаренгейта (f) по формуле f = 1.8c + 32 для значений температуры от 0 до 30 ос с шагом 1 ос; 10. Создайте скрипт, который выводил бы на странице таблицу соответствия между весом в фунтах и весом в килограммах для значений от 1 до 30 фунтов с шагом 1, считая, что 1 фунт=0,4 кг. 11. Создайте скрипт, который выводил бы на странице таблицу перевода значений длины в метрах в фунты по формуле m = 0,33f. 12. Создайте скрипт, который выводил бы на странице таблицу значений плотности воздуха h, которая убывает по закону p=p0*e-hz, считая, что p0=1,29 кг/м3, z=0, 000125, высота изменяется от 0 до 1000 м с шагом 100 м; 13. Создайте скрипт, который выводил бы на странице таблицу перевода 1, 2, …, 40 долларов сша в рубли по текущему курсу; 14. Создайте скрипт, который выводил бы на странице таблицу стоимости товара в количестве 1, 2, …, 40 штук если одна штука стоит 25,4 рубля; 15. Создайте скрипт, который выводил бы на странице таблицу значений y для значений х, равных 0, 0.1, 0.2, …, 2, если y задается формулой y = 4х2 – 5.5х + 2;

140

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

16. Создайте скрипт, который выводил бы на странице таблицу значений факториала натурального числа n = 0, 1, 2, …, 30 (факториал 0 = 1). Содержание отчета и его форма Отчет должен иметь форму согласно оформлению простого реферата. Титульный лист должен включать: название дисциплины, название лабораторной работы, фамилию и инициалы студента, номер группы, фамилию и инициалы преподавателя. Основная часть лабораторной работы должна содержать: – вариант вашего задания; – распечатку страниц выполненного задания; – выводы по проделанной работе. Защита работы Защита работы заключается: – в выполнении варианта своего задания и оформления отчета в соответствии с подпунктом «Содержание отчета и его форма»; – демонстрации преподавателю выполненного задания; – в ответах на контрольные вопросы по лабораторной работе; – в ответах на дополнительные вопросы по лабораторной работе и дисциплине «Основы работы в Web-среде».

1. 2. 3. 4. 5. 6.

Контрольные вопросы Условный оператор if-else языка JavaScript Оператор for языка JavaScript. Оператор for-in языка JavaScript. Оператор while языка JavaScript. Оператор break языка JavaScript. Оператор continue языка JavaScript.

Литература: 2–6.

141

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

8. ОБЪЕКТНО-ОРИЕНТИРОВАННОЕ ПРОГРАММИРОВАНИЕ В JAVASCRIPT Цель работы: изучить основы объектно-ориентированного программирования в JavaScript Знания, умения и владения, приобретаемые обучающимися в результате освоения темы, в рамках формируемых компетенций: знать: Обладает знаниями для использования программных средств для решения практических задач, знаниями для разработки модели компонентов информационных систем, включая модели баз данных и модели интерфейсов «человек – электронно-вычислительная машина»; уметь: Умеет осваивать методики использования программных средств для решения практических задач, умеет разрабатывать модели компонентов информационных систем, включая модели баз данных и модели интерфейсов «человек – электронно-вычислительная машина»; владеть: Владеет способностью осваивать методики использования программных средств для решения практических задач, разрабатывать модели компонентов информационных систем, включая модели баз данных и модели интерфейсов «человек – электронно-вычислительная машина».

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

142

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





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

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

потерял фокус. Приведем некоторые примеры: Пример 1 < html> < body> Ссылка

< form> < input type=" text" size="45" value="Впишите свое имя и щелкните по другой строке" onBlur=" alert('Вы изменили ответ — уверены, что он правильный?');">

< form> < input TYPE=" text" size="45" value="Измените текст и щелкните по другой строке" onChange=" window. status='Текст был изменен';">



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

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

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

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

Объект Window обычно соответствует главному окну браузера и является объектом верхнего уровня в языке JavaScript, поскольку документы, собственно, и открываются в окне. Рассмотрим основные свойства Window: – defaultStatus – Выводимое по умолчанию сообщение в строке состояния в нижней части окна броузера – [windowName].defaultStatus – status – Устанавливает текст основного или временного сообщения в строке состояния – [windowName].status.

145

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

– 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]) – confirm – выводит на экран окна сообщения с кнопками Yes и No, и возвращает булевое значение true или false, в зависимости от нажатой кнопки – [window].confirm(ConfirmMessage) – setTimeout – Исполняет выражение по истечении указанного в миллисекундах промежутка времени – [window.]setTimeout(timerID)

Пример 2

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

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

Эти свойства определяются в теге. Рассмотрим основные свойства document: – 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), документ будет открыт для показа. 147

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

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

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

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

– 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 не существует и с обработчиками событий он не связан

Пример 4



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

149

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

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

Оборудование и материалы 1. Компьютерный класс общего назначения с конфигурацией ПК не хуже рекомендованной для ОС Windows 7. Указания по технике безопасности 1. Перед началом работы пользователь ПК обязан проверить, чтобы все кабели питания находились как можно дальше в компактном положении с тыльной стороны рабочего места. 2. Компьютер рекомендуется подключать к отдельной розетке. Розетка, используемая для подключения компьютер должна быть трехполюсной. 3. Запрещается приступать к работе при: а) обнаружении неисправности оборудования; б) отсутствии защитного заземления устройств. 4. Пользователю ПК во время работы запрещается: а) касаться одновременно экрана монитора и клавиатуры (возможен разряд повышенного электростатического потенциала); б) прикасаться к задней панели системного блока; в) производить переключения интерфейсных кабелей периферийных устройств при включенном питании; г) производить отключение питания во время выполнения задачи. 5. Категорически запрещается работать с ПК при снятом корпусе; оставлять включенный ПК без присмотра; самостоятельно вскрывать корпус ПК. Задания 1. Создать форму, которая будет иметь три элемента: поле ввода с просьбой ввести имя, при вводе которого в строке состояния должны появиться слова: «Впишите сюда свое имя»; два поля для флажков с вопросом о том, что больше нравится пользователю, мороженое или шоколад, которые должны отослать в строку состояния слова: «Вы выбрали...» и выбор пользователя; кнопку отправ151

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

ки данных, при нажатии на которую должно выскочить окно предупреждения, благодарящее пользователя за участие в опросе. 2. Создать документ, в котором располагалась бы кнопка, при нажатии выводящее диалоговое окно, которое открывает второй документ при нажатии на кнопку "Ok" и закрывает данный документ при нажатии на "Cancel" Содержание отчета и его форма Отчет должен иметь форму согласно оформлению простого реферата. Титульный лист должен включать: название дисциплины, название лабораторной работы, фамилию и инициалы студента, номер группы, фамилию и инициалы преподавателя. Основная часть лабораторной работы должна содержать: – вариант вашего задания; – распечатку страниц выполненного задания; – выводы по проделанной работе. Защита работы Защита работы заключается: – в выполнении варианта своего задания и оформления отчета в соответствии с подпунктом «Содержание отчета и его форма»; – демонстрации преподавателю выполненного задания; – в ответах на контрольные вопросы по лабораторной работе; – в ответах на дополнительные вопросы по лабораторной работе и дисциплине «Основы работы в Web-среде».

1. 2. 3. 4. 5. 6.

Контрольные вопросы Что такое события в JavaScript? Понятие классы и объекты в JavaScript. Объект Window, его свойства и методы. Объект history, его свойства и методы. Объект location, его свойства и методы. Объект document, его свойства и методы.

Литература: 2–6.

152

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

9. ВНУТРЕННИЕ ОБЪЕКТЫ JAVASCRIPT. ПОТОМКИ ОБЪЕКТОВ JAVASCRIPT Цель работы: изучить принципы работы с внутренними объектами JavaScript Знания, умения и владения, приобретаемые обучающимися в результате освоения темы, в рамках формируемых компетенций: знать: Обладает знаниями для использования программных средств для решения практических задач, знаниями для разработки модели компонентов информационных систем, включая модели баз данных и модели интерфейсов «человек – электронно-вычислительная машина»; уметь: Умеет осваивать методики использования программных средств для решения практических задач, умеет разрабатывать модели компонентов информационных систем, включая модели баз данных и модели интерфейсов «человек – электронно-вычислительная машина»; владеть: Владеет способностью осваивать методики использования программных средств для решения практических задач, разрабатывать модели компонентов информационных систем, включая модели баз данных и модели интерфейсов «человек – электронно-вычислительная машина».

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

Объект 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 не имеет. Методы Date. – getDate() Возвращает день месяца из объекта в пределах от 1 до 31 – getDay() Возвращает день недели из объекта: 0 – вс, 1 – пн, 2 – вт, 3 – ср, 4 – чт, 5 – пт, 6 – сб. 154

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

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

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

В 1-ом примере приведен HTML-документ, в заголовке которого выводится текущие дата и время.



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



Вероятно, вы успели заметить, что тег создается в JavaScript-программе, а закрывается уже в статическом тексте 156

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

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

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

– random() Возвращает псевдослучайное число между нулем и единицей. – round() Округление аргумента до ближайшего целого числа. – sin() Возвращает синус аргумента – sqrt() Возвращает квадратный корень аргумента – tan() Возвращает тангенс аргумента Объект String Объект string представляет собой последовательность символов, ограниченная одинарными или двойными кавычками. Обычно присваивают какой-то переменной строку и используют ее как объект для вызова свойств или методов. Например, s="internet", а свойство s.lenght (длина строки) вернет значение 8. Рассмотрим некоторые методы объекта: – Большинство методов соответствует тегам HTML: big(), fontcolor(arg), fontsize(arg), small(), strike(), sub(), sup() – 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)

158

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

– toLowerCase – Преобразует все символы строки к нижнему регистру – stringName.toLowerCase() – toUpperCase – Преобразует все символы строки к верхнему регистру – stringName.toUpperCase()

Оборудование и материалы 1. Компьютерный класс общего назначения с конфигурацией ПК не хуже рекомендованной для ОС Windows 7. Указания по технике безопасности 1. Перед началом работы пользователь ПК обязан проверить, чтобы все кабели питания находились как можно дальше в компактном положении с тыльной стороны рабочего места. 2. Компьютер рекомендуется подключать к отдельной розетке. Розетка, используемая для подключения компьютер должна быть трехполюсной. 3. Запрещается приступать к работе при: а) обнаружении неисправности оборудования; б) отсутствии защитного заземления устройств. 4. Пользователю ПК во время работы запрещается: а) касаться одновременно экрана монитора и клавиатуры (возможен разряд повышенного электростатического потенциала); б) прикасаться к задней панели системного блока; в) производить переключения интерфейсных кабелей периферийных устройств при включенном питании; г) производить отключение питания во время выполнения задачи. 5. Категорически запрещается работать с ПК при снятом корпусе; оставлять включенный ПК без присмотра; самостоятельно вскрывать корпус ПК. Задания 1. Найти максимальный элемент массива из 5 элементов. Результат вывести по щелчку на кнопке 2. Написать скрипт, содержащий текущее время и дату в текстовых полях время и дата. Попробуйте создать изображение работающих часов 159

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

3. Задан текст. Определить позицию первого символа "a" в тексте и вывести на экран строку, начиная с этого символа, длиной 3 символа Содержание отчета и его форма Отчет должен иметь форму согласно оформлению простого реферата. Титульный лист должен включать: название дисциплины, название лабораторной работы, фамилию и инициалы студента, номер группы, фамилию и инициалы преподавателя. Основная часть лабораторной работы должна содержать: – вариант вашего задания; – распечатку страниц выполненного задания; – выводы по проделанной работе. Защита работы Защита работы заключается: – в выполнении варианта своего задания и оформления отчета в соответствии с подпунктом «Содержание отчета и его форма»; – демонстрации преподавателю выполненного задания; – в ответах на контрольные вопросы по лабораторной работе; – в ответах на дополнительные вопросы по лабораторной работе и дисциплине «Основы работы в Web-среде».

1. 2. 3. 4. 5.

Контрольные вопросы Что такое внутренние объекты JavaScript. Объект Array. Объект Date. Объект Math. Объект String.

Литература: 2–6.

160

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. (High tech). – Алф. указ. 8. Вейнер П. Java и JavaScript / П. Вейнер; перев. М. Кузьмин. М.: Лори, 2006. 242 с.: ил.

161

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

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

4 15

Литература . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

161

162

36 70 97 124 135 142 152

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

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

WEB-ТЕХНОЛОГИИ УЧЕБНОЕ ПОСОБИЕ (ЛАБОРАТОРНЫЙ ПРАКТИКУМ)

Автор-составитель Говорова Светлана Владимировна

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

163