Kids

Can

JavaScript

<-----Back        Next --->

If and Else

Conditions

example1:

Click on the pair of eyes that belong to an owl


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.


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>


Booleans

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




Multiple Possibilities

example2:

choose a number between 0 and 10


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

pow(x,y) Returns the value of x to the power of y

random() Returns a random number between 0 and 1

round(x) Rounds x to the nearest integer

sqrt(x) Returns the square root of x

Examples: Math.random(); Math.sqrt(16); Math.floor(Math.random()*5);

'

<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email