JavaScript:显示诸如rect()、rect()、省略()等图形
我正在学习JavaScript的可汗学院和科德勒米。我才刚开始学习。我真的很喜欢Khan教JS的方式，但是，除了Khan的引擎之外，我找不到任何方法将我正在学习的东西应用到其他地方。Khan专注于图形，而不是基于控制台的命令。
我真正想要的是一种方法，我可以把我正在学习的可汗(图形)和科德罗米(控制台)，并‘运行’这些离线在我的电脑。例如，我将能够“运行”所有这些函数，等等：
确认()、提示符()、rect()、rect()、省略()、console.log()等。
那么，有谁能向我解释如何在我的PC上脱机编写、保存和运行这样的JavaScript程序呢？
回答 3
Stack Overflow用户
发布于 2014-04-09 01:37:27
汗学院的编程使用了JavaScript语言和库ProcessingJS。
下面是一个从Processing.js快速启动派生的独立程序示例.这执行一个非常简单的动画。
图形函数将与khanacademy.org的文档和这里相匹配。
要运行该程序，您需要从processing.js下载文件"hello.html“，并将以下内容保存为"hello.html”(或您想将其称为“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编程风格
下面是一个独立的JavaScript程序示例，它基于来自Processing.js快速启动的片段--它绘制(和动画)一个小型模拟时钟。
可用的图形函数与上面的相同，但是这里它们需要前缀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>Stack Overflow用户
发布于 2014-04-09 00:37:31
您不必在线运行JavaScript。JavaScript是一种客户端语言，意味着它在您的web浏览器中运行.由于您正处于JavaScript阶段，我将假设您至少了解HTML的基本知识，并希望了解CSS。
您可以通过将此标记放置在该节中，将JavaScript文件包含在您的HTML中。
<html>
<head>
<script src="/path/relavite/to/htmlpage/your.js"></script>
</head>
...
</html>然后，您可以打开浏览器，然后打开您的html页面，它现在已经将JavaScript链接到它，或者您可以右键单击文件浏览器中的.html文件，然后打开With > Chrome，FireFox等等，在本地查看该页面。
同样，运行这些文件不需要与web的连接，因为它们是本地存储在计算机上的。
编辑可能还包括文件结构。用这种方式想象可能更容易。
在本地，您可以在计算机上创建一个名为"myjavascripttest“的文件夹。在这个文件夹中，创建三个文件: 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必须在运行！
Stack Overflow用户
发布于 2014-04-09 00:31:54
显而易见的解决方案是在磁盘上创建一个HTML文件，其中包含要运行的代码。打开要运行的浏览器，刷新页以重新运行。
如果要创建命令行程序，也可以使用nodejs，也可以不使用浏览器.
确认和提示是本机浏览器调用，但在nodejs的情况下需要特定的实现。在这两种情况下，需要具体实现rect、三角形和椭圆。console.log本机工作在nodejs和浏览器中。
https://stackoverflow.com/questions/22950665
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号