[Contents]

jsEditor - Boilerplate Code - Alerts

Aim: to demonstrate boilerplate code with the jsEditor

You will notice two tabs at the bottom of the editor's page - HTML and Preview, tabs.jpg (3114 Byte),. Click on the Preview tab and you will see a blank page. While the tabs are always visible, when in the Editor (HTML), you can click on the Preview button, viewerButton.bmp (1666 Byte), and when in the Viewer, you can click on the HTML, or Editor button, htmlEditorButton.bmp (2782 Byte). You need to be in the Editor to use the following.

First of all, choose: View: Show Buttons: Block: JavaScript Tags. Or right-click over the JavaScript mode button, javascriptButton.bmp (2142 Byte), and choose JavaScript tags.

<script type="text/javascript">

<!--//

|

//-->

</script>

You need this for what follows.

Right click on the JS button, javascriptButton.bmp (2142 Byte), and choose Message Boxes from the popup menu. Or choose View from the main menu and then choose 'Show Buttons'.  Choose Alert from the sub menu, or click on the Alert Button (if you chose View and  'JavaScript Buttons');The above tags appear with the cursor, |, between the tags.

The following appears on the page, with the cursor between the quotes, ready for you to type your message.:

<script type="text/javascript">

<!--//

alert("");

 

//-->

</script>

(If you wanted more than a brief message then you would have used the Alert Wizard for multi-lines.)

Click on the Preview Tab or press F9 and you will see your code.

You can add JavaScript tags after entering the alert: select the whole text (alert("Hello")) and right click on the JS button and choose JavaScript tags. The tags surround the selection.

Click on the Preview tab again.

This time you get an alert box appear saying Hello.

You have learned that you can insert boilerplate code, in this case an alert and JavaScript tags, with a click of the mouse.

You can preview your code by pressing the Preview button or F9.