VBScript Part 1: Introduction and Functions and Variable Declarations

Hi All,

VBscript is a programming language specifically used in Internet Explorer browsers. Client side VBScript is only supported by Internet Explorer. It is language developed by Microsoft.

Functions

To create a function, the syntax is as below: 

function main()

    ' comments

    ' coding

end function

Functions is used to perform actions required by the user.

Example of actions are as below:

To display a value returned from the database

To execute SQL statements

To form HTML statements - display check box, text box on the screen

To perform calculations

To return data from the database

Variable Declarations

The declaration of variable using VBScript is as below:

dim a

dim a,b

Assigning Variables

After declaring variables, we can assign values to the variables.

The syntax for assigning variables is as below:

dim a

dim b

a = "First variable"

b = "Second variable"

Differences between VBScript and Javascript

Please note that there are several differences between VBScript and Javascript.

1. The syntax of creating function is different for VBScript and Javascript. 

VBScript

function main

end function

Javascript

function testFunction()

{

}

2. Secondly, in VBScript, we can't assign variables using this method.

VBScript

dim a = "First variable"

Instead, we use this. 

dim a
a = "First variable"

Javascript

var a = "First variable" .

3. Declaration of variables

VBScript

We use the keyword, dim to declare a variable in VBScript. 

Javascript

We are using the keyword var to declare a variable in Javascript.

Javascript: HTML Events

Hi Everyone,

HTML events can be detected using Javascript. For example, a mouse click or a user selection on a dropdown. We can assign functions to these events and we can attach and detach events as well. Let me further explain the types of events that we use.


onblur: It is triggered when a HTML element has lost focus. For example, you keyed in something in the textbox and then u click outside the textbox. Another example is pressing the tab button on the keyboard.


onchange: An onchange event is triggered when user selects an item from the dropdown. It can be used to handle how a website displays and hides certain fields.


onclick: It is triggered by a mouse click. It is used on radio buttons, buttons or a link on a website.


ondblclick: It is triggered when a mouse button is double clicked


onfocus: It is triggered when a HTML event is being focused.


onkeydown: It is triggered when a key is pressed on the keyboard. It can be used to assist users to enter numeric values only or to avoid users from entering special characters.


onkeyup: It is triggered when a key is lifted up. It is the event after you pressed a key on the keyboard.


onmousedown: It is triggered when a mouse button is pressed


onmouseup: It is triggered when a mouse button is released


That concludes the HTML events for the day.


References:


^{1. HTML DOM Event Object: http://www.w3schools.com/jsref/dom_obj_event.asp}

Cheers,

Rogerkoo

Javascript: document.getElementById

Hi Everyone,

Part 4 of the Javascript series.

I would like to touch more aspects of Javascript.

===================================================

General Values

To get a value from Javascript, we can use the coding as below. This is applicable for HTML textboxes and dropdowns.

document.getElementById("<elementId>").value;

where elementId is the name of the HTML element.

===================================================

If it is inside a for loop, we can use:

document.getElementById("<elementId>" + i).value;

where i is the counter value.

===================================================

¹Styles

We can also use document.getElementById("<elementId>") to change the look of the HTML element.

Examples:

document.getElementById("<elementId>").style.display = "inline";

document.getElementById("<elementId>").style.display = "none";

document.getElementById("<elementId>").style.display = "block";

document.getElementById("<elementId>").style.color = "red";

document.getElementById("<elementId>").disabled = true;

document.getElementById("<elementId>").disabled = false;

document.getElementById("<elementId>").style.backgroundColor = "red";
 
document.getElementById("<elementId>").style.border = "1px solid black";

===================================================

Get All Items

We can also use the document attribute to return all the items such as radio boxes or check boxes on the webpage. We can then use it to perform validations or any coding related to these items.

The code is shown as below:

var radioButton,checkBox;
radioButton = document.all.item("radioButton");
checkBox = document.all.item("checkBox");

The attribute used here is all.item. radioButton and checkBox returns all the radio boxes and check boxes of the webpage in array format. 

radioBox.length will return the total number of radio buttons on the webpage. If there are 5 radio buttons, it will return 5.

We can use a loop to perform any actions related to the items. For example:

for (var i = 0; i < checkBox.length; i++)
{
    if (checkBox[i].checked)
    {
        // coding to be performed when checkBox is checked
    }
}  

The example below checks a value. If the value is Y and if the check boxes are checked, it will run according to what is defined if this condition is met.  If the check boxes are not checked, it will then run according to the what is defined at the else condition.

var value;

if (value == "Y")  

{

    for (var i = 0; i < checkBox.length; i++)

    {

        if (checkBox[i].checked)

        {

             // coding to be performed when check boxes are checked

        }

        else

        {

            // coding to be performed when check boxes are not checked

        }

    }

}

Both radio buttons and check boxes will return either true or false. True is returned when a radio button is selected or when a check box is ticked. The opposite will be returned when the radio button is not selected or when a check box is not ticked.

===================================================

Usage of parentNode

This is a sample HTML code.

<html>

   <tr> 

         <td id='columnOne'></td>

         <td id='columnTwo'></td>

   </tr>

</html>

parentNode is used to get the element of the previous HTML attribute. If we would like to refer to columnOne from columnTwo, we can use 

document.getElementById("columnTwo").parentNode

We can then perform actions according to the Javascript specified.

For example, we can hide the whole row by using this code below:

document.getElementById("columnTwo").parentNode.parentNode.style.display "none";

or

document.getElementById("columnOne").parentNode.style.display "none";
===================================================

That is all for this part of the Javascript series. The usage of document.getElementById can be used for numerous purposes such as retrieving a value of a HTML element such as textbox and dropdowns, displaying and hiding fields, changing the look of a HTML element or to return all the elements of a webpage.

The next series of Javascript will cover HTML events (onblur, onchange, onclick) and more Javascript programming. Stay tuned.

¹w3Schools: HTML DOM Style Object, http://www.w3schools.com/jsref/dom_obj_style.asp

²w3Schools: Javascript and HTML DOM Reference, http://www.w3schools.com/jsref/default.asp

Cheers,

Rogerkoo

Javascript: Loops and Conditional Statements

Hi Everyone,

This is the 3rd installment of the Javascript series. Here, we will look at loops and conditional statements for Javascript.

Loops

The coding below shows how a Javascript for loop looks like:

var count = 10;
for (var i=0; i < count; i++)
{
    // statements
}

This will loop from i = 0 until i = 9. The counter, which is i, will increment after each loop (notice i++).  i++ can be changed to i-- if the counter starts from a high number and then incrementally decreasing.

Another loop will be the while loop as shown below. The statements in the while loop will be performed while the condition is true or being met.

while (condition)
{
   // statements
}

Conditional Statements

We can also perform conditional statements using Javascript. The most common one will be the if...else and the if...else if...else statements.


if (condition)
{

}
else
{

}


or 


if (condition)
{

}
else if (condition)
{


}
else
{


}

If there are more conditions, then the if...else statement should be used. The else statement will be perform the required coding if any of the conditions is not met. It is the default action to be performed. 

If there is only one condition to check, then if the condition is not met, it will immediately performs the action in the else statement.

Another conditional statement will be the switch statement. If there are a lot of conditions to check, the switch statement is the alternative way of the if...else statements. It will look simplified and improves the performance of Javascript programming. 

The syntax is as below:

switch (condition)
{
       case value1:
             statement
             break;


       case value2:
            statement
            break;
       case value3: value4:...
            statement
            break;
       default:
            // break
}


The first line will indicate which condition will be checked. Then, the case statements will indicate the possible values that we need to check. There can be multiple values for a case as indicated in case value3: value4:. It is neater if there are a lot of values to be checked.

That's all for today. 

Please feel free to comment or indicate if there are any mistakes I made. Learning does not end. It is a continuous process. I may have a lot of experience in Javascript (nearly 4 years now) but I may not know everything about Javascript because I may not use them.

Cheers,

Rogerkoo

Javascript: Functions and Variable Declarations

This is Part II of the Javascript Series.


Javascript Functions


We can write functions in Javascript. The coding for functions is this:


function testFunction()
{


}


I prefer to group the {} in one line. It is neater and it is not as confusing. You can see it at the same line. It is useful if there are a lot of functions written.


Functions is used to perform actions that user requires. 


Examples of actions are as below: 

1. Perform screen navigations from one page to another or opening a popup
2. Save information to the system
3. Able to execute server script such as VBScript
4. Hide and display certain fields 
5. Perform validation checking
6. Perform simple calculations
7. Control how a page is being displayed on the screen

Variable Declarations


Here are how we declare variables in Javascript. There are several ways to declare methods. We can declare variables in one line or multiple lines as shown below.


var a;
var b;


var a,b;


Assigning Variables
After declaring variables, we can assign values to the variables.


var a = "First variable";
var b = "Second variable";


var a = "First variable";var b = "Second variable";


We can also assign value using this method:


var a,b;
a = "First variable";
b = "Second variable";


This concludes the second part on Javascript. We will be looking at "For" loops and "If' statements. It is slightly similar to the style used in Java and C#. 


For your information, Javascript <> Java. 


Cheers,


Rogerkoo

Javascript: Introduction

Javascript is a scripting language used to enhance interactivity to HTML. It is able to detect various events such as onClick (when user clicks on a button or any HTML element), onChange (when user selects a value from a drop down or list box), onBlur (when user clicks outside the HTML element or lost focus), onKeyUp (when user presses a key and releases it) and onKeyDown (when a user presses the keyboard). 


It is also used to control the design of the HTML webpage. This is used together with the events mentioned above. A web designer can use it to control how HTML elements are being displayed on the webpage. It can automatically converts all text that are typed in to uppercases. If a user clicks on a drop down value, the web developer can display those elements that needs to be shown and hide the others.


It can also be used to get the values of a textbox or a drop down or field by using Javascript methods which will be discussed later.


It can be added into the HTML page directly or linked to an external Javascript file (.js). Below is an example of how Javascript is added to the HTML code:


<script type="text/javascript">
    // add javascript coding here.
</script>


Javascript can also be placed to an external file. This is separate the HTML code with the Javascript code. It also enhances the performance of the webpage. The Javascript file will be cached and thus reduces the loading time. It can be linked from HTML to the external Javascript using this code below. For example, my external script name is test.js.


<script type="text/javascript" src="test.js"></script>


Other references:

1. W3Schools:Javascript Tutorial
2. Internet.com: How to place Javascripts in External Files

Brief Introduction

Welcome to Programmer's Vault. This is the place where you learn and understand programming. It also serves as a programming reference site.


Here's a brief introduction of myself:


I have been working for nearly 4 years in an IT software provider specialising in banking systems. I also have a Bachelor of Computing degree from Monash University. 


Throughout my university and working experiences, I have studied and learned software engineering skills. I also studied the Software Development Life Cycle (SDLC) before.


Here are some of my skillsets:
Javascript
VBScript
SQL & SQL Server Reporting Services
Java
C#.NET / Visual Studio.NET
HTML / XHTML
CSS
XML
MYOB