Assalamualaikum.
JQuery in the house! OK. Let's learn about JQuery.
JQuery is a framework for client-side JavaScript. It actually provides useful alternatives for some tasks and create functionality that may not be available to use within a certain language. What I mean is some language may not have its own syntax in functioning some task. For example, html language does not have it's own syntax in creating an alert. Thus, html language needs to import JavaScript language in order to get the alert function. So, this is an example of a web page that I created and it has a JQuery function.
<html>
<head>
<title>My Website using Ajax</title>
<script type="text/javascript">
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// get data from text file
function textFile1(){
xmlhttp.open("GET","jquery.txt",false);
xmlhttp.send();
document.getElementById("textArea").innerHTML = xmlhttp.responseText;
}
function textFile2(){
xmlhttp.open("GET","ajax.txt",false);
xmlhttp.send();
document.getElementById("textArea").innerHTML = xmlhttp.responseText;
}
function textFile3(){
xmlhttp.open("GET","javascript.txt",false);
xmlhttp.send();
document.getElementById("textArea").innerHTML = xmlhttp.responseText;
}
function textFile4(){
xmlhttp.open("GET","json.txt",false);
xmlhttp.send();
document.getElementById("textArea").innerHTML = xmlhttp.responseText;
}
</script>
<script src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello! This is a page that combine Jquery and Ajax. ");
});
</script>
</head>
<body background="img1.jpg">
<table width="80%" height="20%">
<tr>
<td><h4> Menu <h4></td>
<td><h2>Welcome! </h2></td>
</tr>
<tr>
<td width="20%"><form>
<input type="button" style="width:100px;height:30px" value="JQuery" onclick="textFile1()"/>
</form>
</td>
<td rowspan="20" id="textArea" width="80%">
ITT544 - web technology
</td>
</tr>
<tr>
<td>
<form>
<input type="button" style="width:100px;height:30px" value="Ajax" onclick="textFile2()"/>
</form>
</td>
</tr>
<tr>
<td>
<form>
<input type="button" style="width:100px;height:30px" value="Java Script" onclick="textFile3()"/>
</form>
</td>
</tr>
<tr>
<td>
<form>
<input type="button" style="width:100px;height:30px" value="JSON" onclick="textFile4()"/>
</form>
</td>
</tr>
</table>
</body>
</html>
|
As you can see, the red colour text is a JQuery syntax. And the result will be like this
 |
| JQuery example |
The JQuery script that I put is an alert function and it will come out immediately. So that's why the alert came out right after I run the web page.
That's all about JQuery. bye. Assalamualaikum.
0 comments:
Post a Comment