Mengenal dan Menghubungkan jQuery dengan HTML

Mengenal dan Menghubungkan jQuery dengan HTMLMungkin selama ini kamu membangun website hanya dengan HTML dan CSS . HTML tentunya harus kamu kuasai karena merupakan komonen utama untuk membuat suatu website. Sedangkan CSS merupakan salah saru komponen untuk memperindah website yang kamu buat, tapi hanya sebatas mengganti tampilan luarnya dan sama sekali tidak menimbulkan efek animasi yang menakjubkan.

Bagaimana caranya membuat efek animasi maupun efek yang lain pada website kita? ada dua cara, yakni menggunakan flash atau javascript. Flash akan embuat website kita menjadi berat karena ukuran filenya yang cukup besar. Padahal dalam sebuah website kecepatan sangat diperhatikan. Karena itu, kebanyakan website professional saat ini meggunakan javascript, yakni teknologi yang memungkinkan kita utnuk memanipulasi website dengan berbagai efek dan animasi. Tidak hanya itu, javascript memungkinkan memanipulasi sintaks halaman web yang tidak bisa dilakukan oleh script-script yang lain. Untuk belajar javascript, kamu harus sedikit banyak mengetahui bahasa pemograman.

Mengenal jQuery

jquery_logojQuery adalah salah satu library javascript gratis yang berfungsi untuk menyederhanakan pemograman berbasis client side. Dengan jQuery, kita dapat melakukan banyak hal yang tidak bisa dilakukan oleh HTML maupun CSS. Misalnya, menampilkan artikel tanpa me-reload halaman, memunculkan pop-up ditengah-tengah halaman, menyembunyikan artikel jika diklik dan sebagainya. jQuery merupakan Document Object Model (DOM) library yang mengatur, mempersingkat dan menyederhanakan element-element pada DOM. DOM itu sendiri merupakan element-element pada sebuah halaman website.

Contoh nya adalah facebook yang banyak menggunakan jQuery maupun AJAX dalam penggunaanya. Untuk menguasai jQuery, ada baiknya kamu mengetahui dasar-dasar pemograman javascript, karena pada dasarnya keseluruhan kode jQuery dibuat menggunakan bahasa javascript.

Sesuai dengan taglinenya : “write less, do more”, jQuery berfungsi untuk mempersingkat penulisan sintaks – sintaks javascript yang semula panjang menjadi pendek dan mudah di mengerti.

Berikut contoh perbandingan penggunaan jquery dan javascript :

javascript:

Document.getElementById(‘dunia_komputer’).innerHTML=”Selamat Datang di Dunia-Komputer.com”;

 

jQuery :

$(‘#dunia_komputer’).html(“Selamat Datang di Dunia-Komputer.com”);

Menghubungkan jQuery dengan HTML

Sebelum melakukan perubahan HTML dan CSS dengan jQuery, tentunya kita harus mengkoneksikan jQuery dengan file HTML kita. Berikut cara-caranya :

  1. Menghubungkan jQuery secara online
    • Buka file HTML kamu, pastekan script dibawah kedalam / diantara tag <head> …</head>
    • <script src=”https://code.jquery.com/jquery-3.2.1.min.js” charset=”utf-8″></script>

    • Atau buka website jQuery disini
    • Lalu pilih atau klik link yang tersedia sesuai dengan versi yang kamu inginkan.
    • jQuery CDN download
  2. Menghubungkan jQuery secara offline
    • Download script jQuery.
    • Jika link download hanya langsung  menampilkan isi dari jQuery, maka klik kanan pada halaman jQuery tadi dan klik Save Page As.
    • save jquery file from firefox
    • Simpan file jQuery yang kamu download ke dalam folder HTML kamu. Disarankan membuat folder baru bernama “js” untuk merapikan struktur folder kamu.
    • Buka file HTML kamu, pastekan script dibawah kedalam / diantara tag <head> …</head>
    •     <script src=”js/jquery-3.2.1.js” charset=”utf-8″></script>

    • Contoh :
    •   <head>
      <meta charset=”utf-8″>
      <title>Perpustakaan SIF UIN SUSKA</title>
      <script src=”js/jquery-3.2.1.js” charset=”utf-8″></script>
      <link rel=”stylesheet” href=”css/bootstrap.css”>
      <link rel=”stylesheet” href=”css/style.css”>
      <script src=”js/bootstrap.js” charset=”utf-8″></script>
      <script src=”js/script.js” charset=”utf-8″></script>
      </head>

    • Selesai

Demikian artikel berjudul Mengenal dan Menghubungkan jQuery dengan HTML. Semoga Bermanfaat.

Terimakasih.

Tinggalkan Komentar

Your email address will not be published.