JS Hello World Example
To show the power of JS we will do a simple hello world example. Create a basic index.html page like below. Like a <link> tag for an external CSS file, you use a <script> tag with a src attribute to include an external JS file.
<!DOCTYPE html> <html> <head> </head> <body> <h1></h1> <script src="js/main.js"></script> </body> </html>
In the main.js file
var header = document.querySelector('h1'); header.textContent = 'Hello world!';
When you run the html page you will now see “Hello World!” displayed on the page.
What just happened?
In our external JS file on line 1 we find the <h1> element on the page using the querySelector function and assign it to a variable called header. Similar to how we use CSS selectors. With header declared we then change the textContent property to “Hello World!”.