Code Conquest

  • Home
  • What is Coding?
  • Tutorials
  • Training
  • Reviews
  • Knowledge Center
  • Versus
  • Blog
You are here: Home / Free Code Tutorials / Free JavaScript Tutorial

Free JavaScript Tutorial

JavaScriptJavaScript 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.

Popular Series

  • What is Coding?
  • How to Make Your First Website
  • Understanding Hex Color Codes
  • How to Become a Coder in 6 Months: a Step-by-Step Action Plan
  • How to Start a Coding Project

Get Our Newsletter

Enter your email address and we'll notify you whenever we add something new to the site.

Popular Blog Posts

  • The 50 Best Websites to Learn Python
  • The 50 Best Websites to Learn JavaScript
  • The 50 Best Websites to Learn PHP
  • Want to Switch Careers? Coding May Be the Perfect Solution!
  • 9 of the Hottest Tech Skills Hiring Managers Look for on LinkedIn

Latest Blog Posts

  • Effective Strategies For Debugging Code
  • Effective Time Management Tips for Programmers
  • Code Documentation: Tools and Techniques
  • Is Data Analytics Hard to Learn?
  • Comparing Data Science vs Computer Science

Explore Code Conquest

  • What is Coding?
  • Free Code Tutorials
  • Coding Training Recommendations
  • Coding Training Reviews
  • Knowledge Center
  • Cheat Sheets
  • Coding Quizzes
  • Versus

Deals, Discounts and Coupons

Deals

Code Conquest

  • Home
  • About
  • Privacy Policy
  • Contact Us
  • Terms of Use
  • Write for Us
  • Featured Review

Copyright © 2025 Code Conquest · About · Terms · Privacy · Contact Us · Write For Us