Programming | JavaScript, Ajax » Inserting JavaScript code in webPlus

Creating a Multimedia Website Inserting JavaScript Code in WebPlus JavaScript code can add additional features to a basic webpage such as dynamically updating the time and date, creating more advanced rollover effects or adding mouse trails to follow the mouse around. Sometimes they are just a bit of fluff and do not benefit the end-user, but used sparingly some can be quite useful. JavaScript needs to be added to the HTML code of the web page. This is the raw code that tells the browser how to render the page and make it appear on the screen. Usually with most web design software there is no need to see the HTML code but it is good to have an understanding of how to make changes to this code when necessary. To view the HTML code of any webpage that you have open in your web browser go to the View menu and View Source. The HTML code will open in a notepad window. If you understand the JavaScript language, you can write your own scripts, but in this example we are going to use one of

the many scripts that are freely available on the internet and paste it into our webpage. To Insert JavaScript code into a webpage in WebPlus: 1. Open your site in Serif WebPlus 2. In your web browser, visit http://javascript.internetcom/ti me-date/basic-date-display.html This is a simple script that will display the current date on your webpage Usually there are instructions within the script that tell you where to copy and paste the various sections of the script. Any line of code that begins with <! Is a code comment and will not appear on your webpage when it is viewed, they are there to provide instructions e.g: <! - - just a comment left by the programmer to explain something - - > 1 Creating a Multimedia Website This is also where the programmer may leave any copyright information, and the original source where the code was downloaded. This information should not be deleted from the code. This script is a simple one to begin with since there is only one fragment

of code that needs to be copied across to your web page. 3. Use your mouse to highlight the piece of code Then copy it to your clipboard (CTRL + C or Right mouse click and Copy) 4. In Serif WebPlus, from the Insert menu choose Web Object and HTML 2 Creating a Multimedia Website 5. Click and drag on the area of the web page where you want the JavaScript code to appear. 6. A window will appear which will let you add the HTML code to your page 7. Click on Paste to Body to paste your code into the body of your page Then click on OK. 3 Creating a Multimedia Website Note: Sometimes a script will be in two parts, one part to be pasted into the head and one part to go into the body. In this case, copy the first part and click on Paste to Head, then go back to the Script webpage, copy the body code, switch back to WebPlus and Paste to Body. Click on OK when finished 8. The code will appear with a placeholder until you preview the page This can be repositioned elsewhere on the

page 9. To check that it works, preview your site in a browser window (File – Preview Site – Preview Page in Internet Explorer) 10. Make sure the script displays on the screen as you intended This script displays some additional code that we do not want to appear on our page. It is easy to go back and edit the script and remove the line of code that displays the web address. It is OK to remove this, as long as the copyright information is still contained within the code itself. 4 Creating a Multimedia Website 11. To edit the code in Serif WebPlus, double click on the HTML code you inserted to reopen the HTML window. Scroll down to the end of the script that you pasted in. The actual script ends with the </script> marker. The next few lines can be deleted. To do this, highlight the next 4 lines, between the two <p> codes and delete this section of code. Click OK 12. Preview your page again to check that it still works properly The script should now only show

the date with no additional text. 5