JavaScript-приложения — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
м (Замена текста — «<source lang="(.*)" first-line="(.*)">» на «<syntaxhighlight lang="$1" line start="$2" enclose="div">»)
м (Замена текста — «</source>» на «</syntaxhighligh>»)
Строка 65: Строка 65:
 
     }
 
     }
 
}
 
}
−
</source>
+
</syntaxhighligh>
 
Файл '''"random_walk.html"'''
 
Файл '''"random_walk.html"'''
 
<syntaxhighlight lang="html" line start="1" enclose="div">
 
<syntaxhighlight lang="html" line start="1" enclose="div">
Строка 76: Строка 76:
 
</body>
 
</body>
 
</html>
 
</html>
−
</source>
+
</syntaxhighligh>
 
</toggledisplay>
 
</toggledisplay>
  
Строка 137: Строка 137:
 
     });
 
     });
 
}
 
}
−
</source>
+
</syntaxhighligh>
 
Файл '''"mouse_use.html"'''
 
Файл '''"mouse_use.html"'''
 
<syntaxhighlight lang="html" line start="1" enclose="div">
 
<syntaxhighlight lang="html" line start="1" enclose="div">
Строка 149: Строка 149:
 
</body>
 
</body>
 
</html>
 
</html>
−
</source>
+
</syntaxhighligh>
 
</toggledisplay>
 
</toggledisplay>
  
Строка 163: Строка 163:
 
<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(...) - стартовая функция скрипта
−
</source>
+
</syntaxhighligh>
 
* Загрузить скрипт на сервер в папку jsscripts, а HTML файл - в папку htmlets
 
* Загрузить скрипт на сервер в папку jsscripts, а HTML файл - в папку htmlets
 
'' Примечание. Для того, чтобы загрузить файлы на сервер, обратитесь к [[Панченко_Артём|администратору]]
 
'' Примечание. Для того, чтобы загрузить файлы на сервер, обратитесь к [[Панченко_Артём|администратору]]
Строка 170: Строка 170:
 
     // скрипт добавится на страничку в <head></head>
 
     // скрипт добавится на страничку в <head></head>
 
<htmlet nocache="yes">random_walk_TM</htmlet>    // содержимое специального HTML-файла добавится на страницу
 
<htmlet nocache="yes">random_walk_TM</htmlet>    // содержимое специального HTML-файла добавится на страницу
−
</source>
+
</syntaxhighligh>
 
'' Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта.
 
'' Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта.
  

Версия 18:55, 8 марта 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" <syntaxhighlight lang="javascript" line start="1" enclose="div"> // canvas передается аргументом для того, чтобы была возможность запускать скрипт на несколько canvas'ов function MainRW(canvas) { 

   var context = canvas.getContext("2d");

   var start = 0;
   var d, x, y;
   var w = canvas.width;
   var h = canvas.height;

   setInterval(tick, 30);



   function Rand() {
       return Math.floor(3 * Math.random()) - 1;
   }

   function tick() {
       if (start == 0) {
           start = 1;
           d = 10;
           x = w / 2;
           y = h / 2;
       }
       else {
           x = x + d * Rand();
           y = y + d * Rand();
           if (x < 0) x = x + w;
           if (x > w-10) x = x - w;
           if (y < 0) y = y + h;
           if (y > h-10) y = y - h;
       }

       context.fillStyle = "rgb("+
           Math.floor(Math.random()*256)+","+
           Math.floor(Math.random()*256)+","+
           Math.floor(Math.random()*256)+")";
       context.beginPath();
       context.rect(x, y, d-1, d-1);
       context.closePath();
       context.fill();
   }

} </syntaxhighligh> Файл "random_walk.html" <syntaxhighlight lang="html" line start="1" enclose="div"> <html> <head> 

   <script src="random_walk.js" type="text/javascript"></script>

</head> <body onload="MainRW(document.getElementById('canvasRW'));"> 

   <canvas id="canvasRW" width="800" height="600" style="border:1px solid #dddddd;"></canvas>

</body> </html> </syntaxhighligh> </toggledisplay>

Использование мыши

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


Не удается найти HTML-файл mouse_use_TM.html


Текст программы на языке JavaScript (разработчик Цветков Денис, использована библиотека oCanvas): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "mouse_use.js" <syntaxhighlight lang="javascript" line start="1" enclose="div"> function MainMU() { 

   var canvas  = document.getElementById('canvasMU');
   var context = canvas.getContext("2d");

   var w = canvas.width;
   var h = canvas.height;

   var y0 = h / 2;
   var r = w  / 7;

   var canvas = oCanvas.create({
       canvas: "#canvasMU",
       fps: 60
   });

   var rectangle = canvas.display.rectangle({
       x: r,
       y: y0-r,
       width: 2*r,
       height: 2*r,
       fill: "rgba(255, 0, 0, 1)"
   });

   var arc = canvas.display.arc({
       x: 5*r,
       y: y0,
       radius: r,
       start: 0,
       end: 360,
       fill: "rgba(0, 0, 255, 1)"
   });

   canvas.addChild(rectangle);
   canvas.addChild(arc);

   rectangle.dragAndDrop({
       changeZindex: true,,
       move: function ()  {this.fill = "rgba(255, 0, 0, 0.5)";},
       end: function ()    {this.fill = "rgba(255, 0, 0, 1)";}
   });
   arc.dragAndDrop({
       changeZindex: true,
       move: function ()  {this.fill = "rgba(0, 0, 255, 0.5)";},
       end: function ()    {this.fill = "rgba(0, 0, 255, 1)";}
   });

} </syntaxhighligh> Файл "mouse_use.html" <syntaxhighlight lang="html" line start="1" enclose="div"> <html> <head> 

   <script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.5.1/ocanvas.min.js"></script>
   <script src="mouse_use.js" type="text/javascript"></script>

</head> <body onload="MainMU();"> 

   <canvas id="canvasMU" width="400" height="300" style="border:1px solid #dddddd;"></canvas>

</body> </html> </syntaxhighligh> </toggledisplay>

Как самому выложить сюда скрипт

Один из способов выложить скрипт, использующий canvas, на страничку сайта tm.spbstu.ru:

  • Оформить в скрипте стартовую функцию (как в примерах на этой страничке)
  • Сделать специальный HTML-файл для плагина HTMLets. Например:

Файл "random_walk_TM.html" <syntaxhighlight lang="html" line start="1" enclose="div"> <canvas id="canvasRW" width="800" height="600"></canvas> <script type="text/javascript">MainRW(document.getElementById('canvasRW'));</script> // MainRW(...) - стартовая функция скрипта </syntaxhighligh>

  • Загрузить скрипт на сервер в папку jsscripts, а HTML файл - в папку htmlets

Примечание. Для того, чтобы загрузить файлы на сервер, обратитесь к администратору

  • При верстке странички на tm.spbstu.ru добавить следующие строки:

<syntaxhighlight lang="html" line start="1" enclose="div"> 

   // скрипт добавится на страничку в <head></head>

Не удается найти HTML-файл random_walk_TM.html
// содержимое специального HTML-файла добавится на страницу </syntaxhighligh> Примечание 1. Не называйте стартовую функцию Main() - она будет пересекаться с уже имеющимися скриптами движка сайта.

Примечание 2. Не используйте точки в названии файла со скриптом - движок сервера не обработает такой файл.

Примечание 3. Можно оформить весь скрипт в htmlet

См. также

Источник — «http://tm.spbstu.ru/?title=JavaScript-приложения&oldid=32344»