JavaScript-приложения — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
Wikiadmin (обсуждение | вклад) м (Замена текста — «<source lang="(.*)" first-line="(.*)">» на «<syntaxhighlight lang="$1" line start="$2" enclose="div">») |
Wikiadmin (обсуждение | вклад) м (Замена текста — «<syntaxhighlight lang="html" line start="1" enclose="div">» на «<syntaxhighlight lang="html5" line start="1" enclose="div">») |
||
| (не показаны 2 промежуточные версии этого же участника) | |||
| Строка 65: | Строка 65: | ||
} | } | ||
} | } | ||
| − | </ | + | </syntaxhighlight> |
Файл '''"random_walk.html"''' | Файл '''"random_walk.html"''' | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html5" line start="1" enclose="div"> |
<html> | <html> | ||
<head> | <head> | ||
| Строка 76: | Строка 76: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </ | + | </syntaxhighlight> |
</toggledisplay> | </toggledisplay> | ||
| Строка 137: | Строка 137: | ||
}); | }); | ||
} | } | ||
| − | </ | + | </syntaxhighlight> |
Файл '''"mouse_use.html"''' | Файл '''"mouse_use.html"''' | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html5" line start="1" enclose="div"> |
<html> | <html> | ||
<head> | <head> | ||
| Строка 149: | Строка 149: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </ | + | </syntaxhighlight> |
</toggledisplay> | </toggledisplay> | ||
| Строка 160: | Строка 160: | ||
* Сделать специальный HTML-файл для плагина HTMLets. Например: | * Сделать специальный HTML-файл для плагина HTMLets. Например: | ||
Файл '''"random_walk_TM.html"''' | Файл '''"random_walk_TM.html"''' | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html5" line start="1" enclose="div"> |
<canvas id="canvasRW" width="800" height="600"></canvas> | <canvas id="canvasRW" width="800" height="600"></canvas> | ||
<script type="text/javascript">MainRW(document.getElementById('canvasRW'));</script> // MainRW(...) - стартовая функция скрипта | <script type="text/javascript">MainRW(document.getElementById('canvasRW'));</script> // MainRW(...) - стартовая функция скрипта | ||
| − | </ | + | </syntaxhighlight> |
* Загрузить скрипт на сервер в папку jsscripts, а HTML файл - в папку htmlets | * Загрузить скрипт на сервер в папку jsscripts, а HTML файл - в папку htmlets | ||
'' Примечание. Для того, чтобы загрузить файлы на сервер, обратитесь к [[Панченко_Артём|администратору]] | '' Примечание. Для того, чтобы загрузить файлы на сервер, обратитесь к [[Панченко_Артём|администратору]] | ||
* При верстке странички на tm.spbstu.ru добавить следующие строки: | * При верстке странички на tm.spbstu.ru добавить следующие строки: | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html5" line start="1" enclose="div"> |
// скрипт добавится на страничку в <head></head> | // скрипт добавится на страничку в <head></head> | ||
<htmlet nocache="yes">random_walk_TM</htmlet> // содержимое специального HTML-файла добавится на страницу | <htmlet nocache="yes">random_walk_TM</htmlet> // содержимое специального HTML-файла добавится на страницу | ||
| − | </ | + | </syntaxhighlight> |
'' Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта. | '' Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта. | ||
Текущая версия на 22:02, 10 марта 2015
Виртуальная лаборатория > JavaScript-приложенияСлучайное блуждание[править]
Это приложение - аналог вот этого flash-приложения, написанный на JavaScript
Не удается найти HTML-файл Random_walk_TM.html
|
Не удается найти HTML-файл Random_walk_TM_400x300_1.html
|
Не удается найти HTML-файл Random_walk_TM_400x300_2.html
|
Не удается найти HTML-файл Random_walk_TM_400x300_3.html
|
Текст программы на языке JavaScript (разработчик Цветков Денис): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "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>
</toggledisplay>
Использование мыши[править]
Это приложение - аналог вот этого flash-приложения, написанный на JavaScript
Не удается найти HTML-файл mouse_use_TM.html
Текст программы на языке JavaScript (разработчик Цветков Денис, использована библиотека oCanvas): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
Файл "mouse_use.js"
1 function MainMU() {
2 var canvas = document.getElementById('canvasMU');
3 var context = canvas.getContext("2d");
4
5 var w = canvas.width;
6 var h = canvas.height;
7
8 var y0 = h / 2;
9 var r = w / 7;
10
11 var canvas = oCanvas.create({
12 canvas: "#canvasMU",
13 fps: 60
14 });
15
16 var rectangle = canvas.display.rectangle({
17 x: r,
18 y: y0-r,
19 width: 2*r,
20 height: 2*r,
21 fill: "rgba(255, 0, 0, 1)"
22 });
23
24 var arc = canvas.display.arc({
25 x: 5*r,
26 y: y0,
27 radius: r,
28 start: 0,
29 end: 360,
30 fill: "rgba(0, 0, 255, 1)"
31 });
32
33 canvas.addChild(rectangle);
34 canvas.addChild(arc);
35
36 rectangle.dragAndDrop({
37 changeZindex: true,,
38 move: function () {this.fill = "rgba(255, 0, 0, 0.5)";},
39 end: function () {this.fill = "rgba(255, 0, 0, 1)";}
40 });
41 arc.dragAndDrop({
42 changeZindex: true,
43 move: function () {this.fill = "rgba(0, 0, 255, 0.5)";},
44 end: function () {this.fill = "rgba(0, 0, 255, 1)";}
45 });
46 }
Файл "mouse_use.html"
1 <html>
2 <head>
3 <script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.5.1/ocanvas.min.js"></script>
4 <script src="mouse_use.js" type="text/javascript"></script>
5 </head>
6 <body onload="MainMU();">
7 <canvas id="canvasMU" width="400" height="300" style="border:1px solid #dddddd;"></canvas>
8 </body>
9 </html>
</toggledisplay>
Как самому выложить сюда скрипт[править]
Один из способов выложить скрипт, использующий canvas, на страничку сайта tm.spbstu.ru:
- Оформить в скрипте стартовую функцию (как в примерах на этой страничке)
- Сделать специальный HTML-файл для плагина HTMLets. Например:
Файл "random_walk_TM.html"
1 <canvas id="canvasRW" width="800" height="600"></canvas>
2 <script type="text/javascript">MainRW(document.getElementById('canvasRW'));</script> // MainRW(...) - стартовая функция скрипта
- Загрузить скрипт на сервер в папку jsscripts, а HTML файл - в папку htmlets
Примечание. Для того, чтобы загрузить файлы на сервер, обратитесь к администратору
- При верстке странички на tm.spbstu.ru добавить следующие строки:
1 // скрипт добавится на страничку в <head></head>
2 <htmlet nocache="yes">random_walk_TM</htmlet> // содержимое специального HTML-файла добавится на страницу
Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта.
Примечание 2. Не используйте точки в названии файла со скриптом - движок сервера не обработает такой файл.
Примечание 3. Можно оформить весь скрипт в htmlet
