Latihan JQuery
Tugas Latihan Membuat Website Menggunakan JQuery
Nama : Rendi Dwi Francisko
NRP : 5025201056
Kelas : Pemrograman Web B
Link web :Web
Link Source Code :Github
Source Code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" | |
| integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" | |
| crossorigin="anonymous" | |
| /> | |
| <title>JQuery</title> | |
| </head> | |
| <body> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <!-- Buat h1 untuk menampilkan nilai ketika tombol tekan di klik--> | |
| <center><h1></h1></center> | |
| <!-- Buat tombol--> | |
| <center> | |
| <button type="button" class="btn btn-primary">Tekan!</button> | |
| </center> | |
| <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> | |
| <script | |
| src="https://code.jquery.com/jquery-3.5.1.slim.min.js" | |
| integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" | |
| crossorigin="anonymous" | |
| ></script> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" | |
| integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" | |
| crossorigin="anonymous" | |
| ></script> | |
| <script> | |
| //Ketika dokumen HTML sudah siap di reload | |
| $(document).ready(function () { | |
| //buat nilai 1 | |
| var nilai = 1; | |
| //ketika tombol tekan di klik | |
| $(".btn").on("click", function () { | |
| //tambah nilai dan tampilkan pada h1 | |
| $("h1").html(nilai++); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Komentar
Posting Komentar