If and else statements determine if some code will be carried out or rather some other code.
if (
3+1==4
)
{
Do something
;
}
else
{
Do something else
;
}
The statements that determine if the code should be executed or not, are called conditions.
Conditions are either true or false.
To write conditions we need to use comparison operators:
Click to try them out.
comparison operators:== means equals....
(3==4) would be false
var x= 5;
var y=4; (x+y==9) is true!
assigning operator:= means becomes....
var text= "text variable has now a new value";
more comparison operators: < ...............is smaller then <=..............is smaller or the same > ..............is bigger then >=..............is bigger or the same !............... NOT :opposite of object.equals(x)...object is same as x
(9>4) =
(9-3>=6) =
false !=true; =
var theAnser =true;
! theAnswer == true
( 3 - 2) > 1
var nameSize= 'Hank'.length;
nameSize==4
Booleans
Variables that hold a true or false value are called booleans.
They can only have 2 values: true or false. (never maybe)
var isSame= false;
isSame= ('hello'.length==5)
isSame =
If and Else......... .... "TryoutPanel1"
<script>
if(4==5){
document.getElementById('answer').innerHTML='The condition is <u> true </u>,write a different condition';
}
else{
document.getElementById('answer').innerHTML='The condition is <u> false </u>, write more conditions with comparative operators';
}
</script>
<h1 id="answer" ></h1><br><br><br>
<li> if the condition is true,the code in the if-block is executed, otherwise the else-block</li>
<li> here are some more <b>comparative operators</b>:</li>
<li> > bigger then</li>
<li> < smaller then</li>
<li> <= smaller or equal</li>
<li> >= bigger or equal</li>
<li> == same value</li>
<li> === same value and type</li>
<li> name.equals('John') same value and type</li>
Java Script uses the Boolean data type to store the true and false values.
Booleans are used in many different ways e.g:
var
locked
=
true
;
myTextarea
.
readOnly
=
locked
;
Booleans......... .... "TryoutPanel2"
<script >
function setReadOnly(locked){
document.getElementById('myTextArea').readOnly=locked;
}
//....write a setChecked() function that can check or uncheck the radio-input
// use element.checked =
//make buttons to operate the function
</script>
<textarea id="myTextArea" rows="5" cols="20" >this text area can be set editable and readonly by the 2 buttons </textarea>
<button onclick="setReadOnly(true)">lock</button>
<button onclick="setReadOnly(false)">unlock</button>
<input id='radio' type='radio' />
<ul><li> Make a setChecked() function for the radion button(6)</li>
<li>Make buttons to operate the function(17)</li></ul>
A boolean is often set to the value of a condition that might change. Like in this example:
var
needToLock
=
(
input.value.length>10
)
;
input
.
readOnly
=
needToLock
;
Booleans set to Conditions......... .... "TryoutPanel3"
<script >
function checkNeedLock(){
var input=document.getElementById("myInput1");
var needToLock=(input.value.length>12);
input.readOnly=needToLock;
}
</script>
<input id="myInput1" value="add more" onkeydown="checkNeedLock()"/>
<ul><li>Change checkNeedLock() so it locks when you type an A. (5)</li>
</ul><u>Tip:</u> event.keyCode for A = 65
Use Else If..Else if..Else if.. when you need more then 2 possible sets of action, like in the Gues my Number Game
if (
input>number
)
{
feedback.innerHTML="Too High"
;
}
else if (
input<number
)
{
feedback.innerHTML="Too Low"
;
}
else
{
feedback.innerHTML="Correct !!!"
;
}
Else If Statements......... .... "TryoutPanel4"
<script>
var number=Math.ceil(Math.random()* 10); // creates a random number between 1-10
function takeNcheck(){
var feedback=document.getElementById("feedback"); // get the paragraph element
feedback.innerHTML="***";
var input=prompt("whats your guess?"); // fetches the users response
if(input>number){ // input is bigger than the number
feedback.innerHTML= "Too High"; // write in the paragraph:too high
}
//........write else -if statements for when the number is too Low, or Correct
}
</script>
<button onclick=" takeNcheck() " > click to quess my number</button>
<p id="feedback" > choose a number between 0 and 10</p>
<ul><li>Finish the <b>else-if</b> statements (13) </li></ul>
The above code uses the Math Object,to pick a random number.
The Math Object has several other useful functions for numbers:
Here are some of the Math object's useful methods:
abs(x) Returns the absolute value of x -6>>6 3>>3
ceil(x) Returns x, rounded upwards to the nearest whole number
floor(x) Returns x, rounded downwards to the nearest integer
max(x,y,z,...,n) Returns the number with the highest value
min(x,y,z,...,n) Returns the number with the lowest value
