Easy Making webApps - Source code

Tuesday, 14 June 2016

Easy Learn AJAX- Beginners AJAX Tutorials Part 2- Events and JavaScript Functions

Hi Friends..

Beginners AJAX Tutorials Part 2 - Events and JavaScript Functions

In this we will see basic Events and JavaScript Function and Call JavaScript Function...

This above page onclick event we call myfunction() javascript function.
the javascript function we write inside the <head>..</head> tag.
Basic syntax

<head>
<script>
function myfunction()
{
alert("JavaScript");

}
</script>
</head>

This JS Code output is

Next Section how to create XMLHttpRequest Object and Why Create XMLHttpRequest Object and all other details in breifly

Thank You!

Easy Learn AJAX- Beginners AJAX Tutorials Part 1

Hi Friends..

After long time am posting this post.. Here after will post regular update..please stay tuned... Thanks reading my blog..

AJAX Learn before.. Need some basic knowledge of JavaScript.

Must know JavaScript Events and How to call JavaScript functions and How to write JavaScript functions..

Our past posts am explain detailed JavaScript methods..

So Please check once and come back below sections..

In this Section will explain AJAX Technologies.. Here we will see following topics

What is AJAX?

Why AJAX?

How to working AJAX?

Detailed AJAX Working Methods?

How to Use in Web Application?

Live Example with Source Code?

What is AJAX?

AJAX Stands for Asynchronous JavaScript and XML.
AJAX Using for "Partion Updation". That means update particular part in webpage without reloading the whole page.
AJAX is about updating particular parts in a web page, without reloading the whole webpage.
AJAX is group of interrelated technologies like JavaScript, DOM, XML, HTML, CSS. AJAX a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.
AJAX allows you to send and receive data asynchronously without reloading the whole webpage. So it very faster than other redirection methods. If AJAX do not must reload the entire page if the content should change.

Why AJAX?

To avoid reload the whole webpage. which part updated that part only updated dynamic methods.

AJAX new technique for creating better, faster, and more interactive web applications.

Where/Which Places are all Using AJAX Real time

Google Plus
Gmail Tabs
Facebook
Google Maps.

How AJAX Working

Below Diagram can easily Identified AJAX Working principles.

In above diagram we know,

in a webpage any event occures like that onlcick event or onload event, we can call java script functions. the javascript function we write inside <head>...</head> tag use <script>..</script>

There are four Steps can use AJAX simply in any web based application

Event Occurs then call JavaScript function.
Next in that function we can Create XMLHttpRequest Object
Next Send XMLHttpRequest
Next in Server Side Received That Request and Processed,
Next That final processing Data send back to the browser. This XML Response will update page content in that particular part.

The above four steps explained simple and easy way in next section..

Thank You !

Saturday, 22 August 2015

Basic Keywords of Web Application

Hi friends..

This is for basic keywords of web

What is webpage?
what is website?
what is static webpage?
what is dynamic webpage?
what is static website?
what is dynamic website?
what is web browser?

Wednesday, 6 March 2013

JAVA SCRIPT: Date objects and animated clock

Hi friends..

Am post simple javascript animated clock

Ok lets come!

Am explain Javascript Data object and some important methods in Date objects.

How to create Date Objects?

Date objects are java script bulit-in objects. am explain previous post Javascript object please refer...

var d=new Date( );

If you print 'd' value. It returns following output

Wed Mar 06 2013 18:46:21 GMT+0530 (India Standard Time)

It returns date,time all details. if you want date only you can split value using date object methods.am here explain some important methods only

Important methods in Date objects

getDay( );
getMonth( );
getFullYear( );
getHours( );
getMinutes( );
getSeconds( );
getMilliseconds( );

For Example. we want Hours only write following method,

var a=new Date();
var d=a.getDay();
var m=a.getMonth();
var y=a.getFullYear();

var h=a.getHours();
var s=a.getSeconds();
var mm=a.getMinutes();
var mmm=a.getMilliseconds();

Methods	Return value
getDay()	Its returns 0-30
getMonth()	Its returns 0-11
getFullYear()	Its returns current year
getHours()	Its returns 0-23
getMinutes()	Its returns 0-59
getSeconds()	Its returns 0-59
getMilliseconds()	Its returns 0-999

Step 1:

First we create output will display the part in HTML.

<body>
<div id="result"></div>
</body>

Step 2:

You may call body onload event attribute like

<body onload="AnimatedClock()">
<div id="result"></div>
</body>

Step 3:

Write the script in <head></head> tag in following way

<head>

<script type="text/javascript">

function AnimatedClock()

{

}

</script>

</head>

Step 4:

You create object in Date object and split hours and seconds and minutes in following way

<head>

<script type="text/javascript">

function AnimatedClock()

{

var a=new Date();

var h=a.getHours();

var s=a.getSeconds();

var m=a.getMinutes();

}

</script>

</head>

Step 5:

And concat the all values using + operator. and print the HTML document. like

<head>

<script type="text/javascript">

function AnimatedClock()

{

var a=new Date();

var h=a.getHours();

var s=a.getSeconds();

var m=a.getMinutes();

document.getElementById("result").innerHTML=h+":"+m+":"+s;

}

</script>

</head>

Step 6:

Done in 80 %.. if run your script the current hours and minutes and seconds displayed. but not animated....

Step 7:

If you want animate using time event. there are two main event setInterval and setTimeout...Am using setTimeout like below codes

<head>

<script type="text/javascript">

function AnimatedClock()

{

var a=new Date();

var h=a.getHours();

var s=a.getSeconds();

var m=a.getMinutes();

document.getElementById("result").innerHTML=h+":"+m+":"+s;

setTimeout("AnimatedClock()",1000);

}

</script>

</head>

Step 8:

Done!

Souce code:

<html>

<head>

<script type="text/javascript">

function AnimatedClock()

{

var a=new Date();

var h=a.getHours();

var s=a.getSeconds();

var m=a.getMinutes();

document.getElementById("result").innerHTML=h+":"+m+":"+s;

setTimeout("AnimatedClock()",1000);

}

</script>

<style>

#result

{

padding:10px;

background-color:#000000;

color:#FFFFFF;

width:125px;

height:40px;

font-size:24px;

font-family:Verdana, Arial, Helvetica, sans-serif;

}

</style>

<title>Untitled Document</title>

</head>

<body onload="AnimatedClock()">

<div id="result"></div>

</body>

</html>

Output is:

Note:

This only animated current time(h,s,m). If you want 00:00:00 this method... apply logic and AM or PM

In this exmple am not using logic.If you want logic codes i will post next sessions

I hope its useful to you!

See next lession

Thanks!

Tuesday, 5 March 2013

How to make page Redirection in HTML and JavaScript

Hi friends..

Today we will see Page Redirection in HTML and JavaScript.

What is Page Redirection?

The page will be redirected please wait! this message will see many websites. Did you see in any website? For example you login in gmail the page will be redirected in your gmail page.

Ok

Defn:
When you decide click one link or URL the page will reach destination link or URL. But internally the page redirected to another link or URL that is called "page redirection".

In JavaScript it achieve window.location ( ) readymade method.

Syntax:
window.location="redirect link or URL" ;

Example:

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function reDirect()
{
document.getElementById("res").innerHTML="Page will be redirected!"
setTimeout("redi()",5000);

}
function redi()
{
window.location="http://www.google.com";
}
</script>
</head>

<body>
<h1 id="res"></h1>
<img src="images (14).jpg" onmouseover="reDirect()" />
</body>
</html>

Output:

Refresh metatag:

In HTML

We can done in HTML we can use meta tag.

Lets come how to make in html? And am explain all briefly in HTML Meta tag uses

HTML Meta Tag:

HTML Meta tag to be placed in <head> tag. In following way. In HTML the code automatically generated in Dreamviewer. Like

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

<body>

</body>

</html>

What is Meta tag?

The Meta tag provides information about author and keywords and description of page details.
Many more meta tag used in <head> tag.

Why use Meta tag?

A few year ago the meta tag using keyword is used to SEO.
But now SEO not considered the meta tag keyword. Now only considered in keyword and content of the of page only.

Meta tag Attributes?

Name	Its content property value
http-equiv	It contents HTTP response header name
content	Its associated data
Scheme	Its optional of content data

Name: author

This attributes provide property value of content attribute.

Ex:

<meta name=author content="Mariz" />

Name: keyword and description

The Meta tag provides information about author and keywords and description of page details.

Ex:

<meta name="description" content="A description HTML tutorials"/>

http-equiv="Content-Type"

Set the client side scripting language

http-equiv="Content-Type" CONTENT="text/html; charset=””

sets the character encoding for the document

Ex:

http=equiv="Content-Type" content="text.html; charset=shift_JIS"

http=equiv="Content-Type" content="text.html; charset=iso-8859-1

http-equiv="Content-Style-Type" content ="text/css"

sets the style language in your document.

http-equiv="refresh"

this is used re direction purpose

http-equiv="expires"

To sets the expiry date of the document

HTML Page Re-Direction:

We can make page redirection in HTML, use meta tag

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

<head>

<meta http-equiv="refresh" CONTENT="10; URL=http://www.google.com"/>

<title>Untitled Document</title>

</head>

<body>

<p> page will be redirected in 10 seconds</p>

</body>

</html>

Output:

I hope its more useful..

Thanks

JAVA SCRIPT : How to print the current page using javascript?

Hi friends..

In this post am explain how to print webpage using javascript..

Ok lets come!

JAVA SCRIPT Page printing

If you want print webpage we can use window.print( ) method. This often used many more webpages. Some values retrieve database you make report java script page printing use to get report in printable document.

Syntax:

window.print( );

Example:

<html >

<head>

<script type="text/javascript">

function printDoc()

{

window.print();

}

</script>

<title>Untitled Document</title>

</head>

<body>

<div style="float:right">

<input type="submit" name="submit" value="PRINT" onclick="printDoc()" />

</div>

<table width="641" border="1" cellpadding="0" cellspacing="0" style="border:1x solid #3366CC" align="center">

<tr>

<td width="33" style="background-color:#00CC99; color:#CC0033">S.No</td>

<td width="118" style="background-color:#00CC99; color:#CC0033">Student Name</td>

<td width="121" style="background-color:#00CC99; color:#CC0033">Major</td>

<td width="157" style="background-color:#00CC99; color:#CC0033">Percentage</td>

<td width="178" style="background-color:#00CC99; color:#CC0033">Grade</td>

</tr>

<tr>

<td>1</td>

<td>Kathir</td>

<td>B.Sc IT </td>

<td>95%</td>

<td>A</td>

</tr>

<tr>

<td>2</td>

<td>Stalin</td>

<td>B.Com</td>

<td>90%</td>

<td>A</td>

</tr>

<tr>

<td>3</td>

<td>Francis</td>

<td>BBA</td>

<td>94%</td>

<td>A</td>

</tr>

<tr>

<td>4</td>

<td>Faruk</td>

<td>B.Sc Maths </td>

<td>94%</td>

<td>A</td>

</tr>

<tr>

<td>5</td>

<td>Karthick</td>

<td>B.Sc CS </td>

<td>92%</td>

<td>A</td>

</tr>

<tr>

<td>6</td>

<td>Siva</td>

<td>B.A </td>

<td>90%</td>

<td>A</td>

</tr>

<tr>

<td>7</td>

<td>Jegan</td>

<td>B.A</td>

<td>89%</td>

<td>B</td>

</tr>

<tr>

<td>8</td>

<td>Suresh</td>

<td>B.Sc IT </td>

<td>85%</td>

<td>B</td>

</tr>

<tr>

<td>9</td>

<td>Yuvraj</td>

<td>B.Sc Maths </td>

<td>84%</td>

<td>B</td>

</tr>

</table>

</body>

</html>

Output:

When print button clicked the print dialog opened like below fig

Done!

I hope its useful

Thanks

Easy make java script auto refresh

Hi friends..

In this post i will explain how can do a refresh a webpage using java script?

Ok lets come..

JAVA SCRIPT : Page Refresh

The webpage to be a reload thats called "Refresh". We make this concept in two ways

1. Refresh page
2. Auto refresh page

You may seen lot of pages they can use auto refresh. ex: yahoo.. cricket.

1.Refresh page:

You can make refresh webpage we can use 'location.reload' method. this method can be called automatically upon an event or simply when the user click the refresh link.

Syntax:

location.reload(true);

Example:

<html>
<head>
<script type="text/javascript">
function refreshPage()
{
location.relaod(true);
}
</script>
<title>Untitled Document</title>
</head>

<body>
<input type="submit" name="submit" value="refresh page" onclick="refreshPage()" />
<br />
<img src="images/images (3).jpg" width="500" height="200" />
<img src="images/images (4).jpg" width="500" height="200" />
</body>
</html>

or another way

<a href="javascript:location.reload(true")">Refresh</a>

Output is:

2.Auto refresh

Refresh page automatically after the time interval. This may be seen yahoo cricket the scores page automatically refreshed.

Auto refresh make so simple... we already know timing events. we can use time event

Example:

<html>
<head>
<script type="text/javascript">
function refreshPage()
{
alert("a");
setInterval("ref()",5000);
}
function ref()
{
alert("yes");
location.reload(true);
}
</script>

<title>Untitled Document</title>
</head>

<body onload="refreshPage()">

<br />
<img src="images/images (3).jpg" width="500" height="200" /><br />
<img src="images/images (4).jpg" width="500" height="200" /><br />
<img src="images/images (14).jpg" width="500" height="200"/><br />
<img src="images/tab-cars-img2.jpg"width="500" height="200" /><br />
</body>
</html>

Note: The above example am using alert. this only checking the script are fine or not..

Thanks

Sunday, 3 March 2013

JAVA SCRIPT: Objects and Types. How to use?

Hello friends.

In this post i will explain javascript objects and
How to create objects? and
How to access objects properties and property values? and
Types of javascript objects? and
What are all objects available in javascript? and
Uses of javascript objects?

The above concepts are explain easily and briefly

Lets come....

JAVA SCRIP OBJECTS:

We know very well Javascript is a Scripting Langauge.

But A Javascript is an Object Oriented Programming(OOP) Langauage. A programming lanaguage can be called Object Oriented. If it provides a capabilities to developers, the capabalities are

Class
Object
Abstraction
Encapsulation
Aggregation
Inheritance
Polymorphism

Am not explain OOPS here!

Bust am explain here Object only....

Objects:

Objects are composed of attributes. If attributes contains a function. A function consider to methods and property.
Object properties are usually denoted a variables that are use internally in objects methods. But it can globally visibled that are used throughout the document or page.
Objects method accessed to following syntax

Syntax:

object_name.object_property=property_value

Example:

book.title="Javascript";

book.author="Mariz";

How to create Object?

Create a object use new key word. its used to create an instanceof an object.
To create an object the new operator is followed by the contructor.
A constructor is a function that creates and initializes an object
Javascript provides special consctructor function is object.
the object property to the object not a variable and not to be defined keyword.

The above fig explain object creation

car is object.

name and owner is property

bmw and vijay is property value.

The object are globally visible anywhere in document easily accesed object propery value

The above fig objects are not be used var keyword.

How to Access Object?

The object are globally visible anywhere in document easily accesed object propery value

To object are accessed following syntax:

Syntax

object_name.object_property

Types of Javascript Objects:

Also Object can be classified in two ways

1.Built-in Objects

2.User Defined Objects

User defined Objects:

User defined Objects are manually create any object.using new operator. Like following way

var book=new Book( );

var car=new Car( );

var stu=new Student( );

Create a object use new key word. its used to create an instanceof an object.
To create an object the new operator is followed by the contructor.
A constructor is a function that creates and initializes an object
and User defined objects are using 'This' keyword. The keyword is used to refer to the object has been passed to a fucntion.

The following fig explain

Example:

<html>

<head>

<script type="text/javascript">

function book(t,a)

{

this.title=t;

this.author=a;

}

</script>

<title>Untitled Document</title>

</head>

<body>

<script type="text/javascript">

var b=new book("css","javascript");

document.write(b.title);

document.write(b.author);

</script>

</body>

</html>

Output is:

Built-in Objects:

These objects are already written in javascript. It can accessible anywhere in your document and will work the same way in any browser running in any OS. These object are called Native or Built in Objects.

Many more built in objects available in javascript.

It can use it.

Exmaple:

If you want date value we can use Date() object in following way.

var d=new Date();

var cur_date=d.getDate();

document.write(cur_date);

Date object are already written in javascript. and these object 'd' it can accessed Date object method getDtae().

Javascript Built-in objects

Number Object
String Object
Boolean Objects
Array Objects
Date Objects
Math Objects
RegExp Objects
Window Objects

If you learn A-Z javascript you must learn all javascrip objects and methods.

Am post some important objects and methods only in future post....

I hope this post useful to you

Thanks...

JAVA SCRIPT: Timing events

Hello friends

In this post am explain briefly in javascript Timing events and how to use in javascript?

Lets come !

Basic question for Timing Events

What is Time event?

If you set of or block of code executed at specified time interval that is called time event.

Javascript use therae four methods use in time events

setInterval
clearInterval
setTimeout
clearTimeout

1.setInterval( )

This method will wait and execute set of code at specified time interval.
This method will continue to execute at specified time interval

Syntax:

setInterval("js function",timeinterval);

Example:

setInterval("show()",2000);

<script>
setInterval(ff(),2000);

function ff()
{
alert("hello");
}
</script>

Note: The time interval denote no of milli seconds

2.clearInterval( )

This method stop the execution of setInterval() method

Syntax:

clearInterval(setInterval method variable);

Example:

clearInterval(stp);

3.setTimeout

This method will wait and execute set of code at specified time interval.
This method will not continue to execute at specified time interval

Syntax:

setTimeout("js function",timeinterval);

Example:

setTimeout("show()",2000);

<script>

setTimeout(aa(),2000);
function aa()
{
alert("hello all");
}

</script>

Note: The time interval denote no of milli seconds

4.clearTimeout

This method stop the execution of setTimeout() method variable

Syntax:

clearTimeout(clearTimeoutmethod variable);

Example:

clearTimeout(stp);

Example for all:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">

function show()
{
var t=setTimeout(fun(),5000);
}

function show1()
{
var t=setTimeout(fun1(),5000);
}

function fun()
{
alert("Welcome Guyz");
}
function fun1()
{
alert("Welcome Guyz!!!!");
}
</script>
</head>

<body onload="show()">
<form>
<input type="button" value="Display SetTimeout alertbox!"
onClick="show()">
<input type="button" value="Display setInterval alertbox!"
onClick="show1()">
</form>
</body>
</html>

Am post more example later sesction. i hope useful to you

Thanks

Easy make dynamic form controls using Javascript

Hi friends....

In this post i will explain how to create Dynamic form control using javascript.

Ok Lets come

You make dynamic form controls just follow following steps.

Dynamci Form:

There are 8 or 10 steps you follow, easily make dynamic form controls in your webpage. Am explain one control to dynamci add and remove

Step 1:

You create form in your page, like one textbox, and button and event attribute onclick call the function in following way

<div id="dynamic">
Contact No:<input id="contact1" type="text" />
<input id="Button1" type="button" value="Add More" onclick="makeDynamic()" />
</div>

Step 2:

And write script in <head> tag. You must assign row counting, because it use make dynamic like following way

<head>
<script type="text/javascript">
var row=1;
function makeDynamic()
{

}
</script>
</head>

Step 3:

You start inside function, when Add more button click the function will called, you start increase your counting variable row++, and refrence your dynamic area.. like following way

<script type="text/javascript">
var row=1;
function makeDynamic()
{
row++;
var dynamic=document.getElementById('dynamic');
}

Step 4:

You create the dynamic control appear new portion like newdynamic div. You craete dynamic use two methods
1.createElement
2.setAttribute

Like the following way

var newdynamic=document.createElement('div');
newdynamic.setAttribute('id','innerDiv'+row);

Step 5:

Next you create dynamic text like lable in following way

var newSpan=document.createElement('span');
newSpan.innerHTML="ContactNo: ";

Step 6:

You make dynamic control textbox use above two attributes createElement,setAttribute and more control type like text,button etc

var newTextBox=document.createElement('input');
newTextBox.type='text';
newTextBox.setAttribute('id','contact1'+row);

Step 7:

Dynamically add remove button like following way

var newButton=document.createElement('input');
newButton.type='button';
newButton.value='Remove';
newButton.id='btn'+row;

Step 8:

Add the event in dynamic remove button like following way

newButton.onclick=function RemoveEntry()
{
var dynamic=document.getElementById('dynamic');
dynamic.removeChild(this.parentNode);
}

Step 9:

Add all dynamic controls are append in main dynamic parts like following way

newdynamic.appendChild(newSpan);
newdynamic.appendChild(newTextBox);
newdynamic.appendChild(newButton);

Step 10:

Finally add dynamic controls are in append in above dynamic parts in html. like following way

dynamic.appendChild(newdynamic);

The above example code here

<html>
<head>
<script type="text/javascript">
//step2
var row=1;
function makeDynamic()
{
//step3
row++;
var dynamic=document.getElementById('dynamic');

// step4
var newdynamic=document.createElement('div');
newdynamic.setAttribute('id','innerDiv'+row);

//step5
var newSpan=document.createElement('span');
newSpan.innerHTML="ContactNo: ";

// step6
var newTextBox=document.createElement('input');
newTextBox.type='text';
newTextBox.setAttribute('id','contact1'+row);

// step7

var newButton=document.createElement('input');
newButton.type='button';
newButton.value='Remove';
newButton.id='btn'+row;

// step8
newButton.onclick=function RemoveEntry() { var dynamic=document.getElementById('dynamic');
dynamic.removeChild(this.parentNode);
}

//step9
newdynamic.appendChild(newSpan);
newdynamic.appendChild(newTextBox);
newdynamic.appendChild(newButton);

//step10
dynamic.appendChild(newdynamic);
}
</script>
<title>Dynamic Form Control</title>
</head>

<body>

<div id="dynamic">
Contact No:<input id="contact1" type="text" />
<input id="Button1" type="button" value="Add More" onclick="makeDynamic()" />
</div>
</body>
</html>

Output is:

I hope this useful

Thanks..