Steve’s Hot JavaScript Training – Getting Started – Part 1

SHOULD WE RECAP? OF COURSE!

Yes. We should recap and explain in our previous article that we talked about the many different ways you can create programs with JavaScript. As I sat and thought about this, I was going to start coding, however what do you think I’m missing? *I hear a ticking noise*….that’s right! I forgot to mention an editor or IDE to use! More on what that is in a bit.

I personally use the latest Microsoft Visual Studio due to the many things it can do. Bear in mind, this is a Microsoft Windows only program. However, for Windows users, there is an express edition that you can download for free to get started. Make sure you get the web version (.a.k.a. Visual Studio 2012 Express for Web). If you don’t have this for your operating system, there are ways you can run it through this article. You can use any editor, such as Coda for Mac, or even Vim for Linux. The import thing is to be able to code and choose whichever feels comfortable to you.

WHY ARE THERE SO MANY TOOLS AVAILABLE?

I used to ask myself, why are there so many editor and IDEs available? By the way, IDE is an Integrated Development Environment. It is much more than a simple editor and is made for developing code, rather than just a text editor. Most of IDEs should have auto completion, which really speeds up the production of your code by completing words for you. To answer our initial question, the reasons there are so many out there is for the same answer that there are many cars out there. And hey fellow readers…what do we do when we decide on a car? Well, nowadays we may read up on the reviews first, then test drive a few of them and then make a decision based on our needs. That’s exactly what it boils down to! If you want me to direct you to screenshots of these programs I will post them in the next part of the series.

NOW FOR THE NITTY GRITTY – GETTING DOWN TO SOME CODE!

Now you can bring your popcorn, pizza, or whatever you choose and get down to writing some code! I will be using Visual Studio screenshots and you always need a web browser running at the same time as your preferred IDE or editor. Some editors have built-in web browsers, which usually won't be hard to notice. If you want to use them, you can! I suggest you use the Firefox web browser, however, as I will be pulling screenshots when we get to debugging our code, however you can use Chrome, or other browser with debugging – if you know how to use them!

BEFORE WE START – HTML MUST KNOW ABOUT JAVASCRIPT!

Before we begin coding, we must let our HTML know about JavaScript. How do we do this? There are two ways to this approach:

1. We insert our code in script tagsi in our HTML file, like this:

your code would go inside those tags. It is recommended you use both opening and ending tags to close it.

2. Here is the other way:

NOW LET'S TYPE SOME CODE!

Let’s start with some code. I want you to write the following in your preferred editor or IDE:

DEALING WITH OUR FIRST FUNCTION

Alert is a built-in JavaScript function that tells it to print an alert dialog box. This is basically to inform the user that something might happen, or perhaps you want to give your customer a notice about something. Whatever the case, you can do it with this function!

This should be the result of That function:

If you didn’t get the same message, then you may have typed what was in the quotes wrong, or something was typed wrong in your code. In fact, it is OK to experiment with JavaScript, especially at this stage.

Let’s try another, except let’s change what’s in the quotes to see what happens:

CONCLUSION

That's all I could fit in this post! We will resume this and talk about much more as we progress along the series. You can add any comments, suggestions, or questions below. I look forward to see you in the next part!