1. JQuery
Pengertian JQuery
JQuery adalah sebuah library framework javascript. jadi singkat ceritanya JQuery merupakan pengembangan dari javascript yang sengaja di buat untuk memudahkan kita untuk mendevelop sebuah website dan ingin membuat efek-efek dan keperluan penggunaan javascript lainnya di dalam pengembangan sebuah website. sampai saat ini jQuery sudah sangat di kenal di dunia web programming. sehingga banyak plugin-plugin web lainnya yang di bangun menggunakan JQuery sebagai base nya. contohnya seperti plugin calender, grafik, export html to image, design komponen web dan sebagainya.
Hampir semua developer dunia sekarang sudah aktif menggunakan jquery sebagai pengganti javascript. artinya developer tidak perlu lagi mengetikkan syntax javascript yang terbilang cukup panjang-panjang untuk sebuah event. oleh karena itu banyak yang sudah aktif menggunakan jquery karena jquery juga merupakan pengembangan dari javascript. javascript sudah di bungkus menjadi fungsi-fungsi yang tinggal di gunakan saja pada jquery. untuk menggunakan jquery yang harus di lakukan adalah menghubungkan file jquery dengan file html atau php yang ingin kita hubungkan. caranya sama dengan cara menghubungkan file js seperti biasa.
Kelebihan JQuery
Berikut ini akan di jelaskan tentang kelebihan dari jquery yang saya rasakan sendiri. dan mungkin akan bertambah lagi bagi anda sendiri setelah mempelajari dan menggunakan framework jquery. adapun beberapa kelebihan dari jQuery adalah
- Lebih mudah di mengerti.
- Lebih mudah di gunakan.
- Ringan.
- Penulisan syntax yang lebih pendek tetapi sudah memiliki kebergunaan yang besar.
- Free.
- Bisa di kembangkan untuk membuat plugin-plugin web lain.
Cara Menggunakan JQuery
Ada beberapa cara untuk menggunakan JQuery, adapun cara yang bisa di gunakan adalah
- Menggunakan JQuery secara offline
menggunakan jquery secara offline maksudnya adalah dengan cara mendownload file jquery dan kemudian menghubungkan file html atau php dengan file jquery. - Menggunakan JQuery secara online
menggunakan jquery secara online maksudnya adalah menggunakan jquery dengan cara menghubungkan file HTML atau PHP dengan link online langsung dari jquery.
Cara Menghubungkan file HTML atau PHP dengan JQuery secara offline
Untuk anda yang jarang tersambung dengan koneksi internet cara ini sangat efektif karena anda hanya perlu mendownload file jquerynya dan menyimpan file jquery nya pada project kerja anda, kemudian hanya tinggal menghubungkannya. Cara untuk menggunakan jquery sangat lah mudah. sama seperti cara menghubungkan file JS dengan HTML atau PHP. tahap awal yang harus di lakukan adalah anda harus mendownload file library JQuery nya di website resmi JQuery. Klik di sini atau langsung di sini untuk download library framework jQuery. kemudian letakkan file jquery yang sudah di download kedalam folder project anda. untuk contoh tutorial belajar jquery pengertian dan cara menggunakan jquery ini saya meletakkannya dalam folder jquery di E:/DATA/malasngoding/tutorial/jquery/. karena untuk contoh ini saya hanya menggunakan file HTML. bagi anda yang ingin menggunakan JQuery di PHP bisa di sesuaikan dengan meletakkannya di localhost anda.
Pada contoh ini saya membuat file index.html
Cara Menghubungkan file HTML atau PHP dengan JQuery secara online
Seperti yang sudah di jelaskan pada situs resminya. untuk menghubungkan jquery secara online anda dapat menghubungkannya dengan cara berikut.
src=“//code.jquery.com/jquery-1.11.3.min.js”>
jika anda menghubungkan file jquery dengan cara ini maka anda harus terkoneksi dengan internet karena file jquery yang di tuju berada di server jquery.
atau bisa juga menghubungkan jquery dengan HTML atau PHP dengan cara menghubungkannya dengan link yang di sediakan oleh google bisa menggunakan:
src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”>
dan jquery yang di sediakan oleh microsoft:
src=“http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js”>
2. MooTools
Mootools merupakan framework Javascript kuat dan ringan. Ini menyediakanpengembang dengan seperangkat alat yang modular, cross-browser, danberorientasi objek. Kerangka Mootools dipisahkan menjadi sekelompok perpustakaanyang menyediakan fungsi dasar, dan sekumpulan plug-in yang memanfaatkan library untuk menciptakan interaksi pengguna yang kaya (seperti sliding dan dragging efek).
Framework Javascript umumnya memiliki dua keuntungan. Yang pertama adalahfaktorisasi memisahkan kode untuk tugas umum, sehingga menghematprogrammerdari keharusan untuk mengulang kode yang sebelumnya telah ditulis .Keuntungan kedua dan mungkin terbesar dari framework Javascript adalah bahwa merekamengabstrakrikan masalah kompatibilitas browser. Framework menanganimemastikanbahwa Javascript benar dijalankan untuk browser saat ini. Desainer Web tidak perlu khawatir tentang casing khusus untuk setiap browser yang bisa mengunjungi halaman mereka. Hal ini sangat membantu dalam penciptaan permintaanAJAX, yang memiliki sintaks yang sangat berbeda tergantung pada kode program yangsedang berjalandidalam broser
Library inti dibangun bertujuan membuat tugas-tugas rutin di Javascript lebih sederhana, seperti menyalin dan / atau penggabungan Dictionaries objek bersama, dan mengkonversi nya ke dalam array. Ada juga fungsi untuk cepat mendapatkantimestamps dan variabel acak. Semua tugas umum memerlukan cukup banyak kodemenggunakan Javascript dasar. Misalnya, untuk menghasilkan integer acak antara xdan y di Javascript tradisional, Anda harus menulis:
var result = Math.floor(Math.random() * (y – x + 1)) + x
sedangkan dengan Mootools Anda hanya bisa menulis:
var result = $random(x, y)
Library core juga menyediakan metode sederhana untuk memperoleh informasi browser tentang user. Meskipun informasi ini tersedia melalui obyeknavigator,obfuscation dan konvensi berbeda membuat tugas mendeteksi browser dan sistem operasi sangat sulit. Untuk hard kode semua aturan yang diperlukan, script inimengambil lebih dari 110 baris! Namun, karena tidak kompatibel, seringkali penting bagipengembang untuk mengetahui apa browser dan / atau sistem operasi pengguna memiliki untuk menampilkan halaman dengan benar. Mootools memiliki nilai booleanyang sederhana, misalnya, jika
Browser.Platform.trident //True if the browser uses the IE trident engine Browser.Platform.win //True if the platform is Windows
keduanya benar, pengembang tahu penggunanya menjalankan Internet Explorer padamesin Windows.
NATIVE
Library asli tersebut menyediakan fungsionalitas yang diperluas untuk jenis dasar (Array, Fungsi, Nomor, String, Event), baik menambah atau mengembangkanprototipebeberapa kelas dasar baru (Hash). Misalnya Library String Mootoolsmenyediakan fungsi reguler pencocokan expresi luas, bersama dengan metode untukmengkonversi antara nilai-nilai warna RGB dan string. Library Fungsi memberikan dukungan luar biasa untuk menghasilkan closure dengan parameter yang diberikan, variabel, dan bahkan memungkinkan pengembang untuk mengikat variabel ini dalam konteks closureKelas Hash menyediakan fungsionalitas peta dasar hash untuk satu setpasangan nilai-kunci.
Salah satu fitur kunci dari Mootools adalah penekanan pada pengembangan berorientasi objek. Kelas library memberikan alat pengembang untuk meniruskemawarisan yang terlihat dalam bahasa sepdrti Jawa. Kelas A diciptakan darisebuahkamus objek yang berisi kata kunci seperti extends dari nilai-nilai mereka, ataunama metode bersama dengan metode mereka. Sebagai contoh, kita bisa menulis:
var Animal = new Class({ initialize: function(feet) { this.feet = feet; } }); var Horse = new Class({ Extends: Animal, initialize: function(color) { this.parent(4); this.color = color; }, setName: function(name) { this.name = name; } }); var myAnimal = new Horse(“Brown”); myAnimal.setName(“Mr Ed”); alert(myAnimal.name); // Alerts “Mr Ed”
Extends menyediakan akses ke objek induk, mirip dengan lain bahasa berorientasi objek pemrograman. Kita juga<.span> dapat membuat kelas menggunakanImplementsdaripada extends, yang hanya akan menyalin metode yang ada dalamkelas bernamalangsung ke kelas saat ini. Salah satu aspek unik dari implements, adalah bahwa kita juga bisa menerapkan metode dinamis pada saat run-time dengan menggunakanmetode library implement, jadi kita bisa taktik pada metode setName keKelas Personyang ada dengan menggunakan kode berikut:
Person.implement({ setName: function(name) { this.name = name; } });
ia implements metode Kelas dengan demikian memungkinkan kita untukmemodifikasikelas yang ada pada-the-fly, termasuk yang dibangun di Javascript “kelas” seperti Array dan Objek.
ELEMEN
Kelas Elemen menyediakan fungsionalitas untuk melintasi dan memodifikasiDocument Object Model (DOM). Fungsi di sini adalah dalam banyak hal hanya carakompaksi dan standardisasi Javascript yang terkait dengan penggunaan DOM. Library inimenawarkan dolar singkatan ($) metode untuk mencari item dengan id. KelasElemenMootools juga memperpanjang Elemen DOM yang ada untuk menawarkanfungsionalitas tambahan. Salah satu fitur bagus dari Mootools adalahbahwa secara relatif mudah untuk memodifikasi DOM. Sebagai contoh, kita bisa menulis:
var node = $(‘myNode’); //Equivalent to document.getItemById(‘myNode’); var e1 = new Element(‘div’, {id: ‘myDiv’}); node.inject(div, ‘top’);
Yang akan mencari tag dengan id “myNode” dan menambahkan div baru bernama “myDiv“ sebagai pos pertama.
UTILITIES
Library Utilitas berisi fungsi untuk membuat beberapa halaman web-coding sehari-harilebih mudah. Dua dari perpustakaan memberikan dukungan meningkat untukbekerja sama dengan DOM, ratu mendefinisikan sebuah event DomReady yangdilepaskanketika DOM selesai loading, dan satu lagi untuk elemen browsing danturunan merekadengan lebih mudah. Library yang kedua menyediakan metode sepertimemuat dan n–anak untuk lebih mudah melintasi elemen anak. Library utilitasmenyediakan dukungan penuh Javascript Object Notation dukungan untuk serialisasidan deserializing objekJavascript. Ada juga perpustakaan Cookie untuk cepat dantanpa kesulitan berurusan dengan cookie Javascript, dan perpustakaan swiff untuk membuat obyek Flashsederhana.
FX
Library Fx memungkinkan pengembang untuk membuat efek animasi di halaman webmereka dengan dinamis menyesuaikan properti CSS. Efek dasar adalahTweendengan transisi item ke nilai properti CSS baru selama periode waktu. Sebagai contoh, kita bisa mengubah gaya warna sebuah link dari merah ke biru menggunakan:
var myFx = new Fx.Tween(myLinkElement); // adjust the color style from red (#f00) to blue (#00f) myFx.start(‘color’, ‘#f00’, ‘#00f);
Kelas Morph memungkinkan pengembang untuk menyesuaikan lebih dari satupropertisekaligus, dan kelas Transisi memungkinkan pengguna untuk menentukanbagaimanamerata untuk transisi dari nilai awal dengan nilai akhir (misalnya, kita bisamendapatkan secara eksponensial lebih dekat dengan style end daripada linearmengalami kemajuanuntuk itu).
REQUEST
Library request berfungsi sebagai satu set objek dan event based bagus dari AJAX tool.Proses dasar untuk mengeluarkan permintaan dimulai dengan penciptaan objek Permintaan baru dan menetapkan bahwa objek pilihan (seperti URLpermintaan)melalui kamus objek. Langkah selanjutnya adalah mendaftarkan satu sethandler untukperistiwa yang mungkin terjadi pada Permintaan (seperti menerimarespon sukses, atau gagal). Langkah terakhir sebenarnya mengirimkan permintaan tersebut. Librarytermasuk dukungan untuk menghasilkan permintaan HTTP bakuserta permintaanHTML dan JSON (yang secara otomatis akan encode dan decodeobjek Javascriptsebagai String).
PLUG-INS LIBRARY
Di perpustakaan Plug-in kita mulai melihat beberapa desain komponen yang berorientasi. Library Plugin berisi serangkaian komponen yang merangkum berbagai jenis fungsi untuk elemen DOM, semua dibangun di atas fungsi dari perpustakaaninti.Misalnya, komponen akordeon (ditunjukkan pada contoh di bawah) sebenarnyamerangkum fungsi yang memungkinkan bagian yang berbeda untuk memperluas danruntuh secara otomatis sebagai pengguna mengklik pada bagian yang berbeda.
Seperti dijelaskan di bawah, komponen Accordion dibuat dengan melewatkan dalam elemen-elemen yang harus dilakukan dapat diklik, dan unsur-unsur yang harusmembuka dan menutup dalam menanggapi klik pengguna. Komponenkembalikemudian dapat digunakan dalam halaman web, dan rincian tentang bagaimanaekspansi dan runtuh terjadi benar-benar tersembunyi dari penggunakomponen.
Untuk lebih jelasnya dalam memahami konsep W3C, bisa kunjungi link di bawah ini :
TUGAS KELOMPOK 