Простейшие интернет-программы — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(→‎Использование мыши)
 
(не показано 12 промежуточных версий 2 участников)
Строка 5: Строка 5:
 
'''''Это приложение - аналог [[Флэш-приложения:_механика|вот этого flash-приложения]], написанный на JavaScript
 
'''''Это приложение - аналог [[Флэш-приложения:_механика|вот этого flash-приложения]], написанный на JavaScript
  
−
<addscript src=Random_walk_v1-1/>
+
 
  
 
{| class="simple" border="1"
 
{| class="simple" border="1"
−
  |<htmlet nocache="yes">Random_walk_TM</htmlet>
+
  |<htmlet nocache="yes">Tcvetkov/Random_walk/Random_walk_TM</htmlet>
 
|}
 
|}
  
  
 
{| class="simple" border="1"
 
{| class="simple" border="1"
−
  |<htmlet nocache="yes">Random_walk_TM_400x300_1</htmlet>
+
  |<htmlet nocache="yes">Tcvetkov/Random_walk/Random_walk_TM_400x300_1</htmlet>
−
  |<htmlet nocache="yes">Random_walk_TM_400x300_2</htmlet>
+
  |<htmlet nocache="yes">Tcvetkov/Random_walk/Random_walk_TM_400x300_2</htmlet>
−
  |<htmlet nocache="yes">Random_walk_TM_400x300_3</htmlet>
+
  |<htmlet nocache="yes">Tcvetkov/Random_walk/Random_walk_TM_400x300_3</htmlet>
 
|}
 
|}
  
  
  
−
Текст программы на языке JavaScript (разработчик [[Цветков Денис]]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">  
+
<div class="mw-collapsible mw-collapsed" style="width:100%" >
 +
'''Текст программы на языке JavaScript (разработчик [[Цветков Денис]]):''' <div class="mw-collapsible-content">
 
Файл '''"random_walk.js"'''
 
Файл '''"random_walk.js"'''
−
<source lang="javascript" first-line="1">
+
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 
// canvas передается аргументом для того, чтобы была возможность запускать скрипт на несколько canvas'ов
 
// canvas передается аргументом для того, чтобы была возможность запускать скрипт на несколько canvas'ов
 
function MainRW(canvas) {
 
function MainRW(canvas) {
Строка 65: Строка 66:
 
     }
 
     }
 
}
 
}
−
</source>
+
</syntaxhighlight>
 
Файл '''"random_walk.html"'''
 
Файл '''"random_walk.html"'''
−
<source lang="html" first-line="1">
+
<syntaxhighlight lang="html5" line start="1" enclose="div">
 
<html>
 
<html>
 
<head>
 
<head>
Строка 76: Строка 77:
 
</body>
 
</body>
 
</html>
 
</html>
−
</source>
+
</syntaxhighlight>
−
</toggledisplay>
+
</div>
 +
</div>
  
 
== Использование мыши  ==
 
== Использование мыши  ==
  
−
''Старый пример в этой статье был написан на ныне неиспользуемой нашей кафедрой библиотеке. Актуальный пример смотрите здесь:'' [[Обучение_JavaScript#Пример №5. Управление мышью|Управление мышью]]
+
''Старый пример в этой статье был написан на ныне неиспользуемой нашей кафедрой библиотеке.''
−
 
 
−
== Как самому выложить сюда скрипт ==
 
−
 
 
−
 
 
−
Один из способов выложить скрипт, использующий canvas, на страничку сайта tm.spbstu.ru:
 
−
 
 
−
* Оформить в скрипте стартовую функцию (как в примерах на этой страничке)
 
−
* Сделать специальный HTML-файл для плагина HTMLets. Например:
 
−
Файл '''"random_walk_TM.html"'''
 
−
<source lang="html" first-line="1">
 
−
<canvas id="canvasRW" width="800" height="600"></canvas>
 
−
<script type="text/javascript">MainRW(document.getElementById('canvasRW'));</script> // MainRW(...) - стартовая функция скрипта
 
−
</source>
 
−
* Загрузить скрипт на сервер в папку jsscripts, а HTML файл - в папку htmlets
 
−
'' Примечание. Для того, чтобы загрузить файлы на сервер, обратитесь к [[Панченко_Артём|администратору]]
 
−
* При верстке странички на tm.spbstu.ru добавить следующие строки:
 
−
<source lang="html" first-line="1">
 
−
<addscript src=random_walk/>    // скрипт добавится на страничку в <head></head>
 
−
<htmlet nocache="yes">random_walk_TM</htmlet>    // содержимое специального HTML-файла добавится на страницу
 
−
</source>
 
−
'' Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта.
 
−
 
 
−
'' Примечание 2. Не используйте точки в названии файла со скриптом - движок сервера не обработает такой файл.
 
  
−
'' Примечание 3. Можно оформить весь скрипт в htmlet
+
Актуальный пример смотрите здесь: [[Обучение_JavaScript#Пример №5. Управление мышью|Управление мышью]]
  
 
== См. также ==
 
== См. также ==
−
*[[JavaScript-пружина]]
+
*[[Как выложить скрипт в Виртуальную лабораторию]]
−
*[[JavaScript-mechanics]]
 
−
*[[JavaScript-mechanics-box2D]]
 
  
 
[[Category: Виртуальная лаборатория]]
 
[[Category: Виртуальная лаборатория]]
 
[[Category: Программирование]]
 
[[Category: Программирование]]
 
[[Category: JavaScript]]
 
[[Category: JavaScript]]

Текущая версия на 09:24, 11 марта 2015

Виртуальная лаборатория > Простейшие интернет-программы

Случайное блуждание[править]

Это приложение - аналог вот этого flash-приложения, написанный на JavaScript




Текст программы на языке JavaScript (разработчик Цветков Денис):

Файл "random_walk.js" 

 1 // canvas передается аргументом для того, чтобы была возможность запускать скрипт на несколько canvas'ов
 2 function MainRW(canvas) {
 3     var context = canvas.getContext("2d");
 4 
 5     var start = 0;
 6     var d, x, y;
 7     var w = canvas.width;
 8     var h = canvas.height;
 9 
10     setInterval(tick, 30);
11 
12 
13     function Rand() {
14         return Math.floor(3 * Math.random()) - 1;
15     }
16 
17     function tick() {
18         if (start == 0) {
19             start = 1;
20             d = 10;
21             x = w / 2;
22             y = h / 2;
23         }
24         else {
25             x = x + d * Rand();
26             y = y + d * Rand();
27             if (x < 0) x = x + w;
28             if (x > w-10) x = x - w;
29             if (y < 0) y = y + h;
30             if (y > h-10) y = y - h;
31         }
32 
33         context.fillStyle = "rgb("+
34             Math.floor(Math.random()*256)+","+
35             Math.floor(Math.random()*256)+","+
36             Math.floor(Math.random()*256)+")";
37         context.beginPath();
38         context.rect(x, y, d-1, d-1);
39         context.closePath();
40         context.fill();
41     }
42 }

Файл "random_walk.html" 

1 <html>
2 <head>
3     <script src="random_walk.js" type="text/javascript"></script>
4 </head>
5 <body onload="MainRW(document.getElementById('canvasRW'));">
6     <canvas id="canvasRW" width="800" height="600" style="border:1px solid #dddddd;"></canvas>
7 </body>
8 </html>

Использование мыши[править]

Старый пример в этой статье был написан на ныне неиспользуемой нашей кафедрой библиотеке.

Актуальный пример смотрите здесь: Управление мышью

См. также[править]

Источник — «http://tm.spbstu.ru/?title=Простейшие_интернет-программы&oldid=32580»