The Basics Of Web Development - JavaScript Tips & Tricks

Last week I talked about HTML & CSS which are the foundations of web development. If you haven't read that post I would recommend reading it first. You can find it HERE.

Today I’m going to talk about JavaScript which is where web development starts to get more interesting. With HTML & CSS you can only build static websites with a few basic animations, Javascript allows us to add interactivity to a webpage. During this post, I’m going to talk more about useful tips and help resources than spending lots of time on syntax and technical issues.

How Does It Work?

Javascript runs sections of code based on an event, some of these events could be “On-load” which means it will run the code as soon as it is loaded. “On-Click” which as you may have guessed runs when someone clicks. JavaScript is one of the most versatile languages for web development mainly because it allows you to do almost anything you want to on a web page. If you want to know more about the Technical issues or Syntax look at https://www.w3schools.com where they have a great library of code examples which can be inserted into an HTML file using the <script> tag.

Tips & Tricks

Now I have done a very brief explanation of what it is I’m going to talk about a few key things to think about for your website.

Positioning & Linking

My first tip is not to use inline scripts; an inline script is where you write your code directly into your HTML file like this.

<script>var x = 10</script>

Now while this is technically not wrong it's just not best practice. This is because when you have a simple section of code this is fine but when you have a multiline more complicated code this fills up your HTML file making it harder to read and work with as well more difficult to edit later. So, what you should do instead is create a second file just for your JavaScript and then link to this file in your HTML like this <script href="myjavascript.js"></script>.

So now we are linking not using inline the next important thing to think about is where to place your link. This is much more important than you may think because it will affect your loading speed. Now my advice is to always put your script tags at the bottom of the HTML just before the </body> tag. This way the client's browser will load everything on the page first and then the Javascript which is important not just for speed but if your scripts use any information from the

page then they need to go at the end otherwise, the scripts will load before being able to load the information they need to work.

Speed

Speed is so important on the web as there is so much content out there you don't what yours overlooked because it took too long to load. One thing you can do is minimise your code which means taking out any whitespace and comments as these don't affect your code they just make it easier for a programmer to read. This means your file is smaller and therefore loads faster.

Simon Dutton