Tag: else

Loops and Conditions In Jade: Node.js

After going through the basics of Jade, lets learn about loops and conditional statements in Jade.

loops-and-conditions-in-jade-nodejs

Note: Since most text editors designed for web remove the indentation(and some retain only new line characters), thus compressing the file and optimizing it for the web use. But this doesn’t serve any good for writing Jade. Because indentation is at the heart of Jade syntax!

So in this tutorial, we are using a Chrome extension called Jade Editor to illustrate loops and conditional statements. You can simply test your code in this Google Chrome extension and then copy over the code to your actual file. This would even help reduce the complicated errors in lengthy files.

each loop in Jade
arrays

1
2
3
4
5

- names = ["Apple", "Microsoft", "Oracle"];
 
ul
each name in names
  li #{name}

output

  • Apple
  • Microsoft
  • Oracle

– sign is optional for each loop. Here it loops through the array names and prints out each element of the array.

each loop and loop index in Jade
arrays

1
2
3
4
5

- names = ["Apple", "Microsoft", "Oracle"];
 
ul
each name, i in names
  li #{i+1}: #{name}

output

  • 1: Apple
  • 2: Microsoft
  • 3: Oracle

This prints out name along with the index number. Since index in JavaScript array starts with 0, we add 1 to it, to make it more sensible for non-programmers.

for loop and loop index in Jade
arrays

1
2
3
4
5

- names = ["Apple", "Microsoft", "Oracle"];
 
ul
for name, i in names
  li #{i+1}: #{name}

output

  • 1: Apple
  • 2: Microsoft
  • 3: Oracle

Same holds good even for for loop.

each loop in Jade
objects: Key, Value pair

1
2
3
4
5

- obj = {cmp1: "Apple", cmp2: "IBM"};
 
ul
each val, key in obj
  li #{key}: #{val}

output

  • cmp1: Apple
  • cmp2: IBM

Since objects in JavaScript has {key: value} pair, we make use of it to extract and print from the object.

for loop in Jade
objects: Key, Value pair

1
2
3
4
5

- obj = {cmp1: "Apple", cmp2: "IBM"};
 
ul
for val, key in obj
  li #{key}: #{val}

output

  • cmp1: Apple
  • cmp2: IBM

Same holds good to for loop too.

Conditional Statements

if, else if, else In Jade
Conditional Statements

1
2
3
4
5
6
7
8

- var fc = 2;
 
if( fc === 0 )
 p You have no followers
else if( fc === 1 )
 p You have 1 follower
else
 p You have #{fc} followers

output
You have 2 followers

Here we use the condition to check for execution of block of code. Also note that – sign before if, else if and else keywords are optional.

Loops and Conditions In Jade: Node.js


[youtube https://www.youtube.com/watch?v=wL60uzhwwTA]

YouTube Link: https://www.youtube.com/watch?v=wL60uzhwwTA [Watch the Video In Full Screen.]



In coming video tutorials, we shall learn about Mixins.

Conditional Logic For Decision Making: jQuery

In this video tutorial we shall see how to make our applications smarter with artificial intelligence using conditional logic for decision making, using jQuery.

Here we take 2 numbers from the user and using jQuery, we find the result of division of those two numbers. If the user tries to divide by zero, then we alert the user with a message, that “Division by zero is not allowed”. Thus making our application smarter and get the feel of artificial intelligence!

HTML code
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head><title>Conditional Logic For Decision Making: jQuery</title></head>
<body>
 
<form>
No1: <input type="text" id="no1" /><br />
No2: <input type="text" id="no2" />
<button>Division</button>
</form>
 
<span></span>
 
<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="script/my_script.js" type="text/javascript"></script>
</body>
</html>

Here we have a form, with 2 input box and a button.
There is a span tag to display the appropriate messages.

jQuery code
my_script.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(document).ready( function() {
 
 $("button").click( function() {
     var no1 = $("#no1").val();
 var no2 = $("#no2").val();
 
 if( no2 == 0 )
   $("span").html("Division by zero not allowed!");
 else if( no2 == 1 )
   $("span").html("Division of "+no1+" and "+no2+" is "+(no1/no2));
 else
 
 $("form").submit( function() { return false; });
 });
});

Here we fetch and assign the values entered by the user to local variables.
using conditional operator, if else, we see if the second number entered by the user is zero.
If its zero, we show “Division by zero not allowed!” message, else we show the result of division.

We also need to make the form submit return false, so that the form doesn’t try to redirect to some other page once the user clicks on the submit button.

Video Tutorial: Conditional Logic For Decision Making: jQuery


[youtube https://www.youtube.com/watch?v=JMXbyAUMmEk]

YouTube Link: https://www.youtube.com/watch?v=JMXbyAUMmEk [Watch the Video In Full Screen.]



Comparison Operators
1. Equality: a == b;
2. Inequality: a != b;
3. Exactly Equal: a === b;
4. Greater than: a > b;
5. Greater than or equal to: a >= b;
6. Less than: a < b; 7. Less than or equal to: a < = b; Logical Operators: Negation: !a OR: a || b; AND: a && b;

TruthTable

Negation: True if a is false or doesn’t exist in the DOM.
OR: True if a is true or b is true, or if both are true, but not if both are false.
AND: True if a is true and b is true, but not if one or the other is false.

Ternary Operator
Ex: a > b ? if_true_code : else_this_code;

If a is greater than b, then if_true_code will be executed, else else_this_code will be executed.

Also see Ternary Operator in C for understanding the logic.
Biggest of Two Numbers Using Ternary Operator: C++.
Biggest of 3 Numbers Using Ternary Operator: C++.

Note: If there is only 1 statement inside the if and/or elseif and/or else, we need not put the code inside the brackets. If there are multiple statements then we MUST put the code inside the brackets. Also we can have any number of elseif’s in a if else block, but only 1 if and only 1 else part in it. We could have any number of if-elseif-else blocks in a program.

Also note that, we can have if without elseif and else. But we can not have elseif and else without if!