JavaScript has been around the internet for many years. It is a great language and today has a lot of power that can be used to make website more interactive. Like any programming language one of the most important steps is to find a way to send information to your users. My first program I ever write in any language is a hello world program. For this introduction we will show a couple of ways we can send a message to the user.
The first and most reliable way is to use an alert box to send a message.
alert('Hello world!');
A browser when it loads this code will popup a message box that say’s hello. It is very simple and very easy to show output to the end user but the alert box should be only used when you need to tell the user one message. The problem with an alert box is it becomes a blocking command and will stop the user from accessing your website until it is closed. Many times I have put this into an infinite loop which will crash the browser or annoy your end user so much then don’t want to receive alerts from your program. So use this one very sparingly so that you don’t send a ton of alerts to the user.
During programming some times it is nice to send a message about what a certain variable contains. In many other language development environments this is easy to deal with because you can step through your code as it is executed. There are ways to do this same process in JavaScript but for the most part it becomes difficult to connect your IDE to the code. This is where using the console message system can be essential to sending debug information to a place you can see it but most people will never see it. Here is a couple of different ways to use the console system to send hello world to the browser.
console.log('Hello world!');
console.info('Hello world!');
console.error('Hello world!');
In the above code example it shows three different methods you can call to send debug information to the browsers console message. To see these messages you need to open your developer tools for your current browser to see these messages. This is different for each browser and many times it can even be dependent on the version of your browser. For the current version of Chrome Version 54 it is hidden under the three dots -> More tools -> Developer tools or [CTRL]+[SHIFT]+[I]. Microsoft Edge pressing [F12] or pressing the three dots -> Developer tools. If you have a different browser just check the internet for how to open their developer tools.
The next way is a little more difficult and requires some extra work but we can use this to add HTML code to the page and display it.
document.body.innerHtml += "<div>Hello World</div>";
var div = document.createElement('div');
div.innerHTML = "Hello World too!";
document.body.appendChild(div);
In this example I show two different ways to add the div tag to the page. The first one is a one liner and isn’t the most reliable way to add text because it isn’t added to the DOM but will show a simple message on the web page. The second one is a little more reliable because it adds the div tag to the DOM and then will be more functional with JavaScript and the website.
These are typically the most common ways to send output to your users. For debugging I like the console method the best because in many browser if I send an object to the console it becomes something that I can dig into and find what information is being store in the object and not just the object type. A lot of the functionality of the console is dependent on the browser developer so find a browser that has good developer tools and use that to start. But once you have some working code test it in as many different browsers as you can find.