JavaScript

Question 1

How would you add a simple button to change the text in the following:

<div>CHANGE THIS</div>

Answer 1

Click

Question 2

The HTML below displays an image, update this so that when you click the image it runs a function called YouClickedMe()

<img></img>

Answer 2

<img></img>

Question 3

Write the myFunction() for the button below which which will change the text to green:

<p>JavaScript can change the style of an HTML element.</p>

Click Me!

Answer 3

function myFunction() {
    var x = document.getElementById("demo");
    x.style.color = "green"; 
}

Question 4

IN JS, how do you find an element on a page by it’s Id?

Answer 4

Use:

document.getElementById(“[elementsId]”)

Question 5

How would you get a window alert to pop up whenever someone loads a page?

Answer 5

Include something along the lines of:

window.alert(“HELLO”);

Question 6

Complete the following:

JavaScript has ??????? types

Answer 6

JavaScript has DYNAMIC types

ie a var x can be assigned a number and then later a string

Question 7

How many number types does JavaScript have?

Answer 7

Just one

Question 8

set up a JavaScript array containing the following words:
Cat
Dog
Rabbit

Answer 8

var animals = [“Cat”, “Dog”, “Rabbit”];

Question 9

Setup a javaScript object for the following person:
firstName = John,
lastName = Fentiman,
Age = 37

Answer 9

var john = {firstName:”John”, lastName:”Fentiman”, age:37};

Question 10

How do you find the type of a variable?

Answer 10

var x = "John";
typeof x;

Question 11

How do you clear out a variable?

Answer 11

var person = "John";  //This would set it up as a string
person = undefined; //This would clear it out

Question 12

Add a function to this object to return the full name:

var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    }
};

document.getElementById(“demo”).innerHTML = person.fullName();

Answer 12

var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

document.getElementById(“demo”).innerHTML = person.fullName();

Question 13

How would you find the 3rd character in the following:

var str = “HELLO WORLD”;

Answer 13

str.charAt(2);

DO NOT USE str[2]
This is not compatiable

Question 14

How do you convert the value on an innerHTML to a number?

Answer 14

var i = parseInt(document.getElementById(“IdName”).innerHTML);

Question 15

Create a JavaScript object call Person which includes a name and an age attribute along with a sub object called favouritePerson

Answer 15

var person = {
   name: "John",
   age: 37,
   favouritePerson:  {
        name: "Gemma",
        age: 38
  }
};

Question 16

What does this function do and what would we call it?

(function(){
   var userName = "John";
   var currentTime = new date();

   function userDateStamp(){
      return userName + currentTime;
   }
})();

Answer 16

This is a called an ANONYMOUS SELF EXECUTING FUNCTION

ANONYMOUS: It has no name
SELF EXECUTING: Everything within between (function{ and )(); would just be run and return the userDateStamp string, with all the bit’s inside being kept ‘private’ - they would be out of scope for anything else

Question 17

How would you create the equivalent of a NAMESPACE in JS?

Answer 17

var MyNameSpace = MyNameSpace || {};

If MyNameSpace doesn’t exist, it will create an empty object, otherwise it will use the exisitng MyNameSpace object

Question 18

You have an object set up as an name space, as shown below, how do you then add functions, sub areas and variables to it?

var MyNameSpace = MyNameSpace || {};

Answer 18

//Function
MyNameSpace.currentTime = function () { return new Date() };

//Sub Area
MyNameSpace.SubArea = MyNameSpace.SubArea || {};

//Variable
MyNameSpace.myName = "John";

Question 19

What is the global name space in JS?

Answer 19

window

Question 20

Convert the following C# class into a JS class and implement it:

class Artist ()
{
  string Name;
  string Label;
  int NumberOfReleases
}

Answer 20

function Artist (name, label, numberOfReleases)
{
  this.Name = name;
  this.Label = label;
  this.NumberOfReleases = numberOfReleases;
}

…..

artist = new Artist(“Debasser”, “WIDE”, 12);

Question 21

What is DUCK TYPING?

Answer 21

If it looks like a duck, walks like a duck and sounds like a duck, then it’s probably a duck

This means that we don’t need to specify the type of something being fed into a function. So long as the object or parameters going in are sufficient for the function, then it will work just fine.

This elements the need for interfaces

Question 22

What is the JS following doing:

var svr = new SmptClient();

svr.send({
to: “john.fentiman@mandg.co.uk”,
from: “gemmanorton@hotmail.com”,
body: “Hi favourite, missing you”,
subject; “Hello”
});

Answer 22

It’s creating an instance of a SmptClient and then using that objects send function.

Within the send function we are then building an ad-hoc object which contains the required parameters for the send function to process

This is an example of Duck Typing

Question 23

What does DOM stand for?

Answer 23

Document Object Model

Question 24

How would you use JS DOM to find all the <p> elements in the main section of the code below:

</p><div>TITLE</div>
<div>
<p>First Line</p>
<p>Second Line</p>
ThirdLine
</div>
<div>END</div>

Answer 24

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Question 25

Using a JS script, how could you add an onclick function to the following element:

<div>Click Me</div>

Answer 25

document.getElementById(“myBtn”).onclick = myFunction;

NB: Elsewhere you would need to have a function called myFunction for this to be of any use

Question 26

What does the follow jQuery do?

$(function(){

Answer 26

This is the same as writing:

$(document).ready(function(){

and it means that it won’t run anything in the following function until the page is fully loaded

Question 27

What does the following jQuery do?

$(“p”)

Answer 27

Finds all <p> elements on a page</p>

Question 28

What does the following jQuery do?

$(“#myThing”)

Answer 28

It will find the element on the page with id=”mything”

Question 29

What does the following jQuery do?

$(“.box”)

Answer 29

If will find any elements that have class=”box”

Question 30

What does the following do?

$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});

Answer 30

1. It waits for the page to load
2. Identifies any <p> elements on the page
3. Adds a click event to these so that when they’re clicked they will disappear </p>