DEV Community

Cover image for HTML Tutorial: HTML JavaScript
Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

HTML Tutorial: HTML JavaScript

#html #webdev #100daysofcode #javascript

JavaScript makes a HTML page more dynamic. In this chapter we are going to look at how JavaScript is linked to the html page.

AD-BANNER

The HTML script tag

The HTML <script> tag contains script statement or points to an external script file through src attribute that has JavaScript functionality.

JavaScript code can be kept at a separate file and then include it wherever it’s needed, or it can be defined inside the html document itself.

Internal JavaScript

You can write your JavaScript code directly into the HTML document. Usually the script code is kept at the header of the document using the <script> tag. You can put your code anywhere on the document as long as is inside a <script> tag.

<!DOCTYPE html>
<html>
  <head>
    <title> JavaScript Internal</title>
    <script>
      Document.getElementbyId("go").innerHTML = "hello world";
    </script>
  </head>
  <body>
    <p id="go"> JavaScript insertion</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

External JavaScript

If you are going to define a functionality that will be applied in different html document, it is always best to place your code on another file.

Then include the file in your HTML document. A JavaScript file will have a file extension of .js and it will be included in the html file using the <script> tag.

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript External</title>
    <script src="/html/script.js" type="text/JavaScript"></script>
  </head>
  <body>
    <p id="go">Javascript Insertion</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The <noscript> tag is used to provide alternative information to browsers that don’t support JavaScript or disabled their own.

Create Stunning Websites and Web Apps

Building different custom components in react for your web apps or websites can get very stressful. That's why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. Try contrast pro!

Contrast Design Boostrap

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc. project with a clean, well documented, well crafted template and UI components. Learn more about Contrast Pro

Resources

Top comments (0)

Read next

ng_news profile image

Ng-News 24/45: Rationale behind (potential) Authoring Format

ng-news -

skipperhoa profile image

Sending Emails with Mailer in PHP + Symfony

Hòa Nguyễn Coder -

gladiatorsbattle profile image

Building a 3D AR Profile Card with Real-Time Face Detection

Gladiators Battle -

tomasdevs profile image

Boost Your Website's Accessibility: Master ARIA Attributes in HTML 🌐

Tomas Stveracek -