JavaScript is a language that adds functionality and interactivity to websites. While HTML can create a web page, and CSS can customize its appearance, the page will be static. It won’t do anything.
How do you fix that? JavaScript! JavaScript makes many things possible on web pages. It responds to user events like clicks, hovers or key presses. It changes HTML, changes CSS and makes web pages interactive.
Like CSS, there are three ways that JavaScript is embedded on web pages – inline, internal and external.
Inline JavaScript
When embedding inline CSS in an HTML tag, websites use the style attribute. When embedding inline JavaScript however, there are a number of attributes that are used.
One of these attributes is onclick. Any JavaScript code inside an onclick attribute gets executed when the HTML element is clicked.
The inner text of the below <strong> tag is currently ‘Text’. JavaScript will change the inner text to ‘Bold Text’ when the element is clicked.
<strong> onclick="this.innerText = 'Bold Text';">Text</strong>The result is below. Click and see the text change!
Text
Internal JavaScript
Like CSS, inline JavaScript is uncommon. Often, websites have scripts that involve multiple HTML elements, so they tend to collect them all up and place them together in one big script, using the HTML <script> tag.
<script>
var num = 142857;
document.getElementById('bold').innerText = num;
</script>The <script> tag is often placed as the last element inside a website’s <body>. This is so that all the HTML elements can fully load before they get transformed by the JavaScript.
External JavaScript
Often, a website will have its JavaScript in a separate file called script.js. This allows the site to use the same script on multiple web pages. Here’s how a website would link to an external JavaScript file, assuming the file name is script.js:
<script src="script.js"></script>Like with internal JavaScript, this tag is often placed near the end of the <body> element on a web page.
Want More JavaScript?
There’s only so much this tutorial can cover. If you want to take JavaScript further, there’s plenty of extensive JavaScript training available.
There are some great providers of online JavaScript training like Treehouse and Codecademy. There are also plenty of great books on JavaScript, such as JavaScript: The Definitive Guide and JavaScript: The Good Parts.
See all JavaScript training recommendations…
Stick around for the next tutorial, and you’ll learn how to write more simple scripts with PHP.
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
