HTML dan Javascript ternyata hubungannya mudah dipahami (part 5)

Bismillaahirrohmaanirrohiim…

Kali ini kita akan belajar, bagaimana javascript digunakan dalam pemrograman web.

Meskipun javascript terkenal dengan bahasa client side, namun perkembangan saat ini, javascript mampu bekerja disisi server menggunakan node.js. Kita akan bahas nuanti, insyaAllah.

Berbicara tentang client side, artinya javascript dijalankan disisi client yaitu web browser, sama seperti HTML dan CSS.

Hampir semua website sekarang menggunakan javascript, silahkan dicek dengan cara view source, pasti akan banyak ditemukan js js didalam halaman web-web tersebut.

Fungsi javascript di website sangat banyak, diantaranya adalah:
– Membuat validasi form
– Membuat web menjadi lebih interaktif
– Memodifikasi HTML secara dinamis
– Load konten external dengan ajax tanpa reload halaman.

Sama seperti CSS, ada 3 cara menghubungkan HTML dan Javascript:
1. Javascript diletakkan sebagai atribut pada tag html / inline.
2. Javascript diletakkan dalam dokumen html/internal.
3. Javascript diletakkan di file terpisan sebagai file.js

Langsung saja kita praktekkan.

Silahkan ketikkan kode html dan javascript di bawah ini:

– Buat file html-javascript.html di folder “belajar-javascript”
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\belajar-javascript\html-javascript.html

<!DOCTYPE html>
<html>
    <head>
        <title>Menghubungkan HTML dan Javascript - webku.com</title>

        <!-- javascript external, ditulis sebagai file terpisah -->
    <script type="text/javascript" src="script.js"></script>

        <script type="text/javascript">
         //on document ready
      (function() {
         //dijalankan setelah halaman di load
         alert("Halaman diload");
      })();

         //fungsi alert
         function alertTest() {
          alert("Halo Guys!");
         }

         //fungsi confirm
         function confirmTest() {
          var cfm = confirm("Apakah kamu yakin?");
          if (cfm) {
           alert("Kamu yakin.");
          } else {
           alert("Kamu tidak yakin.");
          }
         }

         //prompt
         function promptTest() {
          var prm = prompt("Berapa umur kamu?", 20);
          alert("Umur kamu "+prm+" Tahun");
         }

        </script>
    </head>

    <body>

        <div class="header">
            <h1>HTML dan Javascript ternyata hubungannya mudah dipahami</h1>
        </div>

        <div class="content_block">

            <h4>1. Javascript diletakkan sebagai atribut pada tag HTML / inline</h4>
            
            <!-- contoh Javascript inline didalam tag html -->
            <!-- harus dimulai dengan javascript: -->
            <p >
 
 Baca Juga:  Mendeteksi event keyboard dengan javascript
– Buat file script.js di folder “belajar-javascript”

Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\belajar-javascript\script.js
 //mengganti konten
function gantiKonten() {
  var konten_dinamis = document.getElementById("konten_dinamis");

  if (konten_dinamis.innerHTML=='Ridho') {
    konten_dinamis.innerHTML = "Budi";
  } else {
    konten_dinamis.innerHTML = "Ridho";
  }
}

//menambah konten
function tambahKonten() {
  var tanggal = document.getElementById("tanggal");

  var m = new Date();
  var dateString = m.getUTCFullYear() +"/"+ (m.getUTCMonth()+1) +"/"+ m.getUTCDate() + " " + m.getUTCHours() + ":" + m.getUTCMinutes() + ":" + m.getUTCSeconds();

  tanggal.innerHTML += m+"<br />";
}

//mengganti CSS
function gantiCSS() {
  var ganticss = document.getElementById("ganticss");

  ganticss.style.fontSize = "25px";
  ganticss.style.color = "#ff0000";
}

//validasi form
 Jalankan kode di atas dengan cara buka browser lalu ketikkan http://localhost/belajar/belajar-javascript/html-javascript.html
 Hasilnya:
 html-javascript.html
Penjelasan kode-kode di atas telah ditulis didalamnya, tidak perlu dijelaskan ulang ya.
 Jika ada pertanyaan atau ada sesuatu yang ingin disampaikan, silahkan ketikkan di kolom komentar di bawah.
 Terimakasih
 Belajar mudah HTML, CSS, Javascript, PHP, MySQL

1. Pengantar – Memulai belajar web programming secara otodidak (part 1)

2. HTML Dasar – HTML dasar yang mudah sekali (part 2)

3. Tag HTML Penting – Tag HTML yang sering dipakai untuk membuat halaman website (part 3)

4. HTML CSS – Konsep dasar CSS dan cara menghubungkan HTML – CSS (part 4)

5. HTML Javascript – HTML dan Javascript ternyata hubungannya mudah dipahami (part 5)

6. HTML – PHP – Konsep dasar PHP dan cara menghubungkan dengan HTML (part 6)

7. HTML CSS JS – PHP MySQL – Membuat CRUD dengan PHP MySQL HTML CSS JS (part 7)
Baca Juga:  Cara memutar audio dengan html5 dan javascript dengan atau tanpa interaksi user
   
 
 
Bagikan