我正在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>