Tools for Information Literacy

Practice with server- and client-side examples

adding a server-side form adding a client-side script task 02

Since Opal has no available server side scripts ...

... you will need to use Google scripts to add a server side script to your website

Google offers some scripts that can be embedded in your code for your purposes.

If your template came with a search tool, but no search functionality, you might want to try Google's Custom Search Engine.
We followed the steps at the link and created this one
If you are interested in the analytics of your site, you might want to try Google Analytics.
Your report might look like this at a future date
A bit more challenging, but not impossible to do, are Google Forms. Using the online tool, you can generate some code you can copy and add to your pages.
Look at the example at our contact page
But where is the server in this server side scripting?

Note that the scripts look like client-side JavaScripts, but they engage the Google servers and thus are actually server-side scripts.

adding a server-side form adding a client-side script task 02 back to top

Remember

UNIX/LINUX ⇒	command	argument	value
HTML ⇒	tag	attribute	value
CSS ⇒	selector	declaration property	declaration value
JavaScript ⇒	script	variable	value

Find one you can use and modify it to your needs.

For instance, there is a date last updated Javascript in the footer of every single page on the class website. View the source code and you will find it. It is between lines 282 and 317 on this page, but it is in the footer of every page.

You have a need to ensure the viewer knows the last time your page was updated, so this script can serve your purposes.

But there are many others.

MouseOver an image

Look at this MouseOver Image example, noting the code and the script components and the linking of the alternating image to a relative location.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
        function newImg(e){
          e.src = "assets/images/study-close.png"
        }
        function oldImg(e){
          e.src = "assets/images/study-far.png"
        }
   </script>
  </head>
  <body bgcolor="gray">
    <h2>MouseOver and MouseOff an Image</h2>
    <p>
        This page illustrates using the <em>mouseOver</em> on an image.
        As you drag the mouse over the image, notice how the image changes.
    </p>
    <div>
        <img src="assets/images/study-far.png" width="50%" onmouseover="newImg(this)" onmouseout="oldImg(this)">
    </div>
    <p>The second replaces the initial one.</p>
  </body>
</html>

Try to modify this code for your own use. You may use any pair of images, but you must store them in the same subdirectory where you store your page code [so the script can find them in order to display them]. Here are two you can download for use.

These two images are the same size, but you may need to take a look at other images in an image editing software program to determine the size of the image. You will need to use these in order to change the size attributes for the images in the script.

Example - MouseOver on an Image

This page illustrates using the mouseOver on an image. As you drag the mouse over the image, notice how the image changes.

The second replaces the initial one.