Writing JavaScript Outside of the CodeHS Editor
About the Author:
Andy Bayer is a senior at Northwestern University in Chicago majoring in Computer Science and Oboe Performance. His hobbies include running and playing the oboe. His preferred language to code in is Python.
We’ve made a lot of improvements to the way that you can take your CodeHS code with you and use it on other web pages. Now you can just include the CodeHS JavaScript library and use it like any other script tag!
If you’ve worked through our JavaScript programs you may remember functions like `add()` and `setPosition()` along with objects like `Rectangle`, `Circle` and `Randomizer`. Until now, these only ever existed inside the editor on codehs.com — they’re not part of the standard JavaScript programming language so we just wrote them ourselves. But this meant they were only ever accessible inside CodeHS.
Now we’ve made it possible to take any JavaScript program you wrote with CodeHS and post it on your own blog, website, or just run it locally. All the background code you need can now be included with just one line.
To move one of your JavaScript programs out of CodeHS, just open it in the CodeHS editor then click More > Embed and follow the instructions.
Full Documentation and Libraries on npm
We’ve also added full documentation for all of the code we have running in the CodeHS libraries. You can now see the full documentation on the Docs tab of any editor or by visiting codehs.com/docs. You can also download the packages from https://www.npmjs.com/~codehs and play around with the source code.
See a Demo!
You can see a sample CodeHS graphics program running on its own HTML page here: http://thekeesh.com/codehs/breakout/. If you want to see the source right click and select “View Page Source.” Here you can see 2048, or a version that shows the code as well.
Some More Technical Details
What is actually happening when you need to take your code outside of CodeHS is a few things:
- Include our JavaScript library just like any other script tag
- Create your own canvas to draw on with the <canvas> html element
- Make sure to call the start() function.
We do this all for you and you can easily modify it from there!
