A Pen by ely kahn.

index.html

<div class="wrapper">
  <header>
    <h1>Some JavaScript Basics</h1>
    <h2>open up your console</h2>
  </header>
  
  <p>Variables</p>
  <pre><code>
    var v1 = 0; // boolean
    var v2 = 'Hello World'; // string
    var v3 = 14; // integer
    var v4; // declared for later

    // another way to write variables
    var v1 = 0, // boolean
        v2 = 'Hello World', // string
        v3 = 14, // integer
        v4; // declared for later
  </code></pre>

  <p>Operations</p>
  <pre><code>      
    var o1 = 31 + 1, // Addition
        o2 = 31 - 1, // subtraction
        o3 = 2 * 31, // Multiplication
        o4 = 31 / 2, // Division
        o5 = 31 % 2, // Modulo - test if a number is odd or even
        o6, o7, o8; // Declare for use later


      o6 = o1++; // Add 1
      console.log( o1 + ' ++', o6 );

      o7 = o1--; // Minus 1
      console.log( o1 + ' --', o7 );

      o1 += 2; // plus 2
      console.log( o1 + ' +=', '2' );

      o1 -= 2; // minus 1
      console.log( o1 + ' -=', '2' );

      o1 *= 2; // multiply 2
      console.log( o1 + ' *=', '2' );

      o1 /= 2; // divide 2
      console.log( o1 + ' /=', '2' );

      o1 %= 2; // odd or even - 0 is even - 1 is odd
      console.log( o1 + ' %=', '2' );
  </code></pre>

  <p>Data Types</p>
  <pre><code>
    var dt1, dt2, dt3, dt4, dt5, dt6;

    dt1 = 'Hello Wold';
    console.log( dt1 + ' is typeof', typeof(dt1));
    console.log( dt1 + ' isNaN?', isNaN(dt1));

    dt2 = 3;
    console.log( dt2 + ' is typeof', typeof(dt2));
    console.log( dt2 + ' isNaN?', isNaN(dt2));

    dt3 = true;
    console.log( dt3 + ' is typeof', typeof(dt3));
    

    dt4 = true;
    console.log( dt4 + ' is typeof', typeof(dt4));

    dt5 = function(){};
    console.log( dt5 + ' is typeof', typeof(dt5));

    dt6 = {};
    console.log( dt6 + ' is typeof', typeof(dt6));

    // dt7;
    console.log( 'dt7' + ' is typeof', typeof(dt7));
  </code></pre>

  <p>Booleans</p>
  <pre><code>
    var b1, b2, b3, b4;
    
    b1 = 0;
    console.log('0' + ' =', b1);
    
    b2 = false;
    console.log('false' + ' =', b2);
    
    b3 = 1;
    console.log('1' + ' =', b3);
    
    b4 = true;
    console.log('true' + ' =', b4);
  </code></pre>

  <p>Logical Operators</p>
  <pre><code>
    var lo;

    lo = !true;
    console.log('!true' + ' =', lo);
    
    lo = true && true;
    console.log('true && true' + ' =', lo);

    lo = true && false;
    console.log('true && false' + ' =', lo);
    
    lo = false && true;
    console.log('false && true' + ' =', lo);
    
    lo = false && false;
    console.log('false && false' + ' =', lo);

    lo = true || true;
    console.log('true || true' + ' =', lo);

    lo = true || false;
    console.log('true || false' + ' =', lo);
    
    lo = false || true;
    console.log('false || true' + ' =', lo);
    
    lo = false || false;
    console.log('false || false' + ' =', lo);
  </code></pre>

  <p>Comparison</p>
  <pre><code>
    var lo;

    lo = 1 > 2;
    console.log('1 > 2' + ' =', lo);

    lo = 1 < 2;
    console.log('1 < 2' + ' =', lo);

    lo = 1 == 2;
    console.log('1 == 2' + ' =', lo);

    lo = 1 == 1;
    console.log('1 == 1' + ' =', lo);

    lo = 1 === 1;
    console.log('1 === 1' + ' =', lo);

    lo = 1 === '1';
    console.log('1 === "1"' + ' =', lo);

    lo = 1 != 2;
    console.log('1 != 2' + ' =', lo);

    lo = 1 !== '2';
    console.log('1 != "2"' + ' =', lo);
    
    lo = 1 != 2;
    console.log('1 != 2' + ' =', lo);

    lo = 1 >= 2;
    console.log('1 >= 2' + ' =', lo);

    lo = 1 <= 2;
    console.log('1 <= 2' + ' =', lo);
  </code></pre>

  <p>Arrays</p>
  <pre><code>
    var a1, a2, a3, a4, a5;

    a1 = [];
    console.log('a1 is typof', typeof(a1));

    a1 = ['js', 'is', 'amazing'];
    console.log('add values to the array', a1);
    
    console.log('number of values in an array', a1.length);

    console.log('the first value is', a1[0]);

    console.log('the last value is', a1[ a1.length - 1 ]);

    a1.pop(0);
    console.log('remove the last value -', a1);

    a1.shift();
    console.log('remove the first value -', a1);

    a1.unshift('javascript');
    console.log('add new value to the front -', a1);
    
    a1.push('super', 'awesome');
    console.log('add new value to the end -', a1);

    a2 = a1.lastIndexOf("super");
    console.log('Find the position of super -', a2);

    a1[ a2 ] = 'f#ck@%*'
    console.log('Replace the the value of super -', a1);

    a1.sort();
    console.log('sort the array -', a1);

    a1.reverse();
    console.log('reverse the array -', a1);

    a3 = a1.slice(0,2);
    console.log('remove the first two values -', a3);

    a4 = a1.slice(2);
    console.log('remove the last two values -', a4);

    a1 = a3.concat(a4);
    console.log('glue the rwo arrays together -', a1);
    
    a1 = a1.join(' ');
    console.log('join the rwo arrays -', a1);
  </code></pre>

  <p>If and Else</p>
  <pre><code>
    var ie1 = true,
        ie2 = 'blue',
        ie3;

    // simple if, and if the value is fasle we can do something else
    if( ie1 ){
      // lets do someting
      console.log('ie1 is true');
    } else {
      // so its false lets do something else
      console.log('ie1 is false');
    }

    // if its false, if its false again do something anyway
    if (ie2 === 'green') {
      console.log('ie2 is green');
    } else if (ie2 === 'red') {
      console.log('ie2 is red');
    } else {
      console.log('ie2 is not green or red its', ie2);
    };

    // if shorthand
    ie3 = ( ie2 === 'blue' ) ? 'Yes ie2 is blue' : 'No ie2 not blue'
    console.log(ie3);
  </code></pre>
  <script>
    
  </script>

  <p>Check if variable exists</p>
  <pre><code>
    var cv1 ="",
        cv2 = 123,
        cv3 = undefined;
        cv4 = 'hellow world';

    if (cv1) {
      console.log('yes the cv1 variable exists');
    } else {
      console.log('there is no cv1 variable', cv1);
    };

    if (typeof cv1 !== 'undefined') {
      console.log('typeof cv1 is not "undefined"');
    } else {
      console.log('typeof cv1 is "undefined"');
    };

    if (typeof cv2 !== 'undefined') {
      console.log('typeof cv2 is not "undefined"');
    } else {
      console.log('typeof cv2 is "undefined"');
    };

    if (typeof cv3 !== 'undefined') {
      console.log('typeof cv3 is not "undefined"');
    } else {
      console.log('typeof cv3 is "undefined"');
    };

    if (typeof cv4 !== 'undefined') {
      console.log('typeof cv4 is not "undefined"');
    } else {
      console.log('typeof cv4 is "undefined"');
    };
  </code></pre>

  <p>Switch</p>
  <pre><code>
    var s1 = 'ferrari',
        s2 = 'lamborghini',
        s3;

    // case is like asking a quesion
    switch (s1) {
      case 'audi':
        s3 = 'audi is not my favourite car';
        break;

      case s2:
        s3 = 's2 (lamborghini) is not my favourite car';
        break;

      default:
        s3 = 'my favourite car is a ' + s1;
        break;
    }

    console.log(s3);
  </code></pre>

  <p>Loops</p>
  <pre><code>
    var l1 = ['html', 'js', 'css', 'php'],
        count;

    console.log('while Loop:');
    count = 0;
    
    
    while ( count < l1.length ) {
      console.log('while loop count', count + ' ' + l1[count]);
      count++;
    }

    
    console.log('do-while Loop:');
    count = 0;
    do {
      console.log('do-while loop count', count + ' ' + l1[count]);
      count++;
    } while ( count < l1.length );


    console.log('for Loop:');
    count = 0;
    for (var count = 0; count < l1.length; count++) {
      console.log('for loop count', count + ' ' + l1[count]);
    };


    console.log('for-in Loop:');
    count = 0;
    for ( count in l1 ){
      console.log('for in loop count', count + ' ' + l1[count]);
    }
  </code></pre>

script.js

var v1 = 0; // boolean
var v2 = 'Hello World'; // string
var v3 = 14; // integer
var v4; // declared for later

// another way to write variables
var v1 = 0, // boolean
    v2 = 'Hello World', // string
    v3 = 14, // integer
    v4; // declared for later

console.log('<Operations>');
      
var o1 = 31 + 1, // Addition
    o2 = 31 - 1, // subtraction
    o3 = 2 * 31, // Multiplication
    o4 = 31 / 2, // Division
    o5 = 31 % 2, // Modulo - test if a number is odd or even
    o6, o7, o8; // Declare for use later


    o6 = o1++; // Add 1
    console.log( o1 + ' ++', o6 );

    o7 = o1--; // Minus 1
    console.log( o1 + ' --', o7 );

    o1 += 2; // plus 2
    console.log( o1 + ' +=', '2' );

    o1 -= 2; // minus 1
    console.log( o1 + ' -=', '2' );

    o1 *= 2; // multiply 2
    console.log( o1 + ' *=', '2' );

    o1 /= 2; // divide 2
    console.log( o1 + ' /=', '2' );

    o1 %= 2; // odd or even - 0 is even - 1 is odd
    console.log( o1 + ' %=', '2' );

console.log('</Operations>');
console.log('');

console.log('<DataTypes>');

  var dt1, dt2, dt3, dt4, dt5, dt6;

  dt1 = 'Hello Wold';
  console.log( dt1 + ' is typeof', typeof(dt1));
  console.log( dt1 + ' isNaN?', isNaN(dt1));

  dt2 = 3;
  console.log( dt2 + ' is typeof', typeof(dt2));
  console.log( dt2 + ' isNaN?', isNaN(dt2));

  dt3 = true;
  console.log( dt3 + ' is typeof', typeof(dt3));


  dt4 = true;
  console.log( dt4 + ' is typeof', typeof(dt4));

  dt5 = function(){};
  console.log( dt5 + ' is typeof', typeof(dt5));

  dt6 = {};
  console.log( dt6 + ' is typeof', typeof(dt6));

  console.log( 'dt7' + ' is typeof', typeof(dt7));

console.log('</DataTypes>');
console.log('');

console.log('<Booleans>');

  var b1, b2, b3, b4;

  b1 = 0;
  console.log('0' + ' =', b1);

  b2 = false;
  console.log('false' + ' =', b2);

  b3 = 1;
  console.log('1' + ' =', b3);

  b4 = true;
  console.log('true' + ' =', b4);

console.log('</Booleans>');
console.log('');

console.log('<LogicalOperators>');

  var lo;

  lo = !true;
  console.log('!true' + ' =', lo);

  lo = true && true;
  console.log('true && true' + ' =', lo);

  lo = true && false;
  console.log('true && false' + ' =', lo);

  lo = false && true;
  console.log('false && true' + ' =', lo);

  lo = false && false;
  console.log('false && false' + ' =', lo);

  lo = true || true;
  console.log('true || true' + ' =', lo);

  lo = true || false;
  console.log('true || false' + ' =', lo);

  lo = false || true;
  console.log('false || true' + ' =', lo);

  lo = false || false;
  console.log('false || false' + ' =', lo);

console.log('</LogicalOperators>');
console.log('');

console.log('<Comparison>');
  var lo;

  lo = 1 > 2;
  console.log('1 > 2' + ' =', lo);

  lo = 1 < 2;
  console.log('1 < 2' + ' =', lo);

  lo = 1 == 2;
  console.log('1 == 2' + ' =', lo);

  lo = 1 == 1;
  console.log('1 == 1' + ' =', lo);

  lo = 1 === 1;
  console.log('1 === 1' + ' =', lo);

  lo = 1 === '1';
  console.log('1 === "1"' + ' =', lo);

  lo = 1 != 2;
  console.log('1 != 2' + ' =', lo);

  lo = 1 !== '2';
  console.log('1 != "2"' + ' =', lo);

  lo = 1 != 2;
  console.log('1 != 2' + ' =', lo);

  lo = 1 >= 2;
  console.log('1 >= 2' + ' =', lo);

  lo = 1 <= 2;
  console.log('1 <= 2' + ' =', lo);

console.log('</Comparison>');
console.log('');

console.log('<Arrays>');

  var a1, a2, a3, a4, a5;

  a1 = [];
  console.log('a1 is typof', typeof(a1));

  a1 = ['js', 'is', 'amazing'];
  console.log('add values to the array', a1);

  console.log('number of values in an array', a1.length);

  console.log('the first value is', a1[0]);

  console.log('the last value is', a1[ a1.length - 1 ]);

  a1.pop(0);
  console.log('remove the last value -', a1);

  a1.shift();
  console.log('remove the first value -', a1);

  a1.unshift('javascript');
  console.log('add new value to the front -', a1);

  a1.push('super', 'awesome');
  console.log('add new value to the end -', a1);

  a2 = a1.lastIndexOf("super");
  console.log('Find the position of super -', a2);

  a1[ a2 ] = 'f#ck@%*'
  console.log('Replace the the value of super -', a1);

  a1.sort();
  console.log('sort the array -', a1);

  a1.reverse();
  console.log('reverse the array -', a1);

  a3 = a1.slice(0,2);
  console.log('remove the first two values -', a3);

  a4 = a1.slice(2);
  console.log('remove the last two values -', a4);

  a1 = a3.concat(a4);
  console.log('glue the rwo arrays together -', a1);

  a1 = a1.join(' ');
  console.log('join the rwo arrays -', a1);

console.log('</Arrays>');
console.log('');

console.log('<ifElse>');

  var ie1 = true,
    ie2 = 'blue',
    ie3;

  // simple if, and if the value is fasle we can do something else
  if( ie1 ){
    // lets do someting
    console.log('ie1 is true');
  } else {
    // so its false lets do something else
    console.log('ie1 is false');
  }

  // if its false, if its false again do something anyway
  if (ie2 === 'green') {
    console.log('ie2 is green');
  } else if (ie2 === 'red') {
    console.log('ie2 is red');
  } else {
    console.log('ie2 is not green or red its', ie2);
  };

  // if shorthand
  ie3 = ( ie2 === 'blue' ) ? 'Yes ie2 is blue' : 'No ie2 not blue'
  console.log(ie3);

console.log('</ifElse>');
console.log('');

console.log('<VariableExists>');

  var cv1 ="",
      cv2 = 123,
      cv3 = undefined;
      cv4 = 'hellow world';

  if (cv1) {
    console.log('yes the cv1 variable exists');
  } else {
    console.log('there is no cv1 variable', cv1);
  };

  if (typeof cv1 !== 'undefined') {
    console.log('typeof cv1 is not "undefined"');
  } else {
    console.log('typeof cv1 is "undefined"');
  };

  if (typeof cv2 !== 'undefined') {
    console.log('typeof cv2 is not "undefined"');
  } else {
    console.log('typeof cv2 is "undefined"');
  };

  if (typeof cv3 !== 'undefined') {
    console.log('typeof cv3 is not "undefined"');
  } else {
    console.log('typeof cv3 is "undefined"');
  };

  if (typeof cv4 !== 'undefined') {
    console.log('typeof cv4 is not "undefined"');
  } else {
    console.log('typeof cv4 is "undefined"');
  };

console.log('</VariableExists>');
console.log('');

console.log('<switch>');

  var s1 = 'ferrari',
      s2 = 'lamborghini',
      s3;

  // case is like asking a quesion
  switch (s1) {
    case 'audi':
      s3 = 'audi is not my favourite car';
      break;

    case s2:
      s3 = 's2 (lamborghini) is not my favourite car';
      break;

    default:
      s3 = 'my favourite car is a ' + s1;
      break;
  }

  console.log(s3);

console.log('</switch>');
console.log('');

console.log('<loops>');

  var l1 = ['html', 'js', 'css', 'php'],
    count;

  console.log('while Loop:');
  count = 0;


  while ( count < l1.length ) {
    console.log('while loop count', count + ' ' + l1[count]);
    count++;
  }


  console.log('do-while Loop:');
  count = 0;
  do {
    console.log('do-while loop count', count + ' ' + l1[count]);
    count++;
  } while ( count < l1.length );


  console.log('for Loop:');
  count = 0;
  for (var count = 0; count < l1.length; count++) {
    console.log('for loop count', count + ' ' + l1[count]);
  };


  console.log('for-in Loop:');
  count = 0;
  for ( count in l1 ){
    console.log('for in loop count', count + ' ' + l1[count]);
  }

console.log('</loops>');
console.log('');

Some-JavaScript-Basics.markdown

Some JavaScript Basics

I was going through a book starting JS from scratch and thought "Demo or it didn't happen"

Forked from Funsella's Pen Some JavaScript Basics.

A Pen by ely kahn on CodePen.

License.

style.less

*{box-sizing: border-box}

@red: #e74c3c;
@blue: #2980b9;
@orange: #f39c12;
@green: #27ae60;
@white: #ecf0f1;
@black: #000;
@drkblue: #2c3e50;
@grid-padding: 15px;

body {
  font-family: 'Josefin Sans', sans-serif;
  background: @drkblue;
  font-size: 112.5 %;
  color: @white;
}

h1, h2, p {
  text-align: center;
}

p {
  padding: 2em;
  text-transform: uppercase;
  font-size: 1.111em;
}

h1 {
  font-size: 2em;
  margin: 0 0 .75em 0;
}
h2 {
  font-size: 1.5;
}

header {
  background: @orange;
  padding: 1em 0
}

pre {
  display: block;
  background: @blue;
  padding: 1em;
}
code {
  font-family: 'Inconsolata';
  display: block;
  width: 565px;
  margin: 0 auto;
  padding: .5em;
  background: lighten(@blue, 10%);
}