This programming language has a great similarity with others, such as: Java, PHP and Python, which have a similar approach but oriented to other types of programming. In some cases when there is no host that allows the use of PHP, Javascript can be used as an alternative, specifically in cases where private data is not required (passwords, bank details, etc...).
When you start with a website the use of Javascript is a recurring topic due to the fact that not all hosting services support these types of files. Although the best option is to host the scripts in a service that allows us to store this type of files, we can also host the scripts in the same HTML document and we will not depend on a service external to our website.
Common ways to add Javascript to HTML documents.
We can use Javascript elements in three ways similar to CSS elements, inline, internal and external, below we explain what each of them consists of.
Inline:It is usually not very common to see your application but it does exist and it consists of using the (onclick="script") attribute within an HTML element.
Internal:Is to host the script within the HTML document between the <script> and </script> tags, is generally useful for all types of scripts.
External: When it comes to scripts that are too big, this turns out to be the best option, since you only need to store the code in a different document from the website and you can link it with only one line inside the HTML document.
As we said before, the most correct way of the three mentioned above to use Javascript elements is to use a separate file of the HTML document (external).
Javascript Inline.
This type of Javascript elements is generally used to interact with an HTML element independently and without so many problems. Below you can see an example of this.
Code:
<button onclick="document.getElementById('demo').innerHTML = 'Hello World';">Click me</button>
<div id="demo"></div>
Result:
Javascript Internal.
This is used when an extra hosting service is not available, in general it has the same functions as the external Javascript. Below you can see an example of this.
Code:
<script>
function myFunction(){
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
<button onclick="myFunction()">Click me</button>
<div id="demo"></div>
Result:
Javascript External.
In this case the Javascript elements are developed in a different document than the HTML document, this new document is commonly known as Javascript document and its extension is ".js", the great advantage of this type of Javascript elements in comparison with the previous ones is its ease to modify the entire website, because you only need to modify a file without having to be in contact with HTML elements. Below we show you how you should link this external file to your website.
Code:
<head>
<script type="text/javascript" src="script.js"></script>
</head>