What is JavaScript?


JavaScript is as close to Java as it is coffee

JavaScript is the primary scripting language on all websites. Older websites may use jScript, Flash or Silverlight but all of those are either dead or dying. JavaScript runs the functionality of all websites, may it be "liking" a post on Facebook, "retweeting" something on Twitter or even sending an email. JavaScript is the behind-the-scene genie of the Internet, although some people choose not to enable it. For those who are looking to interact with the Web 2.0, however, JavaScript is the engine that makes it all purr.

So What Is It?

While HTML structures content and CSS styles it, JavaScript allows us to modify it. When JavaScript first took off, users found it very annoying and very intrusive, but over time JavaScript has became a silent staple of the 'net. Much like CSS, you can either include JavaScript via a scripting file, <script> tags or inline statements. In this tutorial we'll be using it between <script> tags. Here's a simple example:

What you just experienced as an "alert" box. There are various boxes like this that can pop-up, such as a "confirm" and "prompt" box. None of these are ever really used anymore but they offer good JavaScript core lessons.

The reason they aren't used anymore is because it takes the user out of their online experience. It forces the user to react, and freezes the browser until they do. This is considered very bad User Experience, or UX. You should never take the user away from what they are trying to do. We won't be covering UX in this tutorial, but it's important to keep it in mind when using JavaScript, since it has the power to literally make or break your website.

In this tutorial we'll be going over the three examples above: alert boxes, confirm boxes and prompt boxes.

Staying Alert

Alert boxes are simple pop-ups that tell the user something has happened -- usually in a negative way. If a script failed or something has gone wrong, often times it'll throw up an alert message. As said before, these lead to a very bad UX. Most developers now make custom alert boxes to appear with CSS. For now though, we'll focus on the default browser alert pop-up:

In the code you can see a <p> tag, a <script> tag and a JavaScript "function". "Functions" are simple shortcuts to commonly used pieces of code. Every programming language has them. Most "functions" also take "parameters", which are extra bits of information you can give to the function to help it run. In this case, the alert function only takes one parameter and we have it set to "Hello!".

We can change this parameter to be anything we'd like, like a number or a sentence:

Words or sentences in JavaScript are called "strings", and numbers are either "integers" (no decimals) or "floats" (with decimals). There are also "arrays" and "objects" as well, but we will cover those in a later article. All JavaScript variables can be defined by a leading vars and an equal sign, like so:

If you need a variable for later, you can save it in a vars. Otherwise, you can use it right away like this:

Confirmation is Not Always Required

At its core, all programming is just 1s and 0s, or trues and falses. If something is not true, it's false. There is no maybe when it comes to computers. Confirmation boxes are like that too; you can either confirm something, or deny it. Confirmation boxes are a little more complicated than alert boxes as they are looking for an answer.

Before we get to the confirmation box, we need to discuss if statements. Since everything in computers are true or false, if statements check to see which one it is. We used double equal signs (==), or sometime triple (===) to check the value in an if statement. If an apple is safe to eat, eat it, otherwise don't.

Let's take that example and modify it with a confirm pop-up:

Now, to match our earlier example, let's take it one step further.

The last line of the script probably looks a little confusing. For now, just know that it "finds" the paragraph tag and changes the content of it to match our "text" variable.

Promptin' A Response

Much like alert and confirmation boxes, prompt boxes have their own function too. Unlike alert and confirmation boxes however, prompt boxes can take two parameters.

In the 1990s, websites were full of these. The prompt boxes would ask you for your name and would add it to various parts of the website. This was to make the Internet more "fun" and "friendly" and "increase user experience". It didn't do any of that. Cat videos did that. Prompt boxes were just annoying.

The only thing above that you haven't seen before is adding the word "Hello" to our variable. This can be done with a "+" symbol, which combines two variables together. If you are combining a string and a integer, the "+" symbol just sticks them together to form a new string, but if you combine two integers they actually combine to make a new integer.

With out newly acquired knowledge we can then easily replicate the prompt example at the beginning of the article:

Conclusion

The three examples in this articles are things you will probably never see in the wild, but the logic behind them is universal. You've learned about variable, functions, if statements and how to combine different variable. While simple, these are the stepping stones to better understanding websites.

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close