I'm learning JavaScript on Khan Academy and on Codecademy. I have just started learning. I really like the way that Khan teaches JS, however, I'm not finding any way of being able to apply what I am learning anywhere else except on Khan's engine. Khan is focusing on graphics and not on console based mands.
What I'm really looking for is a way that I can take what I am learning on Khan (graphics) and Codecademy (console) and 'run' these offline on my PC. So for example, that I will be able to 'run' all of these functions, etc:
confirm(), prompt(), rect(), triangle(), ellipse(), console.log(), etc., etc.
So, can anyone explain to me how to write, save and run such JavaScript programs offline on my PC?
I'm learning JavaScript on Khan Academy and on Codecademy. I have just started learning. I really like the way that Khan teaches JS, however, I'm not finding any way of being able to apply what I am learning anywhere else except on Khan's engine. Khan is focusing on graphics and not on console based mands.
What I'm really looking for is a way that I can take what I am learning on Khan (graphics) and Codecademy (console) and 'run' these offline on my PC. So for example, that I will be able to 'run' all of these functions, etc:
confirm(), prompt(), rect(), triangle(), ellipse(), console.log(), etc., etc.
So, can anyone explain to me how to write, save and run such JavaScript programs offline on my PC?
Share Improve this question asked Apr 9, 2014 at 0:26 user3513147user3513147 472 silver badges5 bronze badges 1- 1 Why reinvent the wheel? This has been done before. It's called a browser with "Khan's engine" loaded :-) – Bergi Commented Apr 9, 2014 at 0:29
3 Answers
Reset to default 3Programming on Khan Academy uses the JavaScript language along with the library ProcessingJS.
Here is a stand-alone program example derived from Processing.js Quick Start. This performs a very simple animation.
The graphics functions will match the the documentation at khanacademy and also here.
To run this, you need to download the file "processing.js" from here and save the following as "hello.html" (or whatever you want to call it), then open "hello.html" with a browser.
<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>
Alternative: Advanced JavaScript programming style
Here is a stand-alone JavaScript program example based on snippets from Processing.js Quick Start -- this draws (and animates) a small analog clock.
The available graphics functions are the same as above, but here they require the prefix processing -- the parameter to sketchProc() below. Notice, in particular, the call to processing.line().
The instructions for running this are the same as above -- just put the following .html file in a folder along with the file 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>
You don't have to be online to run JavaScript. JavaScript is a client-side language, meaning it runs in your web browser. Since you're at the JavaScript stage, I'm going to assume you know at least the basics of HTML and hopefully CSS.
You can include a JavaScript file in your HTML document by placing this tag in the section.
<html>
<head>
<script src="/path/relavite/to/htmlpage/your.js"></script>
</head>
...
</html>
Then, you can either open your browser, then File > Open your html page, which now has the JavaScript linked to it, or you can right click the .html file in your file browser, and Open With > Chrome, FireFox, etc. to view the page locally.
Again, a connection to the web is not needed to run these files, since they are stored locally on your puter.
EDIT Might as well include the file structure. It may be easier to visualize that way.
Locally on your puter, you create a folder named "myjavascripttest". Inside this folder, you create three files: index.html, style.css and script.js
The content of the HTML file is:
<html>
<head>
<script src="https://ajax.googleapis./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>
The content of the CSS file is:
p {
background-color: blue;
}
The content of the JavaScript file is: (Note: this is jQuery, an extension of JavaScript)
$(document).ready(function() {
$(this).css('background-color', 'red');
});
Now, loading the HTML file in your browser will display a paragraph with a red background, though clearly the CSS says it should be blue. The JavaScript thus must be running!
The obvious solution would be to create an HTML file on disk with a tag containing the code you want to run. Open in a browser to run, refresh page to rerun.
You can also use nodejs, if you want to create mand-line programs, or not use a browser.
confirm and prompt are native browser calls, but will need specific implementations in the case of nodejs. rect, triangle, and ellipse will need to be specifically implemented in both cases. console.log works natively in both nodejs and browsers.