Java Script

All of the Above – This option will return a combination of all of the sections described above. It is represented by the image at the beginning of this project’s instructions:

Files and Folder Structure:

You will receive many different files for this project. The files will be provided to you within a folder structure designed to make the dynamic functionality of the page work correctly. DO NOT CHANGE THIS FOLDER STRUCTURE, as it will make it much more difficult to manipulate any information returned from the animals.php page. There are three folders: images, styles, and js. Any photos used on the site will be inside the images folder The styles folder will contain any CSS files used for the page. The js folder will be empty initially, but this is where you should save your animals.js file.

· CSS - The CSS page for this site is called style.css, and will be given to you inside the styles folder. You do not need to, and should not, edit this file to complete the assignment.

· HTML - An HTML page called example.html will be also be provided to you. This page was set up to show you a static version of what the page would look like with all options loaded for the Red Fox. There will be a few comments within the code to describe any changes that need to be made in order for the code to work properly. This is the file you will edit to use with the JavaScript and JQuery you create. The HTML file does not include any JavaScript functionality when you receive it, you will create all of the JavaScript that makes this page function. Rename this file index.html.

PHP Page:

This webpage uses AJAX to fetch data from a web server. Please note that AJAX can only connect to a web server from a page located on that same server. If you try to fetch data from the web while viewing the page from your local hard drive, the request will fail with an exception.

You will need to send the values from the form to a file named animals.php using an AJAX call inside of your JavaScript page, which should be called animals.js. The PHP page will process the input and return a JSON array containing the variables needed for the selected options. The animals.php file will be located at the following URL:

http://isat-cit.marshall.edu/P5/animals.php

The following section describes the contents of the JSON array that will be returned by each display option passed to the PHP, in the format “key: value”. The PHP will return different values, depending on which animal was chosen by the user. The following shows what would be returned if “Fox” was the animal selected by the user. It is broken down for each of the display options:

· -

. type: error

· Photo

. type: photo

. nameBanner: images/foxBanner.png

. image: <img id='animal_image' src='images/fox.jpg' alt='fox'>

· General Statistics

. type: general

. nameBanner: images/foxBanner.png

. latin: Vulpes vulpes

. lifespan: 5 years

. height: 14 – 20 inches

. weight: 10 – 30 lbs

· Continent Population Statistics

. type: continent

. nameBanner: images/foxBanner.png

. af: 8

. an: 0

. asia: 27

. as: 0

. eu: 35

. na: 23

. sa: 7

· All of the Above

. type: all

. nameBanner: images/foxBanner.png

. image: <img id='animal_image' src='images/fox.jpg' alt='fox'>

. latin: Vulpes vulpes

. lifespan: 5 years

. height: 14 – 20 inches

. weight: 10 – 30 lbs

. af: 8

. an: 0

. asia: 27

. as: 0

. eu: 35

. na: 23

. sa: 7

All of the values returned for an option will be used to create the chosen display option. Note: If a user submits “-“ for the animal input, the PHP page will return a JSON array where “type: error”.

When using a form to submit values with AJAX, you must prevent the default action associated with form submissions, which is to refresh the page upon submission. The purpose of AJAX is to update information on the page without refreshing it, so you have to remember to prevent the default action, or AJAX will not work. You will do this with JavaScript/JQuery. Another important factor involving AJAX and forms is the way data is passed to the PHP page. There is a special JQuery function used to pass form inputs to the PHP in a way that it can process. Make sure you find and use that function, or the PHP page will not function correctly. Hint: It creates a text string in standard URL-encoded notation of the form inputs to be used with AJAX to send to the PHP page.

JQuery and JavaScript:

The bulk of the coding you will do for this assignment will be in JavaScript (using jQuery is MUCH easier). You will need to add and remove elements from the DOM, show or hide divs, insert values into the HTML, and change CSS (dynamically) to properly display the data returned in the JSON array by the PHP page. The most important thing to remember with JavaScript is to work one step at a time. If one piece of code is incorrect, the entire page will not run, so test everything when you add it to help you debug later! Tools like FireBug will help as well if you get stuck.

When adding or removing elements from the DOM, there are a few different options. You should figure out which one is appropriate to use for any situation you come across for this page. Hint: Use this method to add or remove an error message to the page if the user selects ‘-‘ for either the animal or display inputs. There is a paragraph with the id “error” already included in the code given to you, use it!

· remove() - Removes the set of matched elements from the DOM.

· append() - Inserts content at the end of the selected elements

· prepend() - Inserts content at the beginning of the selected elements

· after() - Inserts content after the selected elements

· before() - Inserts content before the selected elements

Showing or hiding divs is easy to do with JQuery with either hide() or show(). Your job is to decide which divs to show and which divs to hide, depending on what display option is selected. Hint: There are four divs that will need to be hidden or shown at different times. Make sure only the selected display options show on the screen. If the inputs are “-“, none of the contents should show on the screen.

When inserting data into HTML, the most important step is figuring out what needs to be replaced. Some sections within the content will have labels or units that need to be displayed on the page, so you have to be careful not to replace everything in an element if you don’t need to. You should use spans to divide your HTML code into replaceable chunks. Once you have the spans set up, you should use JavaScript to replace their contents with the data returned from the JSON array for each option. You will use this method for inserting contents into the Photo, General Statistics, and Continent Population Statistics Sections of the page.

Adding CSS to elements can be done with the JQuery function “css()”. You will use this function to change the width of the divs for the graph within the “Continent Population Statistics” section. You will also use function to make the name banner for each animal appear. Hint: For the name banner, you will use background-image and height. The height should be 72px. The JSON array will return the image’s filename under the key “nameBanner” (ex: nameBanner: images/foxBanner.png) . You will use this to help with the background-image. Remember to look up CSS syntax if you get stuck!

Make sure you focus of getting one display option correct before moving on to the next one. The code should be very similar for each option, so if you get one correct, the others should be fairly simple.

Project Submission:

You will not submit the entire folder structure when you turn in the assignment. You will submit ONLY the following files:

· animals.js, the JavaScript code for your web page

· index.html, the edited HTML

You may not modify the CSS files for this project; each feature must be done through JavaScript. If in doubt about an HTML change or other modification, use JavaScript instead (or ask)!

Make sure you properly document your code. Be specific! Also, use the proper indentation and formatting you have learned in class. Your JavaScript code should follow reasonable stylistic guidelines, minimize the number of global variables, utilize parameters and return values properly, and correctly utilize the HTML DOM objects.

You should minimize redundant code. You should also separate content (HTML), presentation (CSS), and behavior (JS) code into chunks, both to help with grading and to help with coding. Make sure to place a comment header in each file containing your name, section, and a description of the assignment.