Last modified:
Sunday, 06-Aug-2017 22:15:47 UTC. Maintained by: Elisa E. Beshero-Bondar
(eeb4 at psu.edu). Powered by firebellies. Last modified:
Sunday, 06-Aug-2017 22:15:47 UTC. Maintained by: Elisa E. Beshero-Bondar
(eeb4 at psu.edu). Powered by firebellies.This is a pair of short exercises to orient you to (or help you to review) some helpful tools in developing websites: to write and work with Server-Side Includes to help you manage features like a site menu that you would expect to appear on multiple pages of your website, and to learn to write JavaScript to add a dynamic effect when a site visitor accesses an HTML page. You can apply a Server-Side Include along with JavaScript (and CSS) in the same HTML file for the purposes of this homework assignment. To make sure the Server Side Includes are working, this assignment requires you to access and upload your homework files to your project space on newtFire.
We work with server side includes (SSIs) to help keep repeating portions of our pages uniform on a large website with multiple pages. For example, we are using it to generate our newtFire logo on the page you are reading and the entire top portion of the page you are reading, including the horizontal rule <hr> element that draws the line above the title of this page. Everything else, from the title ("Server-Side Includes and JavaScript Exercise 1") onwards is what is contained in this HTML file. If you view the page-source, you can see where we positioned a server-side include, just after the <body> element in our code. It looks like an HTML comment tag, and it functions as a special kind of comment to the server hosting our newtFire site:
With the server-side include, I ask the server to include a small partial file named top.html at this point on my page. There are other forms a server-side include might take, but most often we use it for this purpose, and indeed my top.html file itself contains a server-side include that publishes the date on which I last modified my page.
With this exercise, we would like you to learn how to write and incorporate one (or more) server-side includes on an HTML page, working with your project webspace on newtFire. See What to Upload for instructions on what you will post to your server space. To begin, please read our tutorial on Server Side Includes, and if you would like to see more examples of server side includes, see https://httpd.apache.org/docs/2.4/howto/ssi.html. Then create a dummy HTML page, use a project HTML file, or work with the one given you in Obdurodon’s JavaScript Exercise 1 for the next stage of this assignment, and apply one or more server-side includes to it.
Note that you must modify the x-bit (following our instructions on the SSI tutorial) once you upload your file to the newtFire server, but you only need this to be set to run SSIs. Setting the x-bit or not has no impact on JavaScript, which does not require server execution to run but rather functions locally as soon as a page is loaded within the web browesr of a visitor to your site. To test whether an SSI is working you have to load your page from the web server. But to test whether JavaScript is working, you can simply save your HTML and JavaScript files locally (much like you do with testing CSS) and open them locally within your browser.
Begin this exercise by carefully reading and testing the examples on Obdurodon’s introductory
JavaScript Overview page. When you reach the section titled, Okay, Time to Write your First JavaScript
, we’d
like you to do just that: experiment with what you have learned so far by writing
some JavaScript code to work within an HTML page you have prepared. Your page could
be an HTML file you have generated for your project, or just a random page you write
on the fly for the purposes of this assignment, but should not simply be a repetition
of the model on the Obdurodon intro page. (Adapt what you’ve learned there to experiment
a little on your own.) For more examples to tinker with, have a look at the JavaScript tutorial pages at w3schools. Don’t worry too much about making this complicated: We just want to see you write some functional JavaScript code.
Now, go on and do Obdurodon’s JavaScript Exercise 1, and if you like, adapt the sample code to fit into the page on which you have been experimenting. (You may change the text of the paragraph in the homework assignment.) The goal here is to write a separate JavaScript file that you associate with your HTML (instead of applying JavaScript inline). If you have experimented with inline JavaScript as you were learning, see if you can express that JavaScript in functions in the separate file you are writing for this assignment. You may adapt this assignment as you wish to write some JavaScript for one of your project pages that makes something dynamic happen. (Note: we don’t permit the use of JavaScript libraries—just using
someone else’s JavaScript and force-fitting it to your HTML—because we want you to write your own code independently
and know what each line of it means. It is okay, though, to learn from JavaScript others have written and apply what you are learning to your project needs; in which case we want you to credit your source in comments in your JavaScript file (marked by // or within /* comment */ and be able to explain how you are applying it to your project.)
For JavaScript reading and experimentation, see:
This assignment involves working within your personal webspace on newtFire, so that is where you will submit your homework for this assignment (instead of Courseweb). Use an SFTP program (the same you used for the HTML assignments earlier in this course), and
If you like, include some comments in your HTML and JavaScript files on what we should see and on what your SSI and your JavaScript should be doing.