How to add JavaScript code to HTML5
let's start from opening a text editor, copy/past the code below and save as "MyTest.html". Here a very basic HTML5 code:
<!doctype html>
<html>
<head>
<title>Great Home Page in HTML5</title>
<meta charset="utf-8">
<!--CSS-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- replacing DIV with the new HEADER element -->
<header id="header" role="banner">
<h1><a href="/">Great Home Page in HTML5</a></h1>
</header>
<nav id="nav" role="navigation">
<ul>
<li><a href="/about" id="about">About</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/staff">Staff</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="http://bim.rootiers.it" id="bim.rootiers">bim.rootiers.it</a></li>
</ul>
</nav>
<!-- replacing DIV with the new ARTICLE element -->
<article id="main" role="main">
[content here]
</article>
<!-- replacing DIV with the new FOOTER element -->
<footer id="footer" role="contentinfo">
<p>© 2015 MABdesign site</p>
</footer>
<script src="js/script.js"></script>
</body>
</html>
You can see the result by opening "MyTest.html" in your internet Browser
like in CSS, there are a few ways you can apply JavaScript to an HTML document. We’re going to talk about three ways:
- Inline JavaScript
- Embedded JavaScript
- External JavaScript
Inline JavaScript
like inline CSS, is when you attach JavaScript directly in the HTML. One of the most common applications of inline JavaScript is adding a click behavior to an element. “Click” is a JavaScript event that executes when a user clicks, and you can tie certain behaviors to it. Code example:
<nav id="nav" role="navigation">
<ul>
<li><a href="/about" id="about">About</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/staff">Staff</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="http://bim.rootiers.it" onclick= " alert('stai per essere indirizzato al sito web bim.rootiers.it'); ">bim.rootiers.it</a></li>
</ul>
</nav>
In this example, when the user clicks “bim.rootiers.it” a JavaScript alert will pop up saying, “stai per essere indirizzato al sito web bim.rootiers.it” and then execute the normal link behavior of visiting the About page.
Embedded JavaScript
is JavaScript that is inside an HTML document, but contained within a <script> element and executed only on that page. In next code we are going to add an ID of "bim.rootiers" to the last anchor (the last link) in the navigation. This was done because it is valid HTML, still remains semantic, and now you can easily target that link without adding any JavaScript inline to the document. Code example:
<nav id="nav" role="navigation">
<ul>
<li><a href="/about" id="about">About</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/staff">Staff</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="http://bim.rootiers.it" id="bim.rootiers">bim.rootiers.it</a></li>
</ul>
</nav>
<script>
/* The Function, define the thing you want to happen */
function doTheThing(){ alert('stai per essere indirizzato al sito web bim.rootiers.it'); }
/* The Variable, get the element you want to do it on */
var elem = document.getElementById("bim.rootiers");
/* The Event Listener, set up something to listen for the event you want, then execute the function */
elem.addEventListener("click", doTheThing, false);
</script>
when the user clicks “bim.rootiers.it” a JavaScript alert will pop up saying, “stai per essere indirizzato al sito web bim.rootiers.it”. IT's the same function before but in an embedded style
External JavaScript
Making a JavaScript file external isn’t that different from doing the same to a CSS file. The <script> element you learned about in the previous section has an available attribute called src (source), which allows you to pull an external JavaScript file into an HTML document and execute the containing functions. Code example:
<script src="js/script.js"></script>
</body>
</html>
Linking your JavaScript file at the bottom of the document rather than at the top will let you control the rendering of the page a little better. It can technically be linked from anywhere in the HTML document.
Contents of script.js
/* The Function, define the thing you want to happen */
function BimRootiers(){ alert('stai per essere indirizzato al sito web bim.rootiers.it'); }
/* The Variable, get the element you want to do it on */
var elem = document.getElementById("bim.rootiers");
/* The Event Listener, set up something to listen for the event you want, then execute the function */
elem.addEventListener("click", BimRootiers, false);
you can see that the contents of "script.js" are the same as the last code.
