Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Задачи и упражнения по JavaScript. Учебное пособие
.pdf
Л.И. Кулькова, С.И. Салпагаров
Задачи и упражнения
по JavаScript
Рекомендовано УМО РАЕ по
классическому университетскому
и техническому образованию
в качестве учебного пособия
для студентов высших учебных
заведений, обучающихся по
направлениям подготовки: 080500 –
«Бизнес-информатика», 010200 –
«Математика и компьютерные
науки», 010300 – «Фундаментальная
информатика и информационные
технологии»
Москва
Российский университет дружбы народов
2018
УДК 004.43(075.8)
ББК 32.973.26-018.1
К90
Российского университета
У т в е р ж д е н о
РИС Ученого совета
дружбы народов
Рецензенты:
доктор педагогических наук, профессор кафедры прикладной математики
ФГБОУ ВО «Московский государственный
психолого-педагогический университет» М.Г. Сорокова;
заместитель руководителя Исследовательского центра искусственного
интеллекта ИПС им. А.К. Айламазяна РАН
кандидат физико-математических наук А.Н. Виноградов
Кулькова, Л. И.
К90 Задачи и упражнения по JavaScript : учебное пособие /
Л. И. Кулькова, С. И. Салпагаров. – Москва : РУДН, 2018. –
100 с. : ил.
Пособие содержит практический материал по основным разделам
курса JavaScript. Каждый раздел сопровождается списком заданий и
упражнений, представляющих практический интерес.
Предназначено для студентов профильных специальностей второго
и третьего курсов в соответствии с ФГОС ВПО 3-го поколения.
ISBN 978-5-209-08646-8 © Кулькова Л.И., Салпагаров С.И., 2018
© Российский университет
дружбы народов, 2018
ГЛАВА 1
СОЗДАНИЕ САЙТОВ
С ПОМОЩЬЮ ЯЗЫКА HTML
1.1. Основные понятия HTML
HyperText Markup Language (HTML) – это язык гипертекстовой разметки документа. Проще говоря, это язык для
написания web-страниц. Читая код HTML, веббраузер выводит на экран монитора содержимое web-страницы.
Код на языке HTML состоит из тегов. Тег – это оформленная единица HTML-кода. Весь текст HTML-документа
расположен между тегами <html> и </html>. HTML-документ
состоит из двух разделов – заголовка (между тегами <head> и
</head>) и содержательной части, которая располагается
между тегами <body> и </body>. Раздел HEAD содержит техническую информацию о странице – заголовок, ее описание и
ключевые слова для поисковых машин, данные об авторе и
времени создания страницы, базовом адресе страницы, кодировке и т.д.
В разделе BODY располагается все содержимое документа. Большинство тегов должны находиться именно между
тегами <body> и </body>. С помощью тегов описывается вся
структура документа. Теги выделяются угловыми скобками
"<" и ">", между которыми указывается имя тега. Большинство тегов являются парными, т.е. для открывающего тега
<имя> есть соответствующий ему закрывающий </имя>. Закрывающий тег отличается наличием косой черты ("/") перед
его именем. Действие тега распространяется от открывающего тега до его закрывающего. Теги пересекаться не могут,
они могут быть только вложенными. Например, такой код использовать нельзя:
<p><i>Текст</p></i>
3
Есть также теги, вообще не имеющие закрывающего
тега. Некоторые теги могут иметь параметры или атрибуты.
Параметры указываются после имени тега через пробел в формате параметр="значение". Если параметров несколько, то
они перечисляются через пробел.
Тег Body имеет следующие параметры:
Bgcolor задает цвет фона Web-страницы. Значением
этого параметра могут быть либо названия цветов,
например red, black и т.д., либо цвет задается комбина-
цией шестнадцатиричных цифр в цветовой модели RGB,
перед которыми добавляется символ "#", например, зна-
чение #FF0000 соответствует красному цвету.
Background позволяет задать фоновый рисунок доку-
мента путем указания URL-адреса изображения.
Alink определяет цвет активной ссылки.
Link устанавливает цвет еще непросмотренных ссылок.
Vlink определяет цвет уже просмотренных ссылок.
1.2. Работа с текстом
Тег Basefont позволяет задать базовый размер шрифта во всем
документе и не имеет конечного тега. Имеет атрибут Size.
Size имеет значение по умолчанию равное 3 значение
–1 означает размер на один меньший, чем по умолчанию,
значение +1 задает размер на один больший.
Тег Font выделяет особым шрифтом фрагмент текста. Имеет
атрибуты Size, Face и Color.
Size определяет размер шрифта. Имеет значения от 1 до
7. Значение со знаком задает размер относительно раз-
мера, установленного тегом Basefont.
Faceзадает название шрифта. Если в этом атрибуте пе-
речисляют несколько шрифтов, то записывают их через
запятую.
Colorопределяет цвет текста документа.
4
Для выделения фрагментов текста курсивом, подчеркиванием, перечеркиванием или полужирным, увеличенным
или уменьшенным шрифтом используются теги I, U, Strike,
B, Big, Small.
Теги Sup и Sub отображают текст, заключенный между ними,
со сдвигом вниз или вверх.
Для перевода текста на новую строку используются теги
P и Br, причем тег P переводит текст на новую строку с об-
разованием абзаца. Он имеет атрибут Align, выравнивающий
текст по левому, правому краям или по центру в зависимости
от значений left, right, center.
Тег Nobr запрещает перевод текста на новую строку.
Тег Hn используется для создания заголовка. Число n от 1 до
6 определяет вид заголовка. Всего существует шесть уровней
(H1, H2, H3, H4, H5, H6). Каждому уровню соответствует свое
название и размер шрифта. Имеет атрибут Align.
Лабораторная работа
Задание 1. Записать код на языке HTML, устанавливающий
следующие характеристики шрифтов текста:
Пример 1
Установить базовый размер шрифта, равный 2, 3, 4, и распечатать текст:
базовый размер шрифта равен 2
базовый размер шрифта равен 3
базовый размер шрифта равен 4
Выровнять данный текст по правому краю, по левому краю,
по центру.
5
Пример 2
Установить размер шрифта в абсолютных и относительных
единицах и напечатать следующие заголовки:
Пример 6
Пример 5
Пример 4
Пример 3
Пример 2
Пример 1
Пример 3
Установить один из следующих типов шрифта Verdana, Times
New Roman, Arial Unicode MS, Calibri и распечатать следующий текст:
Текст, написанный шрифтом Verdana
Текст, написанный шрифтом Times New Roman
Текст, написанный шрифтом Arial Unicode MS
Текст,написанныйшрифтомCalibri
Пример 4
Установить цвет текста документа как самим названием,
например, red, blue и т.д, так и в системе RGB шестнадцатеричным кодом и распечатать следующий текст:
цвет текста документа красный
цвет текста документа оранжевый
цвет текста документа зеленый
цвет текста документа синий
Задание 2.
ветствующий текст, следующим образом:
Между какими тегами заключен следующий текст
Записать код на языке HTML, выделяющий соот-
Пример 1
6
Пример 2
Какими тегами выделен этот текст
Пример 3
Текст, выделенный тегами
Пример 4
Какие теги выделяют этот текст
Пример 5
Проверить, как будет выглядеть текст, выделенный тегами
<tt> и </tt>
Пример 6
А где в этом тексте
фрагмент выделенный
тегами
Пример 7
В этом тексте есть фрагмент текста
выделенный тегами
Пример 8
Текст, заключенный между какими тегами, будет увеличен,
относительно текущего шрифта
Пример 9
Текст, заключенный между какими тегами, будет
уменьшен, от-
носительно текущего шрифта
Задание 3. Записать код на языке HTML, форматирующий со-
ответствующий текст, следующим образом:
Пример 1
Следующий текст записать с нового абзаца. Проверить
все атрибуты соответствующего тега.
7
Пример 2
Этот тег используется для переходов на новую строку
без образования абзацев.
Пример 3
Этот тег запрещает перевод строки. Текст, заключенный
между тегами данного элемента, отображается в одну строку.
Пример 4
Оформить следующий текст как цитату:
Оформляет находящийся между начальным и конечным
тэгами текст как цитату. Используется для длинных цитат.
Цитируемый текст отображается отдельным абзацем с увеличенным отступом.
Задание 4. Записать код на языке HTML, создающий следую-
щие заголовки:
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
8
1.3. Создание таблиц
Одним из самых важных элементов в HTML являются
таблицы. С их помощью очень просто располагать текст и
картинки в нужных местах.
Весь код, создающий таблицу, находится внутри парного тега Table. Он имеет следующие атрибуты:
Width задает ширину таблицы в пикселях или в процен-
тах от ширины объекта, в который помещена таблица.
Если не указать этот атрибут, то браузер автоматически
определит этот параметр в зависимости от объема, со-
держащегося в таблице материала.
Height задает высоту таблицы в пикселях или в процен-
тах от высоты объекта, в который помещена таблица.
Если не указать этот атрибут, то браузер автоматически
определит этот параметр в зависимости от объема, со-
держащегося в таблице материала.
Bgcolor определяет цвет фона таблицы.
Background позволяет залить тело таблицы графиче-
ским изображением. В качестве значения указывается
путь до файла изображения.
Border указывает ширину внешней рамки таблицы в
пикселях. Если этот атрибут не указывать или указать
значение 0, рамка отображаться не будет.
Align выравнивает таблицу по левому, правому краям
или по центру в зависимости от значений left, right, cen-
ter.
Cellspacing определяет расстояние в пикселях между
ячейками таблицы.
Cellpadding определяет расстояние в пикселях между
рамкой и ее содержимым.
9
Тег Tr создает новую строку ячеек в таблице. Имеет следующие атрибуты:
Align определяет способ горизонтального выравнивания
содержимого всех ячеек данной строки в зависимости от
значений left, right, center.
Valign определяет способ вертикального выравнивания
содержимого всех ячеек данного ряда в зависимости от
значений top, bottom, middle.
Если не указывать атрибута Align и Valign, то по умолчанию
они принимают значения left и middle соответственно.
Тег Td создает в текущей строке ячейку с данными. Имеет атрибуты:
Colspan объединяет несколько соседних друг с другом
ячеек одной строки в одну большую ячейку. Значением
является число, определяющее количество объединен-
ных ячеек.
Rowspan объединяет несколько соседних друг с другом
ячеек одного столбца в одну большую ячейку. Значе-
нием является число, определяющее количество объеди-
ненных ячеек.
Лабораторная работа
Задание 1. Записать код на языке HTML, создающий следую-
щие таблицы:
Пример 1
1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки
10
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]