Hi Guys,
Its been a while already that I haven't posted something here. I've been busy for our thesis project.
But now, let me share to you some interesting thing about web development. We will talk about JQuery. You might hear this already or may not but let me just share a brief background of this.
JQuery is a Javascript Library that allows web developers to add extra functionality to their websites. It is open source and provided for free under the MIT license. In recent years, jQuery has become the most popular JavaScript library used in web development.
This greatly simplifies the Javascript Programming. If you're not familiar yet about javascript just click here. JQuery is much easy to learn.
So lets get started. First we need to have the latest jquery library. To do that, there are two ways.
1. Link the library on your html, but we need internet here to access the library
<script type="text/javascript" src=http://code.jquery.com/jquery-2.2.0.min.js""></script>
2. Download and store it to your project folder. Download here
To path the file see the image below.
 |
| Jquery file linked locally to the project |
See the codes below:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Tutorials</title>
</head>
<body>
<h1>Learning JQuery is easy</h1>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
</body>
</html>
Live example:
Click this button.
You can also have this.
<!DOCTYPE html>
<html>
<head>
<title>JQuery Tutorials</title>
</head>
<body>
<h1>Learning JQuery is easy</h1>
<div>
Click this button. <button id="demo" type="button">BUTTON</button>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#demo').click(function() {
alert('My button is clicked.');
});
});
</script>
</body>
</html>
So that's it, we already created our first Jquery web application. I hope you learn something new today. Thanks for checking this out. I'll try to make some more interesting examples on my next posts.
Thank you.
Courtesy to:
- Source Code Formatter : for the awesome auto-designed pre/code elements
- W3Schools - for some examples
- JQuery - for the informations
- TechTerms - for the definition of JQuery
