Dasar JavaScript

A.   Pendahuluan

1.     Pengertian

JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis.

2.    Latar belakang dan Batasan permasalahan

Anda dapat melakukan banyak hal dengan JavaScript. Anda akan memulai dari fitur sederhana seperti menentukan layout, membuat respon ketika mengkil button, caousels, dan gallery gambar. Namun pada akhirnya ketika anda sudah mendapat banyak pengetahuan anda juga akan dapat membuat game, animasi 2D dan 3D, aplikasi yang berhubungan dengan database, dan masih banyak lagi.

3.    Maksud dan Tujuan

Mengenal JavaScript

4.    Hasil yang diharapkan

Dapat menggimplementasikan JavaScript dalam pembuatan halaman web

B.    Alat dan Bahan

1.       Laptop

2.       File itmes

3.       Browser

C.    Jangka waktu pelaksanaan kegiatan

3 Jam

D.    Proses tahap pekerjaan

           JavaScript Dapat Mengubah Konten HTML

       

          Salah satu dari banyak metode HTML adalah getElementById ().

          Contoh ini menggunakan metode untuk "menemukan" elemen HTML

          (dengan id = "demo"), dan mengubah konten elemen (innerHTML)

          menjadi "Halo JavaScript":

document.getElementById("demo").innerHTML = "Hello JavaScript";

Contoh :

Hasil awalnya :

Jika di klik maka tampilan nya akan menjadi seperti ini :

Fitur-fitur dalam JavaScript:

Variable

Variable merupakan wadah yang dapat anda beri nilai. Anda bisa memulai mendeklarasikan variable dengan keyword var, diikuti nama yang anda inginkan:

var myVariable;

Semua baris di JS harus diakhiri dengan semi-colon(;), untuk menandakan akhir baris kode. Jika anda tidak menambahkannya, anda bisa mendapatkan hasil yang tidak diinginkan.

Kita isi nilainya dan kita bisa mengubah nilainya menjadi seperti ini :

var myVariable = ‘Bob’;

myVariable = ‘Steve’;

variable memiliki Tipe Data yang berbeda :

Variabel	Penjelasan	Contoh
String	Teks String. Untuk menandakan bahwa variabel adalah sebuah string anda perlu menambahkan tanda kutip.	var myVariable = 'Bob';
Number	Angka/number. Angka tidak menggunakan tanda kutip.	var myVariable = 10;
Boolean	Nilai True/False. true/false merupakan keyword spesial di JS, dan tidak perlu menggunakan kutip.	var myVariable = true;
Array	Struktur yang memungkinkan anda menyimpan lebih dari satu nilai dalam sebuah reference.	var myVariable = [1,'Bob','Steve',10]; Panggil setiap member array seperti ini: myVariable[0], myVariable[1], etc.
Object	Pada dasarnya, Semuanya di javascript adalah sebuah objek, dan dapat disimpan dalam variabel. Ingatlah untuk anda belajar.	var myVariable = document.querySelector('h1'); All of the above examples too.

Jadi kenapa kita memerlukan variabel? Baik, variable dibutuhkan dalam berbagai hal menarik di pemrograman. Jika nilainya tidak berubah, maka anda tidak dapat melakukan sesuatu hal yang bersifat dinamis, seperti menyesuaikan pesan salam ke pengunjung website anda, atau mengubah gambar yang tampil di galeri, dan masih banyak lagi.

Komentar

Anda dapat menambahkan komentar di kode JavaScript, seperti halnya pada CSS. Di JavaScript, sebaris komentar ditulis seperti berikut:

// ini adalah komentar

Namun anda juga dapat menggunakan lebih dari satu komentar seperti ini:

/*

Ini adalah komentar

Lebih dari satu baris

*/

Operator

Operator pada dasarnya adalah symbol matematika yang bertindak atas dua nilai (atau variable yang berisi nilai) dan menghasilkan nilai baru. Pada table di bawah ini adalah operator yang sederhana disertai contoh  :

Operator	Penjelasan	Symbol	Contoh
Penambahan/ penggabungan	Digunakan untuk menambahkan nilai satu dengan lainnya menjadi sebuah nilai baru, atau menggabungkan dua teks string.	+	6 +9 ; “Hello “ + “world!”;
Pengurangan, Perkalian, pembagian	Yang ini hasilnya sama seperti yang kita kenal di matematika dasar.	-,*,/	9 ‐ 3;   8 * 2; // perkalian di JS menggunakan tanda bintang (*)  9 / 3;
Operator penugasan	Anda telah melihat ini sebelumnya, penugasan di JS digunakan untuk memberikan nilai pada variabel.	=	var myVariable = 'Bob';
Operator kesetaraan	Melakukan tes untuk melihat apakah suatu nilai sama dengan nilai pembanding, dan mengembalikan nilai hasil berupa boolean true/false .	===	var myVariable = 3;  myVariable === 4;
Negasi, tidak sama dengan	Sering digunakan bersama operator kesetaraan, operator negasi di JS sama dengan logical NOT — membalik nilai true menjadi false dan sebaliknya.	!, ! ==	Ekspresi dasarnya bernilai true, namun pada pernamdingan mengembalikan nilai false karena kita menggunakan negasi: var myVariable = 3; !myVariable === 3; Disini kita mencoba "Apakah  myVariable NOT ( tidak ) sama dengan 3". Mengembalikan nilai false, karena disitu pembandingnya sama dengan 3. var myVariable = 3; myVariable !== 3;

Catatan: mencampur tipe data akan menyebabkan hasil yang tidak kita duga ketika melakukan perhitungan, jadi hati - hati ketika memberikan nilai pada variabel pastikan memberikan nilai yang sesuai, dan mendapatkan hasil sesuai yang anda inginkan. Misalnya menuliskan "35" + "25" pada konsol. Kenapa anda tidak mendapatkan nilai yang anda inginkan? karena tanda kutip mengubah angka menjadi teks string — anda hanya mendapatkan nilai string yang digabungkan, dan bukan angka yang ditambahkan. Jika anda memasukkan 35 + 25, anda akan mendapatkan nilai yang sesuai.

Kondisional

Kondisional adalah struktur kode yang memungkinkan anda anda untuk menguji apakah ekspresi mengembalikan nilai yang benar atau tidak, dan kemudian menjalankan perintah lain tergantung pada hasilnya. Bentuk umum dari kondisional disebut if … else.

var esKrim = 'coklat';   if (esKrim === 'coklat') {     alert('Yay, Aku suka eskrim coklat!');      } else {     alert('Hahhh, tapi sukanya coklat...');       }

Ekspresi didalam if ( ... ) dalah pengujian — disini menggunakan operator kesetaraan (seperti yang dijelaskan sebelumnya) untuk membandingkan variabe esKrim dengan string coklat untuk melihat keduanya sama. Jika hasil perbandingan mengembalikan nilai true, kode blok pertama akan dijalankan. Jika tidak, akan di lewati dan kode blok selanjutnya akan di jalankan, tepatnya setelah statement else.

Fungsi

Functions merupakan cara encapsulasi fungsi yang ingin anda gunakan kembali, jadi anda dapat memanggil dengan hanya sebuah nama fungsi, dan tidak harus menulis semua kodenya lagi setiap kali anda ingin menggunakannya kembali. Anda telah melihat beberapa fungsi diatas, seperti:

var myVariable = document.querySelector(‘h1’);

alert(‘Helo!);

 Fungsi ini merupakan built-in browser untuk anda gunakan kapanpun.

Jika anda melihat sesuatu yang mirip dengan nama variabel, tapi menggunakan tanda kurung — () — setelahnya, anda dapat memastikan bahwa itu adalah fungsi. Fungsi terkadang menggunakan arguments — bit data yang dibutuhkan untuk dapat menjalankan fungsinya. Argumen di tulis di dalam tanda kurung, dan dipisahkan dengan koma jika memiliki lebih dari satu argumen.

Misal, Fungsi alert() membuat kotak pop-up terlihat pada jendela browser, namun kita perlu membaerikan string sebagai sebuah argumen untuk mengatakan pada fungsi alert()pesan apa yang harus di tampilkan pada kotak po-pup.

Berita bagusnya adalah kita dapat membuat fungsi anda sendiri — pada contoh berikut kita menulis sebuah fungsi sederhana dengan menggunakan dua argumen dan mengalikannya menjadi nilai baru:

function kalikan(angka1,angka2) {     var hasil = angka1 * angka2;     return hasil;  }

Events

Untuk membuat hal yang interaktif pada website, anda perlu menggunakan event — kode struktur ini mendengarkan setiap hal yang terjadi pada browser, dan kemudian memungkinkan anda menjalankan kode sebagai respon pada hal yang terjadi tersebut. Contoh yang paling terjadi adalah click event, dimana di suarakan oleh browser ketika mouse anda mengklik pada elemen seperti link, tombol atau yang lainnya. Untuk menunjukkannya, coba tambahkan kode berikut pada konsol anda, kemudian coba klik pada halaman web tersebut:

document.querySelector('html').onclick = function() {       alert('Ouch! Stop poking me!');  }

Banyak sekali cara untuk melampirkan event pada sebuah elemen; disini kita memilih elemen HTML dan membuat properti handler onclick yang sama dengan fungsi anonim (fungsi tanpa nama) yang berisi kode yang ingin kita jalankan ketika event terjadi

E.    Kesimpulan

Sebelum menjalankan JavaScript kita harus mengerti apa saja yang menjadi bagian dalam JavaScript.

F.     Referensi

1.       https://developer.mozilla.org/id/docs/Learn/Getting_started_with_the_web/JavaScript_basics