Rabu, 15 November 2017

Sintaks Javascript yang Harus Dikuasai oleh Pemula

Dalam dunia pemrograman web, javascript mungkin merupakan salah satu bahasa yuang tidak dapat dihindari. Jika HTML dan CSS mengurusi masalah tampilan dan tata letak, maka javascript mengurusi masalah interaksi dengan pengguna. Oleh karena web yang dibuat itu untuk digunakan oleh pengguna, makanya faktor interaksi sangat menentukan kesan baik buruknya suatu aplikasi web.

Tim belakode telah merangkum beberapa sintaks javascript yang harus dikusai oleh programmer, khususnya tingkatan pemula.

Alert dan Log

Bagi seorang programmer, menggunakan alert dan fungsi log akan sangat berguna pada saat melakukan proses development aplikasi. Berikut cara menggunakannya:

<script type="text/javascript">
 alert('Belakode oke!');
 console.log('oke banget Belakode');
</script>

Oiya, untuk fungsi log hasilnya bisa dilihat jika pada browser kita munculkan 'inspect element' dan pilih tab 'console'.

Penggunaan jQuery Dasar

jQuery sudah bertahun-tahun terakhir ini masih menjadi pustaka javascript yang paling populer. Popularitasnya ini didasari karena kemudahan penggunaannya. Seperti pada contoh berikut, ada beberapa hal yang dapat dengan mudah kita pelajari penggunaan jQuery.

Memanggil pustaka jQuery

<head>
 <title></title>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
</head>

Menyiapkan tempat untuk kode javascript dengan jQuery

<script type="text/javascript">
 $(document).ready(function(){
    // kode javascript jQuery di sini
 });
</script>

Atau bisa juga

<script type="text/javascript">
 $(function(){
    // kode jQuery di sini
 });
</script>

Beberapa fungsi umum dan selektor

Selektor adalah bagian dari kode HTML yang dapat kita gunakan untuk merujuk sebuah bagian dari halaman web. Selain elemen seperti paragraf (<p>), division (<div>), dan lain-lain, dalam HTML dikenal selekter yang terdiri atas kelas (class="namakelas") dan id (id="nama_id"). Pada javascript, kelas ditandai dengan tanda titik (.namakelas) sedangkan id ditandai dengan tanda pagar (#nama_id).

Berikut contoh-contoh menggunakannya.

$(this).hide() - menyembunyikan elemen yang sedang dimainkan oleh sintaks
$("p").show() - menampilkan semua elemen <p>.
$(".kode").hide() - menyembunyikan semua elemen dengan kelas kode (class="kode")
$("#kode").show() - menyembunyikan elemen dengan id kode (id="kode")

Men-trigger Suatu Aksi

var obyekTampil = $( "#banner-message" );
$( "#tombol_tampil" ).on( "click", function( event ) {
  obyekTampil.show();
});

Keterangan: jika kelas tombol (class="tombol") di-klik, maka elemen paragraf (<p>) dengan kelas efek_tombol (<p class="efek_tombol"></p>) akan disembunyikan dari pandangan pengguna.

Menggunakannya jQuery dengan Ajax

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function(result) {
    $( "#suhu" ).html( "<strong>" + result + "</strong> derajat" );
  }
});

Demikian beberapa contoh sintaks dasar yang semestinya sudah dikuasai oleh calon programmer web.