Project 3
Project 3: Programming the Web
The main goals for this project are for you to:
- Learn about how computers are programmed, how programming languages are defined, and being able to read and write BNF grammars.
- Get some experience writing your own JavaScript code.
- Add dynamic behavior to your website.
For the first part of the assignment, you will replicate and extend the Countdown/Boom application we built in Class 15 and Class 17 (to be done on Thursday). The second part is some questions about language, BNF grammar, and JavaScript programming. For the third part, you will add a photo carousel to the website you build for Project 2. The questions part is in the middle to encourage you not to leave this until the end, but you can do Part 2 in any order.
Collaboration and Resources. For this assignment, we want everyone to create their own website so you should do this assignment and submit your answers to the questions on your own. If you wish, you may work together with one or two other students, including going through the steps here and helping each other with the questions, so long as everyone is creating their own website and understanding all the code you write and every answer you submimt. If you do work with others on this assignment, list them in your submission.
There are no restrictions on the resources you use for this assignment with one exception — it would violate both the spirit and the value of this assignment if you were to search the course github repository for completed versions of the code and just cut-and-paste that into your solution. This is not allowed, and if you cut-and-paste code without understanding it there is a high likelihood it would be very apparent that this was done, and it would be considered an honor violation.
Feel free to search the web for helpful resources, use your favorite (or least favorite) chatbot, and examine source code from other web pages. If you do use any code generated by an AI assistant, though, you should be careful to fully understand it. This is important for the goals of this assignment, of course, but important even if you are just using code you find or get an AI assistant to generate for you to make something. Generated code is prone to containing errors, including ones that can result in security vulnerabilities, and can also be prone to poisoning attacks (like we will talk about for image classifiers based on the Wall Street Journal article posted in Class 17).
Getting Started
For this project, you will be building on the website you build for Project 2. So, before starting this you need to have complete Project 2. It will be very helpful if you were able to get the local editing with Visual Studio Code to work since this will enable faster editing and testing of the JavaScript code you’ll be writing for this project, but it is still possible (although we think quite painful!) to do your editing using the github web interface, and waiting until the site updates to do your testing.
JavaScript is built-in to all major web browsers, and many other devices these days including drones and tiny microcontrollers. You don’t need to install anything to start programming in JavaScript — just add code to an HTML file and load it into your web browser. You will want to use the Developer Tools in your browser to help debugging your code (mostly to be able to see things printed to the Console). You should already be familiar with this from Project 2, but just remember to right-click in the browser and select “Inspect”.
Part 1: Countdown to Boom
The JavaScript code in jsboom.html is shown below:
<html>
<body>
<h1>Exploring the DOM</h1>
<h2>Count Down: <span id="count">20</span></h2>
<button onclick="updateCount()">Next</button>
<script>
var i = 20;
function updateCount() {
i = i - 1;
countobj = document.getElementById("count");
console.log("Updating object: " + countobj);
countobj.innerHTML = "<b>" + i + "</b>";
}
</script>
</body>
</html>
You can start by adding the jsboom.html file (with this code) to your website.
We cover this code in Class 17, and you should understand everything in it at least at the level we discussed in class.
Problem 1. Add an if statement to the updateCount function body to do something special when the value of i reaches 0.
We demonstrate an example of this in Class 17, and you can use the code from class in your solution to Problem 1. But, you should understand what you use, and try making some changes to it to be sure that you understand it.
Problem 2. Modify the updateCount function body so the background color of the webpage gets gradually redder as the count approaches 0.
Problem 3. Add another button to the webpage that does something else. You can be creative and decide what it should do, and experiment with different ways to modify the DOM to make interesting things happen on the webpage. For your response to this question, provide the code you wrote as well as a short explanation of what you added and anything you wanted to do but couldn’t figure out how to make it.
Part 2: Understanding Languages
This part asks you some questions about BNF grammars (introduced in Class 16).
Consider the BNF grammar AB below with starting non-terminal S:
Problem 4. Answer each sub-part about the AB grammar above:
a. What are the non-terminals in the grammar?
b. How many strings are in the language produced by the grammar?
c. Is there any string in the language produced by the grammar below that is not in the language produced by the AB grammar above?
Consider the BNF grammar below that resembles part of the JavaScript grammar:
Problem 5.
a. Show that the BNF grammar above can produce 23 by showing the derivation (sequence of replacements) from Expression.
b. Show that the BNF grammar above can produce 2 + 3 * 6 by showing the derivation (sequence of replacements) from Expression.
c. Argue convincingly that there is only one way to derive 2 + 3 * 6 from the grammar, and in particular, that there is no derivation that would group 2 + 3 as one expression (instead of grouping 3 * 6 as should have happened in your derivation for part b).
Part 3: Creating a Photo Carousel
For the last part of this assignment, you will add a photo carousel to your webpage.
The result should be (at a minimum) something like this where there is an image displayed and a “Next” button that advances to the next image, and after clicking through all the images, the first image will return and cycle again.
Problem 6. Implement a photo carousel on your website. (This can be done on a new webpage, or by modifying one of the pages you already created for Project 2.)
Some hints:
You can implement your carousel in any way you want, but here are some (hopefully helpful) hints that assume one way of doing it.
You’ll want to create a image element on your page and then update the src attribute to change the image. Here’s a few code snippets that may be useful for figuring out how to do this:
<img id="cimage" height="600" src="" alt="Image Changes">
This is HTML that would put an image on a webpage. The id can be used to obtain the JavaScript object in the DOM that corresponds to this object:
var carouselImage = document.getElementById("cimage");
carouselImage.src = ...; // this is how you update the URL for the image
To cycle through the image, you could create an array object that is the collection of images, and then use a variable (similar to the way i was used in the countdown application in Part 1).
To define an array, you can use an ArrayExpression:
For example,
images = [ 'https://mysiteurl/image1.jpg',
'https://mysiteurl/image2.jpg',
'https://mysiteurl/image2.jpg' ] ;
Then, we can access elements of an array using the square brackets. For example, images[0] would be the first element of the array ('https://mysiteurl/image1.jpg').
If you need more hints, please ask!
Problem 7. Add something more creative to your website using your advancing JavaScript skills. This could be adding an additional feature to the photo carousel, or something new and more creative. Its up to you to decide what to implement for this, but you should have enough power now to do something interesting!