This is where my #BreakingJS journey begins and I’m equally excited and scared. So without further ado, blog post number 1 is an introduction to JS for those (including myself), who don’t really know what it’s role is in the development world.
If you are wandering what #BreakingJS is all about, check out the debut post here which explains what it is I’m doing.
One thing before we continue:
In order to learn JS, you should already have knowledge of HTML, and if you have CSS too then that’s great. These three languages are important when developing websites and all work together to make your website look and work correctly. If you don’t have a working knowledge of HTML and CSS, then put JS on hold for now and tick those two languages off first.
Here is my analogy of how the three work together using the human face:
HTML (The Face)
The content and structure of your face (website) and how it is laid out. It creates the position of your eyes, nose and lips (sections within your website that you can create using DIV’s etc).
CSS (The Makeup)
This adds makeup (style) to your face (HTML) structure and generally makes it look pretty (or not), depending on how good you are at applying makeup.
JS programs your face (website) so that you can speak, see + hear (submit forms, display interactive galleries, play games).
I hope this makes sense and you enjoyed my artwork 🙂
Including JS in your HTML
For HTML and JS to run side by side, we need to link the pair together. Just as you would need to do with your HTML and CSS. We insert the JS into our HTML document using the <script> tag. This can be done in two ways:
This is placed directly inside your HTML document between the opening <head> tag and the closing </head> tag.
<html> <head> <title>My Website Title</title> <link rel="stylesheet" type="text/css" href=".../style.css"> <!-- CSS External Link --> <script> <!-- Internal JS Script Code --> alert("Hello, world."); </script> </head> <body> <!-- HTML Content --> <!-- HTML Content --> <!-- HTML Content --> </body> </html>
Adding a small snippet of JS script to your <head> tag in this way is ok but anything more would cause a lot of code bulk and course your website to slow down your page loading time, so just be careful how much you use this method.
This means that you create one document for all of your JS and link it the same way that you would an external .css file. Simply create a file and name it what you wish, and end it with the .js format. This then needs to be linked inside your HTML document, BEFORE the closing </body> tag at the bottom.
We want our JS to load AFTER our HTML, so by placing our Script at the bottom of our document, we are allowing our HTML to load before our JS. This means that our page structure, content and CSS will load first giving our viewers something to look at whilst our script is invisibly loading afterwards.
If we place the script at the top of the page, the JS will load first, slowing down the loading of your HTML and CSS and resulting in what appears to be a slow loading page to the user.
Tidy code and faster loading time has to be the clear winner here right? External linking JS files it is for me.
The JS Console
Most modern browsers these days have something called developer tools built in. Inside these “dev tools” should be something called the Console. My favourite browser for dev tools is Chrome, but which browser you choose is up to you. Have a look around at the various ones available and go with the one you find easiest to navigate or the most useful to use.
Accessing your dev tools via keyboard shortcuts:
- Windows: F12 or Ctrl + Shift + I
- Mac: Cmd + Option + I
To enter the console, simply find the Console tab within your dev tools, or you can use the following shortcuts:
- Windows: Ctrl + Shift + J
- Mac: Cmd + Option + J
The Console will help you with all of your testing and debugging needs when working with JS. It will flag up any errors that arise during the running of your code. It will tell you which file the incorrect code is in and what line number it sits on. Clicking that message will jump you straight to the error in question so that you can easily identify the source of your problem. Much quicker than scanning your code with bare eyes.
The console also responds to commands that you give it using the console.log method which will run and print any value that you give it to the Console panel. For example, if I write console.log(Hello World); this will print the following:
So that’s JS, in a very small nutshell. If this has gone over your head at all, have another read. Print it off and make some notes for yourself. Writing things down in your own words is a brilliant way of taking knowledge in. I’m not very good at learning by reading, so I find that very useful.
Also, feel free to ask some questions, and a good practice if you don’t quite understand something is to just go ahead and “Google It”! I guarantee that someone else has asked the very same thing you are asking, so the answer will be there for sure.
Also published on Medium.