Resources » .NET programming » ASP.NET/Web Applications

Javascript : A short Journey


Posted Date: 22-Apr-2011  Last Updated:   Category: ASP.NET/Web Applications    
Author: Member Level: Diamond    Points: 20


In this article i will explain what is javascript, why Javascript is used, How to use Javascript for validation, use of functions and properties and some life make easy functions that you can copy and paste it to your code. This resource is whole about Javascript



Javascript : A Snap



Introduction


Many Times i have observed, user put their problem on DNS forum related to Javascript. Really they don't know what is the exact
use of Javascript. Why we should use it ? Where to define it?
Take a long breath, here is In and ALL article for Javascript.

Javascript


Javascript is Most popular scripting language and used in almost all browsers. The primary use of Javascript is to Validate user input.
Beside that Javascript can be used for Designing CSS, Data manupulation and many more.

Including Javascript to Page
Javascript can be used with HTML, DHTML, XML, XHTML, ASP, JSP, ASPX, PHP etc.
Javascript defined in a separate block of HEAD
let's see the following example will clear all idea




My first JavaScript example
<script language="JavaScript">
function CallMe()
{
alert("Yes..first POP up from javascript");
return false;
}

</script>

<body> Welcome to javascript example! </body>
<input type="submit" id="sub1" onclick="return CallME();">
</html>


let's Travel with above code
- Javascript defined under HEAD tag
- we can write functions in javascript
- function is reserved keywords
- alert is used for POP message
- return false indicates page should not submit to server (means code operations will stop at that point)
- we can call javascript function using onclick event
- like VBScript we can not change caption of POPup box in javascript


using document object
document is Most common used object in javascript. using document object we can collect any control from page
this object mainly used to validate the web forms

Validating Page for empty textbox
[now i just giving example through functions, you can call them in your pages]



function ValidateME()
{
if (document.getElementById("txtUserName").value == "")
{
alert("Please enter user id");
document.getElementById("txtUserName").focus()
return false;
}
}



Change forecolor / Backcolor of page using document object




function ChangeME()
{
document.document.bgColor="red"
document.fgColor="#338844"
}




write on a page using doument object





function ChangeME()
{
document.write ("I can write on page")
}




Access form controls using all property




alert(document.all.txtUser.Value)





document object has a Numerous functions and properties
here are some of them
alinkColor - Specifies the color of activated links
domain - Gives domain name under which served you used for security purpose
title - specifies the title of document

POP UP's

Most famous part of Javascript, we can call them as user prompt of javascript

using alert
ALERT can be used to alert the user
a simple messagebox accepted by all browsers
here is small example




function giveAlert()
{
alert("WOW ! this is alert");
return false;
}




using confirm
CONFIRM can be used to confirm user decision
a simple messagebox with OK and CANCEL buttons
this function returns boolean value
here is small example



function askFor()
{
if (confirm("Are you sure"))
alert("Yes, i am sure")
else
alert("No, i am not sure")
}



using Prompt
This is used to accept input from user



function EnterChoice()
{
var reply = prompt("what is your name","Enter your name")
alert("HI" + reply);

}



here var is the datatype in javascript like integer, string
and "reply" is the variable

Event Handling

onClick
This is mostly supported by all controls of webform
onClick handlers execute something only when users click on buttons, links, checkbox, radiobutton etc.




<script>
function callME()
{
alert("yes..onclick called!")
}
</script>
<form>
<input type="button" value="Click Me" onclick="callME()">
</form>





onchange
This event fired by combo box while changing items in combo list
here is the exaple of how to get an selected item from dropdownlist




<script>
function getItem()
{
alert("you select " + document.getElementById("idDDL").value)
}
</script>
<form>
<asp:Dropdownlist id="idDDL" runat="server" onchange="getItem()">
<listItem>a
<listItem>b
</asp:Dropdownlist>
</form>




onMouseover,onMouseout
These are exclusive events used when mouse pointer OVER and OUT from control





<a href="#" onMouseOver="alert('Hi,I am mouse over!">Over Here!</a>

<a href="#" onMouseOut="alert('Hin I am mouse out !')">Get Out Here!;/a>




onUnLoad
onunload executes JavaScript while someone leaves the page
e.g Giving thanks message when user leaving page



<body onunload="alert('Thank you for visiting')">



onblur
This event calls when any user leaves Textbox, it is same like a LostFocus event in win forms
e.g. we can validate if user has left textbox empty





function ValidateInt()
{
if (document.getElementById("txtNum").value == "")
{
alert("You can not left number field empty")
document.getElementById("txtNum").focus()
return false
}

}



Working with dates
very less people has work with date in javascript
here are some good example
Display todays date

<HTML>
<HEAD>
<TITLE>Date using Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var dt= new Date();
alert ("Todays date is " + dt);
</SCRIPT>
</BODY>
</HTML>



Here are some function that deals with date object

getTime() - Get Number of milliseconds
getSeconds() - Get Number of seconds (0-59)
getMinutes() - Get Number of minutes (0-59)
getHours() - Get Number of hours (0-23)
getDay() - Get Day of the week(0-6). 0 = Sunday, ... , 6 = Saturday
getDate() - Get Day of the month (0-31)
getMonth() - Get Number of month (0-11)
getFullYear() - Get year range between(1970-9999)

LIFE MAKES EASY FUNCTIONS



Let's rock the following life make easy functions
you can call these functions on any event (like onclick, onblur, onchange etc.)

1. Check if the Textbox has numeric value




function checkInt()
{
if (! isNAN(document.getElementById("txtNum").value))
alert("Please enter only numbers");
}




*isNAN : The NaN property represents "Not-a-Number" value. This property indicates that a value is not a legal number
----------------------------------------------------------

2. evaluate expression



function evaluateME()
{
alert(eval(2+2));
}



*eval : evaluate the expression and get the output
----------------------------------------------------------

3. Display only specified length of string




function FormatMe()
{
var exNum = new Number(3.141516254);
alert(exNum toPrecision());
alert(exNum.toPrecision(4));
}
//Output
3.141516254
3.141



*toPrecision() :This method formats a number to a specified length.
----------------------------------------------------------

4. Alert box with line break
Many times we need to display message on different lines, here is esample for you




function disp_alert()
{
alert("This is line 1 " + '\n' + "Yes, line break!");
}



*\n :Used to break lines.
----------------------------------------------------------

5. Get how many char's enter in textbox




function disp_char()
{
alert("You have entered " + document.getElementById("txtUser").length() + " chars);
}



*length() :Used to get the length of textbox.
----------------------------------------------------------

6. Case Insensitive String Compare



function ValidateCases()
{
var user1 = document.getElementById("txtUser").value

if(user1.toLowerCase() == "Welcome".toLowerCase())
alert("Welcome matched");
else
alert("Access Denied!");
}



*toLowerCase() :Convert string to lower case.
----------------------------------------------------------

7. Split string with javascript
following code used to split string values with specified split char



function SplitME()
{
var myString = "str1/str2";
var mySplitResult = myString.split("/");
alert("The first element is " + mySplitResult[0]);
alert("The second element is " + mySplitResult[1]);

}



*split() :This method is used to split the string with spcified char
----------------------------------------------------------


8. Validate EMail address

following code used to validate email address with Regular expression



function ValidateEmail()
{
var pattern = "/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/";
str = "test@gmail.com";
alert(str.match(pattern));
return str.match(pattern);

}



----------------------------------------------------------

Do you know ?


Here are some interesting facts about javascript you might unaware of it

- The father of JavaScript is Brendan Eich
- Javascript was known as Livescript in early days
- The Current version of Javascript used is 1.8.5 and was put in world in July 27, 2010


This is all about the Javascript : A Snap.
Hope it will help you to understand Javascript concept. Suggestion and feedback most welcome.

Thanks
koolprasad2003


Did you like this resource? Share it with your friends and show your love!

Responses to "Javascript : A short Journey"

No responses found. Be the first to respond...

Feedbacks      

Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index

    Subscribe to Subscribers
    Awards & Gifts
    Talk to Webmaster Tony John

    Online Members

    Priya jain
    More...
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India