我正在Khan Academy和Codecademy上学习JavaScript。我刚刚开始学习。我非常喜欢Khan教授JS的方式,但是,除了在Khan的引擎上,我找不到能够将我学到的东西应用到其他地方的任何方法。 Khan专注于图形而不是基于控制台的命令。

我真正在寻找的是一种方法,可以将我在Khan(图形)和Codecademy(控制台)上学到的内容离线地“运行”在PC上。因此,例如,我将能够“运行”所有这些功能,等等:

确认(),提示(),矩形(),三角形(),椭圆(),console.log()等,等等。

因此,有人可以向我解释如何在PC上离线编写,保存和运行此类JavaScript程序吗?

最佳答案

在Khan Academy上进行编程使用JavaScript语言以及库ProcessingJS。

这是从Processing.js Quick Start派生的独立程序示例。这将执行非常简单的动画。

图形功能将与the documentation at khanacademy.org以及here匹配。

要运行此程序,您需要从here下载文件“ processing.js”,并将以下内容另存为“ hello.html”(或任何您想调用的名称),然后使用浏览器打开“ hello.html”。

<script src="processing.js"></script>
<script type="application/processing" data-processing-target="pjs">
void setup() {
  size(200, 200);
  stroke(0), strokeWeight(2);
  println('hello web!');
}
void draw() {
  background(100); // clear the frame
  ellipse(abs(frameCount%400-200), 50, 25, 25);
}
</script>
<canvas id="pjs"> </canvas>




备选方案:高级JavaScript编程风格

这是一个基于Processing.js Quick Start片段的独立JavaScript程序示例-这将绘制(并制作动画)一个小型模拟时钟。

可用的图形功能与上述相同,但此处需要前缀processing-sketchProc() below的参数。特别注意对processing.line()的调用。

运行此命令的说明与上述相同-只需将以下.html文件与文件processing.js放在一个文件夹中...

<!DOCTYPE html>
<html>
<head>
  <title>Hello Web - Processing.js Test</title>
  <script src="processing.js"></script>
</head>
<body>
  <h1>Processing.js Test</h1>
  <p>This is my first Processing.js web-based sketch:</p>
  <canvas id="canvas"></canvas>
   <script>
   function sketchProc(processing) {

      processing.draw = function() {
      var centerX = processing.width / 2, centerY = processing.height / 2;
      var maxArmLength = Math.min(centerX, centerY);
      function drawArm(position, lengthScale, weight) {
         processing.strokeWeight(weight);
         processing.line(centerX, centerY,
         centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
         centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
      }

      processing.background(224);
      var now = new Date();
      var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
      drawArm(hoursPosition, 0.5, 5);
      var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
      drawArm(minutesPosition, 0.80, 3);
      var secondsPosition = now.getSeconds() / 60;
      drawArm(secondsPosition, 0.90, 1);
      };
   }

   var canvas = document.getElementById("canvas");
   var processingInstance = new Processing(canvas, sketchProc);
   </script>
</body>
</html>

09-30 16:25
查看更多