1. Go through the following video presentation, if possible, and select 'True' when done.
2. In the following image, we have set up a basic HTML template and external JavaScript file. On which line is the JavaScript file being called?
3. In this line of code, I declared a _________ called myText and gave it a value of 'hello, testandtrack!'.
4. In this example, what is the variable?
5. Which statement best describes what is happening in the following code?
6. Which of the following statements are true and rules regarding the naming of variables in JavaScript?
1 - Your variables can be as short one character, or they can be as
long as you want.
2 - Your variables can start with a letter, underscore, or the $
character.
3 - They can't start with a number.
4 - Outside of the first character, your variables can be made up of
any combination of letters, underscores, numbers and $ characters.
You can also mix and match lowercase and uppercase to your heart's
content.
5 - Spaces are allowed, for example: first name = " Joe" would be
acceptable.
1, 2 and 5 are true
Only 5 is true
1 and 5 are true
1, 2, 3, 4 are all true but 5 is not true
7. In the following example we have a JavaScript script inside an HTML page. The JavaScript code has declared two variables ____ and ____ .
8. The following code does NOT produce the two red rectangles as shown in the canvas below. Why?
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
All of these answers are correctly answering the question as to why the code will not work as expected
Because the second ctx.fillRect(10,10,150,80); should be ctx.fillRect(40,120,150,80);
Because the second ctx.fillRect(10,10,150,80); is exactly the same as the first. One shape is hidden 'under' the other
There are two lines of code with ctx.fillRect(10,10,150,80); but they produce the shape in the same location
9. Can you fill in the blank number to accurately produce the third square below (i.e. bottom left)?
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,80,80); //this produces the first (top left) square
ctx.fillRect(110,10,80,80); //this produces the second (top right) square
ctx.fillRect(___,110,80,80); //this should produce the third square (bottom left)
ctx.fillRect(110,110,80,80); //this produces the fourth square (bottom right)
</script>
</body>
</html>
100
80
10
110
10. In the following code, where is the JavaScript inserted and how many variables can you count?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
function animate(myRectangle, canvas, context, startTime) {
// update
var time = (new Date()).getTime() - startTime;
var linearSpeed = 40;
// pixels / second
var newX = linearSpeed * time / 1000;
if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
myRectangle.x = newX;
}
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
drawRectangle(myRectangle, context);
// request new frame
requestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var myRectangle = {
x: 0,
y: 75,
width: 100,
height: 50,
borderWidth: 5
};
drawRectangle(myRectangle, context);
// wait one second before starting animation
setTimeout(function() {
var startTime = (new Date()).getTime();
animate(myRectangle, canvas, context, startTime);
}, 1000);
</script>
</body>
</html>
There is no JavaScript in this code. There are five HTML canvas variables
The JavaScript is between the script tags on lines 13 and 70. There are four variables
The JavaScript is between the script tags on lines 13 and 70. There are seven variables
The JavaScript is between the html tags at the start and the end. There are just four main variables declared
11. What would you have to change in order to make the rectangle move more quickly across the screen? Try it out for yourself if necessary.
12. In the line of code: ctx.fillRect(0,10,20,30);, the 0 refers to:
13. In the line of code: ctx.fillRect(0,10,20,30);, the 30 refers to:
14. In the line of code: ctx.fillRect(0,10,20,30);, the 20 refers to:
15. In JavaScript, the 'prompt' command_________________________ .