belajar javascript part3

Pada bagian ketiga ini, kita akan belajar cara menggabungkan JavaScript dengan HTML dan CSS untuk membuat aplikasi web yang interaktif dan dinamis.

  1. Integrasi dengan HTML
    JavaScript dapat digabungkan dengan HTML dengan menempatkan kode JavaScript di dalam tag script pada halaman HTML. Anda dapat menempatkan kode JavaScript di dalam tag script yang terletak di dalam head atau di dalam body halaman.

    Contoh:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html>
      <head>
        <script>
          function tampilkanPesan() {
            alert("Selamat Datang");
          }
        </script>
      </head>
      <body>
        <button onclick="tampilkanPesan()">Tampilkan Pesan</button>
      </body>
    </html>
  2. Integrasi dengan CSS
    JavaScript dapat digabungkan dengan CSS dengan mengubah gaya elemen HTML menggunakan JavaScript. Anda dapat mengubah gaya elemen menggunakan properti seperti style atau className dan mengatur gaya menggunakan CSS.

    Contoh: 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          .merah {
            color: red;
          }
        </style>
      </head>
      <body>
        <p id="teks">Hello World</p>
        <button onclick="document.getElementById('teks').className = 'merah'">Ubah Warna</button>
      </body>
    </html>
  3. Integrasi dengan File Eksternal
    JavaScript dapat digabungkan dengan file eksternal dengan menyertakan file JavaScript dari luar menggunakan tag script dan menentukan source file. Anda dapat menyertakan file JavaScript dari folder lokal atau dari server lain.

    Contoh:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!DOCTYPE html>
    <html>
      <head>
        <script src="myscripts.js"></script>
      </head>
      <body>
        <button onclick="tampilkanPesan()">Tampilkan Pesan</button>
      </body>
    </html>
    lalu buat file myscripts.js
    dan isi dengan script ini
    1
    2
    3
    function tampilkanPesan() {
            alert("Selamat Datang");
          }
    Itulah cara menggabungkan JavaScript dengan HTML dan CSS untuk membuat aplikasi web yang interaktif dan dinamis. Dengan menggabungkan ketiganya, kita dapat membuat aplikasi web yang memiliki tampilan yang menarik dan memiliki interaksi yang meningkatkan user experience. Anda dapat mengeksplorasi lebih lanjut mengenai cara menggabungkan ketiganya dengan mencoba membuat proyek web sendiri dan mencoba berbagai fitur yang ditawarkan oleh JavaScript, HTML, dan CSS. Selamat belajar!

terkait

  1. https://blogworlds.github.io/2023/01/15/belajar-javascript-part1/ ↩
  2. https://blogworlds.github.io/2023/01/15/belajar-javascript-part2/ ↩
front end web dev
#html #javascript
belajar javascript part3
https://blogworlds.github.io/2023/01/15/belajar-javascript-part3/
Author
hamzahxou
Posted on
15 Januari 2023
Licensed under