Using the JQUERY Programming Language to Create a Website

JQUERY Programming Language was released in 2006 by John Resig, the use of JQUERY for Website programs is growing rapidly, for example Google, BBC, Facebook, Amazon, Youtube, Detikcom and many more. So the use of the JQUERY Programming Language is very familiar to web developers.

Understanding of JQUERY Programming Language

The JQUERY Programming Language is a collection of functions contained in the javascript library that are ready to use, making it easier and faster for us to create javascript code. If we create a javascript function to create a stripe (alternating colors) on the rows of a table, it will require complex and lengthy code as follows:

function stripe(id) {

     var even = false;

     var evenColor = arguments[1] ? arguments[1] : “#fff”;

     var oddColor = arguments[2] ? arguments[2] : “#eee”;

     var table = document.getElementById(id);

     if(! table) { return; }

     var tbodies = table.getElementByTagName(“tbody”);

     for (var h = 0; h < tbodies.length; h++) {

         var trs = tbodies[h].getElementByTagName(“tr”);

         for (var i = 0; i < trs.length; i++) {

              if(! hasClass(trs[i]) && ! trs[i].style.backgroundColor) {

                   var tds = trs[i].getElementByTagName(“td”);

                   for(var j = 0; j<tds.length; j++) {

                        var mytd = tds[j];

                        if(! hasClass(mytd) && ! mytd.style.backgroundColor) {

                            mytd.style.backgroundColor = even ? evenColor : oddColor;

                        }

                   }

              }

         }

     }

}

JQUERY Programming Language as a javascript library can directly call functions as needed by the developer. Interestingly, we only need one/two rows to create a stripe of colors in a table, namely:

JQUERY Programming Language(‘table tr:nth-child(odd)’).addClass(‘odd’);

It can be concluded that the JQUERY Programming Language simplifies the use of scripts in javascript. As per jQuery’s slogan “Write less, do more”, just write a little but can do a lot.

Before learning the JQUERY Programming Language, we should already know:

1. Javascript, because jQuery is a library of javascript. So the language basically refers to javascript.
2. CSS, because almost entirely jQuery will control/manipulate the DOM (Document Object Model) of CSS.
3. PHP and MySQL, because in making a dynamic web really need PHP and MySQL languages.
4. Ajax, because jQuery is able to simplify Ajax commands which are quite complicated to understand.

Faculty of Engineering and Computer Science

More Click Here

JQUERY Programming Language is used to create Website programs

In using the JQUERY Programming Language, here are some reasons that prove the JQUERY Programming Language is worthy of being an option in creating interactive websites

1. JQUERY is mostly used by the world’s leading websites.
2. Compatible or compatible with all popular browsers, such as Mozilla, Chrome, Internet Explorer and Opera.
3. Compatible with all CSS versions.
4. Complete documentation, tutorials and examples. Please visit the official website http://jquery.com
5. Supported by a large and active community such as forums, mailing lists, blogs.
6. Availability of a very large number of plugins. Plugins are additional capabilities that can be included in jQuery.
7. The file is only one and the size is small, only about 20 KB, so access is fast.
8. Open source / free (free) with a license from the GNU General Public License and the MIT License.
9. jQuery is used more by web developers than other javascript libraries.

JQUERY Programming Language Capabilities

The JQUERY Programming Language will describe the capabilities possessed by jQuery including:

1. Facilitate access and manipulation of certain elements in the document.

It usually requires a fairly long line of program to access an element of the document. But jQuery can do it in just a few lines of program, because jQuery has a very efficient selector to access a certain element in the document which can then be manipulated according to our wishes.

• Make it easy to modify or change the appearance of web pages.

Usually, CSS is used to modify the appearance of web pages, the problem is that CSS is strongly influenced by the web browser used, so it often happens that web pages that are created are neat and look good on the Mozilla browser but when displayed in the Opera browser it becomes messy, but jQuery can adjust the CSS style on all browser, so that these problems can be avoided.

• Shorten Ajax (Asynchronous Javascript And XML).

The ability of Ajax is able to retrieve information from the server without having to refresh the web page, meaning that the visible web page can change automatically. If we use Ajax requires a long line of script, but jQuery can shorten it by using an Ajax call.

• Has an API (Application Programming Interface).
• Able to respond to interactions between users and web pages more quickly.
• Provides facilities to easily create flash class animations.

How the JQUERY Programming Language works

JQUERY Programming Language requires Three main steps

1. Call/load the JQUERY library.

<html>

<head>

<script type=”text/javascript” src=”jquery-1.8.0.min.js”>

</script>

• Create a JQUERY Programming Language script in the head section to control objects based on their elements.

<script type=”text/javascript”>

  $(document).ready(function(){

    $(“.sembunyi”).click(function(){

      $(“#foto”).hide(“slow”);

    });

    $(“.tampil”).click(function(){

      $(“#foto”).show(“normal”);

    });

  });

</script>

</head>

• Buat objek beserta elemennya berupa id atau class dibagian body.

<body>

<button class=”sembunyi”>Sembunyikan</button>

<button class=”tampil”>Tampilkan</button>

<p><img id=”foto” src=”Masjid.jpg”></p>

</body>

</html>

From the script above, it can be explained how the JQUERY Programming Language works as follows:

1. Three main steps will ensure that all the desired elements are displayed on the web page, the functions used are:

$(document).ready(function(){

// jQuery line of code will be executed

// when all elements are displayed

});

• After all elements are displayed, the next step is to select elements based on the class or id that has been defined. In this case, jQuery uses a selector function. Example script:

$(“#foto”)

$(“.sembunyi”)

$(“.tampil”)

• After the element is selected, the next stage provides an action/operation to the element that has been selected. For example, click and hide operations, where when the button is clicked it will hide photo elements. Example script:

$(“.sembunyi”).click(function(){

    $(“#foto”).hide(“slow”);

});