Control Statement and DOM

Control Statement and DOM

Content

* Decision Control
* Loop
* DOM

Decision Control

* If you are familiar with C language or any other programming language, you must be aware of decision control. any programming language must have decision capability. This can be implemented in Javascript with the following ways
* if
* if else
* Conditional Operator (? :)
* Switch Case control
* Syntax is exactly same as you have studied in C language. for the completeness of the content we will cover the syntax and example of all possible ways to implement decision control.

Syntax of if

if(condition) {
//code here
}

Example
<script type="text/javascript">
var x=prompt("Enter your age");
if(x<18)
    document.write("You are minor");
if(x>=18)
    document.write("You can cast your vote");
</script>

Syntax of if else

if(condition){
//code here
}
else
{
//code here
}

Example
<script type="text/javascript">
var x=prompt("Enter your age");
if(x<18)
    document.write("You are minor");
else
    document.write("You can cast your vote");
</script>

Syntax of Conditional operator
expression1 ? expression2 : expression3;

Example
<script type="text/javascript">
var x=prompt("Enter your age");
x<18 ?  document.write("You are minor") :document.write("You can cast your vote");
</script>

Syntax of switch case Control
switch(expression)
{
    case constant1:
            //code here
            break;

    case constant2:
            //code here
            break;

    case constant3:
            //code here
            break;
    ...
    default:
        //code here
}

* Use the switch statement to select one of many blocks of code to be executed
* The switch expression is evaluated once
* If there is a match, the associated block of code is executed.
* The value of the expression is compared with the values of each case.
* When the JavaScript code interpreter reaches a break keyword, it breaks out of the switch block
* The default keyword specifies the code to run if there is no case match

Example

<script type="text/javascript">   
var text;
  switch (new Date().getDay()) {
    case 6:
        text = "Today is Saturday";
        break;
    case 0:
        text = "Today is Sunday";
        break;
    default:
        text = "Looking forward to the Weekend";
  }
document.write(text);
</script>

Loop

* Loops are iterative control statements, used to repeat set of code till some criteria matches.
* In javascript we have four ways to implement loops:
* for
* for/in
* while
* do/while

Syntax of for loop

for(statement1;statement2;statement3)
{
//code here
}

Statement 1 is executed before the loop (the code block) starts. It is normally initialization of counter variable.
Statement 2 defines the condition for running the loop
Statement 3 is executed each time after the loop (the code block) has been executed. It is normally updating counter variable.

Example

<script type="text/javascript">
var text = "";
    for (var i = 0; i < 5; i++) {
        text += "The number is " + i + "<br>";
 document.write(text);
    }
</script>

Syntax of for/in loop

for(var x in array)
{
//code here
}

* x is any variable
* array is any array variable containing n elements
* loop execute code block n number of times.
* This loop is used to access array elements in a sequential manner.

Example
<script type="text/javascript">
   var list={0:10, 1:20, 2:30 ,3:40, 4:50};
    for (var x in list) {
        document.write(list[x]+"<br/>");
    }
</script>

Syntax of while loop
while(condition) {
//code here
}

Example
<script type="text/javascript">
   var i=1;
    while (i<=10) {
        document.write("5 x "+i+" = "+i*5+"<br/>");
    i++;
    }
</script>

Syntax of do/while loop

do {
//code here
} while(condition);

Example

<script type="text/javascript">
   var i=1;
    do{
        document.write("5 x "+i+" = "+i*5+"<br/>");
    i++;
    } while (i<=10);
</script>

DOM

* With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
* Dom is Document Object Model


DOM Methods

* There are several Dom methods that we can use to do variety of job, but we are going to cover the most common methods.
* getElementById()
* getElementsByTagName()
* getElementByClassName()
* As the name describes getElementById() finds an element by element id
* Similarly getElementsByTagName() finds an array of elements by element Tag Name.
* Also the getElementsByClassName() finds an array of elements by element class
* getElementById() returns an object that represent HTML element, you can use various properties of this object to manipulate and access HTML element.
* one of the property is innerHTML. You can access or change the HTML element content using this property.
* You can also alter or set CSS properties of HTML elements through style property.
* Following example gives you the glimpse of use of these properties and functions.

Example

<html>
 <head>
  <title>Document Methods</title>
 </head>
 <body>
  <h1 id="head1">Document Method Example</h1>
  <p id="p1">This is a paragraph</p>
  <script type="text/javascript">
   var x=document.getElementsByTagName("p");
   alert("As soon as you click ok, u will see change in paragraph");
   x[0].innerHTML="This is changed now";
   x[0].style.border="2px solid gray";
   var y=document.getElementById("head1");
   y.style.color="red";
   y.style.textDecoration="underline";
  </script>
 </body>
</html>

<<Prev     Home     Next>>