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.

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>

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>

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

DEV Community

HTML Tutorial: HTML JavaScript

The HTML script tag

Internal JavaScript

External JavaScript

Create Stunning Websites and Web Apps

Resources

Oldest comments (0)

Read next

How to Build Dynamic Breadcrumbs in Remix

Use your own neural net to generate images

How to Add Google Maps to Your Web App Using React

: vs :: in CSS3