JavaScript Introduction

What is JavaScript?
JavaScript is a simple programming language that was adopted by the internet to help make websites more reactive to their users. JavaScript has nothing to do with Java which is owned by Oracle but originally developed by Sun Micro Systems. It does have a lot of similarity to the C/C++ language but isn’t as rigid in the definition of a variable.

What do I need to program in JavaScript?
When I started programming website the first application I used was Microsoft Notepad. This is really all you need to develop JavaScript applications but has no frills to help make your code build itself but I would recommend if your going this route to use Notepad++. There are many other programs that can help like Visual Studio from Microsoft which has a free version for individual developers. There is also Aptana which is a project based on eClipse which is also another developer environment that can be used.

What is really needed in a developer environment is code completion. This one feature helps reduce bugs as you create code. Just do a search on the internet and you should find many different reviews of applications that will build good JavaScript code.

Now that I have an application how do I run my code?
Now you have some code and want to see how it works there are a couple of ways to see how it works. The easiest way is to write a simple HTML file that will include your JavaScript code in the header of the HTML document. This is an example of an HTML file I’ve used to test my own code:

<html>
<head>
  <script type="text/javascript" src="mytestscript.js" />
</head>
<body>
</body>
  <div>Hello HTML</div>
</html>

Another way is to just put your code between a script tag and this embeds it directly in the HTML code. If you want to find how developers typically add JavaScript code to a webpage then just go to a webpage and look at its source, typically [CTRL]+[U] but is also dependent on the browser developer. Even though JavaScript is a complete language it will help that you also have a really good knowledge of HTML.

That is JavaScript in a nut shell. It is a very fun language to work with that can be fun to make more interactive web pages. There are also different projects that use JavaScript as a way of extending their application but these are more advance and specific topics.

JavaScript Introduction to Output

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.