Example 1
Create a program select.html which will illustrate the various selectors & actions
<html>
<head>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
//specify the client side scripting language and include the jquery library file
</script>
<script type = "text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(this).hide();
});
});
</script>
</head>
<body>
<button> Let me Hide </button>
</body>
</html>
Output:
A button will appear on the screen written 'Let me Hide'.
Example 2 : Hello World Program
<html>
<head>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
//jquery library
</script>
<script type = "text/javascript">
$(document).ready(function()
{
$("p").click(function()
{
alert ("Hello user!!! You clicked on the alert");
});
});
</script>
</head>
<body> <p> Click on this alert </p></body>
</html>
Output:
When you click on “Click on this alert” an alert box is displayed with a message.
Custom Scripts
- We can write custom codes in the custom JavaScript file.
- This custom file is simple user defined file which can be included in any .html, as required.
Example : Create a mycommon.js script and save it in the folder
$(document).ready(function()
{
$("p").click(function()
{
alert ("Hello user!!! You clicked on the alert");
});
});
After this, create a .html file named helloworld.html and provide a reference of the custom script and the jQuery library.
<html>
<head>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
//jquery library
</script>
<script type = "text/javascript" src =”mycommon.js”>
//custom script
</script>
</head>
<body> <p> Click on this alert </p></body>
</html>
Output:
