Hello and welcome to the Javascript section! Please note that the level of difficulty covered in this section is at most moderate to advanced. It's not incredibly high, and you're not going to be coding a web version of minecraft after going through it, but it's still incredibly useful for laying those foundations. If you would like more tutorials, check out The Coding Train, who has made a range of very educational and entertaining videos on both Java and Javascript.
Javascript Essentials
Essential 1: Javascript is a programming language that is run through the browser, through the use of another programming language called HTML. Most good text editors like Atom will automatically fill alot of this in for you. I will cover how to write a basic HTML file in Atom in this section as well, so there's no real need to worry about it.
Essential 2: Javascript IS NOT THE SAME AS JAVA. THEY ARE PRETTY MUCH POLAR OPPOSITES WHEN IS COMES TO PROGRAMMING, SO DON'T GET CONFUSED BETWEEN THEM!!!!!
Essential 3: Javascript is quite a high-level language. This means that Javascript is written in another programming language, which in turn is written in another different programming language and so on.
Starting a Javascript project with Atom
You'll first want to download Atom, which you'll find here. I'm using a mac, but the same steps should work on windows as well.
Step 1:
Open atom and create a new file:
Step 2:
In the bottom right of the screen, click on 'Plain Text' and change it to 'HTML' as follows:
Step 3:
Start typing in '<html>' and select the first option:
NOTE: Most of this HTML will be explained in another section of this blog if you are interested (which you probably should be).
Your project should now look like this:
If you want your project to have a title, add it like this:
Add a '<script>' tag as follows:
Save the file as 'index.html' to a folder on your desktop (preferably called the name of your project), and make sure to delete the extra <'s like the last image in this step:
To add javascript to your project, create another file in the same folder called 'sketch.js':
Add that file to the original html file by adding a source in the script tag, and removing the type tag as follows:
You're ready to begin!
A few things to note:
1. To open the 'index.html' in atom, you will need to right click on it at click 'open with', then 'atom'. Normally, the file would open in your browser.
2. To run the code, open 'index.html' in your browser.
3. Always remember to save often. If you lose progress, it's going to be annoying. ALSO, the computer can only read code that has been saved. If you try to run a long stretch of code that you haven't saved, nothing will happen, or worse, you will get a whole bunch of errors.
4. Check out the lessons to learn how to start coding your first project!
Any questions, let me know in the comments of this post - Have fun coding!
Noah
Comments
Post a Comment