Now that you know enough HTML and CSS to display what your JavaScript renders, we can actually start working with it!!!
Every browser has a console built into it to help you debug your JavaScript code. In my examples I will be using the Brave Browser. You can use your browser of choice, just do a quick search on how to get into the console on it. In Brave, if you click on the menu on the top right and hover over the "More Tools" option, one of the options will be "Devolper Tools". Click on this and at the top there will be an option for "Console". If you can see what I see in example 2 below you are good to go!
Example 1 Example 2
After you figure out how to access your browsers console, the next step is to create a HTML document that will tell your browser to run JavaScript code. So go ahead and make a folder for your project, create a index.html file, and a test.js file. Open the index.html file in your text/code editor, and try creating a full HTML document that contains a paragraph that reads Hello World.
Did you get it to work? It should look something like this.
Don't forget that the line <!DOCTYPE=html> at the beginning and the <meta charset="UTF-8"> in the head section.
To make this run JavaScript code all we need to do at this point is add in a script tag. Before your paragraph tag add this to index.html
<script src="test.js"></script>
Your index.html page should now look similar to this.
If you open up index.html at this point in a browser, you will not see anything happening after the script is added. That is because we haven't written any JavaScript code for the browser to execute yet.
Talking to the console in JavaScript is extremly easy. All you have to do is console.log("What you want to print out"); So go ahead and open up test.js in your editor and type console.log("Hello World"); Now reopen index.html in your browser. Everything stil looks the same right? Open up your browsers console like you did at the beginning of the lesson and it should say Hello World.
This is how your test.js file should look and this is what your web browser should be displaying.
Note: Still under devolpment! Last update on: