Preview

02 - Variables and building blocks

 1. Go through the following video presentation, if possible, and select 'True' when done.

  False

  True

 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?
html_js_setup1.png

  Line 14

  Line 12

  Line 7

  The JavaScript file is not being called and would therefore not be recognised

 3. In this line of code, I declared a _________ called myText and gave it a value of 'hello, testandtrack!'. 
var myText = "hello, testandtrack!";

  object

  function

  constant

  variable

 4. In this example, what is the variable?
boxes_variables_arrow.png

  'Name'+'Samia' make up the variable when combined together

  'Name' is the variable (represented by the box) and 'Samia' is the value stored in the variable

  'Samia' is the variable (string data)

  The arrow is the variable, as a variable is the process of storing a value

 5. Which statement best describes what is happening in the following code? 
<script>
var myText = "hello, world!";
alert(myText);
</script>

  The 'hello, world!' text is being passed to the alert function directly

  The variable's name is 'hello,world!' and it has been stored in the value 'myText'

  An error message comes up on the screen as a variable cannot be passed on in this way

  The variable 'myText' is being passed to the alert function, which pops up with an alert that says 'hello, world!'

 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.

  Only 5 is true

  1 and 5 are true

  1, 2, 3, 4 are all true but 5 is not true

  1, 2 and 5 are true

 7. In the following example we have a JavaScript script inside an HTML page. The JavaScript code has declared two variables ____ and ____ . 
Note: To create a variable in JavaScript, we can also use the let keyword.
e.g. let message; (this creates a variable called 'message')
canvassetup_describe_the_setup1.png

  document / getContext

  c / ctx

  myCanvas / 2d

  Actually, there are three variables: moveTo, lineTo and stroke

 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>
tworedrectangles.png

  Because the second ctx.fillRect(10,10,150,80); is exactly the same as the first. One shape is hidden 'under' the other

  All of these answers are correctly answering the question as to why the code will not work as expected

  There are two lines of code with ctx.fillRect(10,10,150,80); but they produce the shape in the same location

  Because the second ctx.fillRect(10,10,150,80); should be ctx.fillRect(40,120,150,80);

 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>
foursquares_javascript_canvas.png

  110

  10

  80

  100

 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 html tags at the start and the end. There are just four main variables declared

  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

 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.

  var time = (new Date()).getTime() - startTime; the getTime() could be deleted

  The canvas width and height could be increased, which would in turn increase speed

  var linearSpeed = 40; could be increased to 100 or a greater number

  var startTime = (new Date()).getTime(); this line could be set to 100 or 1000

 12. In the line of code: ctx.fillRect(0,10,20,30);, the 0 refers to:

  the y axis coordinate

  the width

  the height

  the x axis coordinate

 13. In the line of code: ctx.fillRect(0,10,20,30);, the 30 refers to:

  the width

  the y axis coordinate

  the x axis coordinate

  the height

 14. In the line of code: ctx.fillRect(0,10,20,30);, the 20 refers to:

  the y axis coordinate

  the width

  the height

  the x axis coordinate

 15. In JavaScript, the 'prompt' command_________________________ .

  prompts the user to change their output

  creates a pop up box into which the user can enter their input

  creates a variable called 'prompt'

  allows the user to create a variable


Report an error