Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Задачи и упражнения по JavaScript. Учебное пособие
.pdf
Упражнения
Задание 1
Создать объект с ключами 'Минск', 'Москва', 'Киев' и т.д.
с элементами 'Беларусь', 'Россия', 'Украина' и т.д. Вывести на
экран сначала все ключи объекта, затем все значения, и наконец, с помощью цикла for-in вывести строки такого формата:
'Минск – это Беларусь'.
Задание 2
Создать объект с ключами 'Минск', 'Москва', 'Киев' и т.д.
с элементами 'Беларусь', 'Россия', 'Украина' и т.д. Вывести на
экран с помощью цикла for-in строки такого формата:
'Беларусь : столица Минск '.
Задание 3
Создать объект футбольная команда с ключами Нико-
лай, Андрей, Петр и т.д. с элементами 'вратарь', 'нападающий',
'правый защитник' и т.д. С помощью цикла for-in вывести на
экран строки такого формата: 'Николай – вратарь'. и т.д.
Задание 4
Создать объект футбольная команда с ключами Нико-
лай, Андрей, Петр и т.д. с элементами 'вратарь', 'нападающий',
'правый защитник' и т.д. С помощью цикла for-in вывести на
экран строки такого формата: 'Николай – вратарь'. и т.д.
Предусмотреть случай с одинаковыми именами.
Задание 5
Создать объект финал чемпионата мира по забегу на
100 метров, ключами которого являются фамилии спринтеров
Усэйн Болт, Джастин Гэтлин, Кристиан Коулман и т.д., а элементами – результаты забега в секундах 9,97, 9,92, 9,94 и т.д.
На страницу документа распечатать список спортсменов в соответствии с показанными результатами.
81
Задание 6
Создать объект цвета, ключами у которого являются
названия цветов на английском языке, например, red, green и
т.д., а элементами их русские эквиваленты. С помощью цикла
for-in вывести на экран все названия цветов и через дефис их
перевод.
Задание 7
Создать объект неделя, ключами у которого являются
названия дней недели, а элементами – признак того, является
ли день будним или выходным. С помощью цикла for-in вывести все дни недели, а выходные дни вывести жирным шрифтом.
Задание 8
Составить массив дней недели. С помощью цикла for вы-
вести все дни недели, а текущий день вывести курсивом. Текущий день должен храниться в переменной day.
Задание 9
Создать объект city1 (var city1 = {}). Добавить к нему
свойства name(название города) и population(население). Вывести свойства на экран, обратившись к ним напрямую.
Задание 10
Создать объект city2, используя упрощенный метод, со
свойствами название города, его население и выведите их.
Задание 11
Создать ассоциативный массив (объект) заработных
плат obj, используя упрощенный синтаксис. Вывести на экран
зарплату Петрова и Иванова, если таковые имеются.
82
Задание 12
Создать объект obj. Вывести на экран элемент с ключом
'c' двумя способами: через квадратные скобки и как свойство
объекта:
var obj = {a: 1, b: 2, c: 3};
Задание 13
Создать объект с днями недели. Ключами в нем должны
служить номера дней от начала недели (понедельник – первый
и т.д.). Вывести на экран текущий день недели.
2.9. События
При взаимодействии пользователя с Web-страницей
происходят события. Например, события возникают при
щелчке на элементе, перемещении мыши, нажатии клавиши
на клавиатуре, изменении размеров окна и т.д. Зная, какие события может генерировать тот или иной элемент Web-страницы, можно написать код для обработки этого события.
Все названия событий начинаются с префикса on.
События мыши:
onmousedown возникает при нажатии кнопки мыши на
элементе Web-страницы или самой странице;
onmouseup возникает при отпускании ранее нажатой
кнопки мыши;
onclick – при щелчке мыши на элементе Web-страницы
или на самой Web-странице;
ondblclick – при двойном щелчке мыши;
onmousemove – при любом перемещении мыши;
onmouseover – при наведении курсора мыши на эле-
мент Web-страницы;
onmouseout – при выведении курсора мыши с элемента
Web-страницы;
83
onselectstart – при начале выделения текста;
onselect – при выделении элемента;
oncontextmenu – при нажатии правой кнопки мыши для
вывода контекстного меню.
События клавиатуры:
onkeydown – при нажатии клавиши на клавиатуре;
onkeypress – аналогично событию onkeydown, но воз-
вращает значение кода символа в кодировке Unicode;
onkeyup – при отпускании ранее нажатой клавиши.
События документа:
onload – после загрузки Web-страницы;
onscroll – при прокручивании содержимого элемента
страницы, документа, окна или фрейма;
onresize – при изменении размеров окна;
onbeforeunload – перед выгрузкой документа;
onunload – непосредственно перед выгрузкой доку-
мента. Наступает после события onbeforeunload;
onbeforeprint – перед распечаткой документа или вы-
вода его на предварительный просмотр;
onafterprint – после распечатки документа или вывода
его на предварительный просмотр.
События формы:
onsubmit – при отправке данных формы;
onreset – при очистке формы;
onblur – при потере фокуса элементом формы;
onchange – при изменении данных в текстовом поле и
перемещении фокуса на другой элемент формы либо при отправке данных формы (наступает перед событием onblur);
onfocus – при получении фокуса элементом формы.
84
Написание обработчиков событий:
обработчики событий можно использовать как атри-
буты тегов:
<span style="color: red" onclick="f_print('Событие onclick –
SPAN', event);"> здесь</span>
написать обработчик можно с помощью параметров for
и event тега <script>. Для этого элемент Web-страницы должен
иметь параметр id.
В параметре for указывается id элемента страницы, для
которого создается обработчик, а в параметре event указывается обрабатываемое событие;
назначить обработчик с помощью указателя функции.
Имя функции обязательно должно быть указано без скобок и
дополнительных атрибутов:
<head>
<script >
function f_click() {
alert('Вы кликнули на слове "здесь"');
}
</script>
</head>
<body>
Щелкните мышью
<span style="color: red" id="txt">здесь</span>
</p>
<script >
document.getElementById("txt").onclick = f_click;
</script>
</body>
Атрибут onclick может использоваться в следующих те-
гах языка HTML:
<а href=URL onClick="expr|function()">...</а>
<input type="checkbox" onClick="exprI function()">
<input type="radio" onClick="expr|function()">
85
<input type="reset" onClick="expr|function()">
<input type="submit" onClick="expr|function()">
<input type="button" onClick="expr|function()">
Упражнения
Задание 1
Создать кнопку с надписью «press». По щелчку на
кнопке вывести диалоговое окно с сообщением «Ура!».
Задание 2
Создать кнопку с надписью «yes». При щелчке на кнопке
надпись изменить на «no».
Задание 3
Создать кнопку с надписью «press». По щелчку на
кнопке вызывается пользовательская функция, которая спрашивает, как зовут пользователя, а затем приветствует его по
имени.
Задание 4
Создать кнопку с надписью «press». По щелчку на
кнопке меняются надпись на ней и цвет надписи.
Задание 5
Создать две кнопки с соответствующими надписями
«план» и «отчет». Вызов пользовательской функции plan()
или report() осуществляется в зависимости от выбранной
кнопки. При этом с помощью метода alert() на экран выводится сообщение о том, какая кнопка активизирована.
Задание 6
Создать кнопку с надписью «yes». При наведении мыши
на кнопку меняется запись и ее цвет, при выведении все возвращается в начальное положение
86
Задание 7
Создать выпадающий список «Любимое время года» с
именем season. Добавить соответствующие элементы в этот
список. Написать функцию JavaScript с именем selectchange (),
которая вызывается каждый раз при выборе нового элемента
списка. Функция в диалоговом окне печатает выбранное
время года. Для обращения к значениям тегов <option> использовать массив свойств options и свойство selectedIndex,
которое возвращает выбранный в настоящий момент элемент
списка.
Задание 8
Создать набор радиокнопок «Любимый язык програм-
мирования» с именем language. Добавить соответствующие
элементы в этот список. Написать функцию JavaScript с именем selectchange (), которая вызывается каждый раз при выборе нового элемента. Функция на странице документа печатает фразу: «Вы выбрали и название выбранного языка» в диалоговом окне.
Задание 9
Создать два текстовых поля, озаглавив их соответ-
ственно “Поле1” и “Поле2”. Поле1 содержит текст: “input
something…”, а Поле2 – “and here”. Когда Поле2 получает фокус, оно очищается.
Задание 10
Создать два текстовых поля, озаглавив их соответ-
ственно “отсюда” и “сюда”. Получить данные введенные в
первом текстовом поле и вставить их во второе.
Задание 11
Создать кнопку с надписью «я – кнопка». При каждом
щелчке на кнопке меняется цвет ее фона. Цвета задаются массивом.
87
Задание 12
Запрограммировать возможность добавления слов из
текстового поля в поле для ввода многострочного текста. Добавить слово можно с помощью кнопки «Добавить» или с помощью клавиши <Enter>. При переносе слова из текстового
поля оно очищается.
Задание 13
Создать поле для многострочного ввода текста textarea.
Ввести туда некоторый текст, методом alert вывести его и количество символов в нем.
Введите текст и кликните мышкой вне поля...</textarea>
Задание 14
Создать текстовое поле, в которое можно записывать
числа, и кнопку с надписью «Играть». При щелчке на кнопку
вызывается функция, которая выводит на страницу сообщение "Меньше ста" или "Большое ста" в зависимости от числа,
введенного в текстовое поле.
Задание 15
Изменить цвет фона документа, кликнув на кнопку.
Задание 16
Используя функцию, изменить текст элемента <p> при
нажатии на кнопку.
Задание 17
Используя функцию, изменить стиль элемента < body>
при нажатии на кнопку.
Задание 18
Изменить стиль элемента <p> при нажатии на кнопку.
88
ЛИТЕРАТУРА
1. Могилев А.В. Информатика: учеб. пособие для студ.
пед. вузов / А.В. Могилев, Н.И. Пак, Е.К. Хеннер; под ред.
Е.К. Хеннера. – М.: ACADEMA, 2004. – 848 с.
2. Громов Ю.Ю., Иванова О.Г., Земской Н.А., Лагутини
А.В. и др. Информатика. – Тамбов: из-во ТГТУ, 2007. – 225 c.
3. Шауцукова Л.З. Информатика. – М.: Просвещение,
2004. – 425 c.
4. Информатика: базовый курс. 2-е изд. / под ред.
С.В. Симоновича. – СПб.: Питер, 2005. – 328 c.
5. Информатика: учебник / под ред. Н. В. Макаровой. –
М.: Финансы и статистика, 2000. – 425 c.
6. Фролов Г.Д., Кузнецов Э.И. Элементы информа-
тики. – М.: Высшая школа, 1989. – 270 c.
7. Бубнов В.А., Салпагаров С.И., Информатика: про-
грамма для студентов / под ред. проф. В.А. Бубнова. – М.:
РУДН, 2008. – 344 с.
8. URL: http://studfiles.net/ (дата обращения: 01.2018).
9. URL: http://gabdrahimov.ru/ (дата обращения:
01.2018).
10. URL: http://www.itmathrepetitor.ru/ (дата обращения:
01.2018).
11. URL: http://theory.phphtml.net/ (дата обращения:
01.2018).
89
ОПИСАНИЕ И ПРОГРАММА КУРСА
Наименование дисциплины: Java и ее приложения
Рекомендуется для направления(ий) подготовки
(специальности(ей)): 010300 Фундаментальная информатика
и информационные технологии
Квалификация (степень) выпускника: бакалавр
1. Цели и задачи дисциплины
Студент должен приобрести практические навыки само-
стоятельной постановки и решения задач на компьютере, понимать важность разработки эффективного алгоритма и выбора подходящих структур данных для решения поставленной
задачи, знать программирование типовых алгоритмов и уметь
ими пользоваться. Знать основы языков программирования С и С++.
2. Место дисциплины в структуре ООП
Математический и естественнонаучный цикл (для спе-
циальности 010400 Прикладная математика и информатика),
Профессиональный цикл (для специальности 010200 Математика и компьютерные науки);
Программа базируется на курсе Языки и методы про-
граммирования.
От студента требуется владение основными методами,
способами и средствами получения, хранения, переработки
информации, иметь навыки работы с компьютером как средством управления информацией (ОК-12).
Дисциплина используется для понимания дисциплин:
«Технологии разработки программных систем», «Технологии
корпоративных систем».
90
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]