Main content
Course: Computer programming - JavaScript and the web > Unit 1
Lesson 18: Becoming a better programmerWhat to learn next
Have you watched all of the talk-throughs and completed all of the challenges up until this point? Awesome!
Before talking about what you can learn next, let's review what you've learned so far: JavaScript and ProcessingJS.
Review: JavaScript
There are many programming languages in the world, and JavaScript is one of the most popular ones. A programming language typically includes ways to store data in computer memory, ways to manipulate that data, ways to organize code and run code repeatedly. You learnt how to do all of that in JavaScript via:
- Variables: how to declare variables, assign, re-assign, and local vs. global scope.
- Data types: numbers, booleans, strings, arrays, and objects.
- Functions: how to group code into functions, pass arguments to them, and return values from them.
- Conditionals: how to use if/else statements and logical expressions.
- Loops: how to use while and for loops to repeat code.
If you learn a new programming language, you will probably discover that it shares many of those constructs in common with JavaScript, and they often differ only in the exact syntax or subtle details.
Review: ProcessingJS
To give you a fun way to learn JavaScript here, we gave you a drawing & animation "library" called ProcessingJS. That library is a collection of functions that you learnt how to use, and those functions know how to draw pixels into a canvas on the page. Here are examples of what you learnt how to use from ProcessingJS:
- Shapes: like rect(), ellipse(), and line()
- Colors: like fill(), stroke(), and background()
- Text: like text() and textSize()
- Events: like draw() and mousePressed()
- Math: like random() and dist()
If you just use JavaScript without loading the ProcessingJS library, you will not have access to any of those functions. That's why we always load the library for you here.
Learning more
Now, there are a ton of ways that you can keep learning programming, both by going deeper into what you've learnt so far or learning something related.
Learn more on Khan Academy
We have three advanced tracks here on Khan Academy, with articles and challenges:
- Advanced JS: Games & Visualizations
- Advanced JS: Natural Simulations (Recommended for those who have some familiarity with basic trigonometry and physics, like in high school).
- Algorithms (Recommended for those who have done logarithms / functions, like in Algebra 2)
Learn more JavaScript
There is still more to learn about JavaScript as a language, and several places that you can learn online. You may find that you already know the basics in these tutorials, so skip over them until you don't know something, or review them as practice.
Learn more ProcessingJS
ProcessingJS is a powerful library, and we've only introduced half of it.
Besides our advanced tutorials on Games & Visualization and Natural Simulations, you can also watch tutorials created by members of our community:
Work on a big project
Sometimes, the best way to really learn how to program is to work on a project that you're really passionate about.
- Brainstorm ideas for a game, simulation, or story, and pick one that you think would be hard but not too hard.
- Plan it out, using pseudo-code, sketching on paper, or writing it up in a document.
- Start programming it. When you're stuck, try to find programs that do similar things (either from our official talk-throughs or from the community) and ask questions on them.
- Share it with your friends and family when you're done. Reflect on how much you learnt.
Learn web development
Webpages are all written in HTML (to define their structure), CSS (to style them with different fonts and colors), and JavaScript (to make them interactive, like animating on user click). You already know the basics of JavaScript, but if you want to make webpages, you also need to learn HTML and CSS, like via these online tutorials:
Once you feel comfortable with HTML and CSS, you then need to learn how to use the JavaScript "DOM API", a library that lets you manipulate a webpage using JavaScript:
Learn new languages
If you feel very comfortable with JavaScript, maybe you'd like to learn an entirely new language. Here are a few languages you might want to learn:
- Python: used for webservers and data processing. Learn it on Codecademy, Treehouse, or with this interactive online textbook.
- Java: used to make Android apps. Learn it on Treehouse.
- Objective C: used to make iPhone apps. Learn it on MakeGamesWIthUs or Treehouse.
- Ruby: used with the Rails framework to create webservers. Learn it on Codecademy or Treehouse.
- PHP: used for webservers. Learn it on Treehouse or Codecademy.
Want to join the conversation?
Are there going to be any more tutorials? If so, you should probably teach the usage ofthis.(94 votes)
From the author:Sorry, it wasn't meant to be published as a one-liner. I've updated it now with much more!(67 votes)
Now that I've almost finished this JS Intro course, I'd like to know how to continue outside the Khan Academy environment. How can I access the Processing JS drawing and animation functions and incorporated them into my JS codes using Notepad ++ for example? Thanks, Bob(29 votes)
To run this on your computer, you need ProcessingJS. You can download Processing.js here: https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.min.js by saving the file to your computer.
Then, put a.htmlfile andprocessing.min.jsinto one folder.
Method 1 (Recommended)
Create an HTML file that looks like the example below:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Processing.js inside HTML</title>
</head>
<body>
<!-- Import Processing.js -->
<script src="processing.min.js"></script>
<!-- Canvas -->
<canvas id = "canvas"></canvas>
<!-- the code -->
<script type="application/processing" data-processing-target="canvas">
// your code here!
</script>
</body>
</html>
Replace// your code here!with your program's code.
Note: this method doesn't work inside Khan Academy.
Method 2
Follow this template: https://www.khanacademy.org/computer-programming/processingjs-inside-webpages-template/5157014494511104
Just make sure to replace<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>with<script src="processing.min.js"></script>
If you need to visualize this, here is a helpful video that uses a similar method: https://www.youtube.com/watch?v=8gpVTD5xYr4
Additional Notes
The Khan Academy Processing.js is a little bit different than the outside world Processing.js. You can find the differences here: https://khanacademy.zendesk.com/hc/en-us/articles/202260404-What-parts-of-ProcessingJS-does-Khan-Academy-support-
For more information on Processing.js, go here: http://processingjs.org/ and http://processingjs.org/articles/jsQuickStart.html
To learn more about HTML, go here: https://www.khanacademy.org/computing/computer-programming/html-css(22 votes)
Is their a second programming course for JS(14 votes)- yes there is, there is games and advanced simulations(14 votes)
So, up above, it says:
"If you just use JavaScript without loading the ProcessingJS library, you will not have access to any of those functions. That's why we always load the library for you here."
If you were not using ProcessingJS (JavaScript without the ProcessingJS library) how would you do things like generate random numbers, make draw loops, draw ellipses, etc. etc. etc. What would you do if those functions weren't built in? Or are they always built in?(9 votes)- Processing JS is a JavaScript library built on web technologies. This means that every program you make can be converted into a web page. You can use the template below. (Reference 1)
If you want to learn more about how this works, go to Reference 2 below. If you want to understand the HTML, go to link 3 to learn it.
References
1. https://www.khanacademy.org/computer-programming/processingjs-inside-webpages-template/5157014494511104
2. https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/advanced-development-tools/a/using-processingjs-outside-khan-academy
3. https://www.khanacademy.org/computing/computer-programming/html-css
P.S. Sorry for being five years late :((17 votes)
- So, to try and get an even better grasp on Javascript I clicked on the "Codecademy" link under the "Learn more Javascript" section, but when I started working with the console and canvas on Codecademy, it works completely differently. I can't use functions like 'rect', 'fill', etc. and I'm allowed to just input strings into the console. If I type something like: 5+4==9 on the Kahn Academy website's console, Oh-Noes guy shows up. If I type the same thing on the Codecademy site, the canvas returns the term, "true". Why? Why does the Codecademy site work differently? Is it because it isn't using Processing JS? I noticed that it says script.js at the top of the canvas, does that have something to do with it?
Thanks in advance.
Edit: Changed 5+4=9 to 5+4 ==9(4 votes)- In regards to the first part of your question: Sounds like you already figured out that functions like
rect(), andfill()are from the processingJS library, which is why you can't use them in codecademy.
For the second part of your question:
first of all to be clear, you can't type5 + 4 = 9into codecademy and gettrue, it must be==.
Anyways the reason you can do this in codecademy and not khan, is because the first few tutorials are done in the console. Khan doesn't let you write in the console - the window you type code into, is just an editor, so that's why you can't do this.
Just for a little fun, right click this web page, and then click inspect element. Depending on the web browser your using you should see a tab labeled "console". Click it, then inside of this console try typing5 + 4 == 9and see what happens.
This is the difference between a console, and the editor view in khanacedemy.(14 votes)
- Since there aren't any tutorials on key commands, I'll just ask. How do you use key commands so you can make something on the canvas move using the keyboard? I've always wanted to do that.(8 votes)
- From the author:I've updated the article with links to advanced tutorials that may help with that and other topics.(9 votes)
Well, I've learned 'Intro to Javascript' and I'm wondering what would be the best thing to learn on KA next. Could anybody give me suggestions.(7 votes)
You have options :)
Intro to HTML/CSS (used for making web pages):
https://www.khanacademy.org/computing/computer-programming/html-css
Intro to SQL (Data management):
https://www.khanacademy.org/computing/computer-programming/sql
Advanced JS-- Games and Visualizations:
https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations
Advanced JS-- Natural Simulations:
https://www.khanacademy.org/computing/computer-programming/programming-natural-simulations
HTML/JS--Making web pages interactive:
https://www.khanacademy.org/computing/computer-programming/html-css-js
HTML/JS -- Making webpages interactive with jQuery:
https://www.khanacademy.org/computing/computer-programming/html-js-jquery(6 votes)
Do I have to mention credits in my program if I use codes (or get help) from sites like w3shcools, stackoverflow, etc...?(5 votes)- Yes, you should mention credits(5 votes)
Are you guys going to put up any tutorials about Arduino?(9 votes)
Can't we use sound in JavaScript?(4 votes)
Harvey Houston is correct, but I'll tell you what you can do on KA; you can use the command:
After typingsound(getSound());getSound(, the soundpicker will pop up, and you can choose the sound you want to be played.
However, you can't run it over and over again in adraw()function, as it is under Disallowed Functionality in the Program Guidelines. Instead, play it when the user interacts with the program, like when akeyIsPressedor in amouseClickedfunction.(8 votes)
