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...