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
  1. setInterval
  2. clearInterval
  3. setTimeout
  4. 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..









JAVA SCRIPT: Java Script Box's?

Hi,

In this post i will explain java script boxes

Lets come...


Java Scrript box are clasified in three ways


  1. Input Box
  2. Warning Box
  3. Conform Box


Input Box 

  • Basically you get input from a user there are two ways in javascript
                        1. Use prompt method
                        2. Use html form element
  • Input box are used to get input from a user.  
  • Java script using 'promt' Its used get input from a user.


Syntax:

prompt("enter you text here",'');

You get input from a user using above syntax, and that value process another use you must assign varibale in following way

var a=prompt("enter A value",'');
var b=prompt("enter B value",'');

Example:


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

function get()
{
var a=prompt("Enter the A value:",'');
var b=prompt("Enter the B value:",'');
var c=parseInt(a)+parseInt(b);
document.getElementById("ans").innerHTML="The Result is"+c;
}

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

<body>

<h1 id="ans"></h1>
<input type="submit" name="submit" value="get input" onclick="get()" />

</body>
</html>

 
Output:


Note:
The above example placed parseInt. parseInt is ised to convert string to integer. The prompt return input is a string if you use this value in calculation the way be concat the two values ex: 25,50 the answer reurn to 2550. But you must convert integer value. parseInt method convert the string to integer.

Warning Box:


  • Javascript warning box used to warn the user.
  • And also used to like message box.
  • Javascript it achives alert method.


Syntax:

alert("Welcome");

Example:

The body loaded time msg box will apper you call the function in onload event. the function just write the above method.


<html>
<head>
<script type="text/javascript">
function show()
{
alert("Wlcome to my blog");
}
</script>
<title>Untitled Document</title>
</head>

<body onload="show()">
</body>
</html>

Output is:
Confirm Box:

  • Confirm box are used to confirm the user input. If may be change any value we can use confirm box.
  • Confirm box return Boolean(true/false)
  • Confirm box apper in ok cancel button, you may select ok it return true, select cancel it return false,

Syntax:

confirm("enter you text here");

Example:

<html>
<head>
<script type="text/javascript">
function get()
{
var c=confirm("do you want any change");
if(c==true)
{
document.getElementById("ans").innerHTML="You select OK";
}
else
{
document.getElementById("ans").innerHTML="You select Cancel";
}
}
</script>
<title>Untitled Document</title>
</head>

<body>
<h1 id="ans"></h1>
<input type="submit" name="submit" value="get input" onclick="get()" />
</body>
</html>

Output is:



The above three boxes are used to often in javascript. You want any place use this boxex

I hope this useful to you

Thanks

Saturday, 2 March 2013

JAVA SCRIPT: Types of Java script and how to use?


Welcome friends...

In this post we will see types of java script and more....

Types of Java Script

Java Script can classified into two types

            1.Internal Java Script
            2.External Java Script

Internal Java Script

Using <script> element placed code directly into the page or document.

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

<script type="text/javascript">
</script>

</body>
</html>

External Java Script


  • The external java script is external file.
  • The external java script file extension is .js
  • The external java script can be inserted inside the <head></head>.
  • The external java script file can be inserted into multiple pages.
  • The external java script insert in following way


Syntax:


<head>
<script src="external javascript file path"></script>
</head>

Example:

1.external.js


// JavaScript Document
function show()
{
alert("welcome to my blog");

}

2.Index.html

<html>
<head>
<script src="external.js"></script>
<title>Java Script Examples</title>
</head>
<body onload="show()">
</body>
</html>

Important Rule of Java Script:


  • Java Script statements can be grouped together in blocks
  • Java Script is case-sensitive.
  • Sometime java script act not case sensitive in some cases.
  • Java script ingore's extra spaces
  • Java script break up a code we can use backslash(/).
  • Java script code each line ends with semo colon(;).
  • Java script variables and function names do not start with number.
  • Java script variables and function names do not used Java Script Reserved keyword like var,function


Java Script Comment line:


  • Basically comment line are used to developers in future refrence.
  • Java script comments will not executed browser. the browser ignored comment lines.
  • Types of Java script comment line
  • Singleline- Its used in single line and its Denoted by //
  • Multi line- Its used for set of code. Its Denoted /* codes*/


Ok friends...

NOTE:

Am list out Full java script syllabus.. if you learn full follow the below list out and workout the more examples.if you want any examples please comments here i will post after. the below topics are very basics so am post after section some important scripts and concepts only.

JAVA SCRIPT Syllabus:

JAVA SCRIPT Basics


  • JS Introduction
  • JS History
  • JS Variables
  • JS Data types
  • JS Operators
  • JS Conditional Statements
  • JS Control Statements
  • JS Function
  • JS Arrays
  • JS Exeception Handling


JAVA SCRIPT Advanced


  • JS Browser
  • JS Cookies
  • JS Validation
  • JS Timing
  • JS Objects



I will post some important concepts in above list please watch all lession..

Thank you






Friday, 1 March 2013

JAVA SCRIPT: What is Java Script function and Events?

JAVA SCRIPT: What is Java Script function and Events?

Hello friends...

Last post we see What is java script? I hope that lession useful to you!

In this post clearly we will see what is javascript function and events.

Ok  Lets come!

First one Question?- Whats is function?

Function:

              Already we know function. A Function is set of codes. often used code to be written in function and whenever need that function to called the fucntion will be excuted. Thats all !

Java Script Function


  • That same definition is for javascript. Additionally we know that function in here? Sometimes we want to execute a javascript when an event occurs, Such as onclick.
  • Then we can write into the script inside the function, and call the function when the event occurs.
  • If any function can be classified in two types

                                   1.User-defined Function
                                   2.Built-in Function

User-defined Function:

                   User defined Function is used created function. the fucntion can set of executed statements. when an event occurs these function we can called in our webpages. User defined fucntion create in following syntax

Syntax:

function functionname( )
{
 ..............executed codes
}

Example:

<script type="text/javascript">
function show( )
{
alert("Welcome to All");
}
</script>

Note:

 The javascript fucntion can be called in two ways that is

1. The fucntion can be directly in your script. like following way

<body>
<script type="text/javascript">
function show()
{
alert("welcome to our blog");
}
show();
</script>
</body>

2. Another way is any event occurs the function to be called in following way

<head>
<script type="text/javascript">
function show()
{
alert("welcome to our blog");
}
show();
</script>
</head>

<body onload="show()">

</body>



Built-in Function:

  In javascript many more built-in fucntion and methods available. This section see in later


Java Script Events:

    Already we know HTML Elements and Attributes. These section am explained Event Attributes. There are more Events Attributes available in Java Script. Majorly used event attributes am given following table format.


S.No Events Description
1 onload() Script runs when the page or document load.
2 onunload() Script runs when the page or document are closed.
3 onclick() Script runs when the HTML element to be clicked.
4 ondbclick() Script runs when the HTML element to be double clicked.
5 onfucus() Script runs when cursor having textbox,textare,password.
6 onblur() Script runs when cursor leaves from textbox,textare,password.
7 onchange() Script runs when cursor one field to change another. Its similer to onblur().
8 onsubmit() Script runs when the user submits a form.
9 onmouseover() Script runs when the mouse over the HTML Element.
10 onmouseout() Script runs when the mouse out of an HTML Element.

Examples:

Example 1.welcome message displayed in onload() event


<html>
<head>
<script type="text/javascript">
function show()
{
alert("welcome to our blog");
}
show();
</script>
<title>Javascript First Example</title>
</head>

<body onload="show()">
<h1>Java Script Onload Event</h1>
</body>
</html>

Output is:

Example 2.A button clicked a javascript function will be called


<html>
<head>
<script type="text/javascript">
function show()
{
alert("welcome to our blog");
}
show();
</script>
<title>Javascript Second Example</title>
</head>

<body>
<h1>Java Script Onlclick Event</h1>
<input type="submit" name="submit" value="Click Me" onclick="show()" />
</body>
</html>

Output:


Example 3: Image change mouse event 


<html>
<head>
<script type="text/javascript">
function show()
{
document.my.src="images/hs2.jpeg";
}
function show1()
{
document.my.src="images/new_up.jpeg";
}
</script>
<title>Mouse Event</title>
</head>

<body>
<h1>Java Script Mouse Event</h1>
<img src="images/hs1.jpeg" name="my" onmouseover="show()" onmouseout="show1()" />
</body>
</html>

Output:


Example 4: How to get HTML Elements value in Java Script?

We can use "id" attribute in following way

We can use document.getElementById("htmlelementid").innerHTML

This example 

<html>
<head>
<script type="text/javascript">
function show()
{
document.getElementById("para").innerHTML="Hello! How are you?";

}

</script>
<title>Manupulate HTML Elements</title>
</head>

<body>
<h1>Java Script Manupulation</h1>
<p id="para"> </p>
<input type="submit" name="submit" value="Show Javascript" onclick="show()" />
</body>
</html>

Out put is:


 I will give more example in each post  Please watch it. If you like comments here!

Thank you !



JAVA SCRIPT: What is Java Script?

Hi friends..

In this Lession we see what is javascript, and how to use javascript in webpages and what are all advantages of javascripts and more

Ok Lets come!


What is Java Script:
  • Java Script is client side scripting language.
  • Java Script is the world of web Document programming.
  • Java Script is the Scripting Language is a Lightweight programming that supports the writing of scripts.
  • Java Script was designed to add interact to HTML pages.
  • Java Script code that can be inserted into html page to be executed in web browsers.
Why is Java Script?
  • Java Script used for User interact with webpage.
  • Java Script is used in billion of Web Pages of Add functionality, Validate Forms, Communicate with the server and much more.
  • Java Script also used to Game creators, animators and Multimedia programmers.
Difference between Java and JavaScript?
  • JavaScript and java are two completely different language concept and design
  • JS is scripting language
  • JS developed by Netscape
  • Java is programming language
  • Java is developed by Sun 
JavaScript How is it works?

      A Java Script run in client side. the scripts will be executed in client browser. The following fig shown in Java Script working method.


How to use Java Script in your webpage?

A JS is surrounded by a <script></script> tag. JS used to manipulate HTML Elements.It can used ‘ID’ Attribute. Can JS can placed in side header section or body section. The best way you placed in <head></head>section.

Java Script Structure:

   <html>
           <head>
                    <script>
                              .......Java Script codes;
                   </script>
           </head>
           <body>
                      <script>
                            .......Java Script codes

                       </script>

          </body>
</html>

Note:

All modern browsers  and HTML 5 supported <script></script>tag.Otherwise you can use

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


Note:

First before you learn Java Script!  first you understand well in what is function? and What is events? and How to use function and events?.

Next lession i will post briefly

Thanks..







What is AI- Artificial Intelligence - தமிழில்

Artificial Intelligence : Artificial intelligence leverages computers and machines to mimic the problem-solving and decision-making capabili...