Javascript : A short Journey
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
<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