How to Create a Message Box Using JavaScript

JavaScript, originally called Live Script by Netscape who sponsored it, is a versatile client-side scripting language supported by most Web browsers. The current international standard JavaScript is called ECMAScript. In this lesson, we will explore creating a message box with content when a Web page loads.

Difficulty: Moderately Challenging

Instructions

1. 
    
   Code

   First we need to create a Web page using HTML code. Using Notepad, another text editor, or a program similar to Dreamweaver or Eclipse will do.

2. 
    
   code

   Now, add the appropriate attributes for the SCRIPT tag (language equals JavaScript is added for backward compatibility) in the HEAD section of your Web page.

3. 
    
   code

   Next you will screen a function called showContent. In JavaScript, functions begin with the word 'function' followed by the function name with left and right parenthesis. Opening and closing brackets are also added to contain the code.

4. 
    
   code

   We now type window.alert with content 'My message appears!' Alert calls a message box. The content should have opening and closing quotes or double-quotes. The programming statement should end with a semi-colon.

5. 
    
   code

   The last programming step is to add OnLoad to the BODY tag to call our function.

6. 
    
   Save dialogue

   Now, save your text file as an HTML file. If you are using Notepad, place your file name in double-quotes and select 'All files' for file type.

7. 
    
   Web browser view

   Open the file using your Web browser. Usually, if you right-click on the file and select Open, the file will open using your default Web browser. You should see the message box with the content you provided. Make sure you temporarily allow pop ups if you see a message that indicates that pop ups are not allowed.

8. 
    
   code

   Finally, you want to also include the NOSCRIPT tag set for those who may be using older Web browsers that do not support JavaScript. Make sure you save your file after adding this change.

Resources

• ECMAScript specification
• JavaScript

[healthymomof5]

on 2/4/2009 Excellent article! 5*