Follow by Email

JavaScript Language Characteristics

Case Sensitivity:

Consider the following example

< img src="plus.gif" alt="Increment x" onclick="x=x+1">

< img src="plus.gif" alt="Increment x" onclick="X=X+1">


both not equivalentbecause first modifies the variable "x" where as second modifies the variable"X".Because java script is case-sensitiv.
The onclick HTML attribute is not case-sensitive and so may be written onClick, ONCLICK, or even oNcLiCk. However, because the value to which it is set contains JavaScript, its value is case-sensitive.


White Space:

Any sequence of excessive whitespace characters is ignored by JavaScript.

Consider the following:

s = typeof x;
s = typeofx;

The first statement invokes the typeof operator on a variable x and places the result in s. The second copies the value of a variable called typeofx into s. One space changes the entire meaning of the statement.


Statements :


consider this example:

x = y + 1 ;
This will add y with 1 & value is stored in x


semicolons indicates the end of the javascript statement,So we can write multiple satements in one line like this
x = x + 1; y = y + 1;z = z + 1;

Although statements are generally followed by semicolons, they can be omitted if your statements are separated by a line break
x = x + 1
y = y - 1

is treated as

x = x + 1;
y = y - 1;

But while writing return we have to be care full...if we write it like this ...
return

x

then it will be treated as
return;

x;

insted we should write it like this
return x;

Basics of Javascript

The following example shows how should we write the java script


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



< html xmlns="http://www.w3.org/1999/xhtml" lang="en">



< head>



< title>JavaScript Hello World< / title>



< meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />



< / head>



< body>



< h1 align="center">First JavaScript



< hr />



< script type="text/javascript">



document.write(" Hello Every one! ");



< / script>



< / body>



< / html>


Using the < script > element allows the browser to differentiate between what is JavaScript and what is (X)HTML markup or regular text.

If we want to show the text "Hello Every one! " then it should be shown something in this way..


< strong>



< script type="text/javascript">



document.write("Hello World from JavaScript!");



< / script>



< / strong>


but it can not be shown in this way....

< script type="text/javascript">


< strong>



document.write("Hello World from JavaScript!");



< / strong>



< / script>

How to make the height of the DIVs equal ?


In this tutorial i will show how can we make the heights of two divs equal by using jquery css.

I found this jquery when i was searching for the same question on net & it works perfectly.
We might have some divs which has different heights some thing like shown in image besides, but we want both divs to be of same height .

We can use jquery for doing this insted of changing the css .


function equalHeight(group) 
{

var
tallest = 0;
group.
each(function()
{

var
thisHeight = $(this).height();
if(thisHeight > tallest)
{

tallest
= thisHeight;
}

});

group.
height(tallest);
}


This is the jquery which works perfectly....

What does this jquery do ?

It sets the "tallest" equals zero & then loops through each div in the
group & sets the tallest height as highest height of the "tallest" variable.

Value of the "tallest" variale is applied to whole group.

So to equalize the height of each div we need to do this...
$(document).ready(function() 
{

equalHeight
($(".container));
}
);

where ".container" is the class of which is applied to each of the div.....

Lets see the bellow example to understand more ....

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title>Untitled Page
< style>
#col1{ height:auto;width:200px;float:left;background-color:Aqua;}
#col2{ height:auto;width:200px;float:left;background-color:Beige;}
< /style>
< script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">< / script>
< script type="text/javascript">
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".container"));
});
< / script>
< / head>
< body>
< div class="container" id="col1">
The mango is a fleshy stone fruit belonging to the genus Mangifera, consisting of numerous species of
tropical fruiting trees in the flowering plant family Anacardiaceae.
< / div>
< div class="container" id="col2">
The mango is a fleshy stone fruit belonging to the genus Mangifera,
consisting of numerous species of tropical fruiting trees in the flowering plant family Anacardiaceae.
While other Mangifera species (e.g. horse mango, M. foetida) are also grown on a more localized basis,
Mangifera indica – the common mango or Indian mango – is the only mango tree commonly cultivated in many
tropical and subtropical regions, and its fruit is distributed essentially world-wide.
< / div>
< / body>
< / html>



Without jquery output will be something like this....


While applying jquery we need to take care of some things...

1. all divs which should have height equal should be applied with float:left or right & some width.
2. < script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> should be there , else jquery wont work.
3. ".container" class should be applied to each div . & in jqury as shown.

So after applying this jquery output should look something like this...


I found this on http://www.cssnewbie.com/equal-height-columns-with-jquery/ website ....

We can do same thing with more than 2 divs also....

Session in the asp.net

In this article i will explain how session works.

What is session?

A session is specific to the user and for each user a new session is created to track all the request from that user. Every user has a separate session and separate session variable is associated with that session. In case of web applications the default time-out value for session variable is 20 minutes, which can be changed as per the requirement,


Advatantages:

1.It helps to maintain the user states & data all over the application.

2. Any type of object can be stored in session.

3.It is secure.

Disadvantages:

If there are many user at a time on website then performance of the website may get lower as session data will be stored in server memory.


Using Session:

Following code is used to store the variable in session:

Session["variable"] = txtbox1.Text

e.g: Session[“username”] = txtUsername.Text

Like this we can retrieve variable value from the session

Textbox1.text = session[“variable”];


Session ID:

A session ID is an unique identification string usually a long, random and alpha-numeric string, that is transmitted between the client and the server. Session IDs are usually stored in the cookies, URLs (in case url rewriting) and hidden fields of Web pages.

Whenever client makes the request for the data , server looks at the SessionID & retrieves the corresponding data.


Session State:

It is the configuration of the web site for maintaining the session of the user.


Session modes:

It can be configured in web.config file of the website

There are 5 Session modes:

1. Off --> If session mode is off then session will be disabled for whole application.

InProc -->It is the default session mode of the asp.net. If we restart the server then allsession data will be lost in InProc mode.

StateServer --> It is the windows service which runs outside the application. This session state is totally managed by aspnet_state.exe.

In this session data is stored in the sql server.

Custom --> It gives full control to us to create every thing evean a session ID

Session Events:

Session_Start & Session_End are only two events available in asp.net.

Both the events can be handled using globle.asax file.This file has this code for both events.

void Session_Start(object sender, EventArgs e) 
    {
        // Code that runs when a new session is started
    }
    void Session_End(object sender, EventArgs e) 
    {
        // Code that runs when a session ends. 
    }

How to import data from excel file to grid view ?

Here i will show that how can we import data from the excel file to gridview....
we will be using OLEDB instead of SQL because we will be using excel file as database & not sqlserver.
In HTML code just take the gridview & on button named Import.
I will look something like this....

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile
="WebImportExport.aspx.cs"
Inherits
="Forms_WebImportExport" %>
<
html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<
title>Untitled Page</title>
<
/head>
<
body>
<
form id="form1" runat="server">
<div>
<
asp:Button ID="Import" runat="server"
OnClick="Import_Click" Text="Import" />
<br />
<
asp:GridView ID="GridView1" runat="server">
<
/asp:GridView>
<
br />
<
/div>
<
/form>
<
/body>
<
/html>



In Code behind...

using System.Data.OleDb;
using
System.IO;

public
partial class Import_ExcelToGrid : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}

protected void Import_Click(object sender, EventArgs e)
{
OleDbconnection con = new OleDbconnection
(@"Provider=Microsoft.Jet.OLEDB.4.0;
Data
Source=C:\\path\\vaibhav.xls;

Extended Properties=\"Excel 8.0;\
");
OleDbDataAdapter oleDA = new OleDbDataAdapter
("SELECT name , dept, salary from [sheet1$]", con);
DataSet ds = new DataSet();
oleDA.Fill(ds);
GridView
1.DataSource = ds.Tables[0].DefaultView;
GridView1.DataBind();
}
Here i will pass my excel file in string which have to be imported to the gridview.

This will import he data from exel file to the gridview.

Using TabContainer of ajax in asp.net

The TabContainer control can contain one or more TabPanel controls that provide you with a set of tabs that show content one tab at a time.
We can specify the width & height of the panels & also we can specify wether we want scrollbars or not.
Each TabPanel has & which we can define.
An ASP.NET AJAX TabContainer creates a set of Tabs that can be used to save screen space and organize content. The TabContainer contains a number of TabPanel controls. You can place your controls inside each TabPanel. In this article, we will explore some common tips and tricks with the ASP.NET AJAX TabContainer control.


1. How to Create a ASP.NET AJAX TabContainer with Tab Panels

Assuming you have AJAX Control Toolkit for 3.5 installed, Open Visual Studio 2008 > File > New Website > ‘ASP.NET WebSite’ > Enter a name and location for the project > Click Ok.
Drag and drop a from the Toolbox to the page. Now drag and drop a TabContainer to the page and using the smart tag, add a few tabpanels. Switch to the source view and add inside each TabPanel. You can now place controls inside the . The code will look similar to the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Tab Container Tips & Trickstitle>
head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
asp:ScriptManager>
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server">asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Button" />
ContentTemplate>
cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
<ContentTemplate>
<asp:TextBox ID="TextBox2" runat="server">asp:TextBox><br />
<asp:Button ID="Button2" runat="server" Text="Button" />
ContentTemplate>
cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
<ContentTemplate>
<asp:TextBox ID="TextBox3" runat="server">asp:TextBox><br />
<asp:Button ID="Button3" runat="server" Text="Button" />
ContentTemplate>
cc1:TabPanel>
cc1:TabContainer>
<br />
div>
form>
body>
html>


2. How to add an image in the Header of each TabPanel in an ASP.NET AJAX TabContainer

Use <HeaderTemplate>.
You can then add an image as shown below:
<cc1:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>
<img src="search.jpg" alt="Tab1"/>
HeaderTemplate>
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server">asp:TextBox><br />
ContentTemplate>
cc1:TabPanel>