Scribd Logo
Importer

Bienvenue sur Scribd !

  • Alfian Rehanusa Wibowo 1TIB Jquery

    Transféré par

    Izzir
    24 vues9 pages
    df

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    df

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    24 vues9 pages

    Alfian Rehanusa Wibowo 1TIB Jquery

    Transféré par

    Izzir
    df

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 9

    LAPORAN RESMI

    PRAK DESAIN DAN PEMROGAMAN WEB


    JQUERY

    DOSEN :

    SANIYATUL MAWADDAH, S.ST

    OLEH :

    ALFIAN REHANUSA WIBOWO

    2102167051

    TEKNIK INFORMATIKA
    AKADEMI KOMUNITAS NEGERI LAMONGAN
    PROGRAM STUDI DI LUAR DOMISILI
    KABUPATEN LAMONGAN
    POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
    2017
    1. BAB II
    1. Latihan 1
    - Source Code

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
    $("document").ready(function(){
    alert ("Selamat datang");
    });
    </script>
    </head>
    <body>
    </body>
    </html>

    - Capture

    2. Latihan 2
    - Source Code

    <html>
    <head>
    <Script language="javascript" src="jquery-1.4.3.js" ></script>
    <Script language="javascript">
    $(document).ready(function(){
    $("input").click(function(){
    alert("hello jquery!");
    });
    });
    </script>
    </head>
    <body>
    <input type="submit" value="click me"/>
    </body>
    </html>
    - Capture

    3. Latihan 3
    - Source Code

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
    $("document").ready(function(){
    $("#p1").css("color","red");
    });
    </script>
    <title>latihan 3</title>
    </head>
    <body>
    <p id="p1">Ini isi paragraf 1 </p>
    <p id="p2">Ini isi paragraf 2 </p>
    </body>
    </html>

    - Capture

    4. Latihan 4
    - Source Code

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
    $("document").ready(function(){
    $("#judul").addClass("merahkuning");
    $(".sub1").addClass("kuninghitam");
    });
    </script>
    <style type="text/css">
    .merahkuning { color: red;
    font-weight: bold; background-color:yellow; padding:3px;
    }
    .kuninghitam {
    color:yellow; background-color:black;
    }
    </style>
    </head>
    <body>
    <h1>Judul Buku Kuliah Pemrograman Web </h1>
    <ol id="judul">
    <li class="sub1">Pemrograman PHP</li>
    <li>Database mysql</li>
    <li class="sub1">Mempercantik web dengan jquery</li>
    </ol>
    </body>
    </html>

    - Capture
    2. BAB III
    1. Event Click()
    - Source Code

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
    $("document").ready(function(){
    $('a').click(function(){
    alert("Selamat datang di website STMIK Cikarang") 8. });
    });
    </script>
    </head>
    <body>
    <a href="www.stmik-cikarang.ac.id">Klik disini untuk menuju halaman web
    STMIK Cikarang</a>
    </body>
    </html>

    - Capture

    2. Event dblclick()
    - Source Code

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
    $("document").ready(function(){
    $("div").dblclick(function(){
    $(this).css({background:"red"});
    });
    });
    </script>
    <style type="text/css">
    div {
    background:yellow;
    width: 60px;
    height:60px;
    float:left;
    margin:10px;
    cursor:pointer;
    }
    </style>
    <title>Latihan double klik</title>
    </head>
    <body>
    <p>klik dua kali pada setiap kotak untuk mengubah warnanya</p>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    </body>
    </html>

    - Capture

    3. Event Mouseover() dan Event Mouseleave()


    - Source Code

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
    $("document").ready(function(){
    $("div").mouseover(function(){
    $(this).css({background:"red"});
    });
    $("div").mouseleave(function(){
    $(this).css({background:"yellow"});
    });
    });
    </script>
    <style type="text/css">
    div {
    background:yellow;
    width: 60px;
    height:60px;
    float:left;
    margin:10px;
    cursor:pointer;
    }
    </style>
    <title>Latihan double klik</title>
    </head>
    <body>
    <p>klik dua kali pada setiap kotak untuk mengubah warnya</p>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </body>
    </html>

    - Capture
    3. BAB IV
    1. Efek Fade()
    - Source Code

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
    <script type="text/javascript">
    $("document").ready(function(){
    $(".fadeout").click(function(){
    $("#kotak").fadeOut("slow");
    });

    $(".fadein").click(function(){
    $("#kotak").fadeIn("slow");
    });

    $(".fadeto3").click(function(){
    $("#kotak").fadeTo("slow",0.3);
    });

    });
    </script>

    <style type="text/css">
    #kotak{
    width:250px;
    height:180px; background:yellow; border:2px solid black;
    }
    </style>
    <title>Efek FadeIn, FadeOut dan FadeTo</title>
    </head>
    <body>
    <div id="kotak"></div><br/>
    <button class="fadeout">Fade Out</button>
    <button class="fadein">Fade In</button>
    <button class="fadeto3">Fade To 0.3</button>
    </body>
    </html>

    - Capture
    2. Efek Slide()
    - Capture

    Vous aimerez peut-être aussi