Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Wednesday, August 26, 2020

Belajar Javascript/Jquery Part 4 Menciptakan Efek Visual

Assalamualaikum Wr, Wb
Topiknya masih seputar jquery ya, Sedikit Pengantar
Jquery bisa dipakai untuk memberi efek visual. Contoh, untuk menggeser beberapa elemen bisa kesamping, keatas, kebawah untuk contoh kita akan menggeser elemen keatas. kodenya seperti dibawah ini:

Kode Menggeser elemen ke atas

$("#atas").slideUp("slow");

Kode Menggeser elemen ke bawah

$("#bawah").slideDown("slow");

Yok langsung saja kita prakter
Persiapan
  • Buka Text editor untuk menulis Halaman Web
  • Buat File index.html
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
       function geserAtas(){
           $("#pertama").slideUp("slow");
       }
       function geserBawah(){
           $("#pertama").slideDown("slow");
       }
    </script>
</head>
<body>
    <center>
    <h1>Menggeser Elemen Paragraf keatas dan kebawah </h1>
    <div>
        <p id="pertama">Paragraf 1</p>
        <p>Paragraf 2</p>
        <p>Paragraf 3</p>
        <p>Paragraf 4</p>
    </div>
    <p>Ini Paragraf 5</p>
    <form>
        <input type="button" value="Geser Keatas" onclick="geserAtas()">
        <input type="button" value="Geser Kebawah" onclick="geserBawah()">
    </form>
    </center>
</body>
</html>

Simpan dan jalankan file index.html dibrowser temen temen klik tombol geserkeatas otomatis paragraf pertama akan hilang, dan untuk menampilkannya klik tombol geserkebawah. lebih jelasnya serperti gambar dibawah ini

Gambar ketika paragraf diklik geserkeatas
Gambar ketikaa paragraf diklik geserkebawah
Gimana? mudah ya, cukup itu dulu dan semoga bermanfaat

Thursday, August 20, 2020

Belajar Javascript/Jquery Part 3 Menampilkan dan Menyembunyikan Eleman Halaman

Assalamualaikum Wr,wb
Jquery dapat menampilkan dan menyembunyikan elemen-elemen halaman dengan mudah. menyembunyikan sebuah elemen halaman dengan fungsi hide(), yang digunakan dengan sebuah selektor seperti ini:
$('p:first').hide();
dan untuk menampilkan sebuah elemen menggunakan fungsi show() contohnya seperti ini:
$('p:first').show();
Yuk langsung saja kita praktek
Pesiapan
  • Buka Text editor untuk menulis Halaman Web
  • Buat File index.html
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        function sembunyikan(){
            $('p:first').hide();
        }
        function tampilkan(){
            $('p:first').show();
        }
    </script>
</head>
<body>
    <center>
    <h1>Menyembuyikan dan Menampilkan Elemen Paragraf</h1>
    <div>
        <p>Paragraf 1</p>
        <p>Paragraf 2</p>
        <p>Paragraf 3</p>
        <p>Paragraf 4</p>
    </div>
    <form>
        <input type="button" value="Sembuyikan" onclick="sembunyikan()">
        <input type="button" value="Tampilkan" onclick="tampilkan()">
    </form>
    </center>
</body>
</html>
Simpan file kemudian buka project dibrowser klik tombol sembunyikan, akan terlihat paragraf pertama tidak tampil lagi, untuk menampilkan lagi tinggal klik tombol tampilkan. lebih jelasnya seperti gambar dibawah ini

gambar ketika paragraf tampil semua
gambar ketika paragraf disembunyikan

Mudahkan? oh iya javascript atau jquery biasanya digunakan untuk mempercantik tampilan website.

Belajar Javascript/Jquery Part2 Meyeleksi Beberapa element Halaman

Assalamualaikum Wr,Wb
Sesuai judul postingan kita akan belajar bagaimana cara menyeleksi beberapa element halaman sekaligus Ketika kita melewatkan sebuah selektor pada fungsi jquery(), atau fungsi $() itu artinya kita sudah menyeleksi sekumpulan elemen.
Pada contoh kali ini kita akan memakai elemen paragraf pada sebuah halaman menggunakan selektor "p", kalau di tulisa dalam jquery seperti ini $("p"). Selektor ini akan menghasilkan semua elemen paragraf. dan akan menghitung jumlah elemen paragraf dengan fungsi jquery size() dan menampilkanya pada kotak alert. yuk langsung praktek aja
Persiapan
  • Gunakan Editor seperti visual studio code, untuk membuat halaman web
  • Buat File baru dengan akhiran .HTML, disi saya mencontohkan dengan membuat file index.html
  • Panggil File jquery.js
  • Tambhkan kode jquery untuk menghitung jumlah paragraf
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript/Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <center>
    <h1>Menghitung Halaman Paragraf</h1>
    <div>
        <p>Ini Paragraf 1</p>
        <p>Ini Paragraf 2</p>
        <p>Ini Paragraf 3</p>
        <p>Ini Paragraf 4</p>
    </div>
    <form>
        <input type="button" value="Hitung Paragraf" onclick="hitung()">
    </form>
    </center>
</body>
</html>

File jquery.js CDN
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

kode untuk menghitung jumlah paragraf

<script>
    function hitung(){
        alert("Ada Sebanyak " + $("p").size() + " Paragraf");
    }
</script>

Taruh kode jquery diantar tag HEAD, kemudian simpan dan dan panggil file index.html dibrowser, klik tombol hitung paragraf, nanti temen akan meliah sebuah kotak alert yang mengitung jumlah paragraf di halaman index.html, coba temen temen tambahkan jumlah paragraf lagi di file index, kemudian simpan, klik lagi tombol hitung paragraf, otomatis jumlah pargraf akan bertambah, Kurang Lebih Tampilanya seperti dibawah ini

Satu lagi Contoh untuk menyeleksi elemen dengan gaya style css. buka halaman index.html copy paste kode dibawah ini
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript/Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        p.kedua{
            font-weight: bold;
        }
        p.diwarnai{
            background-color: red;
        }
    </style>
</head>
<body>
    <center>
    <h1>Menghitung Halaman Paragraf</h1>
    <div>
        <p>Ini Paragraf 1</p>
        <p class="kedua">Ini Paragraf 2</p>
        <p>Ini Paragraf 3</p>
        <p>Ini Paragraf 4</p>
    </div>
    <form>
        <input type="button" value="Hitung Paragraf" onclick="hitung()">
        <input type="button" value="Warnai" onclick="warna()">
    </form>
    </center>
</body>
</html>


<script>
    function hitung(){
        alert("Ada Sebanyak " + $("p").size() + " Paragraf");
    }
    function warna(){
        $('p.kedua').toggleClass("diwarnai");
    }
</script>

Penambahakan Fungsi Jquery

<script>
    function hitung(){
        alert("Ada Sebanyak " + $("p").size() + " Paragraf");
    }
    function warna(){
        $('p.kedua').toggleClass("diwarnai");
    }
</script>

jangan lupa save dulu perubahan di file index.html, kemudian refresh browser temen temen, klik tombol warnai, kurang lebih tampilanya seperti dibawah ini
Sekian dulu, semoga bisa dipahami dan bermanfaat, InsaAllah Part belajar jquery akan terus diupdate

Thursday, March 12, 2020

Belajar Dasar Dasar Javascript/Jquery Part1



Assalamualaikum

Menyeleksi Elemen Halaman dengan ID

Instalasi untuk dapat menggunakan Jquery
  1. Include file jquery.js kedalam halaman html
Langkah Langkah
  1. Buat File index.html simpan (Tidak harus di dalam folder xampp/htdocs)
  2. Buka file index.html dibrowser
Cdn Jquery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Code jquery
<script>
        function warna(){
            $('#ketiga').toggleClass('diwarnai');
        }
</script>

Code Lengkap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        function warna(){
            $('#ketiga').toggleClass('diwarnai');
        }
    </script>
    <style>
        p.diwarnai{
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <h1>Pilih Paragraf</h1>
    <div>
        <p>Paragraf 1</p>
        <p>Paragraf 2</p>
        <p id="ketiga">Paragraf 3</p>
    </div>
    <input type="button" value="Warnai" onclick="warna()">
</body>
</html>

Hasil Bila dibuka di browser

Demikan Mudah Bukan Silahkan Dicoba dan semoga bermanfaat

Category