Javascript Flashcards
1
Q
D3: A good way to visualize binned data is
A
as shapes.
2
Q
D3: The three most popular D3 libraries are
A
dimple.js, Rickshaw, NVD3
3
Q
D3: The best D3 library for time series or streaming data is
A
Rickshaw
4
Q
D3: The DOM gets created during
A
page load
5
Q
Javascript: To clear the javascript console, type
A
clear()
6
Q
Javascript: In the javascript console, to return the html of the current page that has a certain css id, type
A
document.getElementById(“cssid”)
7
Q
Javascript: In the javascript console, to return the html of the current page that has a any css selector, type
A
document.querySelector(“.css-class”)
8
Q
D3: To select elements using D3, type
A
d3.select(“.css-class”)
9
Q
D3: To select a DOM element and then change its css styled color, type
A
d3.select(“.css-class”).style(“background-color”, “green”)
10
Q
D3: To check if the element you are selecting is unique, you can type
A
d3.selectAll(“.css-class”)
and then make sure the array returned has one item.
11
Q
D3: To select a DOM element and then change its text, type
A
d3.select(“.css-class”).text(“New Text”)
12
Q
D3: To select an element within your current selection, type
A
current_selection_var.select(“.inner-class”)
13
Q
D3: To change an html attribute, type
A
d3.select(“.css-class”).attr(“attribute_name”, “new value”)
14
Q
javascript: To set a string to uppercase, type
A
string_var.toUpperCase()
15
Q
javascript: To create a function, type
A
function fuctionName() {
}
16
Q
javascript: To create an anonymous function, type
A
var functionVar = function () {
};
note: requires semicolon
17
Q
javascript: To create a function that returns a string, type
A
function fuctionName() {
return "string"
}
18
Q
jQuery: To hide an html element with the class=”class”, type
A
jQuery(“.class”).hide();
19
Q
jQuery: To show an html element with the class=”class” slowly, type
A
jQuery(“.class”).show(“slow”);
20
Q
jQuery: The abbreviation for jQuery is
A
$
21
Q
jQuery: Most jQuery methods return
A
the item selected, which allows for method chaining.
22
Q
javascript: To return all of the html tags of the body of a page, type
A
document.body.children
23
Q
javascript: To return all of the html tags on a page with a certain class name, type
A
document.getElementByClassName(“class”)
24
Q
jQuery: In the jQuery docs, animations are categorized as
A
Effects
25
jQuery: To run a function when the DOM loads, type
$(document).ready(myFunction)
or
$(myFunction)
26
jQuery: When manipulating the DOM using javascript it is a best practice to
not create a script that runs on ready and just add your script at the bottom of the body and assume it is ready.
27
jQuery: To add html to an html element based on it's class, type
$(".class").append("-button>String-/button>")
28
jQuery: To remove the code for the precise button you are clicking, type
$("button").click(function() {
$(this).remove();
});
29
jQuery: To traverse to the previous sibling page element before the element you selected by class, type
$(".class").prev()
30
jQuery: To prevent a link from taking you to the next page, type
$("a").click(function(event) {
event.preventDefault();
})
31
jQuery: To return the href of the link you just clicked, type
```
$("a").click(function() {
var my_attribute = $(this).attr("href");
})
```
32
jQuery: To turn a string into a jQuery representation of a page element, type
var $my_element = $(-div>-/div>)
33
jQuery: To signify that a variable is a jQuery object, people ofter
add a $ to the beginning of the variable name
34
jQuery: The append method appends to
the end but still inside the tags you point at.
35
jQuery: To use attr() to add an attribute to an element, type
$(".class")attr("key", "value");
36
jQuery: To append text into a tag, type
$(".class").text("string")
37
ajax was originally called
xml http requestobject
38
ajax: To make a web page know that it will work with ajax, add to the head
-script>
var xhr_object = new XMLHttpRequest();
-/script>
39
ajax: a good response has the readyState value of
4
40
ajax: the servers response is held in an attribute called
xhr_object.responseText
41
ajax: To create a button that triggers the send method of an xhr_object, type
```
function sendAjax () {
xhr_object.send()
}
```
-button onClick="sendAjax()">String-/button>
42
ajax: The steps to use ajax are
create an xhr_object
set a response function
open the request
send the request
43
ajax can only send requests to
one server
44
ajax: To overcome ajax's one host policy you can
have your server call the additional servers.
45
ajax: To get images, css files and javascript files from an additional server, you can use
jsonp
46
javascript: To go to a different url, type
window.location.replace("http://www.google.com");
47
javascript: To return the url (including query string) of the current page, type
window.location.href
48
javascript: to slice a string, type
string_var.slice(1,5);
49
javascript: To return the index of a string, type
string_var.indexOf("substring");
50
javascript: To make a div immediately scroll itself to the bottom, type
document.getElementById('div-id').scrollTop = document.getElementById('div-id').scrollHeight;
51
javascript: To return the query string (including the "?"), type
window.location.search
52
AJAX: long polling is
When the client sends a request to the server and the server makes the client wait until an event occurs before sending the data back, and then the client makes another long request.
53
jQuery: To run a function upon every mouse movement, type
$(window).mousemove(function(event) {
console.log(event.type)
});
54
jQuery: To run a function when the mouse leaves the window, type
$(document).mouseleave(function(){
console.log('string')
})
55
jQuery: To set or update a css property for a class, type
$(".css-class").css( "property", "value")
56
jQuery: To effectively remove a css property, type
$(".css-class").css("property", "")
57
javascript: To set a cookie on the browser, type
document.cookie="key=a value; expires=Thu, 01 Jan 2016 12:00:00 UTC; path=/";
58
javascript: To delete a cookie
update it with an expiration date that is in the past.
59
javascript: To return the cookies on the browser, type
document.cookie;
60
javascript: To save the return of a confirm box into a var, type
var confirm_var = confirm("Accept or Cancel?");
61
javascript: The return of a confirm box is
accept: true
cancel: false
62
ajax: each different type of ajax request you plan to make should
have its own xhr_object
63
ajax: The xhr_object attribute that contains the state of the request, e.g. 4 if the response has arrived, is
xhr_object.readystate
64
javascript: To change the html that is within an element, type
document.getElementById("id").innerHTML = "new html"
65
ajax: All the code necessary to send and receive an ajax request is
```
var xhr_object = new XMLHttpRequest();
xhr_object.onreadystatechange = function() {
if (xhr_object.readystate === 4) {
document.getElementById("id").innerHTML = xhr_object.reponseText;
}};
```
xhr_object.open("GET", "/endpoint?key=value")
xhr_object.send();
66
jQuery: To send an ajax request and then inject it into a page element using jquery, type
```
function functionName() {
$(".css-class").load("/endpoint?key=value");
};
```
67
javascript: At the end of if statements. do not put
semicolon
68
javascript: User inputs that are numbers must be converted from
string to integer.
69
javascript: The "equal to" operator for javascript conditional statements is
===
70
javascript: To create a conditional statement, type
if (4 === 4) {
document.write("Equal");
}
71
javascript: To create an if else clause, type
```
if (my_int === 4) {
document.write("Equal");
} else {
document.write("Not Equal");
}
```
72
javascript: strict equality operators (===) do not
convert a string to a number.
| == does
73
javascript: The scrict not equals operator is
!==
74
javascript: Boolean values in javascript are
written in lower case. eg. false, true
75
javascript: An "else if" statement is written as
if () {
} else if () {
}
76
javascript: To use two conditional statements, use
double ampersand
77
javascript: To create a single line comment in a javascript file, type
//
78
bower is a
front end package manager that allows you to easily download from one place.
79
node: To print an error to the console, type
console.error(errorMessage);
80
node: A callback function is
the function that executes when a response to a request is received.
81
Javascript: To erase whatever is in the browser console, type
clear()
82
Javascript: To return a rounded number from a float, type
Math.round(2.2)
83
ajax: To send an ajax request for the next page of django's pagination every time a user scrolls to the bottom, type
```
var is_active = false
var page_num = 1
$(window).scroll(function() {
if(!is_active && $(window).scrollTop() + $(window).height() + 100 > $(document).height()) {
$.get('http://endpoint.com?page=' + page_num, function(data){
$(".gallery").append(data)
is_active = false
page_num += 1
});
}
});
```
84
jQuery: jQuery selectors select matching elements that
exist in the DOM when the code is executed, and don't dynamically update.
85
jQuery: in order to keep dom objects selected even after the initial jQuery execution, (e.g. when loading new objects from ajax), you can use
$(document).on("click", ".css-class", function() {
| });
86
maps: To render a map
import maps api before body end
-script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer>
create container div
```
var map;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
```
Note: must add mapOptions json to the initMap function before the map var
87
maps: To get the coordinates of a device, type
navigator.geolocation.getCurrentPosition(success);
88
maps: the success callback function of navigator.geolocation.getCurrentPosition(success); should start with
```
function success(pos) {
var crd = pos.coords;
var lat = crd.latitude;
var lng = crd.longitude;
}
```
89
javascript: To write code that will only execute after a set amount of time, type
setTimeout(function(){
console.log("string")
}, 2000);
note: this is 2 seconds
90
ajax: To create an ajax request using $.get, type
$.get('http://endpoint.com?key=value', function(data){
console.log(data);
});
91
javascript: To turn an int into a string, type
```
var num = 15;
var n = num.toString();
```
92
javascript: To simulate a button click, type
document.getElementsByTagName('button')[0].click();
93
javascript: When you use window.location.replace("http://url.com")
it does not let the user return to the original page
94
maps: To disallow dragging, type
```
var mapOptions = {
draggable: false,
}
```
95
maps: to create a marker, type
```
var marker = new google.maps.Marker({
position: {lat: 11.111, lng: 22.222},
map: map,
title: 'String'
});
```
96
jquery: To create a function that executes immediately, type
$(function() {
});
97
javascript: To reload a window, type
location.reload();
98
maps: To get all the data to the browser you should
send it all in json and then unpack it with javascript, rather than try to server side render
99
maps: To make a marker with a new icon image, type
```
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'http://cdn.com/file.png'
});
```
100
ajax: get generic ajax loading gifs with a transparent background at
www.ajaxload.info/
101
ajax: To make an ajax loading symbol come up
add a gif image to the bottom of the page display:none; and when you send the ajax request, set it to initial, and then back to none in the callback function
102
javascript: To make a python style for loop in js, type
myArray.forEach(function(value, index) {
console.log(value);
})
103
node: To import a library, type
var libraryName = require("libraryName")
104
node: To turn a json string into a json object, type
JSON.parse(jsonString)
105
node: To turn a json object into a json string, type
JSON.stringify(jsonObject)
106
node: you can access value one in var jsonObject = {key1: "value1"} by typing
jsonObject.key1
107
node: To import a file in the same directory, type
var myFile = require("./myFile")
nore: the ./ path is mandatory
108
node: To expose a function to people importing your file, type
module.exports.exposedFunctionName = localFunctionName;
109
node: To access any arguments you pass into the command line when running a script e.g. node script.js param1 param2, type
process.argv.slice(2)
110
node: To go to a local host port, type the url
http://localhost:1337/
111
node: To create a server, type
var http = require('http');
var server = http.createServer(function (req, res) {
res.writeHead(200);
res.end('Hello, World!\n');
});
server.listen(1337);
112
node: After the function res.end() is executes inside the response
the browser stops listening for a response
113
The local IP address for all computers is
127.0.0.1
114
node: http.createServer(myFunction(req, res)); sends your function
an argument which is a request object with has and attribute called req.url, which returns everything after the root domain including get params
115
javascript: To create an object using a constructor function, type
```
function ConstructorFunc(param1, param2) {
this.attribute1 = param1;
this.attribute2 = param2;
this.functionName = function() { console.log("string") }
}
```
116
javascript: To instantiate an object made by a constructor function, type
var myInstance = new ConstructorFunc("param1", "param2")
117
javascript: To turn a function call into a constructor function you must
```
precede the function name with "new"
e.g.
var myInstance = new ConstructorFunc("param1", "param2")
```
118
javascript: By convention for constructor functions, people
capitalize the first letter
119
javascript: To add a function to a constructor function that does not reload every time the constructor function is instantiated, use
ConstructorFuncName.prototype.functionName = function() {
return "string"
}
120
javascript: The DOM is
the javascript representation of the page
121
javascript: For websites that are rendering over 75KB of JSON data, time to first paint
is lower using server side rendering on both mobile and web
122
javascript: For websites that are rendering below 75KB of JSON data, time to first paint is
about the same using client or server side rendering on both mobile and web
123
javascript: For websites that are rendering over 75KB of JSON data, time to last paint fastest on
server side rendering on both mobile and web
124
jquery: To return in inner html of a jquery object, type
$(".css-class").html()
125
javascript: To evaluate the key name in a json object, type
{ [varName]: "value" }
126
jquery: To scroll to bottom of div, type
```
var myDiv = $('.css-class');
var height = myDiv[0].scrollHeight;
myDiv.scrollTop(height);
```
127
node: To update node, type
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
128
javascript: To run an anonymous function
surround it with parentheses
129
javascript: To create a script tag, add a src and type attribute to it and append it to the head, type
var elementName = document.createElement("script");
mf. type = "text/javascript";
mf. async = true;
mf. src = "//www.cdn.com/id.js";
document. getElementsByTagName("head")[0].appendChild(elementName);
130
javascript: To set the html of the body tag to a string, type
document.getElementsByTagName("body")[0].innerHTML = "script"
131
javascript: How jsonp works is
dynamically create a script tag with javascript
make the src the api endpoint you want
set the query string to ?callback=callbackFunctionName
this request will return your json data as an argument to a function named callbackFunctionName and will run the function so define the callback function that will handle the data before you make the dynamic script request
to return the data from api
132
javascipt: Jsonp is
a way to overcome the single origin policy which prevents browsers from making an ajax request to a URL other than the current
133
javascript: To run new javascript that was added to the page, type
eval(scriptName)
134
javascript: To check if a browser has a touch screen or not, type
```
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
```
135
jquery: To run a script only if the width of the screen is something, type
```
$(document).ready(function() {
var isMobile = window.matchMedia("only screen and (max-width: 760px)");
```
if (isMobile.matches) {
...
}
});
136
javascript: To insert a new element into the top of a div full of elements, type
parentElement.insertBefore(newElement, parentElement.childNodes[0])
137
javascript: To add a class to an element in vanilla js, type
document.querySelector("div").className += " other-class";
138
jquery: To traverse up to the parent div then to the next div, then it's children, type
$(element).parent().next().children()
139
javascript: To start an html5 video at a certain spot after it loads, type
document.querySelector('video').addEventListener('loadedmetadata', function() {
this.currentTime = 10;
}, false);
