Friday , 17 November 2017
Home / Programming / JavaScript / Including JavaScript – JavaScript Tutorial
Including JavaScript
Including JavaScript

Including JavaScript – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

The first step for any project utilizing JavaScript would be including JavaScript in your web documents. This is relatively easy to do, but before we actually do anything, I would like to talk about organization.

Organizing Your Files

It’s important to be organized. Having all your scripts in one place allows you to manage your files easily and it prevents cluttered file space. For this tutorial series, we’ll be have an index.html file and a folder called js for our scripts.

Create these and then open up the index.html file. Insert this bit of code.

For the most part, you should be familiar with most of these tags. This won’t change much and we’ll be using this file constantly throughout the series.

Something you’ll notice is that we’re using a tag called <script>. You use this tag to start for including JavaScript. If you want to, you can include all your code between these 2 tags.

Unobtrusive JavaScript

You’re allowed to write JavaScript code between the <script></script> tags. However, we won’t be writing JavaScript code directly inside our HTML documents. This isn’t considered good practice. It’s better to have all your scripts in a separate JavaScript file. By writing JavaScript inside your documents, you’re writing obtrusive JavaScript. What you end up with is a huge file with cluttered code.

We’re going to practice unobtrusive JavaScript. This allows for less cluttered code, content to be loaded faster and it’s easier to maintain your code. To do this, you simply create an external JavaScript file and then embed that code into our document.

We don’t have a file named script.js yet. Create this file inside your js folder and insert this bit of code.

Try loading your HTML document in your browser and you should see a pop up with the message:

This is an alert message!

Congratulations! You just created your first JS script. How does it work though?

The Breakdown

First things first, since we’re not using JavaScript directly in our HTML document, then we have to include it. In our <script> tags, we use the attribute src. This attribute allows us to define the location to our script relative to the document. In our case, the location would be js/script.js. All JavaScript files end with the .js extension.

Next, in our script, we  use the alert() function to create a pop up. A function is simply a way to run a single or group of tasks. JavaScript comes loaded with functions we can use. We can even define our own functions. We’ll learn more about functions and how to create our own in a future tutorial.

Inside the alert() function, you type in your message. Your message should be wrapped in quotes or else you’ll get an error

Conclusion

The point of this tutorial was  to introduce how to embed your scripts into your HTML documents. If you don’t understand what’s going on inside our script, don’t worry. I just added that to make sure our script was working. I’ll soon explain what’s going on in depth in a future tutorial. If you would like to read the official documentation on JavaScript, then go here.

https://developer.mozilla.org/en-US/docs/Web/JavaScript

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

2 comments

  1. Great!!! thanks for sharing..
    getting bookmark now =)
  2. How about Angular.JS tutorial ?

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link