So What Is It?
<script> tags or inline statements. In this tutorial we'll be using it between
<script> tags. Here's a simple example:
In this tutorial we'll be going over the three examples above: alert boxes, confirm boxes and prompt boxes.
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
We can change this parameter to be anything we'd like, like a number or a sentence:
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:
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.