HTML Dog
Skip to navigation

Making Stuff Happen

There’s a few ways to try out JavaScript, and when learning it’s best to try them out to see what works for you. But first, how does JavaScript relate to HTML and CSS?

HTML, CSS and JavaScript

Mostly, JavaScript runs in your web browser alongside HTML and CSS, and can be added to any web page using a script tag. The script element can either contain JavaScript directly (internal) or link to an external resource via a src attribute (external).

A browser then runs JavaScript line-by-line, starting at the top of the file or script element and finishing at the bottom (unless you tell it to go elsewhere).

Internal

You can just put the JavaScript inside a script element:


<script>
    alert("Hello, world.");
</script>

External

An external JavaScript resource is a text file with a .js extension, just like an external CSS resource with a .css extension.

To add a JavaScript file to your page, you just need to use a script tag with a src attribute pointing to the file. So, if your file was called script.js and sat in the same directory as your HTML file, your script element would look like this:


<script src="script.js"></script>

Console

The last way is great for getting instant feedback, and it’s recommend if you just want to try a line out quickly.

In a modern browser you’ll find some developer tools - often you can right click on a page, then click “inspect element” to bring them up. Find the console and you’ll be able to type JavaScript, hit enter and have it run immediately.

Search the net if you can’t find your dev tools or console - they’re changing in browsers all the time.

Let’s go!

To get started, the best way is the internal method. You can modify the contents of the script element and refresh the page just like you’re used to - quick and easy.

Now it’s time to learn some JavaScript. Good luck!