function
keywordfunction function_name(args){
}
var function_name = function(args){
}
%%script node
function hello(){
console.log("Hello World!")
}
hello()
%%script node
function getDayOfWeek(date) {
var days = ["Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"];
return days[date.getDay()];
}
console.log(
getDayOfWeek(new Date())
)
Array.sort
with a custom functiona
and b
a < b
a = b
a > b
%%script node
var some_numbers = [45,63,22,9,13,2,1,64,"40"];
some_numbers.sort();
console.log(some_numbers)
%%script node
var some_numbers = [45,63,22,9,13,2,1,64,'40'];
some_numbers.sort(function(a,b)
{
return a - b;
});
console.log(some_numbers)
%%script node
callMe();
function callMe(){
console.log("I've been hoisted!")
}
%%script node
callMe2();
var callMe2 = function(){
console.log("I'll never be hoisted 😔")
}
arguments
is populated with any extra arguments .length
property returns the number of extra arguments%%script node
function myJoin(separator){
if (arguments.length < 2){
return ""
}
var return_string = arguments[1]
for(var i =2; i < arguments.length; i++ )
{
return_string += separator + arguments[i]
}
return return_string
}
console.log(myJoin(';','a','b','c'))
console.log(myJoin(';'))
practice(function(a,b){return a + b;}, 1, 2, 3, 4, 5, 6, 7)
%%script node
function wrapper_function()
{
var my_private_var = 10;
return function closure()
{
my_private_var++
}
}
%%script node
function my_incrementer()
{
var counter = 0;
return function()
{
counter++;
return counter;
}
}
var my_counter_function = my_incrementer()
console.log(my_counter_function());
console.log(my_counter_function());
console.log(counter);
object.key
object['key']
object.new_property = new_value
var my_object = {
key1: value1,
key2: value2,
...
}
new Object()
to create an empty object, and then assign keys and valuesvar next_object = new Object();
next_object.key1 = value1;
next_object.key2 = value2;
%%script node
var obj = {name:'Bryan Wilkinson','alma mater':'UMBC',
graduation: [2009,2017]}
console.log(obj.name)
console.log(obj['alma mater'])
console.log(obj.graduation[0])
%%script node
var obj = {name:'Bryan Wilkinson','alma mater':'UMBC',
graduation: {bs:2009, phd:2017}
};
console.log(obj.name)
console.log(obj['alma mater'])
console.log(obj.graduation.bs)
new
keywordfunction Person(name,dob,birthplace)
{
this.name = name;
this.dob = dob;
this.brithplace = birthplace;
}
var person1 = new Person("Simon Bolivar","July 24 1783","Caracas")
%%script node
function Car(make,model,year){
this.make = make
this.model = model
this.year = year
}
var first_car = new Car("Toyota",'Camry',1998)
console.log(first_car.make)
first_car.color = "Beige"
console.log(first_car['color'])
console.log(typeof(first_car))
console.log(first_car instanceof Car)
console.log(first_car instanceof Object)
this
can be used to refer to the object%%script node
function Car(make,model,year){
this.make = make
this.model = model
this.year = year
this.print = function(){
console.log("I am a " + this.year + " "
+ this.make + " " + this.model)
}
}
var first_car = new Car("Toyota",'Camry',1998);
first_car.print();
sell
method that reduces the number of books by one%%script node
function simpleObject(){
this.value = "constant"
}
var obj1 = new simpleObject();
var obj2 = new simpleObject();
console.log(obj1 == obj2)
%%script node
function compare_objects(obj_a,obj_b){
for(key in obj_a){
if(obj_a[key] != obj_b[key])
{
return false
}
}
if(Object.keys(obj_a).length != Object.keys(obj_b).length)
{ return false;}
return true;
}
function simpleObject(){
this.value = "constant"
}
var obj1 = new simpleObject();
var obj2 = new simpleObject();
console.log(compare_objects(obj1,obj2));
%%script node
function Graph() {
this.vertices = [];
this.edges = [];
}
Graph.prototype = {
addVertex: function(v) {
this.vertices.push(v);
}
};
var g = new Graph();
console.log(g);
g.addVertex('Node_1');
console.log(g)
console.log(g.prototype)
console.log(g.__proto__)
Object.create
takes an object, o
, and returns a new object, a
o
is set to be the prototype of a
parent = {key1:value1,key2:value2}
child = Object.create(parent)
%%script node
var Animal = {print: function(){
console.log(this.name + " says " + this.sound)}
}
var Horse = Object.create(Animal)
Horse.sound = "neighhh"
var Homeboykris = Object.create(Horse)
var AmericanPharoah = Object.create(Horse)
Homeboykris.name = "Homeboykris"
AmericanPharoah.name = "American Pharoah"
Homeboykris.print();
AmericanPharoah.print();
class
keywordextends
to perform inheritanceclass className{
constructor(arg1,arg2){
this.arg1 = arg1;
this.arg2 = arg2;
}
get arg1(){
}
set arg1(){
}
}
%%script node
class Circle{
constructor(radius){
this.r = radius;
}
area() {
return 3.14 * this.r * this.r;
}
}
var circ1 = new Circle(2.0)
console.log(circ1.area());
circ1.r = 10;
console.log(circ1.area());
document
objectdocument.getElementById(id)
returns a single element objectdocument.getElementsByTagName(name)
returns a nodeList of all elements of that tagdocument.getElementsByClassName(name)
returns a nodeList of all elements with that classNODE.querySelector(selector)
returns the first element matching the CSS selectorNODE.querySelectorAll(selector)
returns all elements matching the CSS selector(s)%%html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="alone">
<div class="inner">
<p>
Test
</p>
</div>
</div>
<p class="inner">
Inner
</p>
<script>
console.log("A: " + document.getElementById('alone'));
console.log("B: " + document.getElementsByTagName('div'));
console.log("C: " + document.getElementsByClassName('inner'));
console.log("D: " + document.querySelector('.inner'));
console.log("E: " + document.querySelectorAll('.inner'));
</script>
</body>
</html>
NODE.innerHTML
- set or get the HTML contained in a node ( doesn't include the node itself)NODE.outerHTML
- sets or get the HTML of a node, including the node itselfNODE.id
, NODE.className
- set or gets the id and class attributes of the nodeNODE.attributes
- A read only object that allows all attributes to be inspectedNODE.childNodes
- A nodeList of the nodes under this oneNODE.parentNodes
- The parent node of the current nodeNODE.textContent
- The text under this node, and all its children, with no HTML%%html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="an_id">
<div class="a_class">
<p>
Test
</p>
</div>
</div>
<p class="a_class">
Inner
</p>
<p id="my_results">
</p>
<script>
var results = document.getElementById('my_results');
results.innerHTML = document.getElementById('an_id').textContent;
</script>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
<style>
#an_id1{border:2px solid black;}
</style>
</head>
<body>
<div id="an_id0">
<div class="a_class0">
<p>
Test
</p>
</div>
</div>
<p class="a_class0">
Inner
</p>
<p id="my_results0">
</p>
<script>
var results = document.getElementById('my_results0');
results.innerHTML = document.getElementById('an_id0').innerHTML;
</script>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
<style>
#an_id1{border:2px solid black;}
</style>
</head>
<body>
<div id="an_id1">
<div class="a_class1">
<p>
Test
</p>
</div>
</div>
<p class="a_class1">
Inner
</p>
<p id="my_results1">
</p>
<script>
var results = document.getElementById('my_results1');
results.innerHTML = document.getElementById('an_id1').outerHTML;
</script>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="an_id2">
<div class="a_class2">
<p>
Test
</p>
</div>
</div>
<p class="a_class2">
Inner
</p>
<p id="my_results2">
</p>
<script>
var results = document.getElementById('my_results2');
results.innerHTML = document.getElementById('an_id2').id;
</script>
</body>
</html>
<td>
cells in the table below with the class 'change' to be green%%html
<!DOCTYPE html>
<html>
<head>
<style>
.green{background: green}
</style>
</head>
<body>
<p class="change">Careful</p>
<table>
<tr class="change">
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td class="change">1</td>
<td>2</td>
<td class="change">3</td>
</tr>
<tr>
<td>$</td>
<td class="change">?</td>
<td>!</td>
</tr>
</table>
<script>
</script>
</body>
</html>
NODE.getAttribute(name)
returns the value of a specific attributeNODE.setAttribute(name,value)
sets the value of a specific attributeNODE.removeChild(node)
removes a child node when passed a Node objectNODE.replaceChild(newNode,oldNode)
removes the oldNode
and inserts the newNode
in itsplaceNODE.appendChild(newNode)
adds a new node as the last child of the calling node%%html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="an_id3">
<div class="a_class3">
<p>
Test
</p>
</div>
</div>
<p class="a_class3">
Inner
</p>
<p id="my_results3">
</p>
<script>
document.getElementById("an_id3").removeChild(
document.querySelector('div.a_class3'));
</script>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="an_id4">
<div class="a_class4">
<p>
Test
</p>
</div>
</div>
<p class="a_class4">
Inner
</p>
<p id="outer4">
I am outside
</p>
<script>
document.getElementById("an_id4").replaceChild(
document.querySelector('#outer4'),
document.querySelector('div.a_class4'));
</script>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="an_id5">
<div class="a_class5">
<p>
Test
</p>
</div>
</div>
<p class="a_class5">
Inner
</p>
<p id="outer5">
I am outside
</p>
<script>
document.getElementById("an_id5").appendChild(
document.createElement("div"));
</script>
</body>
</html>