featured-image-mengenal-html-css-javascript

Mengenal HTML, CSS, JavaScript (Model Standar Web)

Saat ini, ada banyak sekali teknologi dapat digunakan untuk membuat sebuah website. Mungkin Anda pernah dengar HTML, CSS, JavaScript, jQuery, Bootstrap, AngularJS, React. Atau pernah juga mendengar Laravel, Django, Ruby on Rails,… Yaa, semua itu dapat digunakan untuk membuat sebuah website. Maaf, saya tidak berniat menakut-nakuti Anda untuk belajar web development. Anda tidak harus mempelajari semua teknologi itu. Anda boleh memilih, apa yang sesuai dengan kebutuhan dan pekerjaan Anda. Tapi, saya rasa Anda tidak bisa memilih soal 3 hal ini, yaitu HTML, CSS dan JavaScript.

Model Standar Website

Komponen dasar untuk membangun sebuah website adalah HTML, CSS, dan JavaScript. Masing-masing memiliki peran yang berbeda.

  • HTML HTML (Hypertext Markup Language) digunakan untuk membentuk struktur dan memasukkan konten dari sebuah halaman website, seperti judul halaman website, header, paragraf, form, tombol, link, dan lain sebagainya.
  • CSS CSS (Cascading Stylesheet) digunakan untuk memberikan style pada halaman website sehingga website tampak menarik dan mudah digunakan. Dengan menggunakan CSS, kita dapat mengatur warna teks dalam paragraf pada halaman website, atau ukuran font teks pada konten tabel, mengatur jarak antar beberapa tombol, dan lain sebagainya.
  • JavaScript JavaScript merupakan bahasa pemrograman yg dapat dimengerti dan dieksekusi oleh browser. Dengan menggunakan JavaScript, kita dapat membuat website menjadi interaktif dan dinamis. Misalnya, Anda dapat membuat slideshow foto, membuat popup notifikasi, atau menampilkan dan menyembunyikan sebuah blok tulisan.

Demo HTML + CSS + JavaScript

Untuk melihat lebih jelas bagaimana HTML, CSS, dan JavaScript saling berhubungan satu sama lain, mari kita gunakan sebuah contoh nyata. Gambar gif di bawah ini mengilustrasikan sebuah kotak teks untuk menuliskan pesan dengan panjang maksimal 255 karakter.

Ilustrasi penggunaan HTML, JavaScript, dan CSS untuk membuat kotak teks dengan batasan panjang karakter - BelajarPemrograman

Penjelasan

Berikut penjelasan singkat mengenai peran HTML, CSS, dan JavaScript untuk membuatnya:

  • Struktur dan konten pokok, yaitu tulisan “Message”, kotak teks, dan tulisan “255 character(s) left” dibuat dalam HTML.
  • CSS digunakan untuk men-style struktur konten tersebut, termasuk membuat tulisan “Message” menjadi tebal. Jarak antara garis tepi kotak teks dengan tulisan di dalamnya juga di-style menggunakan CSS.
  • JavaScript digunakan untuk menghitung dan menampilkan banyaknya sisa karakter ketika user menulis di kotak teks.

Source Code

Berikut merupakan source code dari contoh di atas.

<!DOCTYPE html>
<html>
 
<head>
    <style class="cp-pen-styles">
        .container {
            margin-top: 1em;
        }
    </style>
</head>
 
<body>
    <label for="message">Message</label><br>
    <input type="text" class="form-control" id="message" /><br>
    <small><span id="char-count">255</span> character(s) left</small>
    <script>
        var messageTextBox = document.getElementById("message");
        var charCountText = document.getElementById("char-count");
        var nCharMax = 255;
 
        var displayNCharLeft = function (event) {
            var nCharLeft = nCharMax - messageTextBox.value.length;
            if (nCharLeft >= 0) {
                charCountText.innerHTML = nCharLeft;
            } else {
                charCountText.innerHTML = 0;
                messageTextBox.value = messageTextBox.value.substr(0, nCharMax);
            }
        };
 
        messageTextBox.addEventListener("keypress", displayNCharLeft);
        messageTextBox.addEventListener("keyup", displayNCharLeft);
    </script>
</body>
 
</html>

Coba sendiri di CodePen!

Di bawah ini saya embed kode dan hasil kode demo di atas menggunakan CodePen, sehingga Anda dapat mencoba menjalankannya langsung. Di sini, kode HTML, CSS, dan JavaScript dipisahkan dalam tab yg berbeda.

See the Pen Maximum #Character in TextBox – Vanilla JS by Nakiri Nakuru (@nakirinakuru) on CodePen.

Tambahan: AJAX

Pada awalnya, saya tidak ingin menambahkan bagian ini. Tapi karena saya rasa pengetahuan tentang AJAX ini sangatlah penting dalam teknologi website modern, sehingga saya tambahkan bagian ini.

AJAX (Asynchronous JavaScript and XML) merupakan suatu teknik yang menggunakan JavaScript dan XML untuk melakukan pertukaran data dengan server di balik layar. “Di balik layar”, maksudnya, Anda bisa:

  • merubah isi halaman website dengan data dari server tanpa perlu me-reload halaman website
  • meminta data ke server setelah halaman di-load
  • menerima data dari server setelah halaman di-load

Berikut merupakan beberapa contoh penggunaan AJAX:

  • Fitur chat Facebook (atau yang lainnya) dapat menampilkan adanya pesan-pesan baru tanpa perlu me-reload atau me-refresh halaman website. Berarti, ada pertukaran data antara fitur chat tersebut dengan server Facebook
  • Fitur upload data ke server dengan menampilkan informasi berapa persen bagian dari data yang sudah terupload
  • Menampilkan hasil pencarian bahkan sebelum user menekan tombol cari
  • Memberikan saran kata kunci pencarian
  • Menampilkan artikel berikutnya setelah user hendak selesai membaca sebuah artikel
  • dll.

Penutup

Di sini, saya hanya membahas konsepnya saja. Anda dapat mempelajari AJAX setelah memiliki fondasi yang baik tentang JavaScript. Dan lebih mudah lagi, jika Anda telah mempelajari jQuery atau sebuah framework JavaScript seperti AngularJS. Selamat belajar!

Referensi

Muhammad Ikhsan

Senang belajar dan berbagi ilmu.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *