2

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

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?

user3513147
  • 47
  • 2
  • 5
  • 1
    Why reinvent the wheel? This has been done before. It's called a browser with "Khan's engine" loaded :-) – Bergi Apr 09 '14 at 00:29

3 Answers3

3

Programming 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.org 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>
Brent Bradburn
  • 51,587
  • 17
  • 154
  • 173
  • I don't have enough rep yet to vote up, but this is exactly what I had been searching for. Thank you so much for taking the time to research this and re-edit it a couple of times to provide the perfect answer. – user3513147 Apr 09 '14 at 02:07
  • I just wanted to get a little more information. I'm trying to modify the first script to make a simple animation. Can you point out to me what I need to change to make it work? http://pastebin.com/aheG4Wi0 – user3513147 Apr 09 '14 at 12:07
  • @user3513147: Good idea. I have added animation to the first example by implementing [`draw()`](http://processingjs.org/reference/draw_), which gets called automatically -- once per animation frame. – Brent Bradburn Apr 09 '14 at 14:13
  • Why do I have to use 'var draw = function()' instead of 'void draw()' on Khan Academy to receive the same results? Also, why do you not need a semicolon at the end for it to work in my browser but Khan requires it? – user3513147 Apr 09 '14 at 15:27
  • @user3513147: I didn't do it here, but it is generally a good idea to add [`"use strict"`](http://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it) at the top of your JavaScript code blocks. If you do this, it will require the semicolons -- otherwise, it is less restrictive about such things. – Brent Bradburn Apr 09 '14 at 18:47
  • @user3513147: I'm not 100% sure exactly what is going on in Khan Academy. Basically, though, it is more like the "Advanced" example that I gave in most regards, but it does allow you to call the drawing functions directly (without the `processing` prefix). In my first example, the programming language is not strictly JavaScript, but rather it is the [Processing programming language](http://en.wikipedia.org/wiki/Processing_(programming_language)), which happens to be very similar to JavaScript. For your experimentation, you will have to decide which language you want to use. – Brent Bradburn Apr 09 '14 at 19:00
  • [Here's a bit of an explanation of why you can run the Processing language inside a browser](http://ejohn.org/blog/processingjs). – Brent Bradburn Apr 09 '14 at 19:07
  • Thank you so much for introducing me to the Processing program language. After checking it out, it looks like an excellent approach for an absolute beginner like myself to learn how to code, from the absolute beginnings up to very advanced levels. What a powerful programming language! – user3513147 Apr 10 '14 at 05:01
1

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

EDIT Might as well include the file structure. It may be easier to visualize that way.

Locally on your computer, 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.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>

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!

Aaron St. Clair
  • 391
  • 1
  • 3
  • 12
0

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

Abram
  • 413
  • 1
  • 3
  • 13