Workshop
The workshop consists of a set of questions and answers designed to solidify your understanding of the material covered in this lesson. Try answering the questions before looking at the answers.
Quiz
- Would you send a GET or a POST request to a web server to open a web page?
- What type of script has access to browser mouse events: server-side, client-side, or both?
- True or false: JavaScript consoles are enabled by default on all browsers.
- What type of script is the best to use when defining the appearance of DOM elements?
Quiz Answers
- GET
- Client-side
- False. You must manually enable JavaScript debugging on all browsers. Pressing F12 in most browsers will launch the Developer Tools that allow you to debug JavaScript.
- CSS scripts are the simplest to use when defining the appearance of DOM elements.
Exercises
Modify your first.html file to change the background color of your button randomly each time it is moved. Add the following two lines to randomly select a color:
var colors = new Array("#0066AA", "#0000FF", "#FF0000", "#00FF00"); var color = colors[Math.floor((Math.random()*4))];
Then modify the CSS change in your JavaScript to include background-color, as shown next:
$("#elusiveText").css({"top": y + "px", "left": x + "px", "background-color": color})
Add an additional <span> element to your first.html file with the same behavior as the first. To do this, add the following two lines in the appropriate locations. You should be able to figure out where they go:
$("#elusiveText2").css({"top": x + "px", "left": y + "px"}) <span id="elusiveText2" onmouseover="moveIt()">Click Me</span>