Much like CSS, JavaScript can be placed into an HTML document using three different mthods:
- Inline
- Internal
- External
JavaScript can be placed inside an HTML tag using an event attribute:
- onclick
- onmouseover
- onsubmit
Or inside an href
attribute by prefixing it with javascript:
.
Create a new HTML document, name is inline.html
, add the standard HTML elements, and inside the body
tag add the following code:
<input type="button" onclick="alert('This is inline JavaScript!');" value="Click Me">
<br><br>
<a href="javascript:alert('This is also inline JavaScript');void(0);">Click Me</a>
Test the HTML file using a browser. You should see an alert message by clicking either the button or link.
JavaScript can be placed inside an HTML document by adding JavaScript code inside a script
tag.
Create a new HTML document, name it internal.html
, add the standard HTML elements, and inside the body
tag add the following code:
<script>
document.write("<h1>Embedded JavaScript</h1>");
document.write("<p>This is embedded JavaScript!</p>");
</script>
Test the HTML file using a browser, the body
section of the webpage should have an additional heading and paragraph.
JavaScript can be placed inside an external JavaScript file.
Create a new JavaScript file and name it external.js. When placing JavaScript inside an external JavaScript file, you do not need to include script
tags. Add the following code:
document.write("<h1>External JavaScript</h1>");
document.write("<p>This content comes from an external JavaScript file!</p>");
Next, create an HTML file, name it external.html, add the standard HTML elements, and then add the following code to the body
section:
<script src="external.js"></script>
Test the file using a browser, the body
section of the webpage should have an additional heading and paragraph.
Full tutorial URL:
https://codeadam.ca/learning/javascript-placement.html
- Visual Studio Code or Brackets (or any code editor)