Skip to content

Instantly share code, notes, and snippets.

@ndonolli

ndonolli/index.html

Forked from anonymous/index.html
Last active June 26, 2016 20:39
Show Gist options
  • Save ndonolli/f52be79a96717fbd4cf7061cee624083 to your computer and use it in GitHub Desktop.
Save ndonolli/f52be79a96717fbd4cf7061cee624083 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source https://jsbin.com/nahizem
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">
/*
============
CONTROL FLOW
============
Our program will run top to bottom, and the javascript engine will execute commands in line order. Thanks to hoisting, variables that are declared at the bottom of our code will have a namespace before the code is truly run. This is nice because we don't have to worry about recieving a reference error when javascript cannot find our variable.
But there are other times where we need our program to branch off its linear path, and operate more like a flowchart instead of a set of simple directions. This is what logical keywords like if and else achieve: allowing us to control the flow of our program.
When programming a conditional block, we use 'if' followed by an expression. This is followed by a bracketed expression that will hold the next set of instructions determined by the boolean state of the original expression.
*/
if (7 > 6) {
console.log("This is true");
}
// > "This is True"
/*
Since seven is greater than six, the expression in the parenthesis is true, and the console.log in the brackets is executed. What if the expression is false though? We can use 'else' to control the flow otherwise.
*/
if (6 > 7) {
console.log("This is true");
} else {
console.log("That's a load of balogna");
}
/*
Now that our original expression is false, the program skips over our 'if' bracket and executes the 'false' bracket.
For multiple conditionals, we can use 'else if'. This equivilates to another if conditional to check if the previous one was false.
*/
var myDog = "Sparky";
if (myDog === "Fido") {
console.log("That's not my dog!");
} else if (myDog === "Snowball") {
console.log("That's not my dog either!");
} else if (myDog === "Sparky") {
console.log("Sparky! You've come home!");
} else {
console.log("Sparky is still lost");
}
// > "Sparky! You've come home!"
/*
Conditionals can get pretty cumbersome. In the case of many if statements, we can use javascript's 'switch' keyword for some neater syntax.
*/
switch (myDog) {
case "Fido": console.log("That's not my dog!");
break;
case "Snowball": console.log("That's not my dog either!");
break;
case "Sparky": console.log("Sparky! You've come home!");
break;
default: console.log("Sparky is still lost");
}
// > "Sparky! You've come home!"
</script>
<script id="jsbin-source-javascript" type="text/javascript">/*
============
CONTROL FLOW
============
Our program will run top to bottom, and the javascript engine will execute commands in line order. Thanks to hoisting, variables that are declared at the bottom of our code will have a namespace before the code is truly run. This is nice because we don't have to worry about recieving a reference error when javascript cannot find our variable.
But there are other times where we need our program to branch off its linear path, and operate more like a flowchart instead of a set of simple directions. This is what logical keywords like if and else achieve: allowing us to control the flow of our program.
When programming a conditional block, we use 'if' followed by an expression. This is followed by a bracketed expression that will hold the next set of instructions determined by the boolean state of the original expression.
*/
if (7 > 6) {
console.log("This is true");
}
// > "This is True"
/*
Since seven is greater than six, the expression in the parenthesis is true, and the console.log in the brackets is executed. What if the expression is false though? We can use 'else' to control the flow otherwise.
*/
if (6 > 7) {
console.log("This is true");
} else {
console.log("That's a load of balogna");
}
/*
Now that our original expression is false, the program skips over our 'if' bracket and executes the 'false' bracket.
For multiple conditionals, we can use 'else if'. This equivilates to another if conditional to check if the previous one was false.
*/
var myDog = "Sparky";
if (myDog === "Fido") {
console.log("That's not my dog!");
} else if (myDog === "Snowball") {
console.log("That's not my dog either!");
} else if (myDog === "Sparky") {
console.log("Sparky! You've come home!");
} else {
console.log("Sparky is still lost");
}
// > "Sparky! You've come home!"
/*
Conditionals can get pretty cumbersome. In the case of many if statements, we can use javascript's 'switch' keyword for some neater syntax.
*/
switch (myDog) {
case "Fido": console.log("That's not my dog!");
break;
case "Snowball": console.log("That's not my dog either!");
break;
case "Sparky": console.log("Sparky! You've come home!");
break;
default: console.log("Sparky is still lost");
}
// > "Sparky! You've come home!"</script></body>
</html>
Raw
jsbin.nahizem.js
/*
============
CONTROL FLOW
============
Our program will run top to bottom, and the javascript engine will execute commands in line
order. Thanks to hoisting, variables that are declared at the bottom of our code will have
a namespace before the code is truly run. This is nice because we don't have to worry about
recieving a reference error when javascript cannot find our variable.
But there are other times where we need our program to branch off its linear path, and
operate more like a flowchart instead of a set of simple directions. This is what logical
keywords like if and else achieve: allowing us to control the flow of our program.
When programming a conditional block, we use 'if' followed by an expression. This is followed
by a bracketed expression that will hold the next set of instructions determined by the
boolean state of the original expression.
*/
if (7 > 6) {
console.log("This is true");
}
// > "This is True"
/*
Since seven is greater than six, the expression in the parenthesis is true, and the
console.log in the brackets is executed. What if the expression is false though?
We can use 'else' to control the flow otherwise.
*/
if (6 > 7) {
console.log("This is true");
} else {
console.log("That's a load of balogna");
}
// > "That's a load of balogna"
/*
Now that our original expression is false, the program skips over our 'if' bracket and
executes the 'else' bracket.
For multiple conditionals, we can use 'else if'. This equivilates to another if
conditional to check if the previous one was false.
*/
var myDog = "Sparky";
if (myDog === "Fido") {
console.log("That's not my dog!");
} else if (myDog === "Snowball") {
console.log("That's not my dog either!");
} else if (myDog === "Sparky") {
console.log("Sparky! You've come home!");
} else {
console.log("Sparky is still lost");
}
// > "Sparky! You've come home!"
/*
Conditionals can get pretty cumbersome. In the case of many if statements, we can use
javascript's 'switch' keyword for some neater syntax.
*/
switch (myDog) {
case "Fido": console.log("That's not my dog!");
break;
case "Snowball": console.log("That's not my dog either!");
break;
case "Sparky": console.log("Sparky! You've come home!");
break;
default: console.log("Sparky is still lost");
}
// > "Sparky! You've come home!"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment