Original file was S10Lab3.tex



CSCE 102 Lab 5

More practice with CSS and JavaScript

General information

• Both lab and lecture attendance is required.

• Read the entire in-class assignment before you start.

• Always bring your textbook and lecture notes to lab.

• Use clean indentation and blank lines so your code will be easy for you to read and also easy for your instructor to read.

• Always work from your x-drive while you are in the lab, not from your flash drive or from your laptop.

• Include the closing tags when you enter the opening tags so you will not forget them.

• Always maintain backup copies of your work. Always work on your X drive while in the lab and copy your work to your flash drive at the end of lab.

• Never share your password or flash drive with anyone. Maintain the standards of academic honesty discussed in lecture and in previous labs. The work you turn in must be your work. It cannot be copied from anywhere, not from the web, W3C, not from your friends.

• If you need help, ask.

Academic Honesty

1. The work you turn in is to be your work, not copied from someone else, from the web, or generated by a program.

2. Never allow anyone access to your files.

3. Never give anyone your password.

4. Never share your USB memory or email your files to anyone else.

5. Never give anyone a printed copy of your file or an electronic copy.

6. Never allow anyone to copy your work.

Problem A: Due at the end of class ― Fun JavaScript and CSS.

Create a new web page (lab5Axx.html) (Always replace xx with your first and last initial.)

Beginning JavaScript

Use the script element inside the head

1. Write the code to make an alert box pop up with a short Valentine’s message that you make up.

• Note: an apostrophe is the same as a single quote to the browser so if you want an apostrophe use a backslash and then the apostrophe. Valentine\’s as in: alert(‘Happy Valentine\’s day!’ );

2. Prompt the user for his first name.

3. Prompt the user for his last name.

4. Have an alert box pop up that contains the first name followed by a space and then the last name followed by a short Valentine’s message that you make up.

In the Body

1. Insert exactly 8 headings using any of the headings h1 – h6.

• Have them contain nice Valentine’s messages.

2. When the second heading is clicked using the onclick event handler and JavaScript:

• Have the text color of that heading turn red

• And the font size of that heading become 38pt

• And the background color of the web page turn pink.

3. Using the onmouseover event handler and JavaScript in the third heading

• Make the first heading have red text and become underlined when the third heading is moused over.

Hint: You will give the first heading an id and use getElementById

4. When the fourth heading is clicked

• change its content to read:This is a fun Valentine!

5. Apply style to the last four headings using an internal style sheet (the style element).

6. Use onmouseover in the fifth heading

• to do something neat to both the fifth and sixth headings

• and use onmouseout to set them back to how they were set in the style.

7. When you mouse over the seventh heading change the eighth heading to read

• So glad you are here followed by the first name that the user entered in the first prompt box.

Hint: you will concatenate the value of the variable used to store the first name with the message. Variable names are not enclosed in quotes – we want the value of the variable, not the name of the variable to appear.

This webpage is due at the end of class. If you don’t finish during lab talk with your instructor about the in-class due date extension. It will be due before part B.

Problem B: Valentine fun with CSS and JavaScript Event Handlers –Due the night before your next lab.

Create a new web page (lab5Bxx.html) (Again, using your initials)

Create a web page that is a Valentine that would be an appropriate valentine for your mother, grandmother, granddad, sister, brother, or aunt etc.

1. Include a picture of you. (This is not on the web.) (Images are to be saved in a folder called Lab_5_Images)

2. And also include another picture that would be appropriate for this valentine.

3. Include elements and text ( headings, etc)

4. Use CSS to make the Valentine look nice.

• Be creative and show what you can do - and put some effort into the CSS.

• Your code and Valentine should be unique and not be similar to others

5. Look at page 46-47, and 132-133 in your textbook. Copy/paste your code into the validator and validate your HTML and CSS code. Correct the errors. You can always validate your code and get the errors out.

6. Using the HTML event handlers, onclick, onmouseover, and onmouseout and JavaScript make your page interactive.

o Use each event handler at least twice and remember you can put more than one statement as the attribute value of an event handler.

▪ Remember: There can only be one onclick in an opening tag and its value can be many JavaScript statements. (They must always be complete statements – there are no short cuts or combining statements) So only one onmouseover in an opening tag.

o Again; show your creativity.

▪ Do something neat.

After you have completed Lab 5, update your All_Index file as specified below.

Updating All_Index.html.

• Insert a link to Lab5Axx.html and Lab5Bxx.html at the bottom, of the list.

• Bring printed stapled copies of all both (Lab5Axx.html, and Lab5Bxx.html) files to your next lab stapled and ready to turn in. A stapler will not be provided. You cannot print during your lab time so come prepared.

• Reminder: The printers in 244 and 361 are for 101/102 materials only. Printing other material may cause your account to be revoked.

................
................

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

Google Online Preview   Download