JavaScript Flashcards
How would you add a simple button to change the text in the following:
<div>CHANGE THIS</div>
Click
The HTML below displays an image, update this so that when you click the image it runs a function called YouClickedMe()
<img></img>
<img></img>
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!
function myFunction() {
var x = document.getElementById("demo");
x.style.color = "green";
}IN JS, how do you find an element on a page by it’s Id?
Use:
document.getElementById(“[elementsId]”)
How would you get a window alert to pop up whenever someone loads a page?
Include something along the lines of:
window.alert(“HELLO”);
Complete the following:
JavaScript has ??????? types
JavaScript has DYNAMIC types
ie a var x can be assigned a number and then later a string
How many number types does JavaScript have?
Just one
set up a JavaScript array containing the following words:
Cat
Dog
Rabbit
var animals = [“Cat”, “Dog”, “Rabbit”];
Setup a javaScript object for the following person:
firstName = John,
lastName = Fentiman,
Age = 37
var john = {firstName:”John”, lastName:”Fentiman”, age:37};
How do you find the type of a variable?
var x = "John"; typeof x;
How do you clear out a variable?
var person = "John"; //This would set it up as a string person = undefined; //This would clear it out
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();
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.getElementById(“demo”).innerHTML = person.fullName();
How would you find the 3rd character in the following:
var str = “HELLO WORLD”;
str.charAt(2);
DO NOT USE str[2]
This is not compatiable
How do you convert the value on an innerHTML to a number?
var i = parseInt(document.getElementById(“IdName”).innerHTML);
Create a JavaScript object call Person which includes a name and an age attribute along with a sub object called favouritePerson
var person = {
name: "John",
age: 37,
favouritePerson: {
name: "Gemma",
age: 38
}
};What does this function do and what would we call it?
(function(){
var userName = "John";
var currentTime = new date();
function userDateStamp(){
return userName + currentTime;
}
})();
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
How would you create the equivalent of a NAMESPACE in JS?
var MyNameSpace = MyNameSpace || {};
If MyNameSpace doesn’t exist, it will create an empty object, otherwise it will use the exisitng MyNameSpace object
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 || {};
//Function
MyNameSpace.currentTime = function () { return new Date() };
//Sub Area
MyNameSpace.SubArea = MyNameSpace.SubArea || {};
//Variable MyNameSpace.myName = "John";
What is the global name space in JS?
window
Convert the following C# class into a JS class and implement it:
class Artist ()
{
string Name;
string Label;
int NumberOfReleases
}
function Artist (name, label, numberOfReleases)
{
this.Name = name;
this.Label = label;
this.NumberOfReleases = numberOfReleases;
}
…..
artist = new Artist(“Debasser”, “WIDE”, 12);
What is DUCK TYPING?
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
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”
});
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
What does DOM stand for?
Document Object Model
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>
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");elements on a page
elements on the page 3. Adds a click event to these so that when they're clicked they will disappear
