Scribd Logo
Upload

Welcome to Scribd!

  • Deskripsi Materi - Pertemuan 16

    Uploaded by

    Farida Nurlaila
    11 views8 pages
    JQuery

    Original Title

    Deskripsi Materi_pertemuan 16

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    JQuery

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views8 pages

    Deskripsi Materi - Pertemuan 16

    Uploaded by

    Farida Nurlaila
    JQuery

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    DESKRIPSI MATERI

    PERTEMUAN KE- 12 : JQUERY


    Mata Kuliah : Pemrograman Web 1
    Dosen Pengampu: Farida Nurlaila, M.Kom
    PENGANTAR:
    jQuery adalah sebuah library yang kuat dan kompleks yang
    pertama kali dirilis pada bulan Agustus 2006, meskipun ide awal
    datang jauh sebelumnya. jQuery membuat JavaScript lebih
    mudah diakses oleh kebanyakan pengembang.
    TUJUAN PERKULIAHAN:
    Mahasiswa dapat melihat bagaimana browser merepresentasikan
    halaman

    web

    melalui

    Document

    Object

    Model(DOM),

    menjelaskan secara rinci bagaimana kode yang bekerja, dan


    beberapa fitur jQuery.
    URAIAN MATERI:
    Pendahuluan
    Jika Kita tahu bagaimana memilih elemen CSS, Kita bisa
    memanfaatkan
    menggunakan

    pengetahuan
    jQuery.

    jQuery

    itu

    untuk

    JavaScript

    menyediakan

    metode

    dengan
    cross-

    browser terpercaya yang berinteraksi dengan Document Object


    Model.
    Ketika Kita melihat sebuah situs web, Kita melihat banyak
    elemen dikelompokkan bersama dan ditata untuk membentuk
    apa yang ada di depan Kita. Untuk dapat mengakses elemenelemen

    melalui

    kode

    untuk

    menghapus,

    menambah,

    dan

    memanipulasi elemen-elemen tersebut, Kita perlu beberapa


    bentuk antarmuka-representasi dari elemen pada halaman yang
    terstruktur dan mengikuti seperangkat aturan tentang model
    tersebut. Inilah yang dikatakan DOM. DOM juga memungkinkan

    kita menangkap peramban peristiwa-seperti pengguna mengklik


    link, submit form, atau menggulung halaman.
    Sebelum

    melanjutkan

    dengan

    jQuery,

    ada

    baiknya

    memperkenalkan bagaimana DOM bekerja. Ketika halaman


    dibuka, browser menghasilkan representasi dari apa yang ada di
    halaman, dan untuk setiap elemen
    menghasilkan satu atau lebih node yang mewakili itu. Ketika
    bekerja dengan JavaScript, DOM (atau implementasi browser lain
    untuk DOM) dapat menyebabkan masalah dan menyebabkan
    banyak waktu yang dihabiskan untuk workarounds, tapi kerangka
    seperti jQuery disusun agar bagaimana Kita dapat menghindari
    hal ini. Ini masalah abstrak dan penawaran dengan inkonsistensi
    peramban belakang layar.
    Ketika browser membentuk representasi dari halaman saat ini
    sebagai DOM, setiap elemen adalah node. Misalnya Kita memiliki
    sebuah paragraf dengan beberapa teks di dalamnya, seperti:
    <p>Hello World</p>

    Itu bukan satu, tapi dua node. Ada node teks yang berisi "Hello
    World" dan simpul elemen. Teks simpul akan menjadi anak dari
    simpul elemen karena berada di dalamnya. Dalam halaman yang
    khas, ada banyak node bersarang. Sebuah div dengan dua
    paragraf yang keduanya memiliki teks terstruktur seperti:
    div element node
    -- paragraph element node
    ---- text node
    -- paragraph element node
    ---- text node

    Dua paragraf dalam hal ini adalah siblings karena mereka


    memiliki parent node yang sama. Paragraf anak dari div, tetapi
    node teks bukan node anak karena mereka bukan turunan
    langsung dari elemen div. Mereka adalah node anak dari node

    paragraf. Ada tiga jenis utama dari node yang perlu kita ketahui:
    elemen, teks, dan atribut node. Mari kita lihat contoh berikut:
    <p class="intro">Hello World</p>

    Dari teks di atas ada 3 node:


    a. Unsur node mewakili paragraph
    b. Sebuah node teks yang berisi teks "Hello World"
    c. Node atribut yang menyatakan unsur ini memiliki class =
    "intro".
    Format Penulisan
    Simpan file jQuery yang didownload sebagai jquery.js dalam
    folder baru. KIta juga akan menambahkan HTML file ke folder ini,
    sehingga membuat halaman index.html.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8' />
    <title>Chapter 02, Exercise 01</title>
    <script src="jquery.js"></script>
    <script src="app.js"></script>
    </head>
    <body>
    <p>Hello World</p>
    </body>
    </html>
    Browser juga memancarkan sebuah event(tindakan) ketika DOM
    dimuat. Kita dapat menulis kode yang hanya dijalankan ketika
    sebuah tindakan terjadi, yang berarti kita tahu kode hanya akan
    dieksekusi ketika DOM siap.
    $(function() {
    //DOM is ready to go
    });
    Mari kita memecah baris ini:

    1. $(document) : Ini melewati variabel dokumen ke jQuery.


    Variabel dokumen khusus variabel yang berisi referensi ke
    semua elemen HTML pada halaman. Ketika objek ini
    dijalankan

    tindakan

    telah

    siap,

    kita

    mengeksekusi

    beberapa kode.
    2. .ready(): ready adalah salah satu dari banyak peristiwa
    yang mendukung jQuery. Kita melewatkan fungsi ke
    dalamnya.

    Karena

    (document)

    .ready

    (),

    fungsi

    dilewatkan ketika tindakan siap terdaftar pada objek


    dokumen.
    3. function () {}: function () {} Apa yang dilewatkan dalam
    pemanggilan ready adalah fungsi JavaScript biasa, yang
    kemudian akan dipanggil saat event dipancarkan.
    function onReady() {
    alert("READY TO GO!");
    }
    $(document).ready(onReady);
    Membuat Animasi .fadeIn(). & fadeout()
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Example of jQuery Fade-In and Fade-Out
    Effects</title>
    <script src="https://code.jquery.com/jquery1.11.3.min.js"></script>
    <style type="text/css">
    p{
    padding: 15px;
    background: #DDA0DD;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
    // Fadeing out displayed paragraphs
    $(".out-btn").click(function(){

    $("p").fadeOut();
    });
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
    $("p").fadeIn();
    });
    });
    </script>
    </head>
    <body>
    <button type="button" class="out-btn">Fade Out
    Paragraphs</button>
    <button type="button" class="in-btn">Fade In
    Paragraphs</button>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    </body>
    </html>
    FadeToggle()
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Example of jQuery Fade-Toggle Effect</title>
    <script src="https://code.jquery.com/jquery1.11.3.min.js"></script>
    <style type="text/css">
    p{
    padding: 15px;
    background: #DDA0DD;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
    $("p").fadeToggle();
    });
    });
    </script>
    </head>
    <body>

    <button type="button" class="toggle-btn">Fade Toggle


    Paragraphs</button>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    </body>
    </html>
    Slide up & slide down effect
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Example of jQuery Slide-Up and Slide-Down Effects
    with Different Speeds</title>
    <script src="https://code.jquery.com/jquery1.11.3.min.js"></script>
    <style type="text/css">
    p{
    padding: 15px;
    background: #B0C4DE;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
    $("p.normal").slideUp();
    $("p.fast").slideUp("fast");
    $("p.slow").slideUp("slow");
    $("p.very-fast").slideUp(50);
    $("p.very-slow").slideUp(2000);
    });
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn").click(function(){
    $("p.normal").slideDown();
    $("p.fast").slideDown("fast");
    $("p.slow").slideDown("slow");
    $("p.very-fast").slideDown(50);
    $("p.very-slow").slideDown(2000);
    });
    });
    </script>
    </head>
    <body>

    <button type="button" class="up-btn">Slide Up


    Paragraphs</button>
    <button type="button" class="down-btn">Slide Down
    Paragraphs</button>
    <p class="very-fast">This paragraph will fade in/out
    with very fast speed.</p>
    <p class="normal">This paragraph will fade in/out with
    default speed.</p>
    <p class="fast">This paragraph will fade in/out with fast
    speed.</p>
    <p class="slow">This paragraph will fade in/out with
    slow speed.</p>
    <p class="very-slow">This paragraph will fade in/out
    with very slow speed.</p>
    </body>
    </html>
    Dropdown menu
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery UI Menu - Default functionality</title>
    <link rel="stylesheet"
    href="//code.jquery.com/ui/1.11.4/themes/smoothness/jqu
    ery-ui.css">
    <script src="//code.jquery.com/jquery1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jqueryui.js"></script>
    <link rel="stylesheet"
    href="/resources/demos/style.css">
    <script>
    $(function() {
    $( "#menu" ).menu();
    });
    </script>
    <style>
    .ui-menu { width: 150px; }
    </style>
    </head>
    <body>
    <ul id="menu">

    <li class="ui-state-disabled">Aberdeen</li>
    <li>Ada</li>
    <li>Adamsville</li>
    <li>Addyston</li>
    <li>Delphi
    <ul>
    <li class="ui-state-disabled">Ada</li>
    <li>Saarland</li>
    <li>Salzburg an der schnen Donau</li>
    </ul>
    </li>
    <li>Saarland</li>
    <li>Salzburg
    <ul>
    <li>Delphi
    <ul>
    <li>Ada</li>
    <li>Saarland</li>
    <li>Salzburg</li>
    </ul>
    </li>
    <li>Delphi
    <ul>
    <li>Ada</li>
    <li>Saarland</li>
    <li>Salzburg</li>
    </ul>
    </li>
    <li>Perch</li>
    </ul>
    </li>
    <li class="ui-state-disabled">Amesville</li>
    </ul>
    </body>
    </html>

    You might also like