Напишите сценарий который с помощью цикла отобразит все эти изображения в окне браузера
Давайте писать сценарий
//Формирует текст как заголовок 1го уровняdocument.write("of " +" " + navigator.appName + " .")// вывод названия и версии браузера.
//Закрытие дескриптора SCRIPT.
// закрытие дескриптора BODY.
// Дескриптор, который заключает в себя весь текст HTML-документа
//Указывает на начало заголовка документа
function done()//описание функции
alert("Загрузка страницы завершена!")//метод alert-генерирует диалоговое окно, отображает тот текст, который передаётся в качестве параметров
function done1()//описание функции
// открытие дескриптора тела документа в обработчике событий onLoad, операторы сценария начинают выполняться сразу после загрузки документа.
//Дескриптор, для создания формы
//Дескриптор, описывающий интерактивный элемент-кпопку, при щелчке на которой в обработчике событий onClick вызывается функция done1()
//Закрытие дескриптора обьекта формы
//Закрытие дескриптора ,описывающего тело документа, и включающий всю информацию, которая должна отображаться в окне браузера
// заключает в себя весь текст HTML-документа.
// дескриптор, указывающий на начало заголовка документа.
function Delenie(form) //функция, которая производит арифметическую операцию деления
var chislo1=parseFloat(form.entry1.value) // объявление и инициализация переменной первого числа.
var chislo2=parseFloat(form.entry2.value) ) // объявление и инициализация переменной второго числа.
var chislo3=chislo1/chislo2//деление 1го числа на 2ое
form.entry3.value=chislo3// присвоение результата третей переменной
// закрытие дескриптора SCRIPT
// закрытие дескриптора HEAD
// открытие дескриптора тела документа
//открытие дескриптора объекта формы.
Введите число 1:
//создание текстового поля для первого числа.
Введите число 2:
// создание текстового поля для второго числа.
//одиночный дескриптор, осуществляющий переход на новую строку
//создание кнопки, при щелчке на которой в обработчике событий onClick вызывается функция деления.
// создание текстового поля для результата вычитания
//закрытие дескриптора объекта формы.
// закрытие дескриптора тела документа
// заключает в себя весь текст HTML-документа.
// дескриптор, указывающий на начало заголовка документа.
var planet=new Array(15) // описание массива planet, выделение места в памяти.
planet[0]="Земля"//описание первого элемента массива.
planet[1]="Сатурн"// описание второго элемента массива и т. д.
planet[9]=" 1RXS1609 b "
planet[10]=" BD +14 4559 b "
planet[11]=" HAT-P-22 b "
planet[12]=" HD 104067 b "
planet[14]=" GJ 433 b "
var ras=new Array(15) //описание второго массива ras,выделение места в памяти.
ras[0]=" 149.6 млн. км"// описание первого элемента этого массива
ras[1]=" 14,3 миллиарда км"// описание второго элемента массива и т. д.
ras[2]=" 764,8 млн км"
ras[3]=" 228 млн. км"
ras[4]=" 5920 млн км"
ras[6]=" 107803 млн км"
ras[7]=" 2853 млн. км"
ras[8]=" 4500 млн. км"
ras[14]=" 9.04 пк "
var diam=new Array(15) //описание третьего массива diam,выделение места в памяти.
diam[0]=" 12757 километров"// описание первого элемента массива
diam[1]=" 120000 км"// описание второго элемента массива и т. д.
diam[2]=" 142 984 км"
diam[6]=" 12 100 км"
diam[9]=" 242 984 км "
var selectplanet=document.entryForm.entry.value//присвоение более короткого имени объекту
if(planet[i]==selectplanet) //если введенное название планеты совпадает с одним из элементов массива ,то
var msg=" расстояние от "+planet[i]+" до солнца=" + ras[i] +" диаметр планеты=" +diam[i] //описание переменной
// закрытие дескриптора SCRIPT
//.закрытие дескриптора HEAD
// открытие дескриптора тела документа
// открытие дескриптора объекта формы.
Введите название планеты:
"> // создание текстового поля для ввода планеты
>// создание кнопки, при щелчке на которой в обработчике событий onClick вызывается функция gets()
//одиночный дескриптор, осуществляющий переход на новую строку
// создание текстового поля с размером 70 для вывода результата.
//закрытие дескриптора объекта формы.
// закрытие дескриптора тела документа
// заключает в себя весь текст HTML-документа.
// начало заголовка документа
var name=prompt("Как вас зовут?") // генерирует диалоговое окно, в котором есть поле для ввода имени.
return name>//возврат имени в качестве параметра
alert("Адрес страницы:" +location.href)
window.status="Посетите страницу Яндекс!" //вывод текста в строке состояния.
//закрытие дескриптора SCRIPT.
//закрытие дескриптора HEAD
// выполнение операторов функции show()сразу после загрузки документа
Приветствуем вас
//заголовок 1го уровня в теле документа//закрытие дескриптора SCRIPT
// закрытие дескриптора тела документа
Результаты работы:
1. Вывод на экран сведений о браузере, используемом для загрузки документа.
2. Отображение диалогового окна с предупреждением >сразу после загрузки страницы.
Отображение диалогового окна, появляющегося
после нажатия кнопки.
3. Выполнения арифметической операции деления.
4. Ввод названия планеты, вывод соответствующего расстояния от солнца до этой планеты и диаметр.
5. На уровне заголовка H1 пользователю предлагается ввести имя в диалоговом окне, а после этого идет приветствование его по имени. Приветствие отображается в основной части документа;
Вывод адреса URL текущей страницы.
Задача 6.1. Напишите сценарий, выводящий в окно браузера следующие свойства объекта navigator:
•appName,
•appCodeName,
•appVersion ,
•userAgent,
•browserLanguage,
•cookieEnabled.
Сценарий объекта navigator
нужно создать сценарий для отображения свойств объекта navigator. <html> <head><title>Цикл.
Напишите сценарий
Напишите сценарий, который по дате рождения человека определяет, под каким знаком зодиака родился.
Создать Generic Mapper, который будет мапить схожие свойства одного объекта в свойства другого
Нужно создать generic mapper, который будет мапить схожие(similar) свойства одного объекта в.
Метод, выводящий на экран локальные максимумы объекта-массива
Разработать метод Local_maximumi класса Num_Array. Метод должен вывести на экран локальные.
Решение
Узнать имя современного браузера практически нереально.
Надо специально хранить SQL-таблицу, в каких браузерах каких версий что выдавалось на гора.
Binding свойства объекта в combobox к свойству другого объекта :)
Всем привет)) У меня есть WPF приложение на котором расположен ComboBox с объектами этого класа .
напишите сценарий, преобразующий формулу в префиксную нотацию
а формула сама должна состоять из лог переменных, круглых скобок, логического отрицания.
Напишите сценарий перемещения цветного квадрата по кругу
Задача 5.1. Напишите сценарий перемещения цветного квадрата по кругу. Траекторию удобно описывать.
Как отоброжать окно поверх всех остальных? В частности окно браузера
Хочу что-бы сбоку было маленькое окошко с видео поверх всех остальных и что-бы не закрывалось.
Напишите сценарий, позволяющий найти максимальный элемент в массиве
Задан одномерный массив вещественных чисел. Напишите сценарий, позволяющий найти максимальный.
Напишите сценарий, который определяет число положительных элементов массива
. Задан одномерный массив вещественных чисел. Напишите сценарий, который определяет число.
1 Напишите сценарий, выводящий в окно браузера таблицу
случайных целых чисел.
2 Напишите сценарий, формирующий таблицу квадратов (кубов,
логарифмов, корней и т. п.) для некоторого набора чисел.
3 Используя графические изображения, созданные для задачи 3.8,
напишите сценарий, который при загрузке страницы будет
случайным образом выбирать одну из картинок и отображать ее в
окне браузера.
Перечисление своих заданий без попыток решения навивает желание задать вопрос "Сколько платите за решение?"
Написал код по вашему заданию, держите:
// task1
function writeTableOfRandomNumbers(parent) var sizes = ;
var maxRandomValue = 100;
var table = document.createElement("table");
table.setAttribute("border", "1");
for(var i = 0; i < sizes.height; ++i) var currentRow = table.insertRow(-1);
for(var j = 0; j < sizes.width; ++j) var currentCell = currentRow.insertCell(-1);
var value = Math.floor(Math.random() * maxRandomValue);
currentCell.appendChild(document.createTextNode(value));
>
>
parent.appendChild(table);
>
window.addEventListener("load", function() writeTableOfRandomNumbers(document.body);
>);
// task2
function writeTableOfFunction(parent, firstNumber, lastNumber, step, funcsArray) var table = document.createElement("table");
table.setAttribute("border", "1");
var titleRow = table.insertRow(-1);
var valuesCount = funcsArray.length;
var valueRows = [];
for(var i = 0; i < valuesCount; ++i)valueRows[i] = table.insertRow(-1);
>
for(var x = firstNumber; x < lastNumber; x += step) var titleCell = titleRow.insertCell(-1);
titleCell.appendChild(document.createTextNode(x));
titleCell.style.fontWeight = "bold";
for(var i = 0; i < valuesCount; ++i) valueRows[i].insertCell(-1).appendChild(document.createTextNode(funcsArray[i](x)));
>
>
parent.appendChild(table);
>
window.addEventListener("load", function()
var fnSquare = function(x) < return x*x; >
var funcsArray = [fnSquare, Math.sqrt, Math.log]; // квадраты, корни, логарифмы и т. п. (можно ещё в массив функций добавить)
writeTableOfFunction(document.body, 1, 10, 1, funcsArray);
>);
// task3
function showRandomPictureFromList(parent, sources_list) var table = document.createElement("img");
var randomIndex = Math.floor(Math.random() * sources_list.length);
var source = sources_list[randomIndex];
table.setAttribute("src", source);
parent.appendChild(table);
>
window.addEventListener("load", function() var sitepart = "htt"+"ps://avatars.mds.yandex.net/get-imageoftheday/"; // mail-ответы ссылки нарямую не допускает
var sources_list = [sitepart + "145844/3bc64071aa6f4c2087f5e7016944eed1/orig",
sitepart + "142379/dc09ac89adae46dfb82a6a893a231124/orig",
sitepart + "137077/4b8a52d3c40e48eeaaaf5bdda1c70447/orig",
sitepart + "142379/3849a46a92fd411caa3276a1bea66c22/orig",
sitepart + "145843/1e496ab61eba427cad4ffc8c867af94c/orig",
sitepart + "117786/579053f23c4241328c6675b117ef189c/orig",
sitepart + "117786/865b7c5285da499ab39309f039583709/orig",
sitepart + "193001/ef3349e09c3244c1b33cb190dd21cd46/orig"];
showRandomPictureFromList(document.body, sources_list);
>);
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». Перейти к редактору
Ожидаемый результат:
15. Напишите PHP-программу для печати букв алфавита 'C'. Перейти к редактору
Ожидаемый результат:
16. Напишите программу PHP для печати букв алфавита «D». Перейти к редактору
Ожидаемый результат:
17. Напишите программу PHP для печати букв алфавита «E». Перейти к редактору
Ожидаемый результат:
18. Напишите программу PHP для печати букв алфавита 'F'. Перейти к редактору
Ожидаемый результат:
19. Напишите программу PHP для печати букв алфавита «G». Перейти к редактору
Ожидаемый результат:
20. Напишите PHP-программу для печати букв алфавита «H». Перейти к редактору
Ожидаемый результат:
21. Напишите PHP-программу для печати букв алфавита «I». Перейти к редактору
Ожидаемый результат:
22. Напишите программу PHP для печати букв алфавита 'J'. Перейти к редактору
Ожидаемый результат:
23. Напишите PHP-программу для печати букв алфавита «K». Перейти к редактору
Ожидаемый результат:
24. Напишите программу PHP для печати букв алфавита 'L'. Перейти к редактору
Ожидаемый результат:
25. Напишите программу PHP для печати алфавитного шаблона «M». Перейти к редактору
Ожидаемый результат:
26. Напишите программу PHP для печати алфавитного шаблона «N». Перейти к редактору
Ожидаемый результат:
27. Напишите программу PHP для печати букв алфавита 'O'. Перейти к редактору
Ожидаемый результат:
28. Напишите программу PHP для печати букв алфавита 'P'. Перейти к редактору
Ожидаемый результат:
29. Напишите программу PHP для печати букв алфавита «Q». Перейти к редактору
Ожидаемый результат:
30. Напишите программу PHP для печати букв алфавита 'R'. Перейти к редактору
Ожидаемый результат:
31. Напишите программу PHP для печати букв алфавита 'S'. Перейти к редактору
Ожидаемый результат:
32. Напишите программу PHP для печати букв алфавита 'T'. Перейти к редактору
Ожидаемый результат:
33. Напишите программу PHP для печати букв алфавита «U». Перейти к редактору
Ожидаемый результат:
34. Напишите программу PHP для печати букв алфавита 'V'. Перейти к редактору
Ожидаемый результат:
35. Напишите программу PHP для печати букв алфавита 'W'. Перейти к редактору
Ожидаемый результат:
36. Напишите программу PHP для печати букв алфавита 'X'. Перейти к редактору
Ожидаемый результат:
37. Напишите программу PHP для печати букв алфавита «Y». Перейти к редактору
Ожидаемый результат:
38. Напишите программу PHP для печати букв алфавита «Z». Перейти к редактору
Ожидаемый результат:
Редактор кода PHP:
Еще не все !
Не отправляйте решение вышеупомянутых упражнений здесь, если вы хотите внести вклад, перейдите на соответствующую страницу упражнения.
Функция, вызываемая событием onchange, имеет примерно такую структуру:
Методы focus()и select() служат для возвращения курсора мышки в поле ввода и выделения ошибочных данных. Эти методы без использования специальных приёмов правильно работают только в браузере Mozilla.
|
Рис. 1 |
Задача 3.2. Создайте страницу (рис. 1) для вычисления тригонометрических функций. Вводимые пользователем данные должны проверяться немедленно после ввода и после нажатия кнопки Вычислить.
Указания.Не забудьте перевести градусы в радианы. Название тригонометрической функции можно передавать как параметр тега :
Сформируйте текстовую строку вида
"Math." + имя_ф + "(" + знач_аргумета + ")" // имя_ф – sin,cos или tan
Затем воспользуйтесь функцией eval(строка), которая выполняет выражение, хранящееся в строке.
Лабораторная работа №2.4
Изображения и рисование
Цель работы: исследовать методы динамического размещения изображений на странице и научиться создавать рисунки с помощь сценария.
Предварительная загрузка изображений
Изображения, размещаемые на сайтах, должны удовлетворять двум противоречащим друг другу требованиям. Они должны иметь высокое качество и быстро загружаться, но чем выше качество изображения, тем больше занимаемый изображением объём памяти и тем медленнее оно загружается. Задача построения изображения, имеющего приемлемые объём и качество, решается с помощь графических пакетов прикладных программ, например, Photoshop с подключённым к нему пакетом ImageReady.
Средствами JavaScript можно сначала загрузить несколько изображений в кэш, а затем выводить их по одному на экран по команде пользователя. Такой приём основан на психологии пользователя Интернета. Опытным путём доказано, что человек не замечает паузы между моментами посылки запроса и получением ответа, если эта пауза не больше четырёх секунд. Пользователь привык ждать несколько десятков секунд, пока загрузится выбранная им страница, а при работе с уже загруженной страницей болезненно реагирует на возникающие паузы.
Для загрузки изображения в память без отображения его на экране служит объект Image, которому не соответствует ни один элемент HTML-документа. Создаётся и используется объект Image так:
var risunok = new Image(ширина, высота) //создание объекта
risunok.src = "pict.jpg" //загрузка pict.jpg в память
document.images[0].src = risunok.src //отображение на экране
Задача 4.1. Создайте страницу (рис. 2), на которой пользователь может просматривать фотографии, выбирая их названия из поля со списком (тег ).
|
Рис. 2 |
Указания. Используйте ассоциативный массив, элементами которого будут объекты Image, то есть фотографии, а ключами – значения атрибута VALUE тега . Создание массива и одного элемента делается так:
var photo= new Array()
photo["les"] = new Image(400,550);//элемент массива - объект
photo["les"].src = "les.jpg";//свойство объекта -имя файла
//с рисунком
Вызов функции, которая вызывает появление в окне браузера выбранной фотография, производится при щелчке мышкой по элементу списка.Это событие называется onchange. В качестве параметра функции передаётся объект SELECT:
Функция, правильно воспринимаемая браузерами Internet Explorer и Mozilla, состоит из трёх строк:
Файлы с фотографиями предоставит преподаватель.
Рисование
В JavaScript нет специальных средств для создания и редактирования изображений. Отрезок вертикальной прямой можно изобразить с помощью тега , задав ширину и высоту контейнера равными толщине и длине линии соответственно. Горизонтальный отрезок строится с помощью тега и вложенного в него тега .
Идея метода рисования кривой, описанной аналитически, состоит в следующем:
- создаётся картинка размером 1 пиксель, залитая чёрным или каким-то другим цветом,
- эта картинка размножается по заданной траектории.
В примере 4.1 описанными методами строятся четыре прямых.
Пример 4.1
Выполнить пример 4.1
Все прямые пересекаются в одной точке (рис. 3). Горизонтальная и вертикальная прямые построены без использования скрипта. Наклонных прямые построены с помощью функции line(x1,y1,x2,y2,n), где x1, y1 – координаты начала отрезка прямой, x2, y2 – координаты конца, n – толщина линии.
|
Рис. 3 |
Задача 4.2. Создайте страницу (рис. 4) , на которой строится эллипс с задаваемыми пользователем размерами большой и малой полуосей.
Указания. Для построения эллипса удобно использовать его параметрические уравнения:
x = a* cos(t); y = b*sin(t),
где: a, b – полуоси, 0
|
Рис. 4 |
Лабораторная работа №2.5
Движение и перетаскивание
Цель работы: изучить методы создания сценариев для автоматического движения объектов по заданной траектории и для перетаскивания объектов мышкой.
Движение
Для управления движением объекта используются:
- метод имя процесса= setInterval(выражение,период) объекта window, запускающий процесс циклического выполнения выражения (функции);
- метод clearInterval(имя процесса) объекта window, останавливающий процесс.
Методом setInterval(выражение, период) запускается процесс, состоящий в циклическом выполнении заданного в первом параметре выражения с периодом, заданным во втором параметре. Процесс останавливается методом clearInterval(имя процесса). В качестве выражения обычно используется функция. Скрипт, задающий движение фотографии по диагонали экрана, приведён в примере 5.1.
Пример 5.1
STYLE="position:absolute; left:300;top:5">
Запустить
STYLE="position:absolute;top:0;left:20">
dx=8;
dy=3
st=false //остановить процесс
function Start_stop()
< if(st)
< window.clearInterval(proc) //остановиться
st=false //заменить надпись на кнопке с именем В1
document.all.B1.innerHTML="Запустить"
>
else //двигаться (запустить процесс с именем proc)
< proc=window.setInterval("move()",100)
st=true
//заменить надпись на кнопке с именем В1
document.all.B1.innerHTML="Стоп"
//в тип INTEGER)
var y=parseInt(document.all.lv.style.top)
//абсцисса левого края фотографии
var x=parseInt(document.all.lv.style.left)
document.all.lv.style.top=y+dy //Перемещение по OY
document.all.lv.style.left=x+dx //Перемещение по OX
Выполнить пример 5.1
В исходном состоянии фотография находится в верхнем левом углу экрана. Для запуска и остановки движения служит кнопка. Надпись на кнопке меняется. Если фотография неподвижна,то на кнопке написано Запустить, при движении –Стоп.
В браузере Internet Explorer надпись на кнопке можно изменить с помощью свойства innerText:
document.all.B1.innerText="Запустить"
document.all.B1.innerText= "Стоп"
Браузер Mozilla Firefox не поддерживает свойство innerText, поэтому в примере использовано свойство innerHTML, поддерживаемое обоими браузерами. При нажатии кнопки выполняется функция Start_stop, служащая для запуска или остановки процесса proc. Если proc запущен, то через каждые 100 мсек вызывается функция move, перемещающая фотографию на 8 пикселей вправо и на 3 вниз.
Задача 5.1. Напишите сценарий перемещения цветного квадрата по кругу. Траекторию удобно описывать параметрическими уравнениями:
y=R*sin(t) ,
где: R– радиус круга, 0
Квадратом может служить контейнер …
Перетаскивание
В сценариях для перетаскивания какого-либо предмета по окну браузера используется событие onmousemove. Рассмотрим два варианта сценария, в которых используется событиеonmousemove. В обоих сценариях пользователь может мышкой передвигать фотографию по всему окну браузера. Первый вариант сценария (пример 5.2) применим только в браузере Internet Explorer. Второй вариант (пример 5.3) правильно выполняется в браузерах Internet Explorer 6.0 и MozillaFirefox 2.0, но он сложнее для понимания.
Пример 5.2.
document.all.IM1.style.top= event.clientY-170
document.all.IM1.style.left=event.clientX-120
Выполнить пример 5.2
В примере 5.2 попадание курсора мышки на фотографию служит сигналом к началу перемещения. При дальнейшем перемещении курсора мышки фотография передвигается вместе с ним.Пользователь при перемещении фотографии не должен нажимать на кнопки мышки,так как нажатие на левую кнопку остановит движение и курсор можно будет убрать с фотографии. Нажатие правой кнопки кроме прекращения движения вызывает всплытие меню.
В сценарии используются три функции:
- IM1.onmouseover() для запуска процесса перетаскивания;
- IM1.onmousemove для перетаскивания;
- IM1.onclick() для прекращения перетаскивания.
Все три функции имеют специальные имена. IM1.onmouseоver() означает, что эта функция выполняется, когда на объекте с ID=IM1 происходит событие onmouseоver(). Для функций со специальным именами не нужны операторы вызова.
Функция IM1.onmousemove() выполняется циклически в течение всего времени нахождения курсора мышки в площади фотографии. Так как частота выполнения функции не бесконечная, то при резком движении мышкой можно сорвать курсор с фотографии и прекратить перетаскивание, но такое завершение процесса неудобно. Для управления процессом перетаскивания предназначена логическая переменная flag. Если щёлкнуть кнопкой мышки по фотографии, то выполнится функция IM1.onclick(), переменная flag примет значение false и функция IM1.onmousemove() прекратит менять координаты фотографии. Можно будет убрать курсор с фотографии. Если снова хотя бы коснуться курсором фотографии, то выполнится функция IM1.onmouseover(), переменная flag примет значении true и перетаскивание возобновится.
Во втором варианте сценария (пример5.3) неиспользуются функции со специальными именами.
Пример 5.3
document.all.kv.onmousemove= dragIt
//Если кнопка мышки отпускается, то - ф-ция osvobodi
document.all.kv.onmouseup= osvobodi
document.all.kv.onmousedown=zachvat
sobytie=(evt) ? evt :(window.event) ?window.event : "";
if(flag)
< document.all.kv.style.top=sobytie.clientY-25;
document.all.kv.style.left=sobytie.clientX-25;
Выполнить пример 5.3
В отличие от первого варианта во втором явно вызывается одна функция. Строка
предписывает при загрузке HTML-документа вызвать функцию init(). В результате выполнения функции init() события, происходящие с объектом, имеющим идентификатор kv, будут вызывать выполнение функций dragIt, osvobodi и zachvat. Объект kv – это контейнер , задающий красный квадрат, перетаскиваемый мышкой.
Функция zachvat(), разрешающая начать перетаскивание, выполняется при нажатии кнопки мышки на квадрате, то есть когда происходит событие onmousedown. Функция osvobodi() выполняется при отпускании кнопки мышки (событие onmouseup) и запрещает перетаскивание.
Функция dragIt(evt) связана с событием onmousemove и поэтому циклически выполняется в течение всего времени нахождения курсора мышки на фотографии. Параметр evt – это объект события, созданный в ответ на действие пользователя. В Internet Explorer объект события имеет обозначение window.event или просто event. В Mozilla Firefox объект события обозначается как evt. Для совместимости обоих случаев служит условный оператор
sobytie = (evt) ? evt : window.event;
или в более привычной форме
if(evt) sobytie=evt
else sobytie=window.event
Задача 5.2. Измените последний пример так, чтобы красный квадрат можно было перемещать внутри серого квадрата размером 500х500 пикселей.
Лабораторная работа №2.6
Совместимость браузеров
Цель работы: освоить приёмы создания таких страниц, которые можно было бы просматривать браузерами разных типов.
Для разработчиков веб-сайтов было бы идеальным строгое соблюдение стандарта W3C DOM во всех типах и версиях браузеров. К сожалению, даже в самых последних версиях браузеров стандарт объектной модели поддерживается не полностью. В объектные модели браузеров вводятся объекты, события, свойства и методы, отсутствующие в стандарте. Поэтому создание страниц, правильно отображаемых браузерами разных типов, представляет собой очень сложную задачу. В самом простом случае сайт тщательно отлаживается только на браузере одного типа и одной версии, а пользователи всех других браузеров при открытии сайта получают предупреждение об отсутствии гарантий правильного отображения сайта. Такой подход вполне приемлем для информационной системы, используемой одной организацией, например, банком, имеющим свою сеть Интранет.
Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого.
Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначенные для поддерживания проводов на необходимой высоте над землей, водой.
Механическое удерживание земляных масс: Механическое удерживание земляных масс на склоне обеспечивают контрфорсными сооружениями различных конструкций.
© cyberpedia.su 2017-2020 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!
Читайте также: