Pemrograman javascript

Pemrograman javascript adalah membuat instruksi instruksi yang dimengerti oleh mesin komputer sehingga kita bisa memberi tugas tugas tertentu.

Javascript adalah sebuah bahasa pemrograman berorientasi objek atau disingkat OOP (object orientation program)

Disebut objek karena sebuah  program besar javascript sebenarnya terdiri dari kumpulan program program kecil yang sudah dan bisa diberi tugas lalu  melaporkan (callback) hasilnya jika sudah selesai (Asynchronous)

Pada awalnya javascript hanya dipakai di browser tapi kini sudah merambah ke bahasa pemrograman untuk server seperti node js, embedded sistem, raspberry  pi dan IOT. Javascript beken dengan inisial js termasuk ekstensi menggunakan *.js

Dalam arikel ini penulis akan mengurai dasar pemrograman javascript basic. Basic maksudanya kita akan belajar syntax yang dipakai javascript. Syntax berarti aturan aturan dasar bahasa atau text  yang sudah dimengerti oleh mesin komputer untuk kemudian dieksekusi.

Javascript adalah bahasa tingkat tinggi, artinya bahasa yang dipakai hampir bisa dimengerti oleh kita manusia. Semangkin kita gak faham bahasanya maka akan mendekati  bahasa  mesin seperti  biner 10011100  yang sulit dimengerti ( bahasa tingkat rendah).

Contoh syntax javascript:

var x, y;          // Deklarasi variabel x dan y
x = 5; y = 1;      // Mengisi variabel x=5 dan y=1
z = x + y;     // Proses aritmatika dan menyimpan nilai di y
console.log("Hasil x + y adalah " + z);  // hasilnya 6


Dalam syntax pemrograman komputer apapun bahasanya baik C++, Javascript, Visual basic memiliki konsep yang sama namun mungkin ada perbedaan di nama instruksi, keyword atau tanda bacanya. Berikut ini beberapa contoh keyword dari javascript untuk membentuk bahasa pemrograman javascript.


Variabel
Variabel adalah wadah atau tempat untuk menaruh nilai atau value sementara. Tanpa variabel kita bisa tetap melakukan eksekusi program hanya saja flexibiltasnya tidak ada berikut contoh percobaan untuk melihat salah satu manfaat variabel

• Untuk melakukan percobaan ini dianggap sobat sudah memiliki browser Firefox yang sudah terinstall. Buka browser firefox :

 

• Kemudian dari keyboard tekan CTRL + SHIFT + K secara bersamaan, akan tampil Development tools milik firefox yang akan kita pakai sebagai  mesin untuk menjalankan javascript.

 

Ketik syntax baris demi baris (enter setiap di akhir baris)

var i = 0

do 
{ 
i++ 
console.log("Hallo ke "+ i) 
} 
while(i<10);


Hasilnya setelah enter terakhir seperti berikut:

 

Hasil cetak teks halo ke 1 s/d hallo ke 10 menggunakan counter yang disimpan di variabel "i" dan nilai dari counter "i" juga bisa ditampilkan. Dengan variabel kita dengan cepat dan mudah mencetak teks hanya dengan "hallo ke" + i

Cara kerjanya

Karena javascript bahasa manusia maka cara kerja script penghitung hallo sebenarnya masih cukup mudah dimengerti.

var i = 0

Var  adalah variabel, saat kita menuliskan var berarti kita telah mendeklarasikan sebuah wadah, dan "i" adalah nama wadahnya. Saat variabel i dibentuk maka isi dari wadah adalah "undefined". Oleh karenanya di setiap script variabel mesti diberi isi atau nilai. Dalam hal ini kita mengisinya dengan 0.

do

Do adalah keyword untuk melakukan sesuatu, apa yang harus dilakukan di arahkan ke isi didalam bracket {}. Do umumnya dipakai untuk looping proses.

{ i++ 

Ini adalah keyword untuk melakukan proses increment atau penambahan 1+1 ke dalam variabel i.

console.log("Hallo ke "+ i) 

Keyword ini umum dipakai sebagai penampil atau output dari isi variabel atau status. Ingat ya nama variabel tidak pernah diapit dengan tandai kutip " " seperti i akan tetap i tapi untuk hallo karena sebuah nilai bertipe string maka wajib di berikan kutip. Jika nilai dan nama variabel akan disandingkan maka wajib memakai keyword +. Seperti "hallo " + 1

while(i<10);

Keyword ini artinya selagi, dan berguna sebagai pemeriksa nilai dari variabel i. Tampak i di sanding dengan operator < artinya jika kurang dari nilai 10 maka proses loop di dalam bracket {} akan terus terjadi.

Tampak ada karakter semicolon ; biasa dipakai sebagai penutup di akhir sebuah proses.

Kita sudah coba menggunakan variabel. Variabel adalah wadah sementara yang bisa diisi dengan bebagai macam tipe data. Pada contoh sebelumnya kita membuat variabel "i" yang diisi dengan tipe data "number". selain itu masih ada tipe data lain yang bisa disimpan dalam variabel seperti number, string, boolean atau object.

Penulis membuat double slash "//" warna hijau ini adalah perintah untuk menyisipkan komentar yang tidak akan di eksekusi. Berikut ini contoh tipe tipe variabel sobat bisa menggunakan development tools firefox

var Umur = 3;                                                                         //Untuk tipe Number               

var Nama = "Anisa";                                                              // String
var Menikah = false;                                                              //Boolean

var Biodata = {Nama:"Anisa", Umur:3, Menikah:false};    // Object 

Tampak variabel objek Biodata berisi berbagai macam tipe data nama, umur dan menikah  properti umur, nama dan status pernikahan, jadi variabel tipe objek memudahkan kita menyimpan banyak value dengan beragam tipe data.

Cara melihat isi variabel hanya dengan mengetik nama variabelnya. Untuk tipe objek nama variabel beserta properti nya dipisah tanda titik, Hasilnya sbb.

Operator dan keyword
Operator dan arimatic adalah pembetuk dari instruksi instruksi bahasa javascript. Sebelumnya kita sudah melakukan percobaan syntax javascript

Berikut Keyword javascript:

• var
• Adalah variabel sebagai wadah penyimpanan data sementara. Contoh Variabel data misal:  var Nama =  "Budi"
• if
• Pernyataan pilihan misal : if  (2 < 3 ) { console.log("Benar")};
• else
•  Sangkalan misal : if  (2>3) { console.log("Benar") else console.log("Salah")}

Berikut Variabel javascript:

• Global variabel
• Local variabel

Berikut Tipe data javascript:

• Number 
• Angka, misal 2015
• String
• Huruf,  misal "Ibrahim"
• Boolean
• Hanya memiliki dua pilihan misal True atau False, lelaki atau perempuan
• Object
• Data berisi properti misal {Nama:" Anisa", Umur:3}
• Function
• Object
• Sama dengan tipe object hanya saja dipanggil dalam bentuk fungsi
• Date
• 25 Maret 2018
• Array
• Data berbentuk array dan bisa dipanggil dalam bentuk fungsi misal "budi memili hobi olahraga yang lebih dari dua maka fungsi ditulis dalam bentuk array ["Berenang","Memancing","Arum jeram"]

Berikut Operator javascript:

•  Operator aritmatika terdiri dari + - / x % -- ++
• Operator logika or, and, not, xor && || !
• Operator assignment = +- %=
• Operator komparasi == === != >< ?

Function javascript Javascript function adalah blok kode yang dibuat untuk melakukan instruksi khusus, function di javascript sangat penting sebagian besar isi dari pemrograman javascript berisi fungsi fungsi Berikut ini adalah contoh fungsi yang mengubah suhu satuan fahrenheit menjadi derajat celcius function toCelsius(fahrenheit) {     return (5/9) * (fahrenheit-32); } untuk melihat hasilnya cukup memanggil nama fungsinya dan mengisi nilai parameternya contoh  toCelcius(77):   Demikian uraian singkat pemrograman javascript semoga membantu salam.. :) Ref  https://www.w3schools.com

Mengenal DOM HTML

DOM adalah sebuah aplikasi interface yang membantu merubah dan memodifikasi halaman website statis menjadi dinamis.

Dari w3school DOM adalah:

Document Object Model (DOM) adalah platform dan antarmuka yang memungkinkan program dan skrip untuk mengakses dan memperbarui konten, struktur, dan gaya dokumen secara dinamis

Sebuah website berisi sebuah halaman HTML yang merupakan kerangka dasar pembentuk sebuah web. HTML ini terdiri dari elemen elemen yang akan diubah menjadi sebuah objek yang berisi properti. Dari properti ini kita bisa mengubah, manambah, memodifikasi sebuah value pada sebuah halaman website menjadi lebih dinamis menggunakan javascript.

 

Berikut ini adalah contoh sederhana mengenal DOM. Contoh ini pure kerangka HTML tanpa DOM. Dan setelah di buka di browser hanya menampilkan teks My First Page.

Berikut ini adalah kerangka HTML script dengan DOM

Kerangka HTML dengan dan tanpa DOM terlihat perbedaanya dari teks Hello world. Di Pure HTML tidak tampak adanya teks Hello world karena tidak adanya script untuk merubah element DOM dan tidak adanya elemen DOM yang dikenali untuk dirubah. Namun di HTML dengan DOM tampak  <p id="demo"></p> adalah sebuah element yang dikenal (id) dan bisa di rubah dengan metode document.getElementById.

Berikut ini yang bisa dilakukan dengan DOM:

• Seperti mengganti HTML elements dihalaman web
• mengganti semua HTML attributes dihalaman web
• mengganti semua CSS styles dihalaman web
• dapat membuang existing HTML element dan atribut
• dapat menambah HTML elements baru dan atribut baru
• dapat react to all existing HTML events dihalaman web
• dapat membuat HTML events baruv dihalaman web

Demikian artikel singkat mengenal DOM semoga bermanfaat.


ref :https://www.w3schools.com

Javascript client side

Javascript adalah bahasa pemrograman yang lawas sudah ada sejak puluhan tahun yang lalu. Javascript biasa dipakai browser untuk navigasi dokumen web yang disebut bahasa pemrograman client side, walaupun javasript juga bisa bekerja di server side yang dipakai platform node js sebagai server.

Untuk memulai pemrograman javascript sisi client kita hanya perlu teks editor seperti notepad atau kalau mau power full menggunakan text editor visual studio code. satu lagi kita butuh browser seperti mozila atau chrome sebagai javascript engine.


Kita akan mencoba event klik di web yang akan menampilkan pesan hello world.

• Copy script js dibawah ini

<script type="text/javascript">
  function onclick_callback () {
     alert ("Hello, World!");
  }
</script>
<span onclick="onclick_callback();">Click Here</span>

• Buka notepad, paste script js di notepad

•  Simpan nama file sebagai klik.html save as sebagai all files. lalu klik save.

 

• Buka file klik yang telah kita buat barusan, lalu klik text "click here". tampil popup dengan isi "hello world!". jika berhasil kita baru saja membuat program javascript.

 

berikut ini adalah event tombol keyboard, kita bisa menekan apa saja tombol di keyboar yang akan direspon oleh javascript.

• Copy paste script dibawah ini  di notepad seperti contoh sebelumnya.

<script type="text/javascript">
  function onkeypress_callback(evt) {
      var eType = evt.type; // Will return "keypress" as the event type
      var eCode = 'keyCode is ' + evt.keyCode;
      var eChar = 'charCode is ' + evt.charCode;

      alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
   }
</script>
<input onkeypress="onkeypress_callback(event);"></input>

• Simpan nama file sebagai keyboard.html, save as sebagai all files. lalu klik save.
• Kemudian buka file keyboard yang telah dibuat, tekan tombol huruf apa saja, saya menekan huruf "a" tampil popup dengan isi charcode 97 sebagai huruf "a" yang ditekan

Demikian artikel javascript di sisi client semoga bermanfaat... salam .. :)


ref : https://developer.mozilla.org

Apa itu JSON?

JSON adalah format pertukaran data yang ringan, berbasis teks, bahasa-independen yang mudah bagi manusia dan mesin untuk membaca dan menulis. 

JSON (JavaScript Object Notation) dapat mewakili dua tipe terstruktur: 

1. Objek dengan karakter { }

2. Array dengan karakter [ ]

Suatu objek adalah kumpulan tak berurutan dari nol atau lebih banyak pasangan nama / nilai. Array adalah urutan urutan nol atau lebih banyak nilai. Nilai dapat berupa string, angka, boolean, null, dan kedua tipe terstruktur ini.

Contoh format dan data json:

 {
     "nama_depan": "Zainal",
     "nama_akhir": "Abidin",
     "usia": 35,
     "alamat": {
         "jalan": "Heliconia",
         "kota": "Bekasi",
         "negara": "Indonesia",
         "kode_pos": 17415
     },
     "nomor_telepon": [
         {
             "type": "rumah",
             "nomer": "021 555-1234"
         },
         {
             "type": "kantor",
             "nomer": "345 595-4267"
         }
     ]
 }

 Dari format data diatas kita bisa lihat kalau format json selalu diawali dengan karakter kurung kurawal buka dan diakhri dengan kurung kurawal tutup atau disebut juga json objek.

Seperti dijelaskan di atas ada dua tipe karakter yaitu open bracket [ dan closing bracket ] ini biasa dipakai untuk data array / larik, beda kurung kurawal {} dengan bracket [] bisa dilihat pada contoh dibawah ini.

Misal untuk kurung kurawal selalu memiliki format seperti ini:

{"nama": "budi"}

atau

 {"negara": "indonesia"}

Selalu memiliki pasangan nilai, jika budi dan negara ingin digabung dalam satu data maka dipisah dengan tanda koma " , "

menjadi:

{"nama": "budi","negara": "indonesia"}

Lalu untuk kurung bracket selalu memiliki format seperti ini:

["nama","kelamin","golongan_darah"]

atau

["budi","dewi","toni"]

atau

["laki_laki","perempuan"]

untuk contoh kurung bracket atau array tidak memiliki pasangan nilai, karena isinya adalah nilai itu sendiri.

Notasi json diciptakan untuk memudahkan pertukaran data, karena json mampu menampung data dan jika kita ingin mengkonsumsi data itu dengan mudah kita panggil  karena setiap isi dari data json akan memiliki alamatnya masing masing saat di implementasikan dalam sebuah bahasa pemrograman seperti contoh berikut di javascript kita menggunakan repl node js

Jika belum punya aplikasi node js untuk percobaan ini dapat install dilink berikut ini:
1. Install node js
2. Buka repl 

Jika sudah install mari ikuti langkah berikut ini:

1.ketik node kemudian enter

ketik var orang= {"nama" :"budi");

Kemudian enter dan otomatis di repl dengan undifined

2. Ketik orang.nama

Maka di reply dengan budi

Kita sudah berhasil menggunakan format json dengan di reply "budi" sekarang kita tambah lagi kelamin menjadi seperti berikut:




lalu kita gabung:



sekian dulu ...semoga bermanfaat ya...

Menggunakan modul fs node js

Modul fs adalah modul kusus yang digunakan untuk menangani file sistem seperti membaca file, menulis isi file, membuat file direktori atau folder, mengetahui kapasitas dan menghapus file sistem tersebut.

Untuk menggunakan modul file system ( fs) dalam tutorial kali ini sobat wajib melakukan instalasi node js. Jika sudah ada aplikasi node js bisa lanjut ke step berikut dengan melakukan import modul fs

var fs = require("fs")

Berikut yang perlu disiapkan sebelum menggunakan modul fs: 

1.      Buat sebuah folder “modul fs asinkron”

2. Buat file di notepad dengan nama main-write-read , main-read, main-delete dan main.js (jangan lupa ekstensi “js”)

2. Buka command prompt node.js, pastikan sobat berada di “modul fs asinkron”

Caranya tambahkan perintah cd lalu lokasi folder “modul fs asinkron”

Membuat dan Menulis sebuah file

fs.writeFile(filename, data[, options], callback)

Metode ini akan membuat sebuah file "input.txt" dan menulis isinya.

Berikut deskripsi dari parameter yang tersedia

• filename – parameter untuk nama file dan path
• data – parameter string untuk buffer data
• options −parameter ini adalah sebuah object, untuk{encoding, mode dan flag}. Secara default masing-masing encoding di setting utf8, mode adalah octal dengan nilai 0666. and flag disetting 'w'
• callback – ini adalah fungsi yang akan memberikan output berhasil atau gagal/error

Contoh aplikasinya
Buka file main-write-read (klik kanan edit)

Isi dengan script berikut:

var fs = require("fs");

console.log("Mulai menulis di file input");

fs.writeFile('input.txt', 'latihan read write file sistem!',  function(err) {

   if (err) {

      return console.error(err);

   }

  

   console.log("Berhasil membuat dan menulis di file input");

   console.log("Berikut hasil menulis di file input");

   fs.readFile('input.txt', function (err, data) {

      if (err) {

         return console.error(err);

      }

      console.log("Metode asinkron : " + data.toString());

   });

});

Kemudian jalankan file main.js

$ node main-write-read

Hasilnya seperti berikut dan difolder "modul fs asinkron" juga terdapat file input.txt:

Membaca sebuah File

Script diatas akan membaca sebuah file dengan mengisi beberapa 

   fs.readFile('input.txt', function (err, data)

Berikut deskripsi dari parameter yang tersedia

• callback – ini adalah fungsi yang akan memberikan output, berhasil atau gagal/error 
• input.txt - nama file yang akan dibaca

Contoh aplikasinya
Sama dengan cara membuat file dan membaca file pada ulasan sebelumnya, ini juga dipakai untuk ulasan selanjutnya. Buka file main.js yang sudah dibuat dan isi dengan script berikut :

var fs = require("fs");

console.log("Baca file");

   fs.readFile('input.txt', function (err, data) {

      if (err) {

         return console.error(err);

      }

      console.log("Metode Asinron :" + data.toString());

  

});

Kemudian jalankan file main.js

$ node main-read

Hasilnya sbb:

Sinkron vs Asinkron

Modul fs memiliki dua metode dalam mengeksekusi file system bisa dengan metode sinkron atau metode asinkron. Pada metode asinkron modul fs memiliki dua parameter yaitu gagal atau berhasil. Dalam ulasan disini kita akan banyak menggunakan metode asinkron.

Melihat perbedaan Sinkron dan Asinkron

Buka file main.jsyang sudah dibuat dan isi dengan script berikut:

var fs = require("fs");

// Asinkron

fs.readFile('input.txt', function (err, data) {

   if (err) {

      return console.error(err);

   }

   console.log("Metode Asinkron : " + data.toString());

});

// Sinkron

var data = fs.readFileSync('input.txt');

console.log("Metode sinkron: " + data.toString());

console.log("Selesai");

Jalankan file main.js sbb:

$ node main.js

Hasilnya sbb:

Delete sebua File

Script berikut kita gunakan untuk menghapus file

fs.unlink(path, callback)

Berikut deskripsi dari parameter yang tersedia

• path − This is the file name including path.
• callback − ini adalah fungsi callback untuk status error

Contoh aplikasiBuka file main-delete.js dan isi script sbb:

var fs = require("fs");

console.log("Segera mendelete file");

fs.unlink('input.txt', function(err) {

   if (err) {

      return console.error(err);

   }

   console.log("File berhasil di delet!");

});

Jalankan file main.js sbb:

$ node main.js

Hasilnya:





 
Sekian artikel mengenai file sistem, semoga membantu mengenal modul yang banyak sekali digunakan ini.