Turn in the following:



JavaScript Lab 1 (50 pts)Complete JavaScript Tutorials 1 and 2.Turn in the following:From Tutorial 1:An html file and a js file. (5 pts) The html file should have a table with 4 data cells, each with an image in it. Each image should, when clicked on, call its own function in your .js file such that an alert box pops up saying what image you clicked on.The html file should have buttons that call generalizedfunc() with different sentences.The javaScript file should have the generalizedfunc(x) that uses an alert box to print out the different sentences passed in by the buttons( 5 pts) A second table – a copy of the first table, with each image only calling the same function when clicked on, with the name of what the image is as a parameter to the function. In your javascript file, this function should use the alert box to print out what the image is by using the parameter.(12 pts) Either in separate html and .js files or the same ones you’ve been using, you should have a javascript that asks the user, “what kind of candy do you like?” using the prompt box. The function should then use an if condition to print out what your favorite candy says about you as follows:Snickers -> you have a multi-faceted personality. You don’t fit into a box. You like to travel and read as much as TV and sports. 100 Grand -> you’re wise beyond your years. You were always the kind in class teachers were most in pressed with. You question things in a thoughtful wayMilkyWay-> you’re smooth! You know what to say and when to say it. You love a minimal, clean look. You enjoy cooking more than going out3 Musketeers -> You’re a hero. You’re super humble and unassuming. You read long booksButterfingers->you’re a little clumsy. You tend to lose stuff. Your favorite show is the Simpsons and you identify with Bart.Candy Corn - >you probably need braces. You like cats.Reese’s Peanut Butter Cups -> You’re a free spirit. You have a strong sense of self, and enjoy being around people who challenge you. Smarties-> You’re the quiet, loving type. You treat everything with respect. You’re an introvert and you enjoy cooking with close friends.Nerds -> You’re a total goofball. You might not always be funny, but everyone knows they’ll have a good time when you’re around. You’re weird in a good way. You’re probably a morning person.Starbursts -> you’re the creative type. You like taking risks and stretching yourself in new, artistic fields. You like living near nature.M&Ms ->you’re a model citizen. You always recycle. You’re always up for an adventure.Kit Kat -> you’re cool, and super laid back. You go with the flow. You love travelingNestle crunch -> You’re a dreamer. You always have a positive attitude. You’re not too hard on yourself.None of the above -> You’re picky. You know what you want and you are willing to wait to get it. Fine, but you’re missing out on a lot of good candy!Note that this should be in the form of:if (y === ‘snickers’) {alert(“you have a multi-faceted personality. You don’t fit into a box. You like to travel and read as much as TV and sports.”)}else if (y === ‘100 grand’) {alert(“you’re wise beyond your years. You were always the kind in class teachers were most in pressed with. You question things in a thoughtful way”)}else if (y ===”MilkyWay”) {alert(“you’re smooth! You know what to say and when to say it. You love a minimal, clean look. You enjoy cooking more than going out”)}Etc.From Tutorial 2:You can either make a new html and .js file, or modify the ones you used in Tutorial 1(5 pts) In the .js file, add a function that, instead of using a parameter, uses the prompt and a variable to get the input for document.write to write out. The prompt box should ask the user, “what is your favorite movie?” and then document.write should write out what the user typed in in as a <h2> item. In your html have either a paragraph or a button call the function to test it.(7 pts) Your html file should have 3 paragraphs, one for small, one for medium, and one for large. The small should call a function with a relatively small number as the input value. The medium should call the same function with a larger number as the input value, and the large should call the same function with the largest number.Your js file should hold the function called by the above paragraphs. Using the input parameter, it should modify the font of the paragraph printed out using document.write so that its size is the size of the input parameter. 2. (8 pts) In this function (or in a separate function), you should have a prompt box that asks the user, “do you prefer regular, or italic font?” and uses what the user types in to modify the paragraph. So, for instance, if the user types in, “italic”, the prompt’s variable should be used to write out a paragraph (anything you want, maybe a nice quote) with the font-style set to italic. Make sure in the html something (either an existing paragraph or a new paragraph or button) calls this function so that you can test it.3. (8 pts) Make sure you’ve downloaded 4 images and saved them in the same folder as your .js file. The images should be for the 4 seasons (or any 4 distinct entities you prefer). Your JS file should have a new function that has an input parameter. The function should work as follows: If the input parameter holds the word “autumn”, document.write should write the html to display the image you downloaded of autumn. If the input parameter holds the word “winter”, document.write will write the html to display the image of winter. If the input parameter holds “spring”, document.write will write the html to display the image of spring, andif the input parameter holds “summer”, document.write will write the image of summer.Make sure your web page has 4 paragraphs on it. Each paragraph should call the above function with “autumn”,”winter”,”spring”, or “summer” respectively.Zip up all images, html, and .js files needed for this lab and submit on canvas. NOTE: For this lab, you don’t have to upload to the university’s server and upload to canvas the URL. You may just submit the zipped file to canvas. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download