Description
Objective: The objective of this exercise is to:
1. Learn and practice the concepts of JavaScript
2. Access DOM from JavaScript
3. Write and debug JavaScript Method (function)
Submit: screenshots, your html file and a link to your web page
You may discuss this with your fellow students or the instructor.
Name:
Part #1: JavaScript Tutorial
Estimated time: 15 minutes
Option 1: Optional review this week’s PowerPoint
Exercise: Review the following
1. Slide 4: How to include inline JavaScript
2. Slide 8: Writing into the document (creating html dynamically)
3. Slide 12: Event handling
4. Slide 25: More Functions
5. Slide 26: Canvas
https://www.w3schools.com/js/default.asp (Links to an external site.)
1. Review the JavaScript information
2. Make sure you understand enough to implement the assignment
3. Nothing due for this
Part #2: Simple Javascript Page
Estimated time: 45-60 minutes
Exercise:
All work will be done in ~/public_html/cse383/lab7
Create a file call called index.html starting with my code.
You will write inline (internal) javascript (no external file)
Note: NOTHING WILL BE OUTPUT BY THE HTML, ALL OUTPUT
ON SCREEN MUST COME FROM JAVASCRIPT
Page 1 of 4
CSE383 Lab #7 JavaScript
1. Write out your class details using JavaScript
a. Assignment in h1
b. Name in h2
c. Date in h3
d. Write out the following
e. See PowerPoint slide 8
2. Create a function (doPicture) which does the following
a. Loop 3 times
i. Dynamically Write (not create) a div with a unique id with
an image inside the div that has a source of:
https://picsum.photos/100/150
b. See PowerPoint slide 12
3. Call doPicture() to display the 3 images (They must all be different
images)
a. Note: If you just put in the image url, each image will be the
same. Why? How can you fix it so that each image (which are
randomly generated) is different?
b. Hint: nonce
4. Create a function called doTime which will use the alert method to
display the current date and time.
a. Test it using the button you created in Part 1.d
b. See PowerPoint slide 12
5. Use the JavaScript canvas
a. Display a filled rectangle in blue at location 50,300 for size of
100,100
b. See PowerPoint slide 26
Starting Template:
Page 2 of 4CSE383 Lab #7 JavaScript
Page 3 of 4
CSE383 Lab #7 JavaScript
SUBMIT:
Screenshot
o Attach a screenshot of your completed web page
File
o Attach the html file
Link
o Add the link to the web page in the text area
Page 4 of 4
