Lesson 6

Review Concepts

Programs in the browser

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>

How to problem solve.

Programming is all about taking a larger problem, and breaking it down into smaller, more manageable problems, and then solving them one by one.

Functions Help...

  • Think of a function as an answer to a simple problem.
  • Each function should only solve one problem.
  • A function should not take up that many lines of code.
  • Complexity creates headaches. Stick to simple ideas.
  • Patterns emerge in code, learn to look for them.
Create a program that can calculate PI using an infinate series for N iterations

Problem

(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!

Refactoring - WTF is?

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;
}

Lesson 6 - Review

By Mathew Kleppin

Lesson 6 - Review

Lets Review some concepts

  • 421