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
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.
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 !
No comments:
Post a Comment