Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 27, 2016 05:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/5efcc6368a3e6558a37b48f5bf438593 to your computer and use it in GitHub Desktop.
Save anonymous/5efcc6368a3e6558a37b48f5bf438593 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/gesiqap
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
/*
=========
FUNCTIONS
=========
Functions are smaller programs within our program. That is, with the program simply being a set of ordered instructions, a function is a smaller set of instructions defined within the code. Functions can be called upon throughout the program, making them powerful tools to work with.
Functions are initialized similarly to how primitive variables are. When we define a variable..
*/
myVar = 'wombat';
/*
There is no output in the console or program, but myVar is now stored in the program's memory. The same applies to functions - once defined they exist in memory but will not immediately execute.
*/
myFunction = function() {
// function instructions go here
};
// Once a function is defined, we can call it similarly to how we call a variable.
myFunction();
/*
Let's write a program that takes two numbers and logs the larger of the two. First we must define this function. We can give it a name that describes its purpose, and we will give it two parameters. The parameters are temporary variables that will represent the numbers the function will work on, in this case.
*/
printLarger = function(num1, num2) {
if (num1 > num2) {
console.log(num1);
} else if (num1 < num2) {
console.log(num2);
} else {
console.log('No larger number found');
}
};
// Now that our function is defined, we can call the function with the numbers we choose. The numbers in this case are called 'arguments', and they will take the place of the parameters in our function.
printLarger(3, 4);
// > 4
printLarger(5, 5);
// > "No larger number found"
// Functions are first-class objects in javascript.
console.log(printLarger instanceof Object);
// > true
// Thus they have the functionality of objects and can be very flexible. For instance, you can call a function as an argument to another function:
var myCat = {
Animal: 'Cat',
Name: 'Mr. Whiskers',
Cute: true
};
function getObjectKeys(object) {
var array = [];
for(var key in object) {
array.push((key + ': ' + object[key]));
}
return array;
}
function printArrayValuesInReverse(array) {
for(var i = array.length - 1; i > -1; i--) {
console.log(array[i]);
}
}
// Remember these two functions? This is how we cycled through an object's values in reverse! Now that they are defined as functions, we can easily pass one into the other.
printArrayValuesInReverse(getObjectKeys(myCat));
// > "Cute: true"
// "Name: Mr. Whiskers"
// "Animal: Cat
/*
Functions can also be defined as a property of an object. These are more conventionally refered to as methods in javascript. Many of the built-in Objects, like datatypes, have several methods that can be called with dot notation. For example, Array.length is a property that returns a primitive value. However, Array.push() is a method that performs an operation that alters the array. Let's make our own object with a method:
*/
var myDog = {
name: 'bruno',
breed: 'husky',
bark: function() {
console.log('woof!');
},
};
console.log(myDog.name);
// > "bruno"
myDog.bark();
// > "woof!"
/*
The idea that objects both contain attributes and methods is one of the pillars of Object-Oriented programming, a paradigm that emphasizes using objects and object inheritance to properly organize code and allow for scalability. There is much more to it, obviously, but it's important to see just how powerful methods can be.
Functions within constructor functions can become private methods using closure. This is a concept in javascript that takes advantage of scope. Most variables are within the global scope and functions can see upwards in scope. However, this does not work the other way. When a first-class function is used to initialize a property of an object, it creates closure around that data that exists as long as the instance is still in memory. This allows functions to work as private methods - untouchable by external code or anything outside its scope.
*/
var Person = (function() {
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
};
return Person;
}());
// This is a constructor function for a Person object. It uses the 'this' keyword in order to initialize its properties and contains the attribute 'name' and method 'getName'.
var p = new Person('Hiro');
console.log('Person name: ' + p.getName());
// > "Person name: Hiro"
delete p.name;
console.log('Person name: ' + p.getName());
// > "Person name: undefined"
// It isn't really cool that Hiro just had his name deleted from within our code. With closure, we can adjust this constructor so that name stays private.
var Person = (function() {
function Person(name) {
this.getName = function() {
return name;
// This inner function has access to the variables
// in the outer function even after it returns
};
}
return Person;
}());
var p = new Person('Hiro');
console.log('Person name: ' + p.getName());
// > "Person name: Hiro"
delete p.name;
console.log('Person name: ' + p.getName());
// > "Person name: Hiro"
</script>
<script id="jsbin-source-javascript" type="text/javascript">/*
=========
FUNCTIONS
=========
Functions are smaller programs within our program. That is, with the program simply being a set of ordered instructions, a function is a smaller set of instructions defined within the code. Functions can be called upon throughout the program, making them powerful tools to work with.
Functions are initialized similarly to how primitive variables are. When we define a variable..
*/
myVar = 'wombat';
/*
There is no output in the console or program, but myVar is now stored in the program's memory. The same applies to functions - once defined they exist in memory but will not immediately execute.
*/
myFunction = function() {
// function instructions go here
};
// Once a function is defined, we can call it similarly to how we call a variable.
myFunction();
/*
Let's write a program that takes two numbers and logs the larger of the two. First we must define this function. We can give it a name that describes its purpose, and we will give it two parameters. The parameters are temporary variables that will represent the numbers the function will work on, in this case.
*/
printLarger = function(num1, num2) {
if (num1 > num2) {
console.log(num1);
} else if (num1 < num2) {
console.log(num2);
} else {
console.log('No larger number found');
}
};
// Now that our function is defined, we can call the function with the numbers we choose. The numbers in this case are called 'arguments', and they will take the place of the parameters in our function.
printLarger(3, 4);
// > 4
printLarger(5, 5);
// > "No larger number found"
// Functions are first-class objects in javascript.
console.log(printLarger instanceof Object);
// > true
// Thus they have the functionality of objects and can be very flexible. For instance, you can call a function as an argument to another function:
var myCat = {
Animal: 'Cat',
Name: 'Mr. Whiskers',
Cute: true
};
function getObjectKeys(object) {
var array = [];
for(var key in object) {
array.push((key + ': ' + object[key]));
}
return array;
}
function printArrayValuesInReverse(array) {
for(var i = array.length - 1; i > -1; i--) {
console.log(array[i]);
}
}
// Remember these two functions? This is how we cycled through an object's values in reverse! Now that they are defined as functions, we can easily pass one into the other.
printArrayValuesInReverse(getObjectKeys(myCat));
// > "Cute: true"
// "Name: Mr. Whiskers"
// "Animal: Cat
/*
Functions can also be defined as a property of an object. These are more conventionally refered to as methods in javascript. Many of the built-in Objects, like datatypes, have several methods that can be called with dot notation. For example, Array.length is a property that returns a primitive value. However, Array.push() is a method that performs an operation that alters the array. Let's make our own object with a method:
*/
var myDog = {
name: 'bruno',
breed: 'husky',
bark: function() {
console.log('woof!');
},
};
console.log(myDog.name);
// > "bruno"
myDog.bark();
// > "woof!"
/*
The idea that objects both contain attributes and methods is one of the pillars of Object-Oriented programming, a paradigm that emphasizes using objects and object inheritance to properly organize code and allow for scalability. There is much more to it, obviously, but it's important to see just how powerful methods can be.
Functions within constructor functions can become private methods using closure. This is a concept in javascript that takes advantage of scope. Most variables are within the global scope and functions can see upwards in scope. However, this does not work the other way. When a first-class function is used to initialize a property of an object, it creates closure around that data that exists as long as the instance is still in memory. This allows functions to work as private methods - untouchable by external code or anything outside its scope.
*/
var Person = (function() {
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
};
return Person;
}());
// This is a constructor function for a Person object. It uses the 'this' keyword in order to initialize its properties and contains the attribute 'name' and method 'getName'.
var p = new Person('Hiro');
console.log('Person name: ' + p.getName());
// > "Person name: Hiro"
delete p.name;
console.log('Person name: ' + p.getName());
// > "Person name: undefined"
// It isn't really cool that Hiro just had his name deleted from within our code. With closure, we can adjust this constructor so that name stays private.
var Person = (function() {
function Person(name) {
this.getName = function() {
return name;
// This inner function has access to the variables
// in the outer function even after it returns
};
}
return Person;
}());
var p = new Person('Hiro');
console.log('Person name: ' + p.getName());
// > "Person name: Hiro"
delete p.name;
console.log('Person name: ' + p.getName());
// > "Person name: Hiro"
</script></body>
</html>
Raw
jsbin.gesiqap.js
/*
=========
FUNCTIONS
=========
Functions are smaller programs within our program. That is, with the program simply being a set of ordered instructions, a function is a smaller set of instructions defined within the code. Functions can be called upon throughout the program, making them powerful tools to work with.
Functions are initialized similarly to how primitive variables are. When we define a variable..
*/
myVar = 'wombat';
/*
There is no output in the console or program, but myVar is now stored in the program's memory. The same applies to functions - once defined they exist in memory but will not immediately execute.
*/
myFunction = function() {
// function instructions go here
};
// Once a function is defined, we can call it similarly to how we call a variable.
myFunction();
/*
Let's write a program that takes two numbers and logs the larger of the two. First we must define this function. We can give it a name that describes its purpose, and we will give it two parameters. The parameters are temporary variables that will represent the numbers the function will work on, in this case.
*/
printLarger = function(num1, num2) {
if (num1 > num2) {
console.log(num1);
} else if (num1 < num2) {
console.log(num2);
} else {
console.log('No larger number found');
}
};
// Now that our function is defined, we can call the function with the numbers we choose. The numbers in this case are called 'arguments', and they will take the place of the parameters in our function.
printLarger(3, 4);
// > 4
printLarger(5, 5);
// > "No larger number found"
// Functions are first-class objects in javascript.
console.log(printLarger instanceof Object);
// > true
// Thus they have the functionality of objects and can be very flexible. For instance, you can call a function as an argument to another function:
var myCat = {
Animal: 'Cat',
Name: 'Mr. Whiskers',
Cute: true
};
function getObjectKeys(object) {
var array = [];
for(var key in object) {
array.push((key + ': ' + object[key]));
}
return array;
}
function printArrayValuesInReverse(array) {
for(var i = array.length - 1; i > -1; i--) {
console.log(array[i]);
}
}
// Remember these two functions? This is how we cycled through an object's values in reverse! Now that they are defined as functions, we can easily pass one into the other.
printArrayValuesInReverse(getObjectKeys(myCat));
// > "Cute: true"
// "Name: Mr. Whiskers"
// "Animal: Cat
/*
Functions can also be defined as a property of an object. These are more conventionally refered to as methods in javascript. Many of the built-in Objects, like datatypes, have several methods that can be called with dot notation. For example, Array.length is a property that returns a primitive value. However, Array.push() is a method that performs an operation that alters the array. Let's make our own object with a method:
*/
var myDog = {
name: 'bruno',
breed: 'husky',
bark: function() {
console.log('woof!');
},
};
console.log(myDog.name);
// > "bruno"
myDog.bark();
// > "woof!"
/*
The idea that objects both contain attributes and methods is one of the pillars of Object-Oriented programming, a paradigm that emphasizes using objects and object inheritance to properly organize code and allow for scalability. There is much more to it, obviously, but it's important to see just how powerful methods can be.
Functions within constructor functions can become private methods using closure. This is a concept in javascript that takes advantage of scope. Most variables are within the global scope and functions can see upwards in scope. However, this does not work the other way. When a first-class function is used to initialize a property of an object, it creates closure around that data that exists as long as the instance is still in memory. This allows functions to work as private methods - untouchable by external code or anything outside its scope.
*/
var Person = (function() {
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
};
return Person;
}());
// This is a constructor function for a Person object. It uses the 'this' keyword in order to initialize its properties and contains the attribute 'name' and method 'getName'.
var p = new Person('Hiro');
console.log('Person name: ' + p.getName());
// > "Person name: Hiro"
delete p.name;
console.log('Person name: ' + p.getName());
// > "Person name: undefined"
// It isn't really cool that Hiro just had his name deleted from within our code. With closure, we can adjust this constructor so that name stays private.
var Person = (function() {
function Person(name) {
this.getName = function() {
return name;
// This inner function has access to the variables
// in the outer function even after it returns
};
}
return Person;
}());
var p = new Person('Hiro');
console.log('Person name: ' + p.getName());
// > "Person name: Hiro"
delete p.name;
console.log('Person name: ' + p.getName());
// > "Person name: Hiro"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment