Every Javascript Beginners First Tutorial should begin with the opening ‘<script>’ tag and the closing ‘</script>’ tag. The script tags can be placed in either the ‘head’ of ‘body’ of the html document. In this Javascript Beginners First Tutorial the opening ‘<script>’ tag and the closing ‘</script>’ are placed on line 9.

A pop up box that appears when the page loads can now be created by simply adding the following code between the opening ‘<script>’ tag and the closing ‘</script>’ tag. On line 10 an ‘alert’ function is added with the text “Hello World!“.

Javascript Beginners First Tutorial. Alert Hello World!
Pop up box created with the alert() function.

In addition to the ‘alert’ function is the ‘prompt’ function. Both produce a pop up box however the ‘prompt’ function will take in text. In the example below the on line 10 a prompt box asks for either the ‘red’ colour or ‘blue’ colour to be typed into the text field.

Javascript Beginners First Tutorial. Prompt box.
The user is asked to enter either ‘Red’ or ‘Blue’ by using a prompt() function.

Unfortunately the box simply closes once the colour is entered into the prompt box and the ‘OK’ button is pressed.

First of all we need to create a variable to store the colour that was chosen. The ‘var’ keyword is used to define a variable and the name of the variable is colour. On line 10 the ‘var colour’ with an ‘=’ sign is placed before the ‘prompt’ function. On line 11 an ‘alert’ function with the ‘colour’ variable is added to display the colour that was entered into the ‘prompt’ functions text field.

Javascript Beginners First Tutorial. Red.
‘Red’ is displayed by the alert box if ‘Red’ was typed into the prompt box.
Javascript Beginners First Tutorial. Blue
‘Blue’ is displayed in the alert box if ‘Blue’ was typed in the prompt box.

The ‘if else’ statement in javascript can be used to execute an action for each colour that is entered. On lines 11 – 15 an ‘if else’ statement is used to display pop up boxes. ‘If’ Red is typed into the prompt box the alert pop up box in the ‘if’ statement will display. Also ‘If’ Red is not typed into the prompt box and ‘Blue’ is typed instead then the alert pop up box in the ‘else’ statement will be displayed.

Javascript Beginners First Tutorial. Red is the colour of energy.
If ‘Red’ is entered in the prompt text field this pop up box appears.
Javascript Beginners First Tutorial
Else ‘Blue’ was entered into the prompt text field and this pop up box appears.

An obvious flaw with the above ‘if else’ statement is that if any text other than ‘Red’ is typed the pop up box for the ‘Blue’ text will still show regardless if ‘Blue’ was typed or not. This needs to be fixed!
Beginning on line 13 an ‘else if’ is used to check if ‘Blue’ was entered in the prompt text field. The pop up box will display if ‘Blue’ was entered. Lastly on beginning on line 15 the else statement will display a message that, “You did not enter Red or Blue”.

Javascript Beginners First Tutorial. Red is the colour of energy.
If ‘Red’ is entered in the prompt text field this pop up box appears.
Javascript Beginners First Tutorial
If ‘Blue’ was entered into the prompt text field this pop up box appears.
Javascript Beginners First Tutorial. You did not enter Red or Blue.
If neither ‘Red’ or ‘Blue’ was entered than this pop up box will display.

Another option to displaying an alert() pop up box when ‘Red’ or ‘Blue’ is entered would be to instead change the background of the webpage to the colour entered in. A red background for ‘Red’ and a blue background for ‘Blue’. Here is the javascript code to do that.

Javascript Beginners First Tutorial. A red background.
If ‘Red’ is entered the background appears as red.
Javascript Beginners First Tutorial. A blue background.
Else if ‘Blue’ is typed into the prompt box a blue background will appear.
Javascript Beginners First Tutorial. You did not enter Red or Blue.
If neither ‘Red’ or ‘Blue’ was entered than this pop up box will display.

And finally the text that is typed into a prompt boxes text field must be an exact match. For example only ‘Red’ or ‘Blue’ will match the conditions in the if else statement. On line 12 the condition is to match ‘Red’ while on line 14 the condition is to match ‘Blue’.

Javascript Beginners First Tutorial

The web designer is blessed with the ability to create great designs by using javascript. In the last ten years javascript has evolved rapidly with the introduction of libraries like jQuery, Angular, Node.js, D3.js and react.js. These javascript libraries are worth learning about as they help power most of the worlds major websites.


More on Javascript

Javascript logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *