HTML JavaScript Introduction | Learn HTML

HTML JavaScript – JavaScript is a programming language for website. It adds functionalities to a web page for better user experience.

In this tutorial, you will know basic knowledge about HTML JavaScript and how you can insert javascript code inside a web page.


What is JavaScript?

You already know javascript is a programming language. It is used mostly for adding client-side functionalities.

Javascript codes normally run inside a web browser. You can disable javascript from your browser settings.

To run this code all browsers must have an engine (a special program). Different browsers have their own engines running in the background.

Now a days, Javascript is not only used in client-side that we see in our browser but also it is being used in the backend of a website.

This is happening using a programming called NodeJS. This program works as a javascript engine.

So, with this program you can also run javascript in your computer. In this case, you don’t need browser to see the result.

Whatever, all these are advance stuffs. We are not going to go there at this moment.

You will have everything in detain in our javascript tutorials. Here we will gather basic information how we can play with our websites.

OUTPUT


HTML JavaScript – The HTML <script> Tag

The <script> tag is used to define javascript inside an HTML document. You can insert javascript code in an HMTL document in two ways.

  • Internal JavaScript.
  • External JavaScript.

#Internal JavaScript

You can write your script code directly inside your HTML document. To do so, you need to use <script> tag.

This tag has an opening and closing. Inside this tag, you can add your script code.

You can declare this tag in <head> section as well as <body> section. It is allowed to use this tag multiple times in different places.

OUTPUT

# External JavaScript

Another way to insert script code is by using an external file. All javascript files contain a .js extension at the end of filenames.

You can directly write your code in that file. No <script> tag is necessary in external files.

However, to access those codes from an HTML document, you have to include that JS file.

To add a JS file in a document, you need to use <script> tag with src attribute to define the file path.

Learn more about file paths, in our tutorial – HTML File Paths

You can add a JS file in <head> section as well as <body> section. It is also allowed to add multiple JS files in an HTML document.

<p>Click the button below to display an alert box.</p>

<button onclick="myFunction()">Click it</button>

<script src = "script.js"></script>

The output shows in a web browser:

Click the button below to display an alert box.

In this example, script codes are written in script.js file.


What JavaScript can do

JavaScript is mainly used in HTML to make a website more interactive. It adds many interesting features in a website.

You may have seen drop down menu. Here, javascript is used to create this functionality.

There are many things we can do with this language. Like, show and hide any section or content, creating slide show, change color or text, adding additional CSS etc.

Examples

<p>click the button below to change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Here</button>

<p id="demo">This text will change with new text.</p>

<script>
function myFunction() { 
  document.getElementById("demo").innerHTML = "This is new text!!";
}
</script>

The output shows in a web browser:

click the button below to change the content of an HTML element:



This text will change with new text.

<p>click the button below to add additional CSS:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">JavaScript will change the style of this text.</p>

<script>
function myFunction() {
  document.getElementById("demo").style.fontSize = "25px"; 
  document.getElementById("demo").style.color = "red";       
}
</script>

The output shows in a web browser:

click the button below to add additional CSS:



JavaScript will change the style of this text.


The HTML <noscript> Tag

The <noscript> tag is used to provide alternative content to the users whose browsers don’t support javascript code and for those users who have disabled javascript on their browsers.

The text inside this tag only visible in browser if javascript does not work. Now a days, most of the modern web browsers support javascript.

OUTPUT