Mathew Kleppin
JavaScript Anyone?
Review Concepts
npm install connect serve-static//server.js
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080);//index.html
<!DOCTYPE html>
<html>
<head>
<title>Leaderboard</title>
</head>
<body>
<script>
//Javascript Here
</script>
</body>
</html>Programming is all about taking a larger problem, and breaking it down into smaller, more manageable problems, and then solving them one by one.
Create a program that can calculate PI using an infinate series for N iterations
(Problem 1.1) How can we solve for pi? - Time to google
(solution 1.1) PI = (4/1) - (4/3) + (4/5) - (4/7) + (4/9) etc...
Is this all coded? Does this solve our original problem? No! Lets keep going
(Problem 1.2) How can we input N interations?
//Solution 1.2
function getIterations(){
return Prompt('How many times do you want to iterate for Pi?', 10);
}Create a program that can calculate PI using an infinate series for N iterations
(problem 2.1) How to get pattern; 1, 3, 5, 7, 9, etc...?
(solution 1.1) PI = (4/1) - (4/3) + (4/5) - (4/7) + (4/9) etc...
//Solution 2.1
var answer = getIterations();
var divisor = 1;
for (var i = 0; i < answer; i++) {
console.log(i + ' | '+ divisor );
divisor += 2;
}(problem 2.2) How to get +/- pattern?
//Solution 2.2
var answer = getIterations();
var positive = false;
for(var i = 0; i < answer; i++){
positive = !positive;
console.log(positive);
}//Solution 2.2 (better, relies on less variables)
var answer = getIterations();
for(var i = 0; i < answer; i++){
if (i%2 === 0) {
//do a thing
} else {
//do another thing
}
}What we have so far... in code!
/* For N Iterations */
function getIterations(){
return Prompt('How many times do you want to iterate for Pi?', 10);
}
function solvePi(){
var answer = getIterations();
/* Get Bottom Divisor */
var divisor = 1;
for (var i = 0; i < answer; i++) {
console.log(i + ' | '+ divisor);
if (i%2 === 0) {
//Calculate Pie with Plus
} else {
//Calculate Pie with Minus
}
divisor += 2;
}
}
Solve PI is handling 3 different problems... Lets refactor!
Taking existing code and reworking it to simplify flow, making it easier to maintain and expand on.
function solvePi(){
var answer = getIterations();
/* Problem 2.1 - Get Bottom Divisor */
var divisor = 1;
for (var i = 0; i < answer; i++) {
/* Problem 2.2 - Change Operators (+/-) */
if (i%2 === 0) {
//Problem 3 - Calculate Pie
} else {
//Problem 3 - Calculate Pie
}
divisor += 2;
}
}
/* Problem 2.1 */
function solvePi(){
var answer = getIterations();
var divisor = 1;
for (var i = 0; i < answer; i++) {
calculate(i, divisor);
divisor += 2;
}
}
/* Problem 2.2 & 3 */
function calculate(count, divisor){
if (i%2 === 0) {
//Calculate Pie
} else {
//Calculate Pie
}
}
function solvePi(){
var answer = getIterations();
var divisor = 1;
//Keeping track of pi
var pi = 0;
for (var i = 0; i < answer; i++) {
//let our function handle +/-
pi += calculate(i, divisor);
divisor += 2;
}
alert(pi);
}
function calculate(count, divisor){
if (i%2 === 0) {
return (4/divisor)
}
return -(4/divisor)
}
pi = (4/1) - (4/3) + (4/5) - (4/7) etc...
Lets trace our applications steps
1. pi = (4/1)
2. pi = (4/1) + -(4/3)
3. pi = (4/1) + -(4/3) + (4/5)
4. pi = (4/1) + -(4/3) + (4/5) + -(4/7)
Dont Repeat Yourself
Keep it DRY
function calculate(count, divisor){
if (i%2 === 0) {
return (4/divisor)
}
return -(4/divisor)
}
function calculate(count, divisor){
var answer = (4/divisor);
if (i%2 === 0) {
return answer;
}
return -answer;
}
By Mathew Kleppin
Lets Review some concepts