Список используемых источников
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
КУРГАНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
Кафедра информационных технологий и методики
преподавания информатики
ОТЧЕТ
По учебной практике
Студент _ Павлова А.В.
Группы __2339__
Зачетная книжка № 073054
Преподаватель: _Никифорова Т.А._
Курган, 2011
Содержание
1. Разработка эскизного и технического проектов…………………………………………….3
1.1 Назначение и область применения
1.2 Технические характеристики:
1.2.1 Постановка задачи
1.2.2 Описание алгоритма
1.2.3 Организация входных и выходных данных.
1.2.4 Выбор состава технических и программных средств
1.3 Источники, использованные при разработке
2. Разработка рабочего проекта
2.1 Разработка программы
2.2 Спецификация программы
2.3 Текст программы
2.4 Описание программы
2.5 Тестирование программы
Список использованных источников…………………………………………………………...7
Разработка эскизного и технического проектов
Назначением данного проекта является ознакомление с языком программирования JavaScript.
Областью применения является разработка веб-сайтов.
Постановка задачи
Реализовать движение элемента (например, картинки) по эллиптической траектории. Задаются следующие параметры: угол наклона эллипса (градусы), длины большой и малой полуосей, угловая скорость.
|
|
|
Описание алгоритма
Для поиска решения поставленной задачи рассмотрим систему координат
Выбор состава технических и программных средств
Для решения поставленной задачи на языке JavaScript понадобятся методы DOM (Document Object Model), которые позволят получить доступ к элементам HTML страницы а также позволят изменить их свойства. Объект Math, предоставляющий нам основные математические функции и константы.
Разработка рабочего проекта
Текст программы
PRJ6.htm
| <html> <head> <title>Движение по эллипсу</title> <style type="text/css"><body background="небо.jpg" text=write></style> <script defer="defer" type="text/javascript" src="main.js"></script> <link rel="stylesheet" type="text/css" href="main.css"> <script> <!-- function ShowOrHide(element){ if(document.getElementById(element).style.display == 'none') { document.getElementById(element).style.display = 'block'; document.getElementById('btn').innerText="Спрятать";} else if(document.getElementById(element).style.display == 'block') { document.getElementById(element).style.display = 'none'; document.getElementById('btn').innerText="Показать";} } //--> </script> </head> <body onload="ellipse('pic0',x0,y0, document.getElementById('alpha0').value, document.getElementById('a1').value, document.getElementById('b1').value,document.getElementById('omega1').value)"> <b>Параметры: </b><a href="#" id="btn" onClick="ShowOrHide('m')">Показать</a> <div id="m" style="display:none;"><br> угол наклона эллипса, град.(альфа): <input id="alpha0" type="text" value="0" size="4"><br> большая полуось (a) :<input id ="a1" type ="text" value="220" size="4"><br> малая полуось (b) :<input id ="b1" type ="text" value="150" size="4"> <br> угловая скорость (омега): <input id ="omega1" type ="text" value="0.005" size="4"><br> <img id="SelectedImage" src="pic0.png" height="16"> <select name="selpic" onchange="document.getElementById('SelectedImage').src=this.options[this.selectedIndex].value; document.pic.id=this.options[this.selectedIndex].value; document.pic.src=this.options[this.selectedIndex].value;" > <!-- document.selpic.options[document.selpic.selectedIndex].value --> <option value="pic0.png">Смайлик</option> <option value="pic1.png">Звезда</option> <option value="pic2.png">Планета</option> <option value="pic3.png">Солнце</option> </select><br> </div> <img id="pic0" name="pic" class="img" src="pic0.png"> </body> </html> |
|
|
|
main.css
| BODY { background-color : #000 ; background-image : url(bg.jpg); color: #fff; } .img { position:absolute; top:100px; left:60px width: 100px; height: 100px; } |
main.js
| var skipresize=0; //количество пропусков до приращения размеров картинки var x0=400,y0=300; // центр эллипса function ellipse(xid,x0,y0,alpha,a,b,omega) // эллиптическая орбита { var as=Math.sin(alpha*Math.PI/180); var ac=Math.cos(alpha*Math.PI/180); dt=5; // приращение времени t=0; //omega - угловая скорость, знак задает направление вращения var x=a*Math.cos(omega*t); // начальное положение на эллипсе var y=b*Math.sin(omega*t); obj=document.getElementById(xid); obj.style.top=(-x*as+y*ac+y0)+"px"; obj.style.left=(x*ac+y*as+x0)+"px"; setInterval("move(x0,y0,document.getElementById('alpha0').value,document.getElementById('a1').value,document.getElementById('b1').value,document.getElementById('omega1').value)",100) } function move(x0,y0,alpha,a,b,omega) // пересчет координат, вызывается из ellipse() { t=t+dt; // x,y - координаты в собственной системе координат var x=a*Math.cos(omega*t); var y=b*Math.sin(omega*t); var as=Math.sin(alpha*Math.PI/180); var ac=Math.cos(alpha*Math.PI/180); obj.style.top=(-x*as+y*ac+y0)+"px"; // переход в экранную систему координат obj.style.left=(x*ac+y*as+x0)+"px"; var sizeX=obj.getBoundingClientRect().right-obj.getBoundingClientRect().left;// Рассчитываем ширину картинки var sizeY=obj.getBoundingClientRect().bottom-obj.getBoundingClientRect().top;// Рассчитываем высоту картинки var s_ellipse=Math.floor(Math.PI*(parseInt(a)+parseInt(b))); //длина дуги эллипса var dSize=Math.floor(s_ellipse*Math.abs(omega)/5); //выполняем приращение размеров при движении картинки в IV и I четвертях собств. сист. коорд при положительной угл. скорости или во II и III четв. при отриц. угл. скор. при размере до 300 if((((Math.round(x*ac)>0) && (skipresize==0) && (omega>0)) || ((Math.round(x*ac)<0) && (skipresize==0) && (omega<0))) && sizeX <'300' ) {obj.style.width= sizeX+1 *dSize +'px'; obj.style.height=sizeY+1 *dSize +'px'; skipresize=5-dSize%5;} //выполняем уменьшение размеров при движении картинки во II и III четвертях собств. сист. коорд при положительной угл. скорости или в IV и I четв. при отриц. угл. скор. при размере от 16 if((((Math.round(x*ac)<0) && (skipresize==0) && (omega>0)) || ((Math.round(x*ac)>0) && (skipresize==0) && (omega<0))) && sizeX >'16' ) {obj.style.width= sizeX-1 *dSize +'px'; obj.style.height=sizeY-1 *dSize +'px'; skipresize=5-dSize%5;} skipresize=skipresize-1; //уменьшаем счетчик кол-ва пропусков window.status =dSize%5 + ' Координаты объекта в собственной системе координат: X:'+Math.round(x)+' Y:'+Math.round(y)+' Размеры объекта: '+sizeX +'X'+sizeY +' Размеры окна: '+window.screen.availHeight/2 +'X'+window.screen.availWidth/2; } |
|
|
|
|
|
|
Описание программы
При загрузки html страницы PRJ6.htm происходит событие OnLoad которое, в свою очередь, вызывает функцию ellipse с параметрами:
'pic0' – идентификатор картинки, которую будем перемещать
x0,y0 – координаты центра эллипса
document.getElementById('alpha0').value – значение поля и идентификатором alpha0
document. getElementById(' a1'). value - значение поля и идентификатором a1
document. getElementById(' b1'). value - значение поля и идентификатором b1
document. getElementById(' omega1'). value - значение поля и идентификатором omega1
После запуска функция ellipse() выполняет предварительные рассчеты положения картинки и устанавливает интервал запуска функции move() каждые 100 мс.
Функция movе() выполняет перемещение картинки по эллиптической траектории с заданной угловой скоростью и углом наклона. При этом изменяя размеры какртинки для придания эффекта удаления и приближения.
Тестирование программы
Программа была протестирована в браузерах Internet Explorer и Mozilla Firefox
Список используемых источников
1. Учебник javascript [Электронный ресурс] http://javascript.ru/tutorial
2. Справочник по HTML и CSS [Электронный ресурс] http://htmlbook.ru/
Дата добавления: 2018-09-23; просмотров: 80; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!