Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Sunday, 8 April 2012

Preferred Programming Languages and IDEs (Integrated Development Environments): Part 1

Hi All,

Throughout my 5 years experience of software development, I have been using several programming languages. It includes C#, Java, Javascript, VBScript, "HTML5 (the latest version of HTML) and CSS3", SQL and RPG Programming.

Here are my preferred languages and the IDEs that I have used so far. 

On top of my list would be C#.NET and Java. There are similarities in syntaxes between these programmming languages. I would start off with Java first.


Java is one of most powerful programming languages in the world, now owned by Oracle. It is now an open source programming language. There are a lot of libraries that provides various functions and methods that can be used in software development. Java is now available in most platforms that we have seen and these include PC, mobile, Java Applets (online share trading for example), enterprise (business) and games.

BlueJ, Eclipse, Netbeans and JCreator are some of the IDEs that I like. I was using BlueJ when I first learnt Java at Monash University. It is an IDE designed to introduce object oriented programming using Java to programmers, especially those who are using Java for the first time. It was first developed in Monash University, Melbourne. It has a simple graphical user interface and we can see the relationship and depencies between objects. It comes with a built in compiler, virtual machine and debugger.

I have also used Eclipse. It is good as well. I tried it when I explored writing Java again to develop Android apps in the future. Plugins such as a graphical user interface (GUI) and other 3rd party plugins can be downloaded to improve the functions of the environment. It's debugger is quite good too showing the line of the codes that has an error. It also prompts if the code is written incorrectly or is not according to the standard. You can see all the classes both external and internal and projects that you have created as well. It also has the autocomplete feature whereby it will prompt the possible syntax or methods that can be used similar to Visual Studio.

Netbeans is another well known and probably the best and most powerful Java IDE available. It comes with GUI capabilities and auto complete features together with Java project management capabilities. It also comes with version control integration system. It is one of the most powerful Java IDE now. You have the option to download Netbeans bundled together with Java JDK too. It not only integrates with all versions of Java but PHP and GlassFish too. It will show if any codes is written incorrectly or if the methods are used incorrectly.

C#.NET

C#, pronounced as C Sharp is a subset of a programming language that is part of Microsoft .NET Framework. It is similar to Java in terms of syntax but different in methods. C# is using all .NET framework methods that are provided from simple string and numeric functions to database connectivity. Microsoft Visual Studio 2010 is the latest IDE for C#. It is also a very powerful IDE to develop mobile, web and Windows applications. It comes with Intellisense features (autocomplete) as well. ASP.NET, a web framework is built into the environment. It will show if any codes is written incorrectly or if the methods are used incorrectly. Drag and drop design functionalities are essential for designing any applications that Visual Studio supports. You just need to drag the relevant elements that are needed such as textbox, label, list, buttons and tables to the screen. All these elements are customisable and you can add in functions to the events that are supported by the elements. For example, a button can have a onclick event whereby it detects a mouse click. You can try C#.NET programming by downloading the free Express Editons of Microsoft Visual Studio.

Javascript and VBScript

There is no IDEs for Javascript and VBScript. I just used the built in tool that we used for software development in my past project. Alternatively, we can use Notepad or similar products such as Notepad++ or WScite that I recommend.

Both of these programming languages have differences in syntax. Javascript is a web scripting language commonly used together with HTML. VBScript is a Microsoft developed scripting language that are used for Windows programming and IE based webpages.

RPG Programming

RPG Programming, known as Report Program Generator is used mainly on IBM AS400 machines. It is considered to be a legacy programming language. However, knowledge of RPG is good as well especially in the finanical industry.

To code in RPG, we need to login to the AS400 system using the IBM AS400 iSeries Emulator. It has no graphical interface and by default comes with green colour. There are no advanced programming tools such as drag and drop and autocomplete features. Currently, we can use the IBM RDi (Rational Development Studio for i). It has been upgraded to a more modern version, that is the RPG IV.

There is a debugger that we can use and that is strdbg command. This will run the debugger and you can set and unset breakpoints by pressing F6 and view variable  values by pressing F11. F12 will proceed directly to the breakpoint and F10 will go through each line step by step.

The codes are displayed in one page. You can scroll down or up by using Page Down and Page Up respectively. It will look complicated if the codes are very long. This may not look good if you are not familiar with the RPG language. This is not an issue for long term and experienced RPG programmers. One good thing is that there is in-built help function by pressing F1 on the screen on what you are not sure. Pressing F4 will also prompt you the required values to be entered while programming.

Conclusion

In conclusion, these are my favourites:
  1. Visual Studio. NET and SQL Server Management Studio
  2. Netbeans
  3. Eclipse
  4. JCreator
  5. BlueJ
  6. iSeries 5250 Emulator

Next post will be on IDEs for web development.

Cheers,

Rogerkoo

Saturday, 27 August 2011

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.

Saturday, 20 August 2011

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

Monday, 13 June 2011

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.
===================================================
1Styles

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.

1w3Schools: HTML DOM Style Object, http://www.w3schools.com/jsref/dom_obj_style.asp
2w3Schools: Javascript and HTML DOM Reference, http://www.w3schools.com/jsref/default.asp

Cheers,

Rogerkoo

Tuesday, 15 February 2011

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

Sunday, 9 January 2011

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

Friday, 7 January 2011

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