🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

HTML JavaScript: Learn to Use Inline JavaScript in Your HTML Documents

Reading time 3 min
Published Jun 23, 2017
Updated Oct 2, 2019

TL;DR – Adding JavaScript to HTML allows making webpages interactive and creating web applications.

JavaScript is one of the main languages used in web development nowadays. While it started as a front-end language, it gained more functionalities as it grew.

Combined with HTML, JavaScript can help you add dynamicity and interactiveness to your website or perform data validation. To put it short, JavaScript allows you to manipulate HTML elements:

Example
<script>
function smile(sw) {
    if (sw == 0) {
        document.getElementById("learn").innerHTML = "SAD!";
    } else {
        document.getElementById("learn").innerHTML = "HAPPY!";
    }
    
}
</script>

There are a few elements you need to know to be able to add JavaScript to HTML. The most important of them is <script>. A pair of these tags define the client-side script, creating functionality for the user:

Example
<script type="application/javascript">
  document.getElementById("p").innerHTML = "It works!";
</script>

Options

There are two ways to add JavaScript to HTML. You can either include inline JavaScript in your web document or have a separate JS file and link it to the document as an external resource. In both of these cases, you will use the same <script> tags – the only difference will be their content.

For inline JavaScript, you will simply include the script itself between the tags:

Example
<script>
function myExample() { 
    document.getElementById("learn").innerHTML = "Wow, I can use JavaScript!";
}
</script>

To link an external JS script to HTML, you will need to use the src attribute and include a link to the file as its value:

Example
<script src="scripts-tag-example.js"></script>

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Tag Placement

The <script> tags can be placed in either <head> or <body> section of the document. The first option might be more common, as most developers like to keep the script separate from the content. However, it's smart to place them in the <body> if you need the JS content to load later:

Example
<script>
function myExample() {
    document.getElementById("learn").style.fontSize = "30px"; 
    document.getElementById("learn").style.color = "white";
    document.getElementById("learn").style.backgroundColor = "indianred";        
}
</script>

Fallback Option: Using noscript

When adding JavaScript to HTML, keep in mind the user's browser might fail to support a JS script. For such a case, we recommend adding the <noscript> element. Its content will be displayed if JavaScript is not supported by the browser:

Example
<noscript>JavaScript is not supported by your browser.</noscript>

HTML JavaScript: Useful Tips

  • If you include both internal JavaScript and an external script, the external one will override the embedded code. However, this might cause issues and unexpected browser behavior.
  • Using an external file is the best option when you need to reuse the same script in multiple HTML documents.