Showing posts with label JAVASCRIPT. Show all posts
Showing posts with label JAVASCRIPT. Show all posts

Sunday, February 17, 2019

Mengenal Operator Yang Ada Pada Pemrograman Javascript

Mengenal Operator Yang Ada Pada Pemrograman Javascript
Setelah kita belajar tentang Variabel dan Tipe data pada Javascript di materi sebelumnya, materi selanjutnya yang harus dipelajari adalah operator yang ada di Javascript.

Operator merupakan hal dasar yang harus dipahami dalam setiap bahasa pemrograman.

Karena kita akan banyak menggunakannya untuk melakukan berbagai macam operasi di dalam program.

Apa itu operator dan juga fungsinya?
Misalkan kita punya dua variabel seperti ini:
var a = 2;
var b = 3;
Bagaimana cara menjumblahkan variabel a dan b?

Jawabannya yaitu dengan menggunakan tanda plus (+).
var c = a + b;
Hasil penjumlahan dari variabel a dan b akan disimpan di dalam variabel c.

Tanda plus (+) adalah sebuah operator.

Kesimpulannya, jadi operator pada pemrograman itu :
Operator adalah simbol yang digunakan untuk melakukan operasi pada suatu nilai dan variabel.

Operator dalam pemrograman terbagi dalam 6 jenis:
  • Operator aritmatika;
  • Operator Penugasan (Assignment);
  • Opeartor relasi atau perbandingan;
  • Operator Logika;
  • Operator Bitwise;
  • Operator Ternary;

Operator wajib ada di setiap bahasa pemrograman. Ke 6 jenis operator di atas harus kamu pahami.


Pertama : Opeartor Aritmatika pada Javascript

Operator aritmatika merupakan operator untuk melakukan operasi aritmatika seperti penjumlahan, pengurangan, pembagian, perkalian, dsb.

Operator aritmatika terdiri dari:
Nama Operator Simbol
Penjumlahan +
Pengurangan -
Perkalian *
Pemangkatan **
Pembagian /
Sisa Bagi %
Untuk melakukan operasi perkalian, kita menggunakan simbol asterik/bintang (*).

Jangan gunakan x, karena simbol x bukan termasuk dalam operator di dalam pemrograman, x adalah karakter.

Lalu untuk pemangkatan kita menggunakan asterik/bintang ganda (**).

Untuk pembagian, kita gunakan simbol garis miring (/).


Contoh codingnya :
<script>
var a = 5;
var b = 3;
// menggunakan operator penjumlahan
var c = a + b;
console.log(c);
</script>
Hasilnya:

Mengenal Operator Yang Ada Pada Pemrograman Javascript
untuk membuka jendela konsole log silakan tekan tombol ctrl+shift+j pada browser, Perhatikan setiap koding di run proses penjumlahan dari var a+b dilakukan dan hasil output dari c ditampilkan di view console


Coba juga untuk operator yang lainnya dengan coding berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operator Aritmatika</title>
</head>
<body>
    <script>
        var a = 15;
        var b = 4;
        var c = 0;
        // pengurangan 
        c = a - b;
        document.write(`${a} - ${b} = ${c}<br/>`);
        // Perkalian
        c = a * b;
        document.write(`${a} * ${b} = ${c}<br/>`);
        // pemangkatan
        c = a ** b;
        document.write(`${a} ** ${b} = ${c}<br/>`);
        // Pembagian
        c = a / b;
        document.write(`${a} / ${b} = ${c}<br/>`);
        // Modulo
        c = a % b;
        document.write(`${a} % ${b} = ${c}<br/>`);
    </script>
</body>
</html>


Hasilnya:
Mengenal Operator Yang Ada Pada Pemrograman Javascript


Coba pertikan operator modulo (%) dan operator penjumlahan (+).

Operator modulo adalah operator untuk menghitung sisa bagi.

Misal 4 dibagi 2, maka sisanya adalah 2.
4 % 2 = 2

Operator Penggabungan Teks

Pada Javascript, apabila kita akan melakukan operasi terhadap tipe data string atau teks menggunakan penjumlahan (+), maka yang akan terjadi adalah penggabungan kata; Bukan penjumlahan seperti type number.

Contohnya:
var a = "14" + "4";
Maka hasilnya akan:
144
Kenapa tidak 18?

Karena kedua angka tersebut merupakan type data string, perhatikan kedua angka tersebut diapit dengan tanda petik.


Kedua : Opertor Penugasan pada Javascript

Operator penugasan adalah operator yang digunakan untuk memberikan tugas kepada variabel. Biasanya digunakan untuk mengisi variabel.

Contohnya :
var a = 14;
Variabel a kita berikan tugas untuk menyimpan nilai 14.

Operator penugasan terdiri dari:
Nama Operator Simbol
Pengisian Nilai =
Pengisian dan Penambahan +=
Pengisian dan Pengurangan -=
Pengisian dan Perkalian *=
Pengisian dan Pemangkatan **=
Pengisian dan Pembagian /=
Pengisian dan Sisa bagi %=
Operator penugasan sama seperti operator aritmatika. Operator penugasan juga digunakan untuk melakukan operasi aritmatika.

Contoh codingnya :
var jumlahView = 12;
// menggunakan operator penugasan penjumlahan
// untuk menambah nilai
jumlahView += 1;
Hasilnya:

Variabel jumlahView akan bertambah satu.

Maksud dari jumlahView += 1 adalah seperti ini:
jumlahView = jumlahView + 1;
Bisa dibaca:

Isi variabel jumlahView dengan penjumlahan dari nilai jumlahView sebelumnya dengan 1.

Khusus untuk operator penugasan yang dijumlahkan dan dikurangi dengan satu, bisa disingkat dengan ++ dan -- untuk pengurangan.

Contoh sederhanya :
var a = 2;
a++;
Maka nilai dari variabel a akan menjadi 3.

Lalu pertanyaanya:

Apa bedanya dengan operator penugasan dengan operator aritmatika?

Operator aritmatika hanya melakukan operasi aritmatika saja, sedangkan operator penugasan bertugas untuk melakukan operasi aritmatika dan juga pengisian.

Berikut ini contoh coding operator penugasan:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operator Penugasan</title>
</head>
<body>
    <script>
        document.write("Semula nilai diberi score : <br>");
        // pengisian nilai
        var score = 100;
        document.write("score = "+ score + "<br/>");
        // pengisian dan menjumlahan dengan 5
        score += 5;
        document.write("score ditambah 5 = "+ score + "<br/>");
        // pengisian dan pengurangan dengan 2
        score -= 2;
        document.write("score dikurang 2 = "+ score + "<br/>");
        // pengisian dan perkalian dengan 2
        score *= 2;
        document.write("score dikali 2 = "+ score + "<br/>");
        // pengisian dan pembagian dengan 4
        score /= 4;
        document.write("score dibagi 4 = "+ score + "<br/>");
        // pengisian dan pemangkatan dengan 2
        score **= 2;
        document.write("score dipangkat 2 = "+ score + "<br/>");
        // pengisian dan modulo dengan 3;
        score %= 3;
        document.write("score dimodulo dengan 3 = "+ score + "<br/>");
    </script>
</body>
</html>


Hasilnya:

Mengenal Operator Yang Ada Pada Pemrograman Javascript

Ketiga : Operator Perbandingan pada Javascript

Operator relasi atau perbandingan adalah operator yang digunakan untuk membandingkan dua nilai.

Operator perbandingan akan menghasilkan sebuah nilai boolean true dan false.

Operator perbandingan terdiri dari:
Nama Operator Simbol
Lebih Besar >
Lebih Kecil <
Sama Dengan == atau ===
Tidak Sama dengan != atau !==
Lebih Besar Sama dengan >=
Lebih Kecil Sama dengan <=
Pengisian dan Sisa bagi %=

Contoh Codingnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operator Perbandingan</title>
</head>
<body>
    <script>
        var me = 20;
        var you = 19;
        // sama dengan
        var result = me == you;
        document.write(`${me} == ${you} = ${result}<br/>`);
        // lebih besar
        var result = me > you;
        document.write(`${me} > ${you} = ${result}<br/>`);
        // lebih besar samadengan
        var result = me >= you;
        document.write(`${me} >= ${you} = ${result}<br/>`);
        // lebih kecil
        var result = me < you;
        document.write(`${me} < ${you} = ${result}<br/>`);
        // lebih kecil samadengan
        var result = me <= you;
        document.write(`${me} <= ${you} = ${result}<br/>`);
        // tidak samadengan
        var result = me != you;
        document.write(`${me} != ${you} = ${result}<br/>`);
    </script>
</body>
</html>


Hasilnya:
Mengenal Operator Yang Ada Pada Pemrograman Javascript

Pertanyaanya:

Apa perbedaan == (dua simbol samadengan) dengan === (tiga simbol samadengan)?

Perbandingan dengan menggunakan simbol == hanya akan membandingkan nilai saja. Sedangkan yang menggunakan === akan membandingkan dengan tipe data juga.

Contohnya :
// ini akan bernilai true
var a = "4" == 4; //-> true
// sedangkan ini akan bernilai false
var b = "4" === 4; //-> false
Mengapa nilai b bernilai false?

Karena "4" (string) dan 4 (integer). Tipe datanya berbeda.

Keempat : Opeartor Logika pada Javascript

Operator logika digunakan untuk melakukan operasi terhadap dua nilai boolean.

Operator ini terdiri dari:
Nama Operator Simbol
Logika AND &&
Logika OR ||
Negasi/kebalikan !

Contoh Codingnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operator Logika</title>
</head>
<body>
    <script>
        var me = 20;
        var you = 19;
        var right = me > you;
        var wrong = me < you;
        // operator && (and)
        var hasil = right && wrong;
        document.write(`${right} && ${wrong} = ${hasil}<br/>`);
        // operator || (or)
        var hasil = right || wrong;
        document.write(`${right} || ${wrong} = ${hasil}<br/>`);
        // operator ! (not)
        var hasil = !right
        document.write(`!${right} = ${hasil}<br/>`);
    </script>
</body>
</html>


Hasilnya:
Mengenal Operator Yang Ada Pada Pemrograman Javascript

Kelima : Opeartor Bitwise pada Javascript

Operator bitwise merupkan operator yang digunakan untuk operasi berdasarkan bit (biner).

Operator ini terdiri dari:
Nama Simbol di Java
AND &
OR |
XOR ^
Negasi/kebalikan ~
Left Shift <<
Right Shift >>
Left Shift (unsigned) <<<
Right Shift (unsigned) >>>
Operator ini berlaku untuk tipe data int, long, short, char, dan byte.

Operator ini akan menghitung dari bit-ke-bit.

Misalnya, kita punya variabel a = 60 dan b = 13.

Bila dibuat dalam bentuk biner, akan menjadi seperti ini:

a = 00111100
b = 00001101
(perhatikan bilangan binernya, angka 0 dan 1)

Kemudian, dilakukan operasi bitwise

Operasi AND
a     = 00111100
b     = 00001101
a & b = 00001100

Operasi OR
a     = 00111100
b     = 00001101
a | b = 00111101

Operasi XOR
a     = 00111100
b     = 00001101
a ^ b = 00110001

Opearsi NOT (Negasi/kebalikan)
a   = 00111100
~a  = 11000011
Konsepnya memang hampir sama dengan opeartor Logika. Bedanya, Bitwise digunakan untuk biner.

Untuk lebih jelasnya, silakan dicoba coding berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operator Bitwise</title>
</head>
<body>
    <script>
        var x = 4;
        var y = 3;
        // operator bitwise and
        var hasil = x & y;
        document.write(`${x} & ${y} = ${hasil}<br/>`);
        // operator bitwise or
        var hasil = x | y;
        document.write(`${x} | ${y} = ${hasil}<br/>`);
        // operator bitwise xor
        var hasil = x ^ y;
        document.write(`${x} ^ ${y} = ${hasil}<br/>`);
        // operator negasi
        var hasil = ~x;
        document.write(`~${x} = ${hasil}<br/>`);
        // operator bitwise right shift >>
        var hasil = x >> y;
        document.write(`${x} >> ${y} = ${hasil}<br/>`);
        // operator bitwise right shift <<
        var hasil = x << y;
        document.write(`${x} << ${y} = ${hasil}<br/>`);
        // operator bitwise right shift (unsigned) >>>
        var hasil = x >>> y;
        document.write(`${x} >>> ${y} = ${hasil}<br/>`);
    </script>
</body>
</html>


Hasilnya:
Mengenal Operator Yang Ada Pada Pemrograman Javascript

Keenam : Opeartor Ternary pada Javascript

Terakhir ada operator Ternary.

Operator ternary merupakan operator yang teridiri dari tiga bagian.

Operator-operator sebelumnya hanya dua bagian saja, yaitu: bagian kiri dan kanan. Ini disebut operator binary.

Sementara operator trinary ada bagian kiri, tengah, dan kanan.

bagian kiri <operator> bagian tengah <operator> bagian kanan
Opertor ternary pada Javascript, biasanya digunakan untuk membuat sebuah percabangan if/else.

Simbol opertor ternary terdiri dari tanda tanya dan titik dua (?:).

Bentuknya seperti ini:
<kodisi> ? "benar" : "salah"
Perhatikan! <kondisi> dapat kita isi dengan ekspresi yang menghasilkan nilai true dan false.

Apabila kondisi bernilai true, maka "benar" yang akan dipilih dan sebaliknya, apabila false maka "salah" yang akan dipilih.

Opertor ini unik, seperti membuat pertanyaan.

Mengenal Operator Yang Ada Pada Pemrograman Javascript
Pada contoh di atas, “Kamu suka aku” adalah pertanyaan atau kondisi yang akan diperiksa.

Kalau jawabannya benar, maka iya. Sebaliknya akan tidak.

Lebih jelasnya, mari kita coba contoh coding ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operator Ternary</title>
</head>
<body>
    <script>
        var pertanyaan = confirm("Apakah kamu menerima perasaanku?")
        var hasil = pertanyaan ? "Kita Jadian!!" : "Kamu Jahat!!!";
        document.write(hasil);
    </script>
</body>
</html>

Hasilnya:
Mengenal Operator Yang Ada Pada Pemrograman Javascript

Tuesday, February 12, 2019

Mengenal Jendela Dialog pada Pemrograman Javascript

Mengenal Jendela Dialog pada Pemrograman Javascript
Pada materi sebelumnya, kamu sudah belajar bagaimana caranya menampilkan output pada  pemrograman Javascript/

Salah satunya yaitu dengan menggunakan fungsi alert(). Fungsi alert() adalah sebuah fungsi yang bisa menampikan ouput pada jendela dialog.

Sebelum mengeluarkan output pasti ada input, ada dua cara yang bisa kita lakukan untuk mengambil inputnya :
  • Cara yang pertama : Menggunakan form.
  • Cara yang kedua : Menggunakan jendela dialog.

Pada materi ini kita akan membahas cara yang kedua yaitu dengan menggunakan jendela dialog.

Jendela dialog adalah jendela yang dapat digunakan untuk berinteraksi dengan pengguna.

Ada tiga macam jendela dialog pada Javascript:
  • Jendela dialog alert();
  • Jendela dialog confirm();
  • Jendela dialog promp();

Ketiga dialog ini mempunyai cara dan kegunaan yang berbeda masing-masing.

Mari kita bahas satu persatu.

Jendela Dialog Alert

Dialog alert() biasanya digunakan untuk menampilkan sebuah pesan peringatan atau informasi yang muncul pada browser berupa pop up.

Fungsi alert() berada dalam objek window.

Kita bisa menulisnya unutk dapat menggunakannya seperti ini:
window.alert("Javascript FajarYusuf.com");
Atau seperti ini:
alert("Javascript FajarYusuf.com");
Karena objek awal yaitu window merupakan objek yang berisfat global, kita boleh tidak menulisnya.

Dialog alert() tidak akan mengembalikan nilai apapun saat dieksekusi.

Silakan coba coding berikut, kalian boleh menulisnya dengan membuat file .html, atau bisa coba melalui Editor HTML FajarYusuf.com :

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Dialog Alert</title>
    </head>
    <body>
    <script>
        alert("Selamat datang di tutorial Javascript FajarYusuf.Com");
    </script>
    </body>
</html>


Hasilnya:
Mengenal Jendela Dialog pada Pemrograman Javascript

Dialog alert() memiliki sarat perameter yang harus diberikan, yaitu berupa teks yang akan ditampilkan pada dialog yang muncul pada jendela pop up.

Pada contoh di atas, kita memberikan teks "Selamat datang di tutorial Javascript FajarYusuf.Com".

Dan jika anda bertanya bagaimana caranya menampilkan dialog alert() pada event-event tertentu, misalnya pada event klik atau saat sebuah tombol diklik?

Ini bisa dilakukan dengan cara menambahkan fungsi dialog pada event listener.

Pada HTML, kita bisa memasukan fungsi alert() pada atribut onClick agar nanti ditampilkan saat sebuah elemen yang ada didalam onClick diklik.

Contoh Coding:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Dialog Alert</title>
    </head>
    <body>
        <button onClick="alert('Kamu sudah menekan Tombolnya!')">Klik Ini</button>
    </body>
</html>


Hasilnya:
Mengenal Jendela Dialog pada Pemrograman Javascript
Jendela dialog dari alert akan tampil saat tombol diklik



Jendela Dialog Confirm

Dialog confirm() sangat diperlukan untuk melakukan konfirmasi dalam melakukan tindakan tertentu.

Misalnya disaat kita menyetujui sesuatu akan tindakan yang kita lakukan, maka akan lebih baik jika kita menampilkan dialog confirm(). Karena jika tidak tindakan tersebut akan berbahaya.

Dialog confirm dapat dibuat dengan fungsi confirm().

Contoh Penulisannya :
confirm("Apakah anda yakin menghapus status anda?");
Dialog confirm() akan mengembalikan nilai true apabila kita memilih tombol OK dan akan mengembalikan nilai false apabila kita memilih Cancel.

Nilai kembalian ini dapat kita tampung didalam variabel untuk diproses.

Contoh Codingnya:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Dialog Confirm</title>
    </head>
    <body>
    <script>
        var yakin = confirm("Apakah kamu yakin ingin pergi ke halaman utama FajarYusuf.Com?");
        if (yakin) {
            window.location = "https://www.fajaryusuf.com";
        } else {
            document.write("Ok, kamu masih mau disini :)");
        }
    </script>
    </body>
</html>


Hasilnya:
Mengenal Jendela Dialog pada Pemrograman Javascript



Jendela Dialog Prompt

Dialog prompt() bisanya berfungsi untuk mengambil sebuah inputan dari pengguna.

Dialog prompt() akan mengembalikan sebuah nilai string dari apa yang diinputkan oleh pengguna.

Contoh Codingnya:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Dialog Promp</title>
    </head>
    <body>
    <script>
        var nama = prompt("Siapa nama kamu?", "");
        document.write("<p>Hello "+ nama +"</p>");
    </script>
    </body>
</html>


Hasilnya:
Mengenal Jendela Dialog pada Pemrograman Javascript


Dialog prompt() memiliki 2 syarat untuk parameter yang harus diberikan:

  • Teks yang akan ditampilkan pada form.
  • Nilai default untuk field input.
Pada contoh coding di atas, kita memberikan nilai default-nya berupa string kosong dengan tanda petik "".


Kesimpulan


Kapan waktu yang pas untuk menggunakan  Dialog Alert, Confirm, dan Prompt?
Berdasarkan contoh-contoh yang sudah diterangkan di atas, kita bisa mengetahui kapan waktu yang tepat untuk menggunakan alert(), confirm() dan prompt().

Saat kita hanya ingin menampilkan informasi saja tanpa mengharapkan balasan pengguna, maka gunakan alert().

Saat kita ingin mendapatkan jawaban konfirmasi dari pengguna, maka gunakan confirm().

Dan apabila kita ingin mengambil data inputan teks dari pengguna, maka gunakan prompt().

Sunday, February 10, 2019

Variabel dan Tipe Data Pada Pemrograman Javascript

Variabel dan Tipe Data Pada Pemrograman Javascript

Variabel dan Tipe Data adalah dua hal dasar dalam bahasa pemrograman yang selalu digunakan, dan dua hal ini akan selalu ada di setiap bahasa pemrograman.

Apa Pengertian dari Variabel?

Variabel merupkan nama yang mewakili nilai. Variabel bisa diisi dengan berbagai macam nilai dengan berbagai macam tipe data, seperti string (teks), number (angka), objek, array, dan yang lainnya.

Jika diibaratkan dengan sebuah benda, maka variabel itu seperti wadah untuk menyimpan sesuatu.

Variabel dan Tipe Data Pada Pemrograman Javascript

Pada materi ini kita akan belajar mengenai variabel dan tipe data yang ada didalam Javascript.

Kita akan memulai dari cara membuat variabel, cara mencetak variabel ke output, mengisi ulang, dan menghapusnya dari memori.


Cara Membuat Variabel di Javascript

Cara membuat variabel yang umum digunakan pada pemrograman javascript adalah menggunakan kata kunci var lalu diikuti dengan nama variabel dan nilainya.

Contoh Codingnya :
var judul = "Belajar Javascript di FajarYusuf.Com";
Pada contoh coding di atas, kita membuat variabel bernama judul dengan nilai berupa teks dengan tipe data string : "Belajar Javascript di FajarYusuf.Com".

Contoh Codingnya Selanjutnya :

var webName = "FajarYusuf.Com";
var url = "https://www.FajarYusuf.com";
var visitorCount = 1404; 

Pada contoh di atas, kita menggunakan huruf bersar untuk nama-nama variabel yang terdiri dari dua suku kata.

Kenapa kita tidak menggunakan underscore saja?

Pada Pemrograman Javascript kita lebih dianjurkan menggunakan camelCase dalam penamaan variabel. 
Variabel dan Tipe Data Pada Pemrograman Javascript
Boleh tidak jika kita menggunakan camelCase? , boleh saja menggunakan snake case atau underscore seperti contoh ini:
var web_name= "FajarYusuf.Com";
var visitor_count = 1404;
Hal tersebut tidak akan menjadi masalah atau error coding, program masih akan tetap valid dan dapat di running. Tetapi, mayoritas programmer Javascript lebih suka menggunakan camelCase.

Sesuai selera anda, mau ikut yang camelCase mayoritas atau snake_case minoritas.

Perlu untuk diketahui juga, selain menggunakan keyword var kita juga bisa membuat variabel dengan keyword let atau tanpa keyword apapun.

Contoh Codingnya:
//membuat varibel dengan keyword let
let price = 14000;
//membuat variabel tanpa keyword apapun
stock = 12
Apa perbedaan diantara ketiga cara tersebut yang menggunakan var, let dan yang tanpa keyword?

Perbedaannya terletak pada jangkauan dan penggunaanya. Nanti akan dibahas lebih dalam lagi.

Pertanyaan lainnya mungkin :
“Apa yang terjadi jika nilai variabel tidak diisi?”

Jawabannya, variabel akan bernilai undefined (belum ditentukan).

Contohnya :
var x;
Maka variabel x akan bernilai undefined.

Cara Menampilkan isi Variabel Javascript

Cara untuk menampilkan isi variabel, kita bisa memanfaatkan fungsi-fungsi yang ada untuk menampilkan output seperti berikut :
  • Fungsi console.log() menampilkan output ke console javascript;
  • Fungsi document.write() menampilkan output ke dokumen HTML;
  • dan Fungsi alert() menampilkan output ke jendela dialog.

Mari kita coba, buatlah file bernama belajar-variabel.html, lalu isi dengan kode dibawah, atau kalian juga bisa coba pada editor html fajaryusuf.com  DISINI :

<html lang="en">
<head>
    <title>Belajar Variabel Javascript di FajarYusuf.Com</title>
    <script>
        // membuat variabel
        var name = "FajarYusuf.Com";
        var visitorCount = 1404;
        var isActive = true;
        var url = "https://www.fajaryusuf.com";
        // menampilkan variabel ke jendela dialog (alert)
        alert("Selamat datang di " + name);
        // menampilkan variabel ke dalam HTML
        document.write("Nama Situs: " + name + "<br>");
        document.write("Jumlah Pengunjung: " + visitorCount + "<br>");
        document.write("Status Aktif: " + isActive + "<br>");
        document.write("Alamat URL: " + url + "<br>");
    </script>
</head>
<body>
</body>
</html>



Hasilnya :
Variabel dan Tipe Data Pada Pemrograman Javascript


Arti dari simbol plus (+) pada contoh di atas adalah untuk menggabungkan, bukan untuk menjumlahkan.

Cara Mengisi Merubah Isi dari Variabel

Variabel bersifat mutable, artinya nilai yang tersimpan di dalamnya dapat kita isi ulang atau berubah.

Contoh Codingnya :

// mula-mula kita membuat variabel dengan isi awal ini
var age = 25;
// lalu kita ubah isinya
age = 17;
Kenapa saat mengisi ulang atau merubah nilai variabel tidak menggunakan keyword var?

Karena keyword var dibutuhkan saat membuat variabel saja. Sedangkan untuk mengisi ulang, kita cukup tulis seperti di atas.

Apabila kita menggunakan keyword var, berarti dapat diartikan kita membuat variabel baru, bukan mengisi ulang atau merubah nilai.

Cara Menghapus Variabel

Penghapusan variabel dalam Javscript memang jarang dilakukan. Namun, untuk program yang membutuhkan ketelitian dalam alokasi memori, penghapusan variabel perlu dilakukan agar penggunaan memori lebih optimal dan dapat dikontrol.

Penghapusan variabel dapat dilakukan dengan keyword delete.

Contoh Codingnya :
judul= "Belajar Pemrograman Javascript Di FajarYusuf.Com ";
delete judul;
Maka variabel judul akan terhapus dari memori.

Penghapusan variabel hanya bisa dilakukan pada variabel yang dibuat tanpa awalan keyword. Sedangkan variabel yang dibuat dengan keyword var dan let akan terhapus otomatis.

Apa Itu Tipe Data

Tipe data adalah berbagai macam jenis data yang bisa kita gunakan di dalam variabel untuk menentukan jenis data dari nilai.

Ada beberapa tipe data dalam pemrograman Javascript:

  • String (teks)
  • Integer atau Number (bilangan bulat)
  • Float (bilangan Pecahan)
  • Boolean
  • Object
Javascript adalah bahasa yang bersifat dynamic typing, artinya kita tidak harus menuliskan atau menentukan tipe data pada saat pembuatan variabel. Tidak seperti pada bahasa C, C++, Java, dsb.yang bersifat static typing.

Contoh Codingnya:
var name = "Eka";
var age = 24;
var single = false;
Javascript akan otomatis mengenali tipe data yang kita berikan pada setiap variabel yang diberi nilai.

Pada contoh di atas kita akan dapatkan seperti berikut :

  • name bertipe data String;
  • age bertipe data integer;
  • dan single bertipe data boolean.
Untuk hal pasti dari tipe data ini bisa juga kita cek dengan keyword typeof.

Contoh Codingnya :
typeof name;
typeof age;
typeof single;

Hasil pada console :
Variabel dan Tipe Data Pada Pemrograman Javascript

Bagaimana cara kita bisa mengenali tipe data pada javascript selain menggunakan typeof?

Kita bisa mengenali melalui cara penulisannya.

Contoh Codingnya :
// untuk tipe data teks atau string penulisannya selalu diapit dengan tanda petik
var author = "Fajar Yusuf";
// sedangkan untuk tipe data number dan boolean tidak diapit dengan tanda petik
var available = true; // untuk tipe data boolean hanya bernilai true dan false
var total = 25;


Aturan Untuk Penulisan Nama Variabel di Javascript

Ada beberapa aturan penulisan variabel dalam Javascript:

Aturan pertama : Penamaan variabel tidak boleh menggunakan angka di depannya.

contoh codingnya:
// yang salah
var 123name = "FajarYusuf.Com";
   
// yang benar
var name123 = "FajarYusuf.Com";
Aturan Kedua : Penamaan variabel boleh menggunakan awal underscore.

contoh coding :
var _name = "FajarYusuf.Com";
Aturan Ketiga : Penamaan variabel dianjurkan menggunakan camelCase apabila tediri dari dua suku kata.

Contoh Coding :

var wbName = "FajarYusuf.Com";
Aturan Keempat : Penamaan variabel dianjurkan menggunakan bahasa inggris

Contoh Codingnya :

var postTitle = "Tutorial Javascript Di FajarYusuf.Com";

Thursday, February 7, 2019

Membuat Output Dengan Javascript

Membuat Output Dengan Javascript


Output merupakan sebuah tampilan dari proses program yang biasanya kita gunakan untuk memperlihatkan hasil akhir dari program yang dibuat.

Output pada Pemrograman lain biasanya ditampilkan dalam bentuk teks dengan fungsi print().

Ada 4 cara yang akan saya bahas untuk menampilkan output dari program Javascript:


Cara Pertama :  Menggunakan Fungsi console.log()

Fungsi console.log() adalah fungsi yang ada pada pemrograman javascript yang berguna untuk menampilkan teks ke console browser atau console javascript.

Contoh untuk menggunakannya silakan kalian salin coding dibawah berikut, dan coba DISINI :

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<script>
console.log("Ini Adalah Output dari console.log");
</script>
</body>
</html>


Lalu silakan klik ctrl+sift+j untuk membuka console browser dan silakan run program, hasilnya akan seperti ini :

Membuat Output Dengan Javascript
lihat output sebelah kanan yang ada pada console,akan muncul output setiap coding di running


Biasanya console.log() digunakan untuk debugging. Karena setiap pesan error yang ada pada Javascript selalu ditampilkan di dalam Console.

Selain console.log(), terdapat juga beberapa fungsi untuk debugging seperti console.debug(), console.info(), console.error(), console.dir(), dan sebagainya.

Membuat Output Dengan Javascript

Semua fungsi console ini juga berlaku pada console Nodejs.


Cara Kedua : Menggunakan Fungsi alert()

Fungsi alert() merupakan fungsi yang berguna untuk menampilkan jendela dialog yang biasa kita lihat dalam tampilan pop up pada browser. Fungsi ini sebenarnya berada pada objek Windows.

Penulisan lengkapnya adalah seperti ini:
window.alert("Ini Output dari Window Alert");
Bisa juga hanya alert() saja seperti berikut :
alert("Ini Output dari Alert");
Fungsi alert(), hanya berfungsi pada browser saja. Sedangkan pada Nodejs fungsi ini tidak ada.


Berikut ini contoh coding penggunaan fungsi alert():

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript</title>
    <script>
        alert("Selamat datang di tutorial belajar Javascript FajarYusuf.Com");
        function sayHello(){
            alert("Semangat Belajar!");
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">Klik Ini Donk!</button>
</body>
</html>



Hasilnya:
Membuat Output Dengan Javascript


Cara Ketiga : Menggunakan Fungsi document.write()

Objek document merupakan objek yang mewakili sebuah dokumen HTML di dalam Javascript.

Didalam objek document, terdapat fungsi write() untuk menulis sesuatu ke dokumen HTML.

Contoh codingnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript di FajarYusuf.Com</title>
    <script>
        document.write("<h1>Saya Tampan</h1>");
        document.write("<hr>");
        document.write("<p>Dan Saya sedang belajar Javascript</p>");
        document.write("di <b>FajarYusuf.Com</b>")
    </script>
</head>
<body>
</body>
</html>



Hasilnya:
Membuat Output Dengan Javascript


Bukan hanya fungsi write(), objek document juga menyediakan berbagai macam fungsi untuk memanipulasi dokumen HTML.

Cara Keempat : Menggunakan innerHTML

innerHTML merupakan sebuah atribut di dalam (objek) elemen HTML yang berisi string HTML.

Dengan menggunakan innerHTML, kita dapat menampilkan output ke elemen yang lebih spesifik.

Contoh Codingnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript FajarYusuf.Com</title>
</head>
<body>
    <h1>Tutorial Javascript Lengkap</h1>
    <div id="hasil_output"></div>
    <script>
        //membuat objek elemen
        var hasil = document.getElementById("hasil_output");
        //menampilkan output ke elemen hasil
        hasil.innerHTML = "<p>Ini adalah Output dari InnerHTML</p>";
    </script>
</body>
</html>



Hasilnya:

Membuat Output Dengan Javascript

Tuesday, February 5, 2019

Mempelajari Penulisan Kode Javascript pada HTML

Mempelajari Penulisan Kode Javascript pada HTML

Javascript adalah bahasa pemrograman yang beroperasi pada browser yang harus di tulis di dalam kode HTML. Ada 4 cara penulisan code javascript pada HTML.

Cara Pertama : Tag <script>

Cara umum yang pertama adalah menuliskan code javascropt dalam tag <script>. Tag <script> bisa dibuat di dalam tag <head> yang ada pada html, mauapun di dalam tag <body> yang ada pada html. 

Contoh Codingnya, kalian bisa mencobanya dengan cara menuliskannya pada notepad, notepad++, sublimetext atau editor text yang lainnya dan save as sebagai file .html, atau bisa coba juga disini Editor HTML FajarYusuf.Com :


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Penulisan Javascript</title>
    
    <script>
    console.log("Ini adalah output untuk console");
    </script>
    
</head>
<body>
<script>
document.write("Ini Javascript yang muncul dibody!");
</script>
</body>
</html>


Hasilnya :

Mempelajari Penulisan Kode Javascript pada HTML



Cara Kedua : Melalui File Eksternal

Jika kalian tidak ingin kode Javascript tercampur dengan HTML, kalian bisa menuliskannya pada file yang terpisah. Caranya, buatlah sebuah file yang berekstensi .js untuk ekstensi file javascript, misalnya isinya seperti coding berikut :

// file-eksternal.js
alert("Ini adalah Output dari hasil Javascript file eksternal");


Setelah menyimpan kode diatas, kita perlu menghubungkan file eksternal tersebut dengan file HTMLnya. Caranya dengan menggunakan tag <script> dengan atribut src untuk menentukan lokasi file Javascriptnya (pada contoh berikut saya menentukan lokasi file javascript dan htmlnya pada satu folder) :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coding penulisan Javascript</title>
<script src="file-eksternal.js"></script>
</head>
<body>
</body>
</html>

Hasilnya :
Mempelajari Penulisan Kode Javascript pada HTML



Cara Ketiga : Menggunakan Atribut Event

Untuk cara berikutnya ini sering digunakan untuk memanggil fungsi pada event atau tindakan terentu. Misalnya ketika suatu elemen atau objek diklik, maka akan menjalankan proses dari coding Javascript, seperti contoh coding berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Penulisan Javascript</title>
    
    <script>
    console.log("Ini adalah output untuk console");
    </script>
    
</head>
<body>
<button onclick="alert('Ok Terima kasih!')">Klik donk!</button>
</body>
</html>

Hasilnya :

Mempelajari Penulisan Kode Javascript pada HTML


Tidak hanya event onclick pada javascript ada berbagai macam event-event yang lainnya, seperti onsubmit, onload, ondoubleclick, onmouseover, onmouseout, dan sebagainya.

Cara Keempat : Menggunakan URL

Untuk cara yang terakhir yaitu penulisan Javascript pada URL. Cara ini hampir jarang digunakan, tetapi kita juga perlu mengetahuinya untuk mengenal lebih javascript. Penulisan Javascript pada URL dengan cara menggunakan protokol Javascript. Misalnya, cobalah untuk menuliskan kode seperti ini pada URL browser.
javascript:alert("Ini Output Dari Javascript")
Hasilnya akan ada output Javascript yang dieksekusi oleh browser.

Lalu, bagaiaman kita menggunakan cara ini di HTML?

Cara ini bisa kita gunakan pada tag <a>, kemudian mengisi kode javascript pada atribut href. Cara ini bisa menggantikan fungsi javascript event onclick.

Contoh Codingnya :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Penulisan Javascript</title>
    
    <script>
    console.log("Ini adalah output untuk console");
    </script>
    
</head>
<body>
<a href="javascript:alert('Mantap betul !!!')">Klik Donk</a>
</body>
</html>


Hasilnya :
Mempelajari Penulisan Kode Javascript pada HTML



TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.

https://smallseotools.com/