Original file was S10Lab3.tex



CSCE 102 Lab 6

Practice with CSS and JavaScript

General information

• The open hours schedule is posted from both your lab instructor’s and your lecture instructor’s web pages.

◦ During the open hours there is someone in the lab to help you with your code.

◦ There are open hours almost every day- early and late; there are even open hours on weekends.

• Both lab and lecture attendance is required.

• No texting, etc. during lab or lecture;

• 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.

• In lab you must be working on the current assignment.

• 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 (lab6Axx.html) (Always replace xx with your first and last initial.)

Beginning JavaScript:

Note: Script elements can be in the head or the body. The page executes from top to bottom.

Here place the script element inside the head

• Write the code to make an alert box pop up with a short welcoming 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. For example: Valentine\’s as in: alert(‘Happy Valentine\’s day!’);

• Prompt the user for their first name.

• Remember you must save the value that the user enters so that you can use that value, therefore the prompt must be in an assignment statement.

• Prompt the user for their last name.

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

• Hint: you will concatenate the value of the variable used to store the first name with a string that contains a space, them the value of the variable that contains the last name and then the string that contains the message. Variable names are not enclosed in quotes – we want the value of the variable, not the name of the variable to appear. Strings are enclosed in quotes,

In the Body;

Note: Event handlers are HTML attribute names; the attribute value is JavaScript statements.

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

• You make up the content.

2. When the third heading is clicked use the onclick event handler and JavaScript to:

• have the background color of that heading turn purple.

o You will use this. to change the element that you are clicking.

o To change an element that you are clicking or mousing over you use this.

• and the background color of the web page become teal.

3. Using the onmouseover event handler and JavaScript

• Make the first heading have red text and become 56pt in size when the fourth heading is moused over.

o You will need to give the first heading an id and use getElementById

o To click or mouse over one element and change another you give the element to be changed an id and use getElementById(‘id goes here’).

4. When the fifth heading is clicked

• change its content to read, I have power!

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

6. Use onmouseover in the sixth heading

• to do something neat to both the six and seventh headings

• and use onmouseout to set them back to how they were when the page loaded.

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

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

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: Fun with JavaScript and CSS using HTML Event Handlers –Due the night before your next lab.

Create a new web page (lab6Bxx.html) starting with your template. (Again, using your initials for the xx)

1. Create a simple web page that contains exactly three of each of the following elements h1, h2, h3, h4, paragraph, and use two em elements. Fill the elements using random text from Lorem Ipsum at .

2. Use an internal CSS to apply style to all of these elements; use what you know and also try something new from pages 415-421 in your text book. Your styles will not look like anyone else’s.

3. Insert CSS comments about the new styles that you tried.

4. Use the onmouseover event handler in the second h1 to change the style of that h1 and also change the style of the second paragraph. (The attribute value of the onmouseover event handler will contain two JavaScript statements. There can only be one onmouseover attribute in a HTML tag.) You will use this to change the element you are on (the h1) and getElementById for the paragraph.

5. Use the onmouseover event handler to change two styles in the second h3 element. You will have two statements in the attribute value, both using this. Now, use onmouseout to set the styles back to what they were set to by the CSS.

6. When the first paragraph is clicked change two styles of the third paragraph.

7. When you mouse over an em element have it increase in size and change the background color of that element to lime.

8. When you click on the first h4 element have a prompt box open that asks for a color. Then turn the text color of that h4 to the color that was entered. (What type of statement MUST the prompt be in so that you can use the value?)

9. Insert an image of you at the bottom of the page.

10. Use the onclick event handler and do something that you think is neat when your image is clicked.

Updating All_Index.html.

• Insert a link to Lab6Axx.html and Lab6Bxx.html at the bottom, of the list.

• Bring printed stapled copies of both (Lab6Axx.html, and Lab6Bxx.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