Skip to content

Instantly share code, notes, and snippets.

@elykahn

elykahn/Some-JavaScript-Basics.markdown

Created June 1, 2014 14:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save elykahn/2caaaedb994d5e03a296 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save elykahn/2caaaedb994d5e03a296 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by ely kahn.
Raw
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>
Raw
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('');
Raw
Some-JavaScript-Basics.markdown
Raw
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%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment