Advanced webcoding: Javascript – Part 3: Alerts


Let’s talk about alerts for a second. You already had a small introduction in my previous post.

Alerts are basically just pop-up boxes with an OK and or Cancel button. And yes.. Yes indeed, you can create some very irritating webpages by using these alerts.
However they could come in handy as well.

Let’s say you want to create a check on a field in a form. It should not be empty and you need to make sure the website visitor knows this… In an irritating way.

We’ll start off with our basic HTML script again:

Good now… Let’s create a small form:

The result looks like this:

Right, let’s start writing the javascript. We want to make sure both fields are filled in. So in order to do that we need to write a function.
The code for this function looks as followed:

It’s not so hard. First 2 variables are initialized which contain the values of the textfields in the form. Next there is and if else  check to see if these fields are empty. Once everything is filled in (you’ll get to the else section of the function) an alert is shown with the message “Hello Firstname Lastname”.

The complete script looks like this:

Mind the names of the form and the input fields! They are VERY important. I cannot stress this enough. Also, as with every javascript, names are CASE-SENSITIVE. Trust me when I say that you can lose quite a bit of time on idiotic mistakes like forgetting to type a capital.

The result of this script:

Tadaa! You can amaze everyone again with your newly learned skill.

Oh by the way, this is one way to write this script. There are dozens of other ways to write this script.. I just picked one…

Have fun!

Let me know if you have questions…

Advertisements

4 thoughts on “Advanced webcoding: Javascript – Part 3: Alerts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: