banner

Membuat Program Javascipt (First Time)

damartaranggana 20.20
Kali ini saya akan membuat program javascipt yang sangat simple bagi anda yang ingin mempraktekan nya.....

Pertama silahkan buka teks editor anda masing masing , kalau saya menggunakan "Visual Studio Code" jika anda ingin menggunakan ini juka silahkan download DISINI kemudian buat file baru bernama pertama.html dan isi kode sebagai berikut

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial Javascript</title>
</head>
<body>
    <script>
        console.log("Saya sedang mencoba belajar Javascript");
        document.write("Hallo semua!");
    </script>
</body>
</html>
Jika kamu menggunakan teks editor VS Code, maka akan terlihat seperti ini:
Nah kita akan membahas nya nihh....

Tadi kita menulis perintah:
console.log("Saya sedang mencoba belajar Javascipt");
Mengapa tidak ditampilkan?
Karena perintah atau fungsi console.log() akan menampilkan pesan ke dalam console javascript. Sedangkan perintah document.write() berfungsi untuk menulis ke dokumen HTML, maka dia akan ditampilkan kesana.

Nah coba saja buka console javascript.

Nahh mantab kan 

Kita sudah mengenal fungsi document.write() dan console.log().


2. Penulisan Kode javascript Inline


Pada cara ini, kita akan menulis kode javascript di dalam atribut HTML. Cara ini biasanya digunakan untuk memanggil suatu fungsi pada event tertentu.
Misal: saat link diklik.
Contoh:
<a href="#" onclick="alert('Yey!')">Klik aku!</a>
atau bisa juga seperti ini:
<a href="javascript:alert('Yey!')">Klik aku!</a>
Hasilnya:
Contoh inline javascript
Perhatikan…
Pada atribut onclick dan href kita menuliskan fungsi javascript di sana.
Atribut onclick merupakan atribut HTML untuk menyatakan fungsi yang akan dieksekusi saat elemen itu diklik.
Pada contoh di atas, kita menjalankan fungsi alert(). Fungsi ini merupakan fungsi untuk menampilkan dialog.
Lalu pada atribut href, kita juga memanggil fungsi alert() dengan didahului javascript:.
Atribut href sebenarnya digunakan untuk mengisi alamat link atau URL.
Karena kita ingin memanggil kode javascript di sana, maka alamat link tersebut kita ubah menjadi javascript: lalu diikuti dengan fungsi yang akan dipanggil.

3. Penulisan Kode javascript Eksternal


Pada cara ini, kita akan menulis kode javascript secara terpisah dengan file HTML.
Cara ini biasanya digunakan pada proyek-proyek besar, karena diyakini—dengan cara ini—dapat lebih mudah mengelola kode project.
Mari kita lihat contohnya…
Kita buat dua file, yaitu: file HTML dan Javascript.
belajar-js/
├── kode-program.js
└── index.html
Isi dari file kode-program.js:
alert("Hello, ini adalah program JS eksternal!");
Isi dari file index.html:
<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript dari Nol</title>
    </head>
    <body>
        <p>Tutorial Javascript untuk Pemula</p>

        <!-- Menyisipkan kode js eksternal -->
        <script src="kode-program.js"></script>
    </body>
</html>
Hasilnya:
Contoh Program Javascript eksternal
Pada contoh di atas, kita menulis kode javascript terpisah dengan kode HTML.
Lalu, pada kode HTML…
Kita menyisipkannya dengan memberikan atribut src pada tag <script>.
<!-- Menyisipkan kode js eksternal -->
<script src="kode-program.js"></script>
Maka, apapun yang ada di dalam file kode-program.js akan dapat dibaca dari file index.html.
Bagaimana kalau file javascriptnya berada di folder yang berbeda?
Kita bisa menuliskan alamat lengkap foldernya.
Contoh:
Misal kita punya struktur folder seperti ini:
belajar-js/
├── js/
|   └── kode-program.js
└── index.html
Maka untuk menyisipkan file kode-program.js ke dalam HTML, kita bisa menuliskannya seperti ini:
<script src="js/kode-program.js"></script>
Karena file kode-program.js berada di dalam direktori js.
Kita juga bisa menyisipkan javascript yang ada di internet dengan memberikan alamat URL lengkapnya.
Contoh:
<script src="https://www.damartaranggana.com/js/kode.js"></script>

Goodjob

Nah ini awal pertama
Kamu sudah mengenal javascript dan sudah membuat program pertama dengan Javascript.

REFERENSI
https://www.petanikode.com/
https://www.google.com/


Tags:

Posting Komentar

0 Komentar