Category Archives: JavaScript

change image in shopping website using javascript in asp.net

In previous javascript tutorials we have learned how to call javascript code from code behind, alert box in asp.net, confirm box in asp.net.

In this asp.net javascript post we will learn how to change or how to display big image while mouse over on small images. Generally we have seen this kind of functionality in online shopping website. In online shopping website when user buy something that viewmore page user can see the product description with display images, we can see the product big image one by one while mouse over of the small image.

 change image while onmousover in asp.net

change image while onmousover in asp.net

For do this asp.net example we have use javascript onmouseover event to change the image respectively.

First Create web application in visual studio 2010 with one web form.

In this asp.net example we have taken three small image control and one for display big image control in asp.net web page. and write javascript function to change image while on mouse  over on small images. here we call this javascript function in onmouseover events of three small image control.

Note : create new folder “img” and paste three images in this folder.

Here is the html design code :

After design web for write below javascript code in head tag of html page.

 

Call JavaScript Confirm Box from Code-behind in Asp.net

In this asp.net post, i will exaplain how to call javascript cofirm message box from asp.net code-behind page or server-side code.

We use JavaScript confirm box, when we want to notify or varify before doing any action like want to ask before removing records, befor ask payment confirmation.
The javaScript confirm box give user to one chance to varify or confirm action before making any action on web page.

Generally, we use javascript function on button click event using OnClientClick property of button control.
Just write your javascript function name inn OnClientClick property of Button Control to call javascript.

In this asp.net tutorials we will lean to call javascript function in conde-behind page uing c# language and vb.net language.

Here, the code for javascript confirm box function:

Write above javascript confirm box code in Head tag section.

Now, call the myconfirmbox javascript function from code-behind, create a asp.net web application and design a web page with one server side button control.

Belwo, is the code of server side button control in asp.net, we need to call “btnconfirm_Click” event for call javascript confirm box function.

<asp:Button ID=”btnconfirm” runat=”server” Text=”Call Confirm Box” OnClick=”btnconfirm_Click” />

C#.net Code for call javascript function from code-behind in asp.net:

protected void btnconfirm_Click(object sender, EventArgs e)
{

ScriptManager.RegisterStartupScript(this, this.GetType(), “myconfirmbox”, “myconfirmbox();”, true);

}

vb.net Code for call javascript function from code-behind in asp.net:

Protected Sub btnconfirm_Click(ByVal sender As Object, ByVal e As EventArgs)

ScriptManager.RegisterStartupScript(Me, Me.GetType(), “myconfirmbox”, “myconfirmbox();”, True)

End Sub

TextBox Remaining Character Counter using JavaScript in ASP.Net

In this asp.net post i will show you how to count the remaining character in textbox control using javaScript in asp.net.

First design asp.net web forms with one textbox control and a Label Control.

Here, we can see the remaining character while we write text in textbox control, we use javaScript for count the remaining character.

Here, we call the javascript function on onkeyup textbox events.

First set the textbox MaxLength=15 and call javascript function on onkeyup=”cnt()”.

below is the design of asp.net web forms:

 

Here is the JavaScript function for count remaining character:

The output of count remaining character in textbox using javascript :

TextBox Remaining Character Counter using JavaScript in ASP.Net

TextBox Remaining Character Counter using JavaScript in ASP.Net

– above screen shows the total length of textbox is 15. when we write text into textbox the count automatically decreases according to length of textbox text.

TextBox Remaining Character Counter using JavaScript in ASP.Net

TextBox Remaining Character Counter using JavaScript in ASP.Net

– in above forms we write “meera” the 5 character then the count shows the 10 character is remaining in textbox control.

TextBox Remaining Character Counter using JavaScript in ASP.Net

TextBox Remaining Character Counter using JavaScript in ASP.Net

How to use JavaScript Confirm() box in HTML

In this asp.net article i will explain how to use javascript confirm box in HTML.

Confirmation javascript used to confirm an important actions that are taking place on a website. For example, they may be used to confirm an order submission or logout from the website, change the login password we confirm that action before they done..

JavaScript confirm box pops up, the user will have two option  OK or Cancel.

Here we will learn with an HTML Example.

Write javascript confirm() box code in <head> tags like below :

<head runat=”server”>
<script type=”text/javascript” language=”javascript”>
function mm()
{
var my = confirm(“Do you want to Exit?”);
if( my == true )
{
alert(“Ok, Thank you Bye Bye.”);
return true;
}
else
{
alert(“Welcome back to system.”);
return false;
}
}
</script>
</head>

First Design HTML web form for learn javascript confirm() box.

Here is the asp.net Button control code :

<input id=”Submit1″ type=”submit” value=”Confirm Box()” onclick=”mm()” />

Here we use onclick property of button control for call javascript function.

JavaScript confirm box in HTML

JavaScript confirm box in HTML

Wen you click OK button on confirm box, Messagebox shows the “OK, Thank you Bye Bye”.

JavaScript confirm box in HTML

JavaScript confirm box in HTML

Wen you click Cancel button on confirm box, Messagebox shows the “Welcome back to System”.

JavaScript confirm box in HTML

JavaScript confirm box in HTML

I hope this HTML example of confirm box will help you……

How to use JavaScript Confirm() box in ASP.Net

In this asp.net article i will explain how to use javascript confirm box in asp.net.

Confirmation javascript used to confirm an important actions that are taking place on a website. For example, they may be used to confirm an order submission or logout from the website, change the login password we confirm that action before they done..

JavaScript confirm box pops up, the user will have two option  OK or Cancel.

Here we will learn with an ASP.Net Example.

Write javascript confirm() box code in <head> tags like below :

<head runat=”server”>
<script type=”text/javascript” language=”javascript”>
function mm()
{
var my = confirm(“Do you want to Exit?”);
if( my == true )
{
alert(“Ok, Thank you Bye Bye.”);
return true;
}
else
{
alert(“Welcome back to system.”);
return false;
}
}
</script>
</head>

First Design asp.net web form for learn javascript confirm() box.

JavaScript confirm box in asp.net

JavaScript confirm box in asp.net

Here is the asp.net Button control code :

<asp:Button ID=”Button4″ runat=”server” Font-Bold=”True”
Text=”Confirm Box()” onclientclick=”mm()” Height=”35px” />

Here we use onclientclick property of button control for call javascript function.

JavaScript confirm box in asp.net

JavaScript confirm box in asp.net

 

Wen you click OK button on confirm box, Messagebox shows the “OK, Thank you Bye Bye”.

JavaScript confirm box in asp.net

JavaScript confirm box in asp.net

Wen you click Cancel button on confirm box, Messagebox shows the “Welcome back to System”.

JavaScript confirm box in asp.net

JavaScript confirm box in asp.net

I hope this asp.net example of confirm box will help you……

Use JavaScript alert() box in HTML

In this article i will explain how to use javascript alert box in HTML.

we use alert box mostly for a giving a warning message to user.
we use alert box for validation purpose, if there is empty textbox while submitting form we display message in alert box enter some value.

Here we will learn alert() box with HTML Example.

Write javascript alert() box code in <head> tags like below :

<head runat=”server”>
<script type=”text/javascript” language=”javascript”>
function mm()
{
alert(“Hi Meera Academy”);
}
</script>
</head>

First Design HTML web form for learn javascript alert() box.

JavaScript alert() box in HTML

JavaScript alert() box in HTML

Here is the HTML form code :

<html>
<head>
<script type=”text/javascript” language=”javascript”>
function mm()
{
alert(“Hi Meera Academy”);
}
</script>
</head>
<body>
Use JAvaScript Alert Box in HTML
<form>
<input type=”button” value=”JavaScript Alert” onclick=”mm()” />
</form>
</body>
</html>

Here we use onclick property of button control for call javascript function.

JavaScript alert() box in HTML

JavaScript alert() box in HTML

 

Use JavaScript alert() box in ASP.Net

In this asp.net article i will explain how to use javascript alert box in asp.net.

we use alert box mostly for a giving a warning message to user.
we use alert box for validation purpose, if there is empty textbox while submitting form we display message in alert box enter some value.

Here we will learn with an ASP.Net Example.

Write javascript alert() box code in <head> tags like below :

<head runat=”server”>
<script type=”text/javascript” language=”javascript”>
function mm()
{
alert(“Hi Meera Academy”);
}
</script>
</head>

First Design asp.net web form for learn javascript alert() box.

JavaScript alert() box in asp.net

JavaScript alert() box in asp.net

Here is the asp.net Button control code :

 <asp:Button ID=”Button4″ runat=”server” Font-Bold=”True”
Text=”JavaScript Alert()” onclientclick=”mm()” Height=”35px” />

Here we use onclientclick property of button control for call javascript function.

JavaScript alert() box in asp.net

JavaScript alert() box in asp.net

I hope this asp.net example of use alert box will help you…

JavaScript Load Events

There are main four load events in JavaScript.

onload – Run JavaScript code when the page has been loaded
onunload – Run JavaScript code when the browser closes the document
onerror – When an error occurs when loading an image
onresize – Run JavaScript code when the browser window is resized

We will learn all the load events one bye one with an example.

First learn onload event in JavaScript.
onload events occurs when html page loaded…

Below code show the example of onload events of JavaScript.

<html>
<head>
<script>
function Hi()
{
alert(“Your page is loaded”);
}
</script>
</head>
<body onload=”Hi()”>
</body>
</html>

The out put of onload events of JavaScript is :

learn JavaScript onload events

learn JavaScript onload events

Now, we learn onunload events of JavaScript.

onunload – Run JavaScript code when the browser closes the document

<html>
<head>
<script>
function Hi()
{
alert(“Thank you for visit Meera Academy”);
}
</script>
</head>
<body onunload=”Hi()”>
</body>
</html>

 

learn JavaScript onunload events

learn JavaScript onunload events

 

Now ,we learn onresize event of JavaScript.

onresize – Run JavaScript code when the browser window is resized

Here is the code for onresize events of JavaScript.

<html>
<head>
<script>
function Hi()
{
alert(“You have changed windows size”);
}
</script>
</head>
<body onresize=”Hi()”>
</body>
</html>

learn JavaScript onresize events

learn JavaScript onresize events

I hope this load events of JavaScript example will help you…..

 

JavaScript Events Example

A JavaScript can be executed when an event occurs, like when a user clicks on button, move mouse over of control in HTML element
In this artical i will show you list of events that handles  JavaScript in HTML page.

All the HTML document has many kind of events such as page loads is an events, button click is an events, mouseover on textbox is an events.
when user press any key then javascript onclick  events occurs.

Here is the list of JavaScript events.

 Event                                      Description

onclick :- JavaScript runs when a mouse click event occurs
onchange :- JavaScript runs when the element changes event occurs
onsubmit :- JavaScript runs when the form is submittedevent occurs
onreset :- JavaScript runs when the form is resetevent occurs
onselect :- JavaScript runs when the element is selectedevent occurs
onblur :- JavaScript runs when the element loses focusevent occurs
onfocus :- JavaScript runs when the element gets focusevent occurs
onkeydown :- JavaScript runs when key is pressedevent occurs
onkeypress :- JavaScript runs when key is pressed and releasedevent occurs
onkeyup :- JavaScript runs when key is releasedevent occurs
ondblclick :- JavaScript runs when a mouse double-clickevent occurs
onmousedown :- JavaScript runs when mouse button is pressedevent occurs
onmousemove :- JavaScript runs when mouse pointer movesevent occurs
onmouseout :- JavaScript runs when mouse pointer moves out of an elementevent occurs
onmouseover :- JavaScript runs when mouse pointer moves over an element event occurs
onmouseup :- JavaScript runs when mouse button is released event occurs

most frequently used events are onclick and onmouseover events in JavaScript.
we will learn with an example of onclick and onmouseover and understand it.

first we will learn onclick events of JavaScript.
The onclick events is most frequently used by programmer. onclick events occurs when user clicks left button of mouse.

When we use HTML button control then use onclick event to execute JavaScript function.
If we use asp.net server control button then use onclientclick event to execute JavaScript function.

Here first we tack HTML input button to execute JavaScript function on onclick evnets occur.

Design HTML document as below:

JavaScript event example

JavaScript event example

write below code for HTML design and JavaScript function.

<html>
<head>
<script type=”text/javascript”>
function Hi()
{
alert(“Hello Meera Academy”)
}
</script>
</head>
<body>
<input type=”button” onclick=”Hi()” value=”Meera Academy” />
</body>
</html>

JavaScript event example

JavaScript event example

Now we will understand same example in ASP.Net server side button control.
Here we need to use onclientclik property to execute JavaScript like below:

Design asp.net web page with one server button control.

JavaScript event example

JavaScript event example

write below JavaScript in head section of asp.net web forms.

<head runat=”server”>
<title>JavaScript Events Example</title>
<script type=”text/javascript”>
function Hi()
{
alert(“Hello Meera Academy”)
}
</script>
</head>

Place below code in body section for button control:

<asp:Button ID=”Button4″  runat=”server” Font-Bold=”True”
Text=”Meera Academy” onclientclick=”Hi()” />

The result of asp.net onclientclick event is :

JavaScript onclientclick events in asp.net

JavaScript onclientclick events in asp.net

 

Now we will learn Example of onmouseover events in JavaScript.

onmouseover events execute when users move mouse over the control or area.

<html>
<head>
<script type=”text/javascript”>
function Hi()
{
alert(“Hello Meera Academy”)
}
</script>
</head>
<body>
<input type=”button”  onmouseover=”Hi()”  value=”Meera Academy” />
</body>
</html>

I hope this events of JavaScript tutorials will help you…..

How to comments code in JavaScript ?

In this article i will explain how to make comments code in JavaScript.
JavaScript supports both C and C++ style comment.

we can comment code with two syntax as below:

like // and /* …*/

single line comments //
multi line comments  /* ……… */

// this is comments code 1
// this is comments code 2

/*
this is comments code 1
this is comments code 2
*/

both type comments are valid and supports in JavaScript language.

Example of comments code in JavaScript:

<script language=”javascript” type=”text/javascript”>

// this is comments code

/*
this is comments code
*/

</script>

Write JavaScript language in HTML page.

we can write JavaScript language code anywhere in an HTML page, But most preferred place where we can write JavaScript code are follows:

write JavaScript within <head> tags
write JavaScript within <body> tags
write JavaScript within <body> and <head> tags
we can also write JavaScript code at external file and then include in <head> tags.

write JavaScript within <head>…</head> tags

If we want to run JavaScript function like alert, confirm box on some event like button click, then we can place JavaScript in the <head> tags as follows:

<html>
<head>
<script type=”text/javascript”>
function Hi()
{
alert(“Hello Meera Academy”);
}
</script>
</head>
<body>
<input type=”button” onclick=”Hi()” value=”Good Morning” />
</body>
</html>

The result of JavaScript code in <head> tags are:

javascript code insection

javascript code insection

javascript code insection

javascript code insection

write JavaScript within <body>…</body> tags
If we want to diaplay or write some text on HTML document while page loads, then write JavaScript code in the <body> tags of the HTML page.

<html>
<head>
</head>
<body>
<script type=”text/javascript”>

document.write(“Hello Meera Academy”)

</script>
</body>
</html>

The result is :

javascript code insection

javascript code insection

write JavaScript within <head>…</head> and <body>…</body> tags

<html>
<head>
<script type=”text/javascript”>

function Hi()
{
alert(“Hello Meera Academy”)
}

</script>
</head>
<body>
<script type=”text/javascript”>

document.write(“Hello Meera Academy”)

</script>
<br/>
<input type=”button” onclick=”Hi()” value=”Good Morning” />
</body>
</html>

Result are :

javascript code insection

javascript code insection

javascript code insection

javascript code insection

 

Write JavaScript in External File :

For write JavaScript in external file, we need to create JavaScript code file with an extension of .js.
The .js file is not a HTML document, write below code in JavaScript file

function Hi() {
alert(“Hello Meera Academy”);

Now call this file in our HTML document we need to write some syntax  in <head> section.

<html>
<head>
<script type=”text/javascript” src=”javascriptfile.js” ></script>
</head>
<body>

</body>
</html>

I hope this JavaScript tutorial will help you…..

How to use JavaScript language in HTML document ?

JavaScript contain javascript code statement which are placed within <script> </script> HTML tags in web forms.
we can write javascritp code within <script> tage anywhere in the web page but most preferred way to place it within <Head> tags in web page.

The JavaScript syntax like:

<script>
write your JavaScript code here….
</script>

The script tags has two main attributes :
language: This attributes describe the language which you are using.
Here language=javascript
type: The type attribute indicate the scripting language in use.
type=text/javascript

Now, the JavaScript statement look like below:

<script language=”javascript” type=”text/javascript”>
write your JavaScript code here….
</script>

Exmaple of JavaScript:

<html>
<body>
<script language=”javascript” type=”text/javascript”>
document.write(“Meera Academy”)
</script>
</body>
</html>

The JavaScript documnet.write function writes the string / text into HTML document.