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]
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;
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!