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>>

Java Script

JavaScript

Content

* Introduction to Javascript
* Where to write script block
* Javascript Statements
* Javascript Comments
* Variables
* Data Types
* Arrays
* Alert box
* Confirm box
* Prompt box

Introduction to Javascript

* JavaScript is used in web pages to add functionality, validate forms, communicating with server and read write html elements.
* JavaScript is a client side scripting language.
* JavaScript is an interpreted language, rather than compiled language.
* As the browser goes through the JavaScript, it passes it to a special program called interpreter, which converts the JavaScript to the machine code your computer understands
* Browsers come equipped with JavaScript interpreters.
* Initially it was known as LiveScript
* It was first available with Netscape Navigator 2.
* Netscape decided to change its name to JavaScript as Java was the hot technology of the time.
* Following is the script tag for javascript

<script type="text/javascript">
...
...
</script>

Where to write Script Block

* Either between <head> and </head> or between <body> and </body>
* If we want to run the <script> before page loads then it is kept in the <head> section.
* If we want to run the <script> after the page loads so that it can interact with HTML elements then it is kept in the <body> section.
* JavaScript can also be placed in external files.
* External script cannot contain the <script></script> tags
* <script type="text/javascript" src="myscript.js"> </script>

JS Statements

* JavaScript is a sequence of statements to be executed by the browser.
* JavaScript is case sensitive language.
* Example

<script type="text/javascript">
document.write("JavaScript Example");
</script>
* document is an object
* write is a function or method used to print message on web page
* It is normal to add a semicolon at the end of each executable statement
* However, semicolon is optional according to the JavaScript standards

JS Comments

* Comments can be added to explain the JavaScript, or to make the code more readable.
* Single line comments start with //.
* Multi line comments start with /* and end with */.

Variables

* JavaScript variables are used to hold values or expressions.
* Variable names are case sensitive.
* Variable names must begin with a letter or the underscore character
* A variables value can change during the execution of a script
* Declaring JavaScript variable with var keyword
* var x;

The above declaration creates a variable name x and contains nothing.
However we can initialize variable during declaration.

* var x=2;
If you redeclare a JavaScript variable, it will not lose its value.
* When you assign a text value to a variable, use quotes around the value.
* var y="saurabh";
If you assign values to variables that have not yet been declared, the variables will automatically be declared as global variables
* N="Saurabh";

Important note

* Every non zero value is true, 0 is false
* You can compare two strings unlike C language

Example

<script type="text/javascript">
var s1="amit";
var s2="amar";
if(s1==s2)
    document.write("Strings are same");
else
    document.write("Strings are not same");
</script>

Data Type

* Javascript has dynamic types, this means that the same variable can be used as different types
* You can assign boolean values
* var x=true;
* var x=false;

Displaying Variable value
To display a variables value we just have to pass it’s name to the document.write( ) method.
var a=10;
document.write(a);
To print a variable’s value with some text we use operator " + "
var a=10;
document.write(‘Value of a is ‘+a);

Arrays

* var students= new Array();

students[0]="Amit";
students[1]="Mita";
students[2]="bunty";

* var students= new Array("Amit","Mita","bunty");
* var students= ["Amit","Mita","bunty"];
* You can always use length property of array
* For example in the above case students.length is 3.

Alert Box

* An alert box is often used if you want to make sure information comes through  the user
* When an alert box pops up, the user will have to click "OK" to proceed.
* alert("some text");

Example

<script type="text/javascript">
alert("Welcome to home page");
</script>

Confirm Box

* A confirm box is often used if you want the user to verify or accept something.
* When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed
* If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false
* variable=confirm("some text");
* Variable would get either true or false as a value.

Example
<script type="text/javascript">
var  x = confirm("Are you interested in learning?");
if(x)
    document.write("Good, you are a geek");
else
    document.write("Ok, clap for others!!!");
</script>

Prompt Box

* A prompt box is often used if you want the user to input a value before entering a page.
* When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value
* If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null
* var x=prompt("some text", "default value");

Example

<html>
 <head>
  <title> JAVASCRIPT </title>
  <script type="text/javascript" >
   var x=parseInt(prompt("Enter a number","0"));
   var i=1;
   while(i<=10)
   {
     a=i*x;
     document.write(x+" x "+i+" = "+a+"<br/>");
     ++i;
   }
  </script>
 </head>
 <body>
 </body>
</html>

<<Prev     Home     Next>>