Question

我在可汗学院和Codecademy上学习JavaScript。我刚开始学习。我真的很喜欢Khan教JS的方式，但是，除了Khan的引擎之外，我没有找到任何能够应用我在其他任何地方学习的方法。 Khan专注于图形，而不是基于控制台的命令。

我真正想要的是一种我可以学习Khan（图形）和Codecademy（控制台）以及“运行”的方法。这些离线在我的电脑上。例如，我将能够运行＆＃39;所有这些功能等：

confirm（），prompt（），rect（），triangle（），ellipse（），console.log（）等等。

那么，有人可以向我解释如何在我的电脑上离线编写，保存和运行这样的JavaScript程序吗？

Answer 1

Khan Academy的编程使用JavaScript语言和ProcessingJS库。

这是一个源自Processing.js Quick Start的独立程序示例。这会执行一个非常简单的动画。

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

要运行此功能，您需要下载文件＆＃34; processing.js＆＃34;来自here并将以下内容保存为＆＃34; hello.html＆＃34; （或者你想称之为的任何东西），然后打开＆＃34; hello.html＆＃34;用浏览器。

<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>

Answer 2

您不必在线运行JavaScript。 JavaScript是一种客户端语言，这意味着它可以在您的Web浏览器中运行。由于您处于JavaScript阶段，我将假设您至少了解HTML的基础知识并希望CSS。

您可以在HTML文档中包含JavaScript文件，方法是将此标记放在该部分中。

<html>
  <head>
  <script src="/path/relavite/to/htmlpage/your.js"></script>
  </head>
...
</html>

然后，您可以打开浏览器，然后按文件＆gt;打开你的html页面，它现在链接了JavaScript，或者你可以右键单击文件浏览器中的.html文件，然后打开＆用; Chrome，FireFox等可在本地查看该页面。

同样，运行这些文件不需要连接到Web，因为它们存储在您的计算机本地。

修改可能还包括文件结构。以这种方式可视化可能更容易。

在您的计算机上，您可以创建一个名为＆＃34; myjavascripttest＆＃34;的文件夹。在此文件夹中，您可以创建三个文件：index.html，style.css和script.js

HTML文件的内容是：

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="/path/relavite/to/htmlpage/your.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>This is a paragraph</p> </body> </html>

CSS文件的内容是：

p { background-color: blue; }

JavaScript文件的内容是:(注意：这是jQuery，JavaScript的扩展）

$(document).ready(function() { $(this).css('background-color', 'red'); });

现在，在浏览器中加载HTML文件会显示一个带红色背景的段落，但CSS显然应该是蓝色。因此JavaScript必须正在运行！

Answer 3

显而易见的解决方案是在磁盘上创建一个HTML文件，其中包含一个包含您要运行的代码的标记。在浏览器中打开以运行，刷新页面以重新运行。

如果要创建命令行程序或不使用浏览器，也可以使用nodejs。

确认和提示是本机浏览器调用，但在nodejs的情况下需要特定的实现。在这两种情况下都需要专门实现rect，triangle和ellipse。 console.log在nodejs和browserms中本地工作。

JavaScript：显示图形，如rect（），triangle（），ellipse（）等

3 个答案:

替代方案：高级JavaScript编程风格