MENGENAL JAVASCRIPT

pada tanggal

 

Pemrograman Javascript : Langkah Awal Belajar Javascript


Apa itu javascript?

Javascript adalah bahasa pemrograman yang awalnya dirancang untuk berjalan di atas browser.

Namun, seiring perkembangan zaman, javascript tidak hanya berjalan di atas browser saja. Javascript juga dapat digunakan pada sisi Server, Game, IoT, Desktop, dsb.

Javascript awalnya bernama Mocha, lalu berubah menjadi LiveScript saat browser Netscape Navigator 2.0 rilis versi beta (September 1995). Namun, setelah itu dinamai ulang menjadi Javascript. 1

Terinspirasi dari kesuksesan Javascript, Microsoft mengadopsi teknologi serupa. Microsoft membuat ‘Javascript’ versi mereka sendiri bernama JScript. Lalu di tanam pada Internet Explorer 3.0.

Hal ini mengakibatkan ‘ perang browse’, karena JScript milik Microsoft berbeda dengan Javascript racikan Netscape.

Akhirnya pada tahun 1996, Netscape mengirimkan standarisasi ECMA-262 ke Ecma  Internationa. Sehingga lahirlah standarisasi kode Javascript bernama ECMAScript atau ES. Saat ini ECMAScript sudah mencapai versi 8 (ES8). 2

Versi ECMAScriptTahun Rilis
ES 1Juni 1997
ES 2Juni 1998
ES 3Desember 1999
ES 4Terbengkalai
ES 5Desember 2009
ES 5.1Juni 2011
ES 6Juni 2015
ES 7Juni 2016
ES 8Juni 2017

Peralatan untuk Belajar Javascript

Apa saja perlatan yang harus disiapkan untuk belajar Javascript?

  1. Web Browser (Google Chrome, Firefox, Opera, dll)
  2. Teks Editor (rekomendasi: VS Code)

Mengenal Console JavaScript




Di dalam console, kita bisa menulis fungsi atau kode-kode javascript dan hasilnya akan langsung ditampilkan.

Misalnya, mari kita coba kode berikut:

console.log("Hi apa kabar!");
alert("Saya sedang belajar javascript");

Maka hasilnya:


Jika kamu menggunakan Nodejs, maka cara mengakses console adalah dengan mengetik perintah node pada Terminal.


Membuat Program Javascript Pertama

 buka teks editor, kemudian buat file baru bernama hello_world.html dan isi dengan kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>

Jika kamu menggunakan teks editor VS Code, maka akan terlihat seperti ini:

Menulis program javascript di teks editor VS Code

Silahkan disimpan dengan nama hello_world.html, kemudian buka file tersebut dengan web browser.

Maka hasilnya:

Program hello world Javascript

menulis perintah:

console.log("Saya belajar Javascript");

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

Bagaimana Cara Menulis Kode Javascript di HTML?

  1. Embed (Kode Javascript ditempel langsung pada HTML. Contoh: yang tadi)
  2. Inline (kode Javascript ditulis pada atribut HTML)
  3. Eksternal (Kode Javascript ditulis terpisah dengan file HTML)

1. Penulisan Kode javascript dengan Embed

Pada cara ini, kita menggunakan tag <script> untuk menempelkan (embed) kode Javascript pada HTML. Tag ini dapat ditulis di dalam tag <head> dan <body>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript dari Nol</title>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <head>
            console.log("Hello JS dari Head");
        </script>
    </head>
    <body>
        <p>Tutorial Javascript untuk Pemula</p>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <body>
            console.log("Hello JS dari body");
        </script>
    </body>
</html>

2. Penulisan Kode javascript Inline

 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

Atribut onclick merupakan atribut HTML untuk menyatakan fungsi yang akan dieksekusi saat elemen itu diklik.

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.petanikode.com/js/kode.js"></script>

Komentar

Posting Komentar