Preview

02 - Variables and building blocks

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

  True

  False

 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 7

  Line 12

  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

  variable

  constant

  function

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

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

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

  'Samia' is the variable (string data)

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

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

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

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

  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, 2, 3, 4 are all true but 5 is not true

  1 and 5 are 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

  c / ctx

  document / getContext

  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

  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); is exactly the same as the first. One shape is hidden 'under' the other

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

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

 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

  80

  100

  110

  10

 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 seven 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

 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.

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

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

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

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

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

  the y axis coordinate

  the x axis coordinate

  the width

  the height

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

  the width

  the height

  the x axis coordinate

  the y axis coordinate

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

  the y axis coordinate

  the x axis coordinate

  the width

  the height

 15. In JavaScript, the 'prompt' command_________________________ .

  creates a variable called 'prompt'

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

  allows the user to create a variable

  prompts the user to change their output