Code

JavaScript for Noobs: How to Add JavaScript to a Website

February 23, 2020
javascript-for-noobs-add-javascript-to-website

Welcome to another blog episode of JavaScript for Noobs and today we will learn how to add JavaScript to a website. Quick intro: I learned Java, PHP and Python before learning JavaScript so I have the fundamentals of object oriented programming. If like me, you had some programming knowledge and just looking to know how to get started with JavaScript, and make it work on a website, then you’ve come to the right place.

Before we go on, let’s see where JavaScript fits in web development.

  • HTML – We first start with HTML, which is a markup language (not a programming language) that wraps content or elements in HTML tags for the browser to read and display.
  • CSS – Styling the display of this content is done using CSS.
  • JavaScript – Now, this is what we use to add behaviour to a website, basically making our website useful and not just for display.

Web behaviour using JavaScript can be simple, like a pop up box that greets you when you first open, or refresh a webpage; or it can be complex like Google search guessing what you are about to type next in its search bar.

Today, we will learn two different ways to add JavaScript to a website: Internal and External. It is similar to how we add CSS to a website and the same principles apply. As a bonus, I’ll show you how to play around with JavaScript on live websites without causing trouble.

Internal JavaScript

Quite simply, this is embedding JavaScript in your HTML file (like what you do with internal CSS). Here is a very straightforward example. You can write JavaScript code within the HTML file by wrapping your JavaScript code in <script> tags. In this example, the JavaScript code creates a pop up message box that says “Hello world!”

<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>

  <h1>Inline JavaScript Sample</h1>
  <p id="inlineJS"></p>

  <script>
	  alert("Hello world!");
  </script> 

	</body>
</html>

External JavaScript

With this method, you will need to write JavaScript in a separate, external file from your HTML file. Let’s call it, for example, index.js. In this file, we will write pure JavaScript (no more <script> tags) and then we will link the HTML file to it, by adding one line of code. As a side note, unlike PHP, you don’t need an opening tag to write JavaScript. After creating the JavaScript file (.js), you can start writing JavaScript code right away. Here is the same example as above (internal JavaScript), but using a separate, external JavaScript file.

alert("Hello world!");
<html>
  <head>
    <title>Hello World</title>
  	<script src="index.js" charset="utf-8"></script>
  </head>
  <body>
    <h1>Inline JavaScript Sample</h1>
    <p id="inlineJS"></p>

    <script>
      alert("Hello world!");
    </script> 
    <footer>
      <!-- below line is how we link to index.js -->
      <script src="index.js" charset="utf-8"></script> 
    </footer>
  </body>
</html>

I’ve added another section of the HTML, the <footer> section, where we write <script> tag. But this script doesn’t do JavaScript behaviour inside the HTML file. Instead, it calls the file indicated as “src” or source. In this case, that’s index.js where we have our JavaScript code to display the pop up message box.

Bonus! Add JavaScript to a Website that’s Live

Okay, this maybe a cheat but Google Chrome actually lets you write JavaScript code to an existing website and see the changes you’ve made real time. But, before you panic, you don’t actually change the live website, but the version of it that’s downloaded to your computer.

As a side note, whenever you open a website, you are actually downloading resources that make up that website (for example: index.html, index.js). So you have local copy of these resources that enables the display of the website on your browser. Google Chrome allows for you to edit these resources, or add JavaScript code and here’s how.

  • Open up your Chrome browser and go to your website of choice
  • On Windows, press CTRL + SHIFT + J to open up Dev Tools
  • On Mac, press CMD + OPTION + J to open the same
  • Navigate to console and clear whatever error or warnings there are (see image below) by pressing “Clear Console”
add javascript to a website

Once you do that, you’ll have a clean sheet of console where you can write JavaScript code and change the contents of the website. Check out the video below for a quick example.

Now, why would you do this, you ask? You mean, other than practicing your JavaScript skills and being able to quickly add JavaScript on a website? You will be able to prank someone, by messing up some website content (i.e. Wikipedia) on their laptop while they’re not looking. Give it a try and share your experience in the comments section below!

You Might Also Like

Share your thoughts

avatar
  Subscribe  
Notify of