Напишите сценарий который с помощью цикла отобразит все эти изображения в окне браузера
Обновлено: 07.07.2024
Цель работы – научиться использовать имеющиеся в модели документа события для внесения изменений в страницу.
Наиболее часто в сценариях используется рассмотренное выше событие onclick. Для того чтобы обратить внимание пользователя на определённый элемент HTML-документа, можно менять свойства этого элемент при попадании на него курсора мышки, а при снятии курсора восстанавливать прежние значения свойств. Например, можно менять цвет или размер элемента. Попадание курсора мышки на элемент фиксируется событием onMouseOver. Парное для него событие onMouseOut происходит при снятии курсора мышки с элемента.
Другая пара событий onMouseDown и OnMouseUp происходит при нажатии и отпускании левой кнопки мышки. Эту пару событий удобно применять для изменения свойств элементов или замены элементов на время удержания кнопки мышки нажатой.
Реакция на событие в отдельном элементе
Так как в объектной модели объекты могут быть вложены друг в друга, то событие, происходящее в дочернем объекте, одновременно происходит и в родительском объекте. JavaScript предоставляет различные способы локализации влияния события на иерархию объектов. Простейшей способ локализации (пример 2.1) заключается в размещении сценария в теге, на который должно воздействовать событие.
Пример 2.1.
В результате исполнения сценария изменяется положение текста на строке. Первоначально строка прижата к правому краю окна. При попадании на неё курсора она выравнивается по центру, а после снятия курсора прижимается к левому краю окна. Для обращения к объекту используется коллекция all, которая правильно воспринимается браузерами Internet Explorer 6.0 и Mozilla Firefox 2.0 . Ключевое слово this означает ссылку на текущий объект.
Если при наступлении события нужно произвести много действий, то удобно сценарий написать в виде функции и поместить её отдельно от элемента в специально предназначенный для сценариев контейнер <SCRIPT> …</script>. В примере 2.2 каждое из событий onMouseOver и onMouseOut вызывает два действия: выравнивание и изменение цвета текста в строке.
Пример 2.2
Задача 2.1. Напишите HTML-документ, отображающийся в окне браузера в виде следующих четырёх строк:
- Пять событий с мышкой
- Щёлкните по мне мышкой
- На этом тексте нажмите, подержите и отпустите левую кнопку мышки
- Медленно проведите курсором мышки по этой надписи
Первая строка – заголовок страницы. Вторая строка меняется при щелчке мышкой следующим образом:
- шрифт увеличивается до 48pt;
- цвет шрифта меняется на белый;
- цвет фона меняется на голубой.
Повторный щелчок мышкой возвращает вторую строку к первоначальному виду.
Фон третьей строки меняется, когда курсор мышки находится на ней и нажимается или отпускается левая кнопка мышки. При нажатии фон становится зелёным, а при отпускании – жёлтым.
При попадании курсора мышки на четвёртую строку её фон становится красным, а при снятии – голубым.
Фиксация события в родительском элементе
Если реакцию на какое-либо событие требуют несколько элементов, расположенных на странице, то можно вызвать функцию для обработки этого события только в родительском элементе. В функции определяется, на каком элементе произошло событие, и выполняются соответствующие действия. Удобство такого подхода состоит в том, что весь алгоритм преобразований находится в одном месте, а недостаток – в сложности самой функции. Рассмотрим сценарий (пример 2.3), в котором для изменения свойств любого из трёх объектов, находящихся в окне браузера служит одна функция.
Пример 2.3
В примере 2.3 родительским по отношению к элементу H1 и двум элементам DIV является элемент BODY. Поэтому в теге <BODY> вызывается функция rodEl(), служащая для обработки события onclick.
В момент наступления события вся информация о нём запоминается в объекте event. Этот объект по разному описывается в стандарте W3C и в браузере Internet Explorer. Новые версии Internet Explorer поддерживают и стандарт W3C.
В стандарте W3C объект event передаётся в функцию в качестве параметра, а для обращения к объекту, на котором произошло событие, служит свойство event.target.
В Internet Explorer объект window.event - глобальный и поэтому передавать его в функцию в виде параметра не нужно. Для обращения к объекту, на котором произошло событие, в Internet Explorer служит свойство window.event.srcElement
В примере 2.3 первые две строчки тела функции rodEl()служат для кроссплатформенного (в любом браузере) обращения к объекту, на котором произошло событие.
В в следующих строках функции rodEl() сначала определяется Id элемента, по которому пользователь щёлкнул мышкой, а затем с помощью оператора Switch делается переход к изменению свойств указанного элемента.
Задача 2.2. Создайте страницу с изображением и подписью под ним. При щелчке по подписи, она должна менять свой цвет. Щелчок по изображению должен вызывать замену изображения и подписи. Функция для обработки события должна вызываться из родительского по отношению к изображению и подписи объекта.
Предотвращение всплывания события. Свойство cancelBubble
В примере 2.3 рассматривалась простая страница с небольшим количеством элементов, но даже в таком простом случае функция реакции на событие получилась сложной. Проще для каждого элемента написать свою функцию обработки события, а распространение события вверх по дереву иерархической структуры от "детей" к "родителям" (в этом случае говорят о всплывании события) блокировать с помощь специально для этого предназначенного свойства cancelBubble объекта event. Изменим пример 2.3 так, чтобы для реакции на щелчок по каждому из четырёх элементов страницы служила своя функция:
Пример 2.4
Скопируйте в свой каталог и просмотрите пример 2.4 в браузере Internet Explorer. Щёлкните по слову ЦВЕТ. Изменится не только цвет слова, но и цвет фона документа, так как после щелчка сначала выполнится функция H_1(), а затем событие всплывёт к родительскому элементу BODY и выполнится функция rodE1(). При щелчке по внутреннему прямоугольнику будут меняться цвета обоих прямоугольников и фона документа. Щелчок по внешнему прямоугольнику изменит цвет этого прямоугольника и цвет фона документа.
Задача 2.3. Чтобы предотвратить всплывание события в примере 2.4, вставьте в начало всех функций, кроме первой, оператор
5. Напишите программу для вычисления и печати факториала числа с помощью цикла for. Факториал числа - это произведение всех целых чисел вплоть до этого числа, включая факториал 4: 4 * 3 * 2 * 1 = 24. Перейти к редактору
6. Напишите программу, которая выдаст вам все возможные комбинации двузначной десятичной комбинации, напечатанной в формате с разделителями-запятыми: перейдите в редактор
Пример вывода:
00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99,
7. Напишите программу, которая будет считать символы «r» в тексте «w3resource». Перейти к редактору
8. Напишите сценарий PHP, который создает следующую таблицу, используя циклы for. Добавьте cellpadding = "3px" и cellspacing = "0px" к тегу таблицы. Перейти к редактору
| 1 * 1 = 1 | 1 * 2 = 2 | 1 * 3 = 3 | 1 * 4 = 4 | 1 * 5 = 5 |
| 2 * 1 = 2 | 2 * 2 = 4 | 2 * 3 = 6 | 2 * 4 = 8 | 2 * 5 = 10 |
| 3 * 1 = 3 | 3 * 2 = 6 | 3 * 3 = 9 | 3 * 4 = 12 | 3 * 5 = 15 |
| 4 * 1 = 4 | 4 * 2 = 8 | 4 * 3 = 12 | 4 * 4 = 16 | 4 * 5 = 20 |
| 5 * 1 = 5 | 5 * 2 = 10 | 5 * 3 = 15 | 5 * 4 = 20 | 5 * 5 = 25 |
| 6 * 1 = 6 | 6 * 2 = 12 | 6 * 3 = 18 | 6 * 4 = 24 | 6 * 5 = 30 |
9. Напишите PHP-скрипт, используя вложенный цикл for, который создает шахматную доску, как показано ниже. Перейти к редактору
Используйте ширину таблицы = 270px и возьмите 30px в качестве высоты и ширины ячейки.
10. Напишите скрипт PHP, который создает следующую таблицу (используйте для циклов). Перейти к редактору
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 |
| 3 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 | 30 |
| 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 |
| 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 |
| 6 | 12 | 18 | 24 | 30 | 36 | 42 | 48 | 54 | 60 |
| 7 | 14 | 21 | 28 | 35 | 42 | 49 | 56 | 63 | 70 |
| 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 |
| 9 | 18 | 27 | 36 | 45 | 54 | 63 | 72 | 81 | 90 |
| 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
11. Напишите программу PHP, которая перебирает целые числа от 1 до 50. Для кратных трех выведите «Fizz» вместо числа и для кратных пяти выведите «Buzz». Для чисел, кратных трем и пяти, выведите «FizzBuzz». Перейти к редактору
12. Напишите программу PHP для генерации и отображения первых n строк треугольника Флойда. (используйте n = 5 и n = 11 строк). Перейти к редактору
Согласно Википедии треугольник Флойда представляет собой прямоугольный массив натуральных чисел, используемый в образовании в области компьютерных наук. Он назван в честь Роберта Флойда. Это определяется путем заполнения строк треугольника последовательными числами, начиная с 1 в верхнем левом углу:
Пример вывода для n = 5:
1
2 3
4 5 6
7 8 9 10
11 12 13 14 15
13. Напишите программу PHP для печати букв алфавита «А». Перейти к редактору
Ожидаемый результат:
14. Напишите PHP-программу для печати алфавитного шаблона «B». Перейти к редактору
Ожидаемый результат:
16. Напишите программу PHP для печати букв алфавита «D». Перейти к редактору
Ожидаемый результат:
17. Напишите программу PHP для печати букв алфавита «E». Перейти к редактору
Ожидаемый результат:
19. Напишите программу PHP для печати букв алфавита «G». Перейти к редактору
Ожидаемый результат:
20. Напишите PHP-программу для печати букв алфавита «H». Перейти к редактору
Ожидаемый результат:
21. Напишите PHP-программу для печати букв алфавита «I». Перейти к редактору
Ожидаемый результат:
23. Напишите PHP-программу для печати букв алфавита «K». Перейти к редактору
Ожидаемый результат:
25. Напишите программу PHP для печати алфавитного шаблона «M». Перейти к редактору
Ожидаемый результат:
26. Напишите программу PHP для печати алфавитного шаблона «N». Перейти к редактору
Ожидаемый результат:
29. Напишите программу PHP для печати букв алфавита «Q». Перейти к редактору
Ожидаемый результат:
33. Напишите программу PHP для печати букв алфавита «U». Перейти к редактору
Ожидаемый результат:
37. Напишите программу PHP для печати букв алфавита «Y». Перейти к редактору
Ожидаемый результат:
38. Напишите программу PHP для печати букв алфавита «Z». Перейти к редактору
Ожидаемый результат:
Редактор кода PHP:
Еще не все !
Не отправляйте решение вышеупомянутых упражнений здесь, если вы хотите внести вклад, перейдите на соответствующую страницу упражнения.
Формы широко используются в Интернете. Информация, введенная в форму, часто посылается обратно на сервер или отправляется по электронной почте на некоторый адрес. Проблема состоит в том, чтобы убедиться, что введенная пользователем в форму информация корректна. Легко проверить ее перед пересылкой в Интернет можно с помощью языка JavaScript.
Обработка форм: переключатель, флажок, список.
Формы используются при создании интерактивных страниц, позволяют читателю Web-страницы общаться с их владельцами. Формы используются при организации опросов, заполнении анкет, тестировании, для контроля знаний и т.д. Форма отображается в окне браузера в виде набора стандартных элементов управления, которые используются для заполнения полей формы значениями. В предыдущих сценариях мы использовали текстовые поля и различные кнопки. Рассмотрим, как представить и извлечь для обработки данные, представленные другими элементами управления.
Данные удобно представлять с помощью элемента управления переключателя (или радиокнопки) в том случае, когда из нескольких вариантов может быть выбран лишь один. Например, студент на экзамене может получить лишь одну из оценок
Пользователь может указать лишь одну из оценок. Для представления информации о полученном зачете достаточно двух радиокнопок. С помощью переключателя можно представлять информацию о семейном положении, об образовании и многое другое.
Предположим, что некоторая фирма принимает заказы на изготовление витражей. Заказчик должен выбрать форму витража, количество, указать размеры, материал и др. Требуется определить стоимость заказа. Мы рассмотрим лишь фрагмент, в котором выбирается форма витража. Документ приведен на рис. 5.1
Рис.1 Выбор варианта с помощью переключателя
Площадь выбранной фигуры
Выбор формы осуществляется с помощью переключателя (или радиокнопки). Элемент переключатель отображается в виде круглой кнопки, существует только в составе группы подобных элементов. Может быть осуществлен выбор лишь одного элемента группы. Все элементы группы должны иметь одинаковое значение параметра NAME. Обязательный параметр value должен иметь уникальное значение для каждого элемента группы.
Так как объект forms имеет свойство-массив elements, в котором содержаться ссылки на элементы формы в порядке их перечисления в теге
. Получить доступ к первому элементу формы можно с помощью конструкции: document.form1.elements[0]. Это элемент-переключатель, определен в составе группы элементов. В рассматриваемом примере группа элементов состоит из двух переключателей. Свойство checked выдает значение true, если переключатель выбран, и false в противном случае. Второй элемент рассматриваемой формы можно получить, если воспользоваться конструкцией: document.form1.elements[1]. К другим элементам формы в сценарии обращение производится по именам, хотя и в этом случае можно было бы воспользоваться свойством elements.
HTML-код документа представлен в листинге.
Площадь фигуры, выбранной с помощью переключателя
Выберите форму витража
Выберите размер (радиус круга или сторону квадрата)
Элемент управления флажок используется в случае, когда из предложенных вариантов можно выбрать как один вариант, так и несколько. Каждый вариант выбора задается флажком, который можно либо установить, либо сбросить. Флажок определяется в теге значением checkbox параметра type. Обязательным параметром является параметр value, значение которого будет передано на обработку в случае выбора кнопки.
Результаты тестирования
Пользователю предлагается заполнить анкету, в которой требуется указать те тесты, которые он выполнил успешно. Для задания тестов можно воспользоваться флажком. Обработка анкеты будет состоять в определении, сколько тестов выполнил пользователь.
Рис. Анкета для обработки результатов тестирования
При щелчке мышью по кнопке Результат возникает событие Click, обработка которого состоит в вызове функции grant с одним параметром - именем формы. Далее с помощью оператора цикла просматриваются все флажки. Если очередной флажок установлен, или элемент выбран, то значение переменной k увеличивается на 1. После окончания работы цикла результат сформирован в переменной k и значение переменной помещается в соответствующее поле формы. Если нажать на кнопку Отмена, то очистятся все поля формы.
HTML-код документа представлен в листинге.
Результаты тестирования
Укажите те тесты, которыми Вы выполнили успешно:
сумма баллов по результатам тестирования
Если элементов много, то представление их с помощью флажков или кнопок-переключателей увеличивает размер формы. Варианты выбора могут быть представлены в окне браузера более компактно с помощью списка. Напомним, что тег имеет несколько параметров. Параметр NAME является обязательным. Для того чтобы установить число одновременно видимых элементов, следует задать параметр SIZE=n. Если n равно 1, то отображается ниспадающее меню или список выбора, если n > 1, то отображается список прокрутки с n одновременно видимыми значениями. Если параметр SIZE не задан, то по умолчанию принимается значение равное 1. Задание параметра MULTIPLE означает, что из меню или из списка можно выбрать несколько элементов. Элементы меню задаются внутри тега с помощью тега . Общий вид тега . Параметр SELECTED означает, что данный элемент списка считается выбранным по умолчанию. Параметр VALUE содержит значение, которое передается, если данный элемент выбран из списка или из меню.
Данные, представленные списком
Рассмотрим задачу определения фигуры в случае, когда фигура задается с помощью списка. Пользователь выбирает из списка фигуру, а затем указывает либо длину стороны квадрата, либо радиус, если он выбрал круг. После щелчка по кнопке Площадь в текстовом поле появляется название выбранной фигуры и ее площадь.
Рис. Данные, представленные списками
Функция testsel() исследует, какой элемент списка выбран. Для выбранного элемента списка формируются два значения. Переменная r получает значение свойства text элемента списка. Переменная s используется для результата выражения, определяющего площадь фигуры.
HTML-код документ в листинге .
Данные , представленные списком
< var d= document
var a=d.forms["form1"].num.value
var s
var r
if ( ( (d.forms["form1"].elements[0])[0]).selected )
< r= r+( (d.forms["form1"].elements[0])[0]).text
s=a*a*3.14
>
else
if ( ( (d.forms["form1"].elements[0])[1]).selected )
< r= r+( (d.forms["form1"].elements[0])[1]).text
s=a*a
>
d.forms["form1"]["res"].value=s;
d.forms["form1"]["fig"].value=r;
>
//-->
Выберите фигуру
Введите радиус круга или сторону квадрата :
Площадь onClick="testsel()">
Выбрана фигура
На странице список представлен в виде ниспадающего меню. В приведенном примере список заменял переключатель первого примера данной главы. Список можно использовать и вместо флажков. Рассмотрим задачу о тестировании, но результаты тестов представим с помощью списка.
Результаты тестирования, представленные списком
Представим результаты тестирования с помощью списка, причем сам список будет иметь вид списка выбора как на рис. 5.4.
Рис. Результаты тестирования, представленные списком
Параметр muitiple означает, что из списка могут быть выбраны несколько элементов. На рис. изображен список прокрутки с четырьмя одновременно видимыми значениями и тремя выбранными.
При выполнении функции testsel() по очереди исследуются все элементы списка. Если элемент списка выбран, то увеличивается на единицу значение переменной s. После выполнения цикла вычисленное значение s считается результатом функции.
HTML-код документа представлен в листинге.
Результаты тестирования
Укажите те тесты, которые вы выполнили
тест 1
тест 2
тест 3
тест 4
тест 5
тест 6
Смена изображений при наведении указателя мыши
Напишем сценарий, во время работы которого смена рисунков происходит при наведении курсора мыши на изображение.
При перемещении пользователем курсора мыши над изображением возникает событие MouseOver. Опишем функцию succpict(), которая будет реакцией на это событие, и определит, какое изображение следует поместить в документ. Воспользуется тем фактом, что загружаемое изображение хранится в файлах с именами m1.jpg, m2.jpg,…,m4.jpg. Для загрузки k-ого изображения формируется имя файла по формуле “m”+k+”.jpg”. Приведем сценарий в листинге.
Смена рисунков при перемещении курсора мыши на изображение
Для смены изображения поместите курсор мыши на рисунок.
Плавное увеличение картинки
1 Создаём файл imagesize.css
border: none;
vertical-align: bottom;
затем подгружаем его :
2. Создаём файл imagesize.js
if (document.images)
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im)
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
var e = expConIm,
widthHeight = function(dim)
return dim[0] * cos + dim[1] + 'px';
resize = function()
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
e.ims[i].timer = setTimeout(resize, speed);
e.ims[i].timer = setTimeout(resize, speed);
>, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
e.ims[i].im.onload = function()
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e.ims[i].im.src = im.src;
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
expConIm.ims = <>;
expConIm.r = new RegExp('\\bexpando\\b');
if (document.addEventListener)
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
else if (document.attachEvent)
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
3. Помещаем картинки в любое место на сайте прописав в коде:
Размер картинки надо указывать не реальный а тот каким, Вы, хотите видеть его в миниатюре. Например реальный размер картинки blue_sky.jpg 320 x 240 а в коде указан: width="150" height="110".
Увеличение поля комментария
Итак создаём вот такую форму, потянув за уголок которой, можно растягивать и сжимать поле по горизонтали и вертикали.
Зададим минимальные размеры и приукрасим.
box-shadow : 0 1px 5px rgba(0, 0, 0, 0.7) ;
function countLines(strtocount, cols)
var hard_lines = 1;
last = strtocount.indexOf("\n", last+1);
if ( last == -1 ) break;
var soft_lines = Math.ceil(strtocount.length / (cols-1));
var hard = eval("hard_lines " + unescape("%3e") + "soft_lines;");
if ( hard ) soft_lines = hard_lines;
the_form.rows = Math.max(min_rows,countLines(the_form.value,the_form.cols) +1);
1 Напишем сценарий, который определяет категорию человека в зависимости от пола и возраста. Пол выбирается с помощью радиокнопки, в текстовом поле вводится возраст в годах. Сценарий должен определить, наступил ли пенсионный возраст. Напомним, что для женщин пенсионный возраст определяется 55 годами, для мужчин пенсионный возраст наступает в 60 лет. Вид документа приведен на рис.
2 Напишем сценарий, который позволяет пользователю указать пол, выбрать черты характера. Результат обработки анкеты состоит в формировании строки результата, которая помещается в поле для ввода многострочного текста. На рис. изображен вид анкеты.
3 Поместить на странице 2 фотографии (картинки). Написать скрипт, который меняет эти картинки местами и при наведении курсора мыши увеличивает их размер.
Цель работы – научиться использовать имеющиеся в модели документа события для внесения изменений в страницу.
Наиболее часто в сценариях используется рассмотренное выше событие onclick. Для того чтобы обратить внимание пользователя на определённый элемент HTML-документа, можно менять свойства этого элемент при попадании на него курсора мышки, а при снятии курсора восстанавливать прежние значения свойств. Например, можно менять цвет или размер элемента. Попадание курсора мышки на элемент фиксируется событием onMouseOver. Парное для него событие onMouseOut происходит при снятии курсора мышки с элемента.
Другая пара событий onMouseDown и OnMouseUp происходит при нажатии и отпускании левой кнопки мышки. Эту пару событий удобно применять для изменения свойств элементов или замены элементов на время удержания кнопки мышки нажатой.
Реакция на событие в отдельном элементе
Так как в объектной модели объекты могут быть вложены друг в друга, то событие, происходящее в дочернем объекте, одновременно происходит и в родительском объекте. JavaScript предоставляет различные способы локализации влияния события на иерархию объектов. Простейшей способ локализации (пример 2.1) заключается в размещении сценария в теге, на который должно воздействовать событие.
Пример 2.1.
В результате исполнения сценария изменяется положение текста на строке. Первоначально строка прижата к правому краю окна. При попадании на неё курсора она выравнивается по центру, а после снятия курсора прижимается к левому краю окна. Для обращения к объекту используется коллекция all, которая правильно воспринимается браузерами Internet Explorer 6.0 и Mozilla Firefox 2.0 . Ключевое слово this означает ссылку на текущий объект.
Если при наступлении события нужно произвести много действий, то удобно сценарий написать в виде функции и поместить её отдельно от элемента в специально предназначенный для сценариев контейнер <SCRIPT> …</script>. В примере 2.2 каждое из событий onMouseOver и onMouseOut вызывает два действия: выравнивание и изменение цвета текста в строке.
Пример 2.2
Задача 2.1. Напишите HTML-документ, отображающийся в окне браузера в виде следующих четырёх строк:
- Пять событий с мышкой
- Щёлкните по мне мышкой
- На этом тексте нажмите, подержите и отпустите левую кнопку мышки
- Медленно проведите курсором мышки по этой надписи
Первая строка – заголовок страницы. Вторая строка меняется при щелчке мышкой следующим образом:
- шрифт увеличивается до 48pt;
- цвет шрифта меняется на белый;
- цвет фона меняется на голубой.
Повторный щелчок мышкой возвращает вторую строку к первоначальному виду.
Фон третьей строки меняется, когда курсор мышки находится на ней и нажимается или отпускается левая кнопка мышки. При нажатии фон становится зелёным, а при отпускании – жёлтым.
При попадании курсора мышки на четвёртую строку её фон становится красным, а при снятии – голубым.
Фиксация события в родительском элементе
Если реакцию на какое-либо событие требуют несколько элементов, расположенных на странице, то можно вызвать функцию для обработки этого события только в родительском элементе. В функции определяется, на каком элементе произошло событие, и выполняются соответствующие действия. Удобство такого подхода состоит в том, что весь алгоритм преобразований находится в одном месте, а недостаток – в сложности самой функции. Рассмотрим сценарий (пример 2.3), в котором для изменения свойств любого из трёх объектов, находящихся в окне браузера служит одна функция.
Пример 2.3
В примере 2.3 родительским по отношению к элементу H1 и двум элементам DIV является элемент BODY. Поэтому в теге <BODY> вызывается функция rodEl(), служащая для обработки события onclick.
В момент наступления события вся информация о нём запоминается в объекте event. Этот объект по разному описывается в стандарте W3C и в браузере Internet Explorer. Новые версии Internet Explorer поддерживают и стандарт W3C.
В стандарте W3C объект event передаётся в функцию в качестве параметра, а для обращения к объекту, на котором произошло событие, служит свойство event.target.
В Internet Explorer объект window.event - глобальный и поэтому передавать его в функцию в виде параметра не нужно. Для обращения к объекту, на котором произошло событие, в Internet Explorer служит свойство window.event.srcElement
В примере 2.3 первые две строчки тела функции rodEl()служат для кроссплатформенного (в любом браузере) обращения к объекту, на котором произошло событие.
В в следующих строках функции rodEl() сначала определяется Id элемента, по которому пользователь щёлкнул мышкой, а затем с помощью оператора Switch делается переход к изменению свойств указанного элемента.
Задача 2.2. Создайте страницу с изображением и подписью под ним. При щелчке по подписи, она должна менять свой цвет. Щелчок по изображению должен вызывать замену изображения и подписи. Функция для обработки события должна вызываться из родительского по отношению к изображению и подписи объекта.
Предотвращение всплывания события. Свойство cancelBubble
В примере 2.3 рассматривалась простая страница с небольшим количеством элементов, но даже в таком простом случае функция реакции на событие получилась сложной. Проще для каждого элемента написать свою функцию обработки события, а распространение события вверх по дереву иерархической структуры от "детей" к "родителям" (в этом случае говорят о всплывании события) блокировать с помощь специально для этого предназначенного свойства cancelBubble объекта event. Изменим пример 2.3 так, чтобы для реакции на щелчок по каждому из четырёх элементов страницы служила своя функция:
Пример 2.4
Скопируйте в свой каталог и просмотрите пример 2.4 в браузере Internet Explorer. Щёлкните по слову ЦВЕТ. Изменится не только цвет слова, но и цвет фона документа, так как после щелчка сначала выполнится функция H_1(), а затем событие всплывёт к родительскому элементу BODY и выполнится функция rodE1(). При щелчке по внутреннему прямоугольнику будут меняться цвета обоих прямоугольников и фона документа. Щелчок по внешнему прямоугольнику изменит цвет этого прямоугольника и цвет фона документа.
Задача 2.3. Чтобы предотвратить всплывание события в примере 2.4, вставьте в начало всех функций, кроме первой, оператор
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Регулярки
- Урок №
Введение, задач нет - Урок №
Работа с регулярными
выражениями. Глава 1. - Урок №
Работа с регулярными
выражениями. Глава 2. - Урок №
Работа с регулярными
выражениями. Глава 3. - Урок №
Работа с регулярными
выражениям. Глава 4. - Урок №
Отличия
от PHP версии
Разное
Работа с канвасом
- Урок №
Введение, задач нет - Урок №
Основы
работы с canvas - Урок №
Продвинутая
работа с canvas
Практика
Контекст
Drag-and-Drop
- Урок №
новая вкладка с new.code.mu
Доступные события - Урок №
новая вкладка с new.code.mu
Перемещение элемента по окну - Урок №
новая вкладка с new.code.mu
Перемещение на другой элемент - Урок №
новая вкладка с new.code.mu
Объект event.dataTransfer - Урок №
новая вкладка с new.code.mu
Картинка при перетягивании - Урок №
новая вкладка с new.code.mu
Вид курсора
- Урок №
Введение, задач нет - Урок №
Основы
работы с ООП - Урок №
Наследование
классов в JavaScript
Продвинутая работа
с классами на JavaScript --> - Урок №
Применение
ООП при работе с DOM - Урок №
Практика
по ООП в JavaScript - Тут скоро будут еще уроки
по функциональному и прототипному
стилю ООП.
Практика по ООП
Ваша задача: посмотрите, попробуйте повторить.
Практика
Promise ES6
- Урок №
новая вкладка с new.code.mu
Функции resolve reject - Урок №
новая вкладка с new.code.mu
Метод catch - Урок №
новая вкладка с new.code.mu
Цепочки промисов - Урок №
новая вкладка с new.code.mu
Перехват ошибок - Урок №
новая вкладка с new.code.mu
Promise.all - Урок №
новая вкладка с new.code.mu
Promise.race - Урок №
новая вкладка с new.code.mu
async await - Урок №
новая вкладка с new.code.mu
Загрузка картинок
Библиотека jQuery
Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.
- Урок №
Основы
работы с jQuery - Урок №
Манипулирование
элементами страницы - Урок №
Работа
с набором элементов - Урок №
Работа
с событиями jQuery - Урок №
Эффекты и анимация
библиотеки jQuery - Урок №
Практика на отработку
библиотеки jQuery - Урок №
Работа с
библиотекой jQueryUI - Урок №
Популярные плагины
библиотеки jQuery
Перед решением задач изучите теорию к данному уроку.
Примеры решения задач
Задача
Задача. Выведите столбец чисел от 1 до 50.
Решение: воспользуемся циклом while (отделим числа тегом br друг от друга, чтобы получить столбец, а не строку):
Можно также воспользоваться и циклом for:
Задача
Задача. Дан массив с элементами [1, 2, 3, 4, 5]. С помощью цикла for выведите все эти элементы на экран.
Решение: будем повторять цикл for от 0 до номера последнего элемента массива. Этот номер на единицу меньше количества элементов в массиве, которое можно найти с помощью свойства length таким образом: arr.length.
Чтобы цикл прокрутился на единицу меньше длины массива, в условие окончания мы поставим
Задача. Дан массив с элементами [2, 3, 4, 5]. С помощью цикла for найдите произведение элементов этого массива.
Решение: для таких задач существует стандартное решение, которое заключается в том, что циклом for перебираются элементы массива и их произведение последовательно записывается в переменную result (в ней постепенно накапливается искомое произведение):
Как это работает: изначально переменная result имеет значение 1, затем при первом проходе цикла в нее записывается ее текущее содержимое (это 1), умноженное на первый элемент массива (это 2). Получится, что в result запишется 1*2 и теперь там будет лежать число 2.
При следующем проходе цикла в result запишется текущее значение result, умноженное на второй элемент массива (то есть 2*3=6). И так далее пока массив не закончится.
Можно переписать строчку result = result * arr[i] через *= для краткости:
Задача . Цикл for-in
Задача. Дан объект obj с ключами 'Минск', 'Москва', 'Киев' с элементами 'Беларусь', 'Россия', 'Украина'. С помощью цикла for-in выведите на экран строки такого формата: 'Минск - это Беларусь.'.
Решение: задача не представляет сложности если уметь работать с циклом for-in. Давайте решать задачу поэтапно. Для начала выведем на экран все ключи объекта (это названия городов):
А теперь выведем все значения объекта (это страны):
Ну, а теперь сформируем строки нужного нам формата:
Задачи для решения
Циклы while и for
Решите эти задачи сначала через цикл while, а затем через цикл for.Выведите столбец чисел от 1 до 100.
Выведите столбец чисел от 11 до 33.
Выведите столбец четных чисел в промежутке от 0 до 100.
С помощью цикла найдите сумму чисел от 1 до 100.
Работа с for для массивов
Дан массив с элементами [1, 2, 3, 4, 5]. С помощью цикла for выведите все эти элементы на экран.
Дан массив с элементами [1, 2, 3, 4, 5]. С помощью цикла for найдите сумму элементов этого массива. Запишите ее в переменную result.
Работа с for-in
Дан объект obj. С помощью цикла for-in выведите на экран ключи и элементы этого объекта.
Дан объект obj с ключами Коля, Вася, Петя с элементами '200', '300', '400'. С помощью цикла for-in выведите на экран строки такого формата: 'Коля - зарплата 200 долларов.'.
Задачи
Дан массив с элементами 2, 5, 9, 15, 0, 4. С помощью цикла for и оператора if выведите на экран столбец тех элементов массива, которые больше 3-х, но меньше 10.
Дан массив с числами. Числа могут быть положительными и отрицательными. Найдите сумму положительных элементов массива.
Дан массив с элементами 1, 2, 5, 9, 4, 13, 4, 10. С помощью цикла for и оператора if проверьте есть ли в массиве элемент со значением, равным 4. Если есть - выведите на экран 'Есть!' и выйдите из цикла. Если нет - ничего делать не надо.
Дан массив числами, например: [10, 20, 30, 50, 235, 3000]. Выведите на экран только те числа из массива, которые начинаются на цифру 1, 2 или 5.
Составьте массив дней недели. С помощью цикла for выведите все дни недели, а выходные дни выведите жирным.
Составьте массив дней недели. С помощью цикла for выведите все дни недели, а текущий день выведите курсивом. Текущий день должен храниться в переменной day.
Дано число n=1000. Делите его на 2 столько раз, пока результат деления не станет меньше 50. Какое число получится? Посчитайте количество итераций, необходимых для этого (итерация - это проход цикла), и запишите его в переменную num.
Читайте также: